<script setup>
import { date } from 'alga-js'
import { SelectBox } from 'tedir-select'
import { DatePicker } from 'tedir-calendar'

const { t } = useTranslation()

const props = defineProps({
  modelValue: Object,
  tab: String
})

const emit = defineEmits(['update:modelValue', 'update:tab', 'save'])

const organizations = useCookie('logship_organizations')
const organization = useCookie('logship_organization')
const organizationId = useCookie('logship_organization_id')
const user = useCookie('logship_user')
const userId = useCookie('logship_user_id')

const clientName = ref('')
onMounted(() => {
  const getClient = localStorage.getItem('logship_clients')
  if(getClient) {
    const clientObj = JSON.parse(getClient)
    clientName.value = clientObj[0].name
  }
})

const form = ref({
  id: props.modelValue.id || '',
  uid: props.modelValue?.uid || '',
  client: props.modelValue.client || '',
  clientId: props.modelValue.clientId || '',
  organization: props.modelValue.organization || organization.value?.Name || '',
  organizationId: props.modelValue.organizationId || organizationId.value || '',
  name: props.modelValue.name || '',
  name2: props.modelValue.name2 || '',
  value: props.modelValue.value || '',
  description: props.modelValue.description || '',
  salesVolume: props.modelValue.salesVolume || 0,
  numberEmployees: props.modelValue.numberEmployees || 0,
  isActive: props.modelValue.isActive ?? true,
  isSummary: props.modelValue.isSummary ?? false,
  isVendor: props.modelValue.isVendor ?? false,
  isCustomer: props.modelValue.isCustomer ?? false,
  isProspect: props.modelValue.isProspect ?? false,
  soCreditLimit: props.modelValue.soCreditLimit || 0,
  soCreditUsed: props.modelValue.soCreditUsed || 0,
  acqusitionCost: props.modelValue.acqusitionCost || 0,
  potentialLifeTimeValue: props.modelValue.potentialLifeTimeValue || 0,
  actualLifeTimeValue: props.modelValue.actualLifeTimeValue || 0,
  shareOfCustomer: props.modelValue.shareOfCustomer || 0,
  isEmployee: props.modelValue.isEmployee ?? false,
  isSalesRep: props.modelValue.isSalesRep ?? false,
  isOneTime: props.modelValue.isOneTime ?? false,
  isTaxExempt: props.modelValue.isTaxExempt ?? false,
  isDiscountPrinted: props.modelValue.isDiscountPrinted ?? false,
  sendEMail: props.modelValue.sendEMail ?? false,
  EMail: props.modelValue.EMail || '',
  eMailInvoice: props.modelValue.eMailInvoice || '',
  totalOpenBalance: props.modelValue.totalOpenBalance || 0,
  isPOTaxExempt: props.modelValue.isPOTaxExempt ?? false,
  isManufacturer: props.modelValue.isManufacturer ?? false,
  is1099Vendor: props.modelValue.is1099Vendor ?? false,
  firstSale: props.modelValue.firstSale || date.now('date'),
  poReference: props.modelValue.poReference || '',
  referenceNo: props.modelValue.referenceNo || '',
  rating: props.modelValue.rating || '',
  taxID: props.modelValue.taxID || '',
  hrgNumber: props.modelValue.hrgNumber || '',
  URL: props.modelValue.URL || '',
  NAICS: props.modelValue.NAICS || '',
  DUNS: props.modelValue.DUNS || '',
  documentCopies: props.modelValue.documentCopies || 0,
  soDescription: props.modelValue.soDescription || '',
  flatDiscount: props.modelValue.flatDiscount || 0,
  shelfLifeMinPct: props.modelValue.shelfLifeMinPct || 0,
  dunningGrace: props.modelValue.dunningGrace || date.now('date'),
  contractedSigned: props.modelValue.contractedSigned || '',
  isFulfillmentCustomer: props.modelValue.isFulfillmentCustomer ?? false,
  isZugPferdInvoice: props.modelValue.isZugPferdInvoice ?? false,
  isAccountLogShip: props.modelValue.isAccountLogShip ?? false,
  isAccountingWarehouseVolume: props.modelValue.isAccountingWarehouseVolume ?? false,
  logshipmonthlyfee: props.modelValue.logshipmonthlyfee || 0,
  volumeqm3price: props.modelValue.volumeqm3price || 0,
  accoutingwarehouserentstarts: props.modelValue.accoutingwarehouserentstarts || '',
  fulfillmentOrderBaseprice: props.modelValue.fulfillmentOrderBaseprice ?? 0,
  fulfillmentOrderPickprice: props.modelValue.fulfillmentOrderPickprice ?? 0,
  fulfillmentOrderQtyPickfree: props.modelValue.fulfillmentOrderQtyPickfree ?? 0,
  fulfillmentOrderBaseprice2: props.modelValue.fulfillmentOrderBaseprice2 ?? 0,
  fulfillmentOrderBaseprice3: props.modelValue.fulfillmentOrderBaseprice3 ?? 0,
  fulfillmentOrderReturnBaseprice: props.modelValue.fulfillmentOrderReturnBaseprice ?? 0,
  fulfillmentOrderReturnPickprice: props.modelValue.fulfillmentOrderReturnPickprice ?? 0,
  freightCostRule: props.modelValue.freightCostRule || '',
  freightCostRuleId: props.modelValue.freightCostRuleId || '',
  customerProfileId: props.modelValue.customerProfileId || '',
  isAccountingKleinpaket: props.modelValue.isAccountingKleinpaket ?? false,
  shelfRentSmallPrice: props.modelValue.shelfRentSmallPrice || 0,
  shelfRentLargePrice: props.modelValue.shelfRentLargePrice || 0,
  shelfRentLargeQty: props.modelValue.shelfRentLargeQty || 0,
  shelfRentSmallQty: props.modelValue.shelfRentSmallQty || 0,
  rentPallettSpaceQty: props.modelValue.rentPallettSpaceQty || 0,
  rentPallettSpacePrice: props.modelValue.rentPallettSpacePrice || 0,
  isUseQm2FromBp: props.modelValue.isUseQm2FromBp ?? false,
  useForeignDHLAccount: props.modelValue.useForeignDHLAccount ?? false,
  isAllowFeeReportDownload: props.modelValue.isAllowFeeReportDownload ?? false,
  mProductPaket1KpPrice: props.modelValue.mProductPaket1KpPrice || 0,
  mProductPaket2SPrice: props.modelValue.mProductPaket2SPrice || 0,
  mProductPaket3MPrice: props.modelValue.mProductPaket3MPrice || 0,
  mProductPaket4LPrice: props.modelValue.mProductPaket4LPrice || 0,
  mProductPaket5XlPrice: props.modelValue.mProductPaket5XlPrice || 0,
  showFulfillmentInvoiceDetails: props.modelValue.showFulfillmentInvoiceDetails ?? false,
  isEditProductImage: props.modelValue.isEditProductImage ?? false,
  isHideQty: props.modelValue.isHideQty ?? false,
  isDisallowExport: props.modelValue.isDisallowExport ?? false,
  isTerminationNotice: props.modelValue.isTerminationNotice ?? false,
  isTerminated: props.modelValue.isTerminated ?? false,
  isPriceLimitKleinpaketDisabled: props.modelValue.isPriceLimitKleinpaketDisabled ?? false,
  returnEmail: props.modelValue.returnEmail || '',
  kleinPaketPriceLimit: props.modelValue.kleinPaketPriceLimit ?? 0,
  kpExtraWeight: props.modelValue.kpExtraWeight ?? 0,
  marketplaceUsername: props.modelValue.marketplaceUsername || '',
  lexwareContactUuid: props.modelValue.lexwareContactUuid || '',
  fulfillmentServiceHourlyRate: props.modelValue.fulfillmentServiceHourlyRate ?? 0,
  partnerInvoiceReminderNotes: props.modelValue.partnerInvoiceReminderNotes || '',
  freightServiceSenderMail: props.modelValue.freightServiceSenderMail || '',
  bpartnerParent: props.modelValue.bpartnerParent || '',
  bpartnerParentId: props.modelValue.bpartnerParentId || '',
  taxGroup: props.modelValue.taxGroup || '',
  taxGroupId: props.modelValue.taxGroupId || '',
  logo: props.modelValue.logo || '',
  logoId: props.modelValue.logoId || '',
  default1099Box: props.modelValue.default1099Box || '',
  default1099BoxId: props.modelValue.default1099BoxId || '',
  shipperOrderDefault: props.modelValue.shipperOrderDefault || '',
  shipperOrderDefaultId: props.modelValue.shipperOrderDefaultId || '',
  orderSourceCustomOrder: props.modelValue.orderSourceCustomOrder || '',
  orderSourceCustomOrderId: props.modelValue.orderSourceCustomOrderId || '',
  accountingAdOrg: props.modelValue.accountingAdOrg || '',
  accountingAdOrgId: props.modelValue.accountingAdOrgId || '',
  deliveryRule: props.modelValue.deliveryRule || '',
  deliveryRuleId: props.modelValue.deliveryRuleId || '',
  deliveryViaRule: props.modelValue.deliveryViaRule || '',
  deliveryViaRuleId: props.modelValue.deliveryViaRuleId || '',
  invoiceSchedule: props.modelValue.invoiceSchedule || '',
  invoiceScheduleId: props.modelValue.invoiceScheduleId || '',
  greeting: props.modelValue.greeting || '',
  greetingId: props.modelValue.greetingId || '',
  printFormat: props.modelValue.printFormat || '',
  printFormatId: props.modelValue.printFormatId || '',
  salesRep: props.modelValue.salesRep || user.value?.Name || '',
  salesRepId: props.modelValue.salesRepId || user.value?.id || userId.value || '',
  paymentRulePO: props.modelValue.paymentRulePO || '',
  paymentRulePOId: props.modelValue.paymentRulePOId || '',
  soCreditStatus: props.modelValue.soCreditStatus || '',
  soCreditStatusId: props.modelValue.soCreditStatusId || '',
  partnerGroup: props.modelValue.partnerGroup || '',
  partnerGroupId: props.modelValue.partnerGroupId || '',
  poPriceList: props.modelValue.poPriceList || '',
  poPriceListId: props.modelValue.poPriceListId || '',
  poPaymentTerm: props.modelValue.poPaymentTerm || '',
  poPaymentTermId: props.modelValue.poPaymentTermId || '',
  languageId: props.modelValue.languageId || '',
  processing: props.modelValue.processing ?? false,
  alert: {
    status: props.modelValue.alert.status || '',
    message: props.modelValue.alert.message || '',
    processing: props.modelValue.alert.processing ?? false
  }
})

const loading = ref({})
const getOptions = ref({})
const setOptions = async (url, key) => {
  loading.value[key] = true
  const res = await $fetch('/api/'+url, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res) {
    /*if(key === 'locations' && res?.records?.[0]) {
      form.value.partnerLocationId = String(res.records[0].id || '')
      form.value.partnerLocation = res.records[0].Name || ''
    }*/
    
    getOptions.value[key] = res
  }
  loading.value[key] = false
}

watch(() => props.modelValue, (newValue) => {
  // Only update form if the value has actually changed from the parent
  // This prevents overwriting user changes that are in the process of being saved
  if (newValue && newValue !== form.value) {
    form.value = { ...newValue }
  }
}, { deep: false })

// Watch for contractedSigned changes
watch(() => form.value.contractedSigned, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    console.log('contractedSigned changed from', oldValue, 'to', newValue)
    save()
  }
})

const debounce = (func, timeout = 300) => {
  let timer;
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => { func.apply(this, args); }, timeout)
  }
}

const save = debounce(() => { //saveType = ''
  //form.value.alert.processing = true
  emit('update:modelValue', form.value)
  emit('save', form.value)
  /*if(props.modelValue.id) {
    emit('save', form.value, props.modelValue.id, saveType)
  } else {
    emit('save', form.value, '', saveType)
  }*/
})

// ===== Fulfillment Tab Helpers =====

// Warehouse rent mode (mutually exclusive: 'volume' | 'flat' | 'none')
const warehouseRentMode = computed({
  get() {
    if (form.value.isAccountingWarehouseVolume) return 'volume'
    if (form.value.isUseQm2FromBp) return 'flat'
    return 'none'
  },
  set(val) {
    if (val === 'volume') {
      form.value.isAccountingWarehouseVolume = true
      form.value.isUseQm2FromBp = false
    } else if (val === 'flat') {
      form.value.isAccountingWarehouseVolume = false
      form.value.isUseQm2FromBp = true
    } else {
      form.value.isAccountingWarehouseVolume = false
      form.value.isUseQm2FromBp = false
    }
    save()
  }
})

// Monthly flat-rate total preview
const flatRateMonthlyTotal = computed(() => {
  const lq = Number(form.value.shelfRentLargeQty) || 0
  const lp = Number(form.value.shelfRentLargePrice) || 0
  const sq = Number(form.value.shelfRentSmallQty) || 0
  const sp = Number(form.value.shelfRentSmallPrice) || 0
  const pq = Number(form.value.rentPallettSpaceQty) || 0
  const pp = Number(form.value.rentPallettSpacePrice) || 0
  return (lq * lp) + (sq * sp) + (pq * pp)
})

// When DHL foreign account enabled, kleinpaket flag becomes irrelevant
watch(() => form.value.useForeignDHLAccount, (val) => {
  if (val) {
    if (form.value.isAccountingKleinpaket) form.value.isAccountingKleinpaket = false
    if (form.value.isPriceLimitKleinpaketDisabled) form.value.isPriceLimitKleinpaketDisabled = false
  }
})

// Date-picker modals (opened overlay above sections below — avoids clipping)
const contractedSignedOpen = ref(false)
const warehouseRentStartsOpen = ref(false)
// SelectBox modal pickers — opened overlay so dropdown isn't clipped by next section
const salesRepModalOpen = ref(false)

// ===== Shipping cost section: linked organization lookup + overrides modal =====
const partnerLinkedOrg = ref(null) // { id, name, value, isActive } | null
const partnerLinkedOrgLoading = ref(false)
const fetchPartnerLinkedOrg = async () => {
  if(!form.value.id) return
  partnerLinkedOrgLoading.value = true
  try {
    const res = await $fetch('/api/partners/partners/'+form.value.id+'/organization', {
      headers: useRequestHeaders(['cookie'])
    })
    partnerLinkedOrg.value = res || null
  } catch(e) {
    partnerLinkedOrg.value = null
  } finally {
    partnerLinkedOrgLoading.value = false
  }
}
onMounted(() => { fetchPartnerLinkedOrg() })
watch(() => form.value.id, () => { fetchPartnerLinkedOrg() })

const shippingCreateOverrideQuery = computed(() => {
  if(!partnerLinkedOrg.value?.id) return {}
  return {
    adOrgId: partnerLinkedOrg.value.id,
    adOrg: partnerLinkedOrg.value.name || '',
    bpartnerId: form.value.id || '',
    bpartner: form.value.name || ''
  }
})

// Existing-overrides modal
const overridesModalOpen = ref(false)
const overridesModalLoading = ref(false)
const overridesModalRecords = ref([])
const openOverridesModal = async () => {
  overridesModalOpen.value = true
  if(!partnerLinkedOrg.value?.id) {
    overridesModalRecords.value = []
    return
  }
  overridesModalLoading.value = true
  try {
    const filter = encodeURIComponent('AD_Org_ID eq '+partnerLinkedOrg.value.id)
    const res = await $fetch('/api/filters/cust_shippingcost_bpoverride/'+filter, {
      headers: useRequestHeaders(['cookie'])
    })
    overridesModalRecords.value = Array.isArray(res?.records) ? res.records : []
  } catch(e) {
    overridesModalRecords.value = []
  } finally {
    overridesModalLoading.value = false
  }
}
// Default to today if empty
if (!form.value.contractedSigned) {
  form.value.contractedSigned = date.now('date')
}
const formatDate = (d) => {
  if (!d) return ''
  try {
    const dt = new Date(d)
    if (isNaN(dt.getTime())) return d
    return dt.toLocaleDateString()
  } catch (e) { return d }
}

// ===== Live Calculator State =====
const calc = ref({
  outboundLines: 3,
  outboundQtyPerLine: 5,
  returnLines: 2,
  returnQtyPerLine: 5,
  volumeM3: 12,
  parcelKp: 10, parcelS: 5, parcelM: 3, parcelL: 2, parcelXl: 1,
  serviceHours: 1.5
})

// Calculator open/closed (default closed — open on click)
const calcOpen = ref({
  outbound: false,
  return: false,
  volume: false,
  packaging: false,
  service: false
})
const toggleCalc = (key) => { calcOpen.value[key] = !calcOpen.value[key] }

// Hourly service calculator
const calcService = computed(() => {
  const hours = Math.max(0, Number(calc.value.serviceHours) || 0)
  const rate = Number(form.value.fulfillmentServiceHourlyRate) || 0
  return { hours, rate, total: hours * rate }
})

// Outbound calculator
const calcOutbound = computed(() => {
  const lines = Math.max(0, Number(calc.value.outboundLines) || 0)
  const qty = Math.max(0, Number(calc.value.outboundQtyPerLine) || 0)
  const base = Number(form.value.fulfillmentOrderBaseprice) || 0
  const pick = Number(form.value.fulfillmentOrderPickprice) || 0
  const free = Number(form.value.fulfillmentOrderQtyPickfree) || 0
  const totalQty = lines * qty
  const billableQty = Math.max(0, totalQty - free)
  const baseFee = lines > 0 ? base : 0
  const pickFee = billableQty * pick
  const total = baseFee + pickFee
  return { lines, qty, totalQty, free, billableQty, baseFee, pickFee, total, base, pick }
})

// Return calculator
const calcReturn = computed(() => {
  const lines = Math.max(0, Number(calc.value.returnLines) || 0)
  const qty = Math.max(0, Number(calc.value.returnQtyPerLine) || 0)
  const base = Number(form.value.fulfillmentOrderReturnBaseprice) || 0
  const pick = Number(form.value.fulfillmentOrderReturnPickprice) || 0
  const totalQty = lines * qty
  const baseFee = lines > 0 ? base : 0
  const pickFee = totalQty * pick
  const total = baseFee + pickFee
  return { lines, qty, totalQty, baseFee, pickFee, total, base, pick }
})

// Volume rent calculator
const calcVolume = computed(() => {
  const m3 = Math.max(0, Number(calc.value.volumeM3) || 0)
  const price = Number(form.value.volumeqm3price) || 0
  return { m3, price, total: m3 * price }
})

// Packaging calculator
const calcPackaging = computed(() => {
  const items = [
    { key: 'kp',  qty: Number(calc.value.parcelKp) || 0,  price: Number(form.value.mProductPaket1KpPrice) || 0,  label: 'KP', color: '#14b8a6' },
    { key: 's',   qty: Number(calc.value.parcelS)  || 0,  price: Number(form.value.mProductPaket2SPrice)  || 0,  label: 'S',  color: '#22c55e' },
    { key: 'm',   qty: Number(calc.value.parcelM)  || 0,  price: Number(form.value.mProductPaket3MPrice)  || 0,  label: 'M',  color: '#eab308' },
    { key: 'l',   qty: Number(calc.value.parcelL)  || 0,  price: Number(form.value.mProductPaket4LPrice)  || 0,  label: 'L',  color: '#f97316' },
    { key: 'xl',  qty: Number(calc.value.parcelXl) || 0,  price: Number(form.value.mProductPaket5XlPrice) || 0,  label: 'XL', color: '#ef4444' }
  ]
  const total = items.reduce((s, i) => s + i.qty * i.price, 0)
  return { items, total }
})

// Help modal — uses helpKey to render rich Vue template inside modal
const helpOpen = ref(false)
const helpKey = ref('')
const helpTitle = computed(() => {
  const titles = {
    fulfillment_pricing: t.value.help_fulfillment_pricing_title || 'How outbound fulfillment pricing works',
    return_pricing:      t.value.help_return_pricing_title      || 'How return (RMA) pricing works',
    warehouse_rent:      t.value.help_warehouse_rent_title      || 'Warehouse rent — choose ONE method',
    dhl_shipping:        t.value.help_dhl_shipping_title        || 'DHL shipping cost calculation',
    kleinpaket:          t.value.help_kleinpaket_title          || 'Kleinpaket (small parcel) accounting',
    packaging:           t.value.help_packaging_title           || 'Packaging material prices',
    pricing_hierarchy:   t.value.help_pricing_hierarchy_title   || 'Pricing override hierarchy'
  }
  return titles[helpKey.value] || ''
})
const openHelp = (key) => {
  helpKey.value = key
  helpOpen.value = true
}
</script>

<template>
  <div @mouseleave.self="save">
    <div class="my-5 mx-5">
      <!--<AlertAction v-model='form.alert.status' :alert="form.alert" />-->

      <template v-if="tab === 'partner'">

        <!-- ============== SECTION 1: IDENTITY ============== -->
        <div class="ff-section ff-section--green">
          <div class="ff-section__head">
            <div class="ff-section__icon"><i class="ti ti-id-badge-2"></i></div>
            <div class="ff-section__title-wrap">
              <h3 class="ff-section__title">{{ t.identity_section || 'Identity' }}</h3>
              <p class="ff-section__sub">{{ t.identity_section_sub || 'Core identification: name, search key, contact and tax data' }}</p>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-building"></i> {{ t.name }} *
                  <span class="ff-info" :data-tip="t.help_name_tip || 'Primary legal name of the business partner. Required.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <input type="text" v-model="form.name" class="input ff-input" @keyup="save" />
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-user"></i> {{ t.second_name }}
                  <span class="ff-info" :data-tip="t.help_name2_tip || 'Optional secondary name (e.g. contact person, brand, or addition).'"><i class="ti ti-info-circle"></i></span>
                </label>
                <input type="text" v-model="form.name2" class="input ff-input" @keyup="save" />
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-key"></i> {{ t.search_key }}
                  <span class="ff-info ff-info--right" :data-tip="t.help_search_key_tip || 'Internal short search key. Used in lookups, dropdowns and barcodes. If empty, system auto-generates.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <input type="text" v-model="form.value" class="input ff-input" @keyup="save" />
              </div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-mail"></i> {{ t.email }} *
                </label>
                <input type="email" v-model="form.EMail" class="input ff-input" @change="save" />
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-link"></i> {{ t.url }}
                </label>
                <input type="url" v-model="form.URL" class="input ff-input" placeholder="https://" @keyup="save" />
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-receipt-tax"></i> {{ t.tax_id }}
                  <span class="ff-info ff-info--right" :data-tip="t.help_tax_id_tip || 'VAT / tax identification number used on invoices and tax reports.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <input type="text" v-model="form.taxID" class="input ff-input" @keyup="save" />
              </div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-building-bank"></i> {{ t.hrg_number || 'Handelsregisternummer' }}
                  <span class="ff-info ff-info--right" :data-tip="t.help_hrg_number_tip || 'Commercial register number (Handelsregisternummer) of the business partner.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <input type="text" v-model="form.hrgNumber" class="input ff-input" @keyup="save" />
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-file-invoice"></i> {{ t.email_invoice || 'Rechnungs-E-Mail' }}
                  <span class="ff-info ff-info--right" :data-tip="t.help_email_invoice_tip || 'Invoices are emailed to this address. If empty, the general email is used.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <input type="email" v-model="form.eMailInvoice" class="input ff-input" @change="save" />
              </div>
            </div>
          </div>
          <div class="ff-field">
            <label class="ff-label">
              <i class="ti ti-align-left"></i> {{ t.description }}
            </label>
            <textarea v-model="form.description" class="input ff-input" rows="2" @keyup="save"></textarea>
          </div>
        </div>

        <!-- ============== SECTION 2: ORGANIZATION & GROUP ============== -->
        <div class="ff-section ff-section--blue">
          <div class="ff-section__head">
            <div class="ff-section__icon"><i class="ti ti-building-skyscraper"></i></div>
            <div class="ff-section__title-wrap">
              <h3 class="ff-section__title">{{ t.org_group_section || 'Organization & Grouping' }}</h3>
              <p class="ff-section__sub">{{ t.org_group_section_sub || 'Tenant, organization, partner group and assigned sales rep' }}</p>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">{{ t.tenant }} *</label>
                <input type="text" :value="clientName" class="input ff-input" readonly />
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">{{ t.organization }} *</label>
                <input v-if="form.id !== ''" type="text" :value="form.organization" class="input ff-input" readonly />
                <ClientOnly v-else>
                  <SelectBox v-model="form.organizationId" :options="getOptions?.['orgs']?.records || [{id: form.organizationId, Name: form.organization}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_org', 'orgs')" @change="(val, opt) => {form.organization = opt.Name; save();}" :loading="loading?.['orgs'] ?? true" />
                </ClientOnly>
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  {{ t.partner_groups }}
                  <span class="ff-info ff-info--right" :data-tip="t.help_partner_group_tip || 'Logical grouping of partners (e.g. Standard, VIP, Subcontractor). Drives default accounting and reporting.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <ClientOnly>
                  <SelectBox v-model="form.partnerGroupId" :options="getOptions?.['partner_groups']?.records || [{id: form.partnerGroupId, Name: form.partnerGroup}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_bp_group', 'partner_groups')" @change="save" :loading="loading?.['partner_groups'] ?? true" />
                </ClientOnly>
              </div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-user-cog"></i> {{ t.representative_agent }}
                  <span class="ff-info" :data-tip="t.help_sales_rep_tip || 'Internal sales representative responsible for this partner.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <button
                  type="button"
                  class="ff-date-trigger ff-date-trigger--blue"
                  @click="salesRepModalOpen = true; setOptions('admin/users/sales-reps', 'sales_reps')"
                >
                  <i class="ti ti-user-cog"></i>
                  <span class="ff-date-trigger__value">{{ form.salesRep || (t.select_sales_rep || 'Select sales representative') }}</span>
                  <i class="ti ti-chevron-down ff-date-trigger__chev"></i>
                </button>
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">{{ t.reference_no }}</label>
                <input type="text" v-model="form.referenceNo" class="input ff-input" @keyup="save" />
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-star"></i> {{ t.rating }}
                  <span class="ff-info ff-info--right" :data-tip="t.help_rating_tip || 'Internal rating / tier (free text or grade like A/B/C).'"><i class="ti ti-info-circle"></i></span>
                </label>
                <input type="text" v-model="form.rating" class="input ff-input" @keyup="save" />
              </div>
            </div>
          </div>
        </div>

        <!-- ============== SECTION 3: TYPE & STATUS (grouped) ============== -->
        <div class="ff-section ff-section--purple">
          <div class="ff-section__head">
            <div class="ff-section__icon"><i class="ti ti-toggle-right"></i></div>
            <div class="ff-section__title-wrap">
              <h3 class="ff-section__title">{{ t.type_status_section || 'Type & Status' }}</h3>
              <p class="ff-section__sub">{{ t.type_status_section_sub || 'Record state, partner role, lifecycle stage and internal-staff flags' }}</p>
            </div>
          </div>

          <!-- Group A: Record state -->
          <div class="ff-flag-group">
            <div class="ff-flag-group__head">
              <i class="ti ti-power"></i> {{ t.flags_state || 'Record State' }}
            </div>
            <div class="ff-flag-grid">
              <label class="ff-flag ff-flag--green" :class="{ 'is-on': form.isActive }">
                <input type="checkbox" v-model="form.isActive" class="ff-flag__input" @change="save" />
                <i class="ti ti-circle-check ff-flag__icon"></i>
                <span class="ff-flag__lbl">{{ t.active }}</span>
                <span class="ff-flag__hint">{{ t.flag_active_hint || 'Visible & usable across the system' }}</span>
              </label>
              <label class="ff-flag ff-flag--gray" :class="{ 'is-on': form.isOneTime }">
                <input type="checkbox" v-model="form.isOneTime" class="ff-flag__input" @change="save" />
                <i class="ti ti-clock-bolt ff-flag__icon"></i>
                <span class="ff-flag__lbl">{{ t.one_time || 'One-time' }}</span>
                <span class="ff-flag__hint">{{ t.flag_onetime_hint || 'Single-use partner (cash sale, walk-in)' }}</span>
              </label>
            </div>
          </div>

          <!-- Group B: Business role -->
          <div class="ff-flag-group">
            <div class="ff-flag-group__head">
              <i class="ti ti-briefcase"></i> {{ t.flags_role || 'Business Role' }}
              <span class="ff-flag-group__sub">{{ t.flags_role_sub || 'Activates the matching tab(s)' }}</span>
            </div>
            <div class="ff-flag-grid">
              <label class="ff-flag ff-flag--blue" :class="{ 'is-on': form.isCustomer }">
                <input type="checkbox" v-model="form.isCustomer" class="ff-flag__input" @change="save" />
                <i class="ti ti-user-check ff-flag__icon"></i>
                <span class="ff-flag__lbl">{{ t.customer }}</span>
                <span class="ff-flag__hint">{{ t.flag_customer_hint || 'Sells to this partner — opens Customer tab' }}</span>
              </label>
              <label class="ff-flag ff-flag--orange" :class="{ 'is-on': form.isVendor }">
                <input type="checkbox" v-model="form.isVendor" class="ff-flag__input" @change="save" />
                <i class="ti ti-truck-loading ff-flag__icon"></i>
                <span class="ff-flag__lbl">{{ t.vendor }}</span>
                <span class="ff-flag__hint">{{ t.flag_vendor_hint || 'Buys from this partner — opens Vendor tab' }}</span>
              </label>
              <label class="ff-flag ff-flag--teal" :class="{ 'is-on': form.isFulfillmentCustomer }">
                <input type="checkbox" v-model="form.isFulfillmentCustomer" class="ff-flag__input" @change="save" />
                <i class="ti ti-package ff-flag__icon"></i>
                <span class="ff-flag__lbl">{{ t.fulfillment_customer }}</span>
                <span class="ff-flag__hint">{{ t.flag_ffcustomer_hint || 'Uses LogShip fulfillment — opens Fulfillment tab' }}</span>
              </label>
            </div>
          </div>

          <!-- Group C: Sales lifecycle -->
          <div class="ff-flag-group">
            <div class="ff-flag-group__head">
              <i class="ti ti-chart-arrows"></i> {{ t.flags_lifecycle || 'Sales Lifecycle' }}
            </div>
            <div class="ff-flag-grid">
              <label class="ff-flag ff-flag--yellow" :class="{ 'is-on': form.isProspect }">
                <input type="checkbox" v-model="form.isProspect" class="ff-flag__input" @change="save" />
                <i class="ti ti-eye-search ff-flag__icon"></i>
                <span class="ff-flag__lbl">{{ t.prospect }}</span>
                <span class="ff-flag__hint">{{ t.flag_prospect_hint || 'Lead — not yet converted to customer' }}</span>
              </label>
            </div>
          </div>

          <!-- Group D: Internal staff -->
          <div class="ff-flag-group">
            <div class="ff-flag-group__head">
              <i class="ti ti-users"></i> {{ t.flags_internal || 'Internal Staff' }}
              <span class="ff-flag-group__sub">{{ t.flags_internal_sub || 'Use only when this partner record represents an internal person' }}</span>
            </div>
            <div class="ff-flag-grid">
              <label class="ff-flag ff-flag--pink" :class="{ 'is-on': form.isEmployee }">
                <input type="checkbox" v-model="form.isEmployee" class="ff-flag__input" @change="save" />
                <i class="ti ti-id ff-flag__icon"></i>
                <span class="ff-flag__lbl">{{ t.is_employee }}</span>
                <span class="ff-flag__hint">{{ t.flag_employee_hint || 'Internal staff member' }}</span>
              </label>
              <label class="ff-flag ff-flag--pink" :class="{ 'is-on': form.isSalesRep }">
                <input type="checkbox" v-model="form.isSalesRep" class="ff-flag__input" @change="save" />
                <i class="ti ti-user-star ff-flag__icon"></i>
                <span class="ff-flag__lbl">{{ t.sales_representative }}</span>
                <span class="ff-flag__hint">{{ t.flag_salesrep_hint || 'Can be assigned as Sales Rep on orders' }}</span>
              </label>
            </div>
          </div>
        </div>

        <!-- ============== SECTION 4: TAX & CREDIT ============== -->
        <div class="ff-section ff-section--orange">
          <div class="ff-section__head">
            <div class="ff-section__icon"><i class="ti ti-currency-euro"></i></div>
            <div class="ff-section__title-wrap">
              <h3 class="ff-section__title">{{ t.tax_credit_section || 'Tax & Credit' }}</h3>
              <p class="ff-section__sub">{{ t.tax_credit_section_sub || 'Credit limit, status, open balance and tax-exempt flags' }}</p>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-credit-card"></i> {{ t.credit_status }}
                  <span class="ff-info" :data-tip="t.help_credit_status_tip || 'Credit-check behavior on new sales orders. Hold/Stop block, Watch warns, OK passes, No Check skips.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <select v-model="form.soCreditStatusId" class="select ff-input" @change="save">
                  <option value="H">{{ t.credit_hold }}</option>
                  <option value="O">{{ t.credit_ok }}</option>
                  <option value="S">{{ t.credit_stop }}</option>
                  <option value="W">{{ t.credit_watch }}</option>
                  <option value="X">{{ t.no_credit_check }}</option>
                </select>
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">{{ t.credit_limit }} *</label>
                <div class="ff-input-wrap">
                  <span class="ff-input-prefix">€</span>
                  <input type="number" step="0.01" v-model="form.soCreditLimit" class="input ff-input" @keyup="save" />
                </div>
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  {{ t.open_balance }}
                  <span class="ff-info ff-info--right" :data-tip="t.help_open_balance_tip || 'Read-only: outstanding receivable balance. Auto-updated by accounting postings.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <div class="ff-input-wrap">
                  <span class="ff-input-prefix">€</span>
                  <input type="text" v-model="form.totalOpenBalance" class="input ff-input" readonly />
                </div>
              </div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.isTaxExempt }">
                <input type="checkbox" v-model="form.isTaxExempt" class="ff-toggle-card__input" @change="save" />
                <div class="ff-toggle-card__icon"><i class="ti ti-receipt-off"></i></div>
                <div class="ff-toggle-card__body">
                  <div class="ff-toggle-card__title">{{ t.so_tax_exempt }}</div>
                  <div class="ff-toggle-card__desc">{{ t.help_so_tax_exempt_desc || 'Customer is exempt from sales tax on outgoing invoices.' }}</div>
                </div>
                <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
              </label>
            </div>
            <div class="column is-half">
              <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.isPOTaxExempt }">
                <input type="checkbox" v-model="form.isPOTaxExempt" class="ff-toggle-card__input" @change="save" />
                <div class="ff-toggle-card__icon"><i class="ti ti-receipt-off"></i></div>
                <div class="ff-toggle-card__body">
                  <div class="ff-toggle-card__title">{{ t.po_tax_exempt }}</div>
                  <div class="ff-toggle-card__desc">{{ t.help_po_tax_exempt_desc || 'Vendor is exempt from input tax on incoming purchase invoices.' }}</div>
                </div>
                <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
              </label>
            </div>
          </div>
        </div>

        <!-- ============== SECTION 5: CUSTOMER VALUE (compact) ============== -->
        <div class="ff-section ff-section--teal" v-if="form.isCustomer">
          <div class="ff-section__head">
            <div class="ff-section__icon"><i class="ti ti-trophy"></i></div>
            <div class="ff-section__title-wrap">
              <h3 class="ff-section__title">{{ t.customer_value_section || 'Customer Lifetime Value' }}</h3>
              <p class="ff-section__sub">{{ t.customer_value_section_sub || 'Tracking metrics for the customer relationship' }}</p>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-calendar-event"></i> {{ t.first_sale }}
                  <span class="ff-info" :data-tip="t.help_first_sale_tip || 'Date of the first invoice/sale to this customer. Used in cohort analysis and lifetime metrics.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <DatePicker v-model="form.firstSale" @handler="save" />
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-coin"></i> {{ t.actual_life_time_value }}
                  <span class="ff-info" :data-tip="t.help_actual_ltv_tip || 'Sum of all completed sales to this customer to date.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <div class="ff-input-wrap">
                  <span class="ff-input-prefix">€</span>
                  <input type="number" step="0.01" v-model="form.actualLifeTimeValue" class="input ff-input" @keyup="save" />
                </div>
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-id"></i> {{ t.duns }}
                  <span class="ff-info ff-info--right" :data-tip="t.help_duns_tip || 'D-U-N-S Number — globally unique 9-digit business identifier from Dun & Bradstreet.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <input type="text" v-model="form.DUNS" class="input ff-input" @keyup="save" />
              </div>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-coin"></i> {{ t.acquisition_cost || 'Acquisition Cost' }}
                  <span class="ff-info" :data-tip="t.help_acquisition_cost_tip || 'Cost of acquiring this customer (marketing/onboarding).'"><i class="ti ti-info-circle"></i></span>
                </label>
                <div class="ff-input-wrap">
                  <span class="ff-input-prefix">€</span>
                  <input type="number" step="0.01" v-model="form.acqusitionCost" class="input ff-input" @keyup="save" />
                </div>
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-trending-up"></i> {{ t.potential_life_time_value || 'Potential Lifetime Value' }}
                  <span class="ff-info" :data-tip="t.help_potential_ltv_tip || 'Projected total value of this customer over the relationship.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <div class="ff-input-wrap">
                  <span class="ff-input-prefix">€</span>
                  <input type="number" step="0.01" v-model="form.potentialLifeTimeValue" class="input ff-input" @keyup="save" />
                </div>
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-percentage"></i> {{ t.share_of_customer || 'Share of Customer' }}
                  <span class="ff-info ff-info--right" :data-tip="t.help_share_of_customer_tip || 'Estimated share of this customer\'s total spend captured by us (%).'"><i class="ti ti-info-circle"></i></span>
                </label>
                <input type="number" step="0.01" v-model="form.shareOfCustomer" class="input ff-input" @keyup="save" />
              </div>
            </div>
          </div>
        </div>

        <!-- ============== SECTION 6: COMMUNICATION ============== -->
        <div class="ff-section ff-section--pink">
          <div class="ff-section__head">
            <div class="ff-section__icon"><i class="ti ti-message-2"></i></div>
            <div class="ff-section__title-wrap">
              <h3 class="ff-section__title">{{ t.communication_section || 'Communication & Personalization' }}</h3>
              <p class="ff-section__sub">{{ t.communication_section_sub || 'Greeting, language and email-notification preferences' }}</p>
            </div>
          </div>
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-mood-smile"></i> {{ t.greeting }}
                  <span class="ff-info" :data-tip="t.help_greeting_tip || 'Salutation used on document templates (e.g. Mr / Mrs / Dr).'"><i class="ti ti-info-circle"></i></span>
                </label>
                <ClientOnly>
                  <SelectBox v-model="form.greetingId" :options="getOptions?.['greetings']?.records || [{id: form.greetingId, Name: form.greeting}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_greeting', 'greetings')" @change="save" :loading="loading?.['greetings'] ?? true" />
                </ClientOnly>
              </div>
            </div>
            <div class="column is-one-third">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-language"></i> {{ t.language }}
                  <span class="ff-info" :data-tip="t.help_language_tip || 'Language used on documents and emails sent to this partner.'"><i class="ti ti-info-circle"></i></span>
                </label>
                <select v-model="form.languageId" class="select ff-input" @change="save">
                  <option value="en_US">English (US)</option>
                  <option value="de_DE">Deutsch (Deutschland)</option>
                  <option value="es_CO">Español (Colombia)</option>
                </select>
              </div>
            </div>
            <div class="column is-one-third">
              <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.sendEMail }">
                <input type="checkbox" v-model="form.sendEMail" class="ff-toggle-card__input" @change="save" />
                <div class="ff-toggle-card__icon"><i class="ti ti-mail-fast"></i></div>
                <div class="ff-toggle-card__body">
                  <div class="ff-toggle-card__title">{{ t.send_email || 'Send Documents by E-Mail' }}</div>
                  <div class="ff-toggle-card__desc">{{ t.help_send_email_desc || 'Auto-email invoices, orders, etc. when documents are completed.' }}</div>
                </div>
                <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
              </label>
            </div>
          </div>
        </div>

        <!-- ============== AGREEMENTS WITH THE PARTNER ============== -->
        <div class="ff-section ff-section--green">
          <div class="ff-section__head">
            <div class="ff-section__icon"><i class="ti ti-notebook"></i></div>
            <div class="ff-section__title-wrap">
              <h3 class="ff-section__title">{{ t.agreement_notes_section || 'Vereinbarungen mit dem Partner' }}</h3>
              <p class="ff-section__sub">{{ t.agreement_notes_section_sub || 'Notizen zu getroffenen Vereinbarungen, jeweils mit Datum und Inhalt' }}</p>
            </div>
          </div>
          <PartnersPartnerAgreementNotesEditor :bpartner-id="form.id" />
        </div>

      </template>
      <template v-else-if="tab === 'customer'">
        <template v-if="form.isCustomer">

          <!-- ============== SECTION 1: PRICING & PAYMENT ============== -->
          <div class="ff-section ff-section--green">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-tag"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.cust_pricing_section || 'Pricing & Payment' }}</h3>
                <p class="ff-section__sub">{{ t.cust_pricing_section_sub || 'Default price list, payment terms and discount rules for this customer' }}</p>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-list-numbers"></i> {{ t.price_list }}
                    <span class="ff-info" :data-tip="t.help_price_list_tip || 'Default price list used for new sales orders to this customer.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <ClientOnly>
                    <SelectBox v-model="form.priceListId" :options="getOptions?.['price_lists']?.records || [{id: form.priceListId, Name: form.priceList}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_pricelist', 'price_lists')" @change="save" :loading="loading?.['price_lists'] ?? true" />
                  </ClientOnly>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-clock-dollar"></i> {{ t.payment_term }}
                    <span class="ff-info" :data-tip="t.help_payment_term_tip || 'Default payment term — defines invoice due date (Net 14, Net 30, Immediate, etc.).'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <ClientOnly>
                    <SelectBox v-model="form.paymentTermId" :options="getOptions?.['payment_terms']?.records || [{id: form.paymentTermId, Name: form.paymentTerm}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_paymentterm', 'payment_terms')" @change="save" :loading="loading?.['payment_terms'] ?? true" />
                  </ClientOnly>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-credit-card"></i> {{ t.payment_rule }}
                    <span class="ff-info ff-info--right" :data-tip="t.help_payment_rule_tip || 'How the customer pays: cash, check, card, direct debit, deposit, on credit.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <select v-model="form.paymentRuleId" class="select ff-input" @change="save">
                    <option value="B">{{ t.cash }}</option>
                    <option value="S">{{ t.check }}</option>
                    <option value="K">{{ t.credit_card }}</option>
                    <option value="D">{{ t.direct_debit }}</option>
                    <option value="I">{{ t.direct_deposit }}</option>
                    <option value="P">{{ t.on_credit }}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-percentage"></i> {{ t.discount_schema }}
                    <span class="ff-info" :data-tip="t.help_discount_schema_tip || 'Discount rules / tier table applied to this customer\'s orders.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <ClientOnly>
                    <SelectBox v-model="form.discountSchemaId" :options="getOptions?.['discount_schemas']?.records || [{id: form.discountSchemaId, Name: form.discountSchema}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_discountschema', 'discount_schemas')" @change="save" :loading="loading?.['discount_schemas'] ?? true" />
                  </ClientOnly>
                </div>
              </div>
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-calendar-pause"></i> {{ t.dunning_grace_date }}
                    <span class="ff-info ff-info--right" :data-tip="t.help_dunning_grace_tip || 'Suspends dunning reminders until this date — useful for arrangements with the customer.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <DatePicker v-model="form.dunningGrace" />
                </div>
              </div>
            </div>
          </div>

          <!-- ============== SECTION 2: INVOICING ============== -->
          <div class="ff-section ff-section--blue">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-file-invoice"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.cust_invoicing_section || 'Invoicing' }}</h3>
                <p class="ff-section__sub">{{ t.cust_invoicing_section_sub || 'When and how invoices are generated for this customer' }}</p>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-list-check"></i> {{ t.invoice_rule }}
                    <span class="ff-info" :data-tip="t.help_invoice_rule_tip || 'Defines when an invoice is created: after delivery, after order is fully delivered, on a customer schedule, or immediately.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <select v-model="form.invoiceRuleId" class="select ff-input" @change="save">
                    <option value="D">{{ t.after_delivery }}</option>
                    <option value="O">{{ t.after_order_delivered }}</option>
                    <option value="S">{{ t.customer_schedule_after_delivery }}</option>
                    <option value="I">{{ t.immediate }}</option>
                  </select>
                </div>
              </div>
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-calendar-time"></i> {{ t.invoice_schedule }}
                    <span class="ff-info ff-info--right" :data-tip="t.help_invoice_schedule_tip || 'Recurring invoice cadence — e.g. weekly on Friday, monthly on day 1. Required when Invoice Rule = Customer Schedule.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <ClientOnly>
                    <SelectBox v-model="form.invoiceScheduleId" :options="getOptions?.['invoice_schedules']?.records || [{id: form.invoiceScheduleId, Name: form.invoiceSchedule}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_invoiceschedule', 'invoice_schedules')" @change="save" :loading="loading?.['invoice_schedules'] ?? true" />
                  </ClientOnly>
                </div>
              </div>
            </div>

            <!-- ZUGFeRD / Factur-X e-invoice toggle -->
            <div class="ff-flag-grid">
              <label class="ff-flag ff-flag--blue" :class="{ 'is-on': form.isZugPferdInvoice }">
                <input type="checkbox" v-model="form.isZugPferdInvoice" class="ff-flag__input" @change="save" />
                <i class="ti ti-file-type-xml ff-flag__icon"></i>
                <span class="ff-flag__lbl">{{ t.cust_zugpferd_invoice || 'ZUGFeRD E-Invoice' }}</span>
                <span class="ff-flag__hint">{{ t.cust_zugpferd_invoice_sub || 'Embed the EN16931 e-invoice XML into the invoice PDF when sending or uploading' }}</span>
              </label>
            </div>
          </div>

          <!-- ============== SECTION 3: INVOICE REMINDER NOTES ============== -->
          <div class="ff-section ff-section--orange">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-bell-ringing"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.invoice_reminder_notes_section || 'Erinnerungen bei Rechnungserstellung' }}</h3>
                <p class="ff-section__sub">{{ t.invoice_reminder_notes_section_sub || 'Punkte, die beim Öffnen eines abrechenbaren Auftrags angezeigt werden, damit nichts vergessen wird' }}</p>
              </div>
            </div>
            <PartnersPartnerReminderNotesEditor :bpartner-id="form.id" />
          </div>

          <!-- ============== SECTION 4: DELIVERY ============== -->
          <div class="ff-section ff-section--purple">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-truck-delivery"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.cust_delivery_section || 'Delivery' }}</h3>
                <p class="ff-section__sub">{{ t.cust_delivery_section_sub || 'How orders are released to shipping, and via what channel' }}</p>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-list-tree"></i> {{ t.delivery_rule }}
                    <span class="ff-info" :data-tip="t.help_delivery_rule_tip || 'When a line / order is released for shipping: after payment, when stock is available, when complete, on demand, etc.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <select v-model="form.deliveryRuleId" class="select ff-input" @change="save">
                    <option value="R">{{ t.after_payment }}</option>
                    <option value="A">{{ t.availability }}</option>
                    <option value="L">{{ t.complete_line }}</option>
                    <option value="O">{{ t.complete_order }}</option>
                    <option value="F">{{ t.force }}</option>
                    <option value="M">{{ t.manual }}</option>
                  </select>
                </div>
              </div>
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-truck"></i> {{ t.delivery_via }}
                    <span class="ff-info ff-info--right" :data-tip="t.help_delivery_via_tip || 'Channel: own delivery, customer pickup, or external shipper (DHL etc.).'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <select v-model="form.deliveryViaRuleId" class="select ff-input" @change="save">
                    <option value="D">{{ t.delivery }}</option>
                    <option value="P">{{ t.pickup }}</option>
                    <option value="S">{{ t.shipper }}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

        </template>
      </template>
      <template v-else-if="tab === 'vendor'">
        <template v-if="form.isVendor">

          <!-- ============== SECTION 1: PURCHASING ============== -->
          <div class="ff-section ff-section--orange">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-shopping-cart-down"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.vendor_purchasing_section || 'Purchasing Defaults' }}</h3>
                <p class="ff-section__sub">{{ t.vendor_purchasing_section_sub || 'Default price list and terms used when placing purchase orders to this vendor' }}</p>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-list-numbers"></i> {{ t.po_price_list }}
                    <span class="ff-info" :data-tip="t.help_po_price_list_tip || 'Default price list used when creating purchase orders to this vendor.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <ClientOnly>
                    <SelectBox v-model="form.poPriceListId" :options="getOptions?.['po_price_lists']?.records || [{id: form.poPriceListId, Name: form.poPriceList}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_pricelist', 'po_price_lists')" @change="save" :loading="loading?.['po_price_lists'] ?? true" />
                  </ClientOnly>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-clock-dollar"></i> {{ t.payment_term }}
                    <span class="ff-info" :data-tip="t.help_po_payment_term_tip || 'Default payment term applied to vendor invoices (when payment is due).'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <ClientOnly>
                    <SelectBox v-model="form.poPaymentTermId" :options="getOptions?.['po_payment_terms']?.records || [{id: form.poPaymentTermId, Name: form.poPaymentTerm}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_paymentterm', 'po_payment_terms')" @change="save" :loading="loading?.['po_payment_terms'] ?? true" />
                  </ClientOnly>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-credit-card"></i> {{ t.payment_rule }}
                    <span class="ff-info ff-info--right" :data-tip="t.help_po_payment_rule_tip || 'How we pay this vendor: cash, check, transfer, direct debit, etc.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <select v-model="form.paymentRulePOId" class="select ff-input" @change="save">
                    <option value="B">{{ t.cash }}</option>
                    <option value="S">{{ t.check }}</option>
                    <option value="K">{{ t.credit_card }}</option>
                    <option value="D">{{ t.direct_debit }}</option>
                    <option value="I">{{ t.direct_deposit }}</option>
                    <option value="P">{{ t.on_credit }}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-percentage"></i> {{ t.po_discount_schema }}
                    <span class="ff-info" :data-tip="t.help_po_discount_schema_tip || 'Discount tier table applied to PO lines from this vendor.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <ClientOnly>
                    <SelectBox v-model="form.poDiscountSchemaId" :options="getOptions?.['po_discount_schemas']?.records || [{id: form.poDiscountSchemaId, Name: form.poDiscountSchema}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_discountschema', 'po_discount_schemas')" @change="save" :loading="loading?.['po_discount_schemas'] ?? true" />
                  </ClientOnly>
                </div>
              </div>
            </div>
          </div>

          <!-- ============== SECTION 2: VENDOR TYPE ============== -->
          <div class="ff-section ff-section--gray">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-tags"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.vendor_type_section || 'Vendor Classification' }}</h3>
                <p class="ff-section__sub">{{ t.vendor_type_section_sub || 'Special vendor flags affecting reporting' }}</p>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-half">
                <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.isManufacturer }">
                  <input type="checkbox" v-model="form.isManufacturer" class="ff-toggle-card__input" @change="save" />
                  <div class="ff-toggle-card__icon"><i class="ti ti-building-factory"></i></div>
                  <div class="ff-toggle-card__body">
                    <div class="ff-toggle-card__title">{{ t.manufacturer }}</div>
                    <div class="ff-toggle-card__desc">{{ t.help_manufacturer_desc || 'Vendor manufactures the goods we purchase (vs. distributor / reseller).' }}</div>
                  </div>
                  <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
                </label>
              </div>
              <div class="column is-half">
                <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.is1099Vendor }">
                  <input type="checkbox" v-model="form.is1099Vendor" class="ff-toggle-card__input" @change="save" />
                  <div class="ff-toggle-card__icon"><i class="ti ti-file-text"></i></div>
                  <div class="ff-toggle-card__body">
                    <div class="ff-toggle-card__title">{{ t.vendor_1099 }}</div>
                    <div class="ff-toggle-card__desc">{{ t.help_1099_desc || 'US tax form 1099 vendor — payments must be reported to the IRS.' }}</div>
                  </div>
                  <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
                </label>
              </div>
            </div>
          </div>

        </template>
      </template>
      <template v-else-if="tab === 'fulfillment-customer'">
        <template v-if="form.isFulfillmentCustomer">

          <!-- ============== TOP STRIP: CONTRACT + PRICING HIERARCHY ============== -->
          <div class="ff-top-strip ff-top-strip--2 mb-4">
            <div class="ff-top-strip__contract">
              <div class="ff-top-strip__icon"><i class="ti ti-file-signature"></i></div>
              <div class="ff-top-strip__body">
                <div class="ff-top-strip__label">
                  {{ t.contracted_signed }}
                  <span class="ff-info" :data-tip="t.help_contract_signed_tip || 'Date the customer contract was signed. Used for billing-period calculations and contract-anniversary reports.'"><i class="ti ti-info-circle"></i></span>
                </div>
                <button
                  type="button"
                  class="ff-date-trigger ff-date-trigger--inline"
                  @click="contractedSignedOpen = true"
                >
                  <i class="ti ti-calendar-event"></i>
                  <span class="ff-date-trigger__value">{{ formatDate(form.contractedSigned) || (t.select_date || 'Select date') }}</span>
                  <i class="ti ti-chevron-down ff-date-trigger__chev"></i>
                </button>
              </div>
            </div>
            <div class="ff-top-strip__hierarchy">
              <div class="ff-top-strip__icon"><i class="ti ti-stack-2"></i></div>
              <div class="ff-top-strip__body">
                <div class="ff-top-strip__label">{{ t.pricing_hierarchy_title || 'Pricing Hierarchy' }}</div>
                <div class="ff-top-strip__sub">{{ t.pricing_hierarchy_text || 'Product → Rule → BP → System default' }}</div>
              </div>
              <button type="button" class="ff-top-strip__btn" @click="openHelp('pricing_hierarchy')">
                <i class="ti ti-info-circle"></i> {{ t.learn_more || 'Learn more' }}
              </button>
            </div>
          </div>

          <!-- ============== SECTION 1: OUTBOUND FULFILLMENT PRICING ============== -->
          <div class="ff-section ff-section--green">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-package-export"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.outbound_fulfillment_pricing || 'Outbound Fulfillment Pricing' }}</h3>
                <p class="ff-section__sub">{{ t.outbound_fulfillment_pricing_sub || 'Per-shipment pricing for regular customer orders' }}</p>
              </div>
              <button type="button" class="ff-help-pill" @click="openHelp('fulfillment_pricing')">
                <i class="ti ti-help-circle"></i> {{ t.how_it_works || 'How it works' }}
              </button>
            </div>
            <div class="columns is-desktop">
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-currency-euro"></i> {{ t.fulfillment_order_baseprice }}
                    <span class="ff-info" :data-tip="t.fulfillment_order_baseprice_tooltip"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <div class="ff-input-wrap">
                    <span class="ff-input-prefix">€</span>
                    <input type="number" step="0.01" v-model="form.fulfillmentOrderBaseprice" class="input ff-input" @keyup="save" />
                  </div>
                  <div class="ff-hint">{{ t.first_line_only_hint }}</div>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-hand-grab"></i> {{ t.fulfillment_order_pickprice }}
                    <span class="ff-info" :data-tip="t.fulfillment_order_pickprice_tooltip"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <div class="ff-input-wrap">
                    <span class="ff-input-prefix">€</span>
                    <input type="number" step="0.01" v-model="form.fulfillmentOrderPickprice" class="input ff-input" @keyup="save" />
                  </div>
                  <div class="ff-hint">{{ t.per_unit_hint }}</div>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-gift"></i> {{ t.fulfillment_order_qty_pickfree }}
                    <span class="ff-info ff-info--right" :data-tip="t.fulfillment_order_qty_pickfree_tooltip"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <input type="number" step="1" v-model="form.fulfillmentOrderQtyPickfree" class="input ff-input" @keyup="save" />
                  <div class="ff-hint">{{ t.free_qty_hint }}</div>
                </div>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    {{ t.fulfillment_order_baseprice_2 }}
                    <span class="ff-info" :data-tip="t.fulfillment_order_baseprice_2_tooltip"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <div class="ff-input-wrap">
                    <span class="ff-input-prefix">€</span>
                    <input type="number" step="0.01" v-model="form.fulfillmentOrderBaseprice2" class="input ff-input" @keyup="save" />
                  </div>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    {{ t.fulfillment_order_baseprice_3 }}
                    <span class="ff-info" :data-tip="t.fulfillment_order_baseprice_3_tooltip"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <div class="ff-input-wrap">
                    <span class="ff-input-prefix">€</span>
                    <input type="number" step="0.01" v-model="form.fulfillmentOrderBaseprice3" class="input ff-input" @keyup="save" />
                  </div>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    {{ t.freight_cost_rule }}
                    <span class="ff-info ff-info--right" :data-tip="t.help_freight_cost_rule_tip || 'Determines how freight is added: Included = bundled into product price; Fixed = a fixed value; Calculated = computed from shipment; Line = appears as separate line item.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <select v-model="form.freightCostRuleId" class="select ff-input" @change="save">
                    <option value="">-</option>
                    <option value="I">{{ t.freight_included }}</option>
                    <option value="F">{{ t.fix_price }}</option>
                    <option value="C">{{ t.calculated }}</option>
                    <option value="L">{{ t.line }}</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- LIVE CALCULATOR — Outbound (collapsible — click anywhere to open) -->
            <div class="ff-calc" :class="{ 'is-open': calcOpen.outbound, 'is-closed-clickable': !calcOpen.outbound }" @click="!calcOpen.outbound && toggleCalc('outbound')">
              <button type="button" class="ff-calc__head ff-calc__head--btn" @click.stop="toggleCalc('outbound')">
                <i class="ti ti-calculator"></i>
                <span class="ff-calc__head-text">{{ t.calc_outbound_title || 'Live Calculator — Estimate a sample shipment' }}</span>
                <span v-if="calcOpen.outbound" class="ff-calc__head-result">€ {{ calcOutbound.total.toFixed(2) }}</span>
                <i class="ti ti-chevron-down ff-calc__head-chev"></i>
              </button>
              <div v-if="calcOpen.outbound" class="ff-calc__body">
              <div class="ff-calc__inputs">
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">{{ t.calc_lines || 'Lines' }}</label>
                  <input type="number" min="0" v-model.number="calc.outboundLines" class="ff-calc__input" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">{{ t.calc_qty_per_line || 'Qty / line' }}</label>
                  <input type="number" min="0" v-model.number="calc.outboundQtyPerLine" class="ff-calc__input" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">{{ t.fulfillment_order_baseprice }}</label>
                  <input type="number" step="0.01" v-model.number="form.fulfillmentOrderBaseprice" class="ff-calc__input" @input="save" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">{{ t.fulfillment_order_pickprice }}</label>
                  <input type="number" step="0.01" v-model.number="form.fulfillmentOrderPickprice" class="ff-calc__input" @input="save" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">{{ t.fulfillment_order_qty_pickfree }}</label>
                  <input type="number" step="1" v-model.number="form.fulfillmentOrderQtyPickfree" class="ff-calc__input" @input="save" />
                </div>
              </div>
              <div class="ff-calc__breakdown">
                <div class="ff-calc__line"><span>{{ t.calc_total_qty || 'Total qty' }}: {{ calcOutbound.lines }} × {{ calcOutbound.qty }}</span><span>{{ calcOutbound.totalQty }} {{ t.items || 'items' }}</span></div>
                <div class="ff-calc__line"><span>{{ t.calc_billable || 'Billable' }}: {{ calcOutbound.totalQty }} − {{ calcOutbound.free }} {{ t.calc_free || 'free' }}</span><span>{{ calcOutbound.billableQty }} {{ t.items || 'items' }}</span></div>
                <div class="ff-calc__line"><span>{{ t.calc_base_fee || 'Base fee' }} (1× €{{ calcOutbound.base.toFixed(2) }})</span><span>€ {{ calcOutbound.baseFee.toFixed(2) }}</span></div>
                <div class="ff-calc__line"><span>{{ t.calc_pick_fee || 'Pick fee' }} ({{ calcOutbound.billableQty }} × €{{ calcOutbound.pick.toFixed(2) }})</span><span>€ {{ calcOutbound.pickFee.toFixed(2) }}</span></div>
                <div class="ff-calc__line ff-calc__line--total"><span>{{ t.calc_estimated || 'Estimated total' }}</span><span>€ {{ calcOutbound.total.toFixed(2) }}</span></div>
              </div>
              <div class="ff-calc__formula">
                {{ t.calc_outbound_formula || 'Total = Base + Pick × (TotalQty − Free)' }}
              </div>
              </div>
            </div>
          </div>

          <!-- ============== SECTION 2: RETURN PROCESSING ============== -->
          <div class="ff-section ff-section--orange">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-package-import"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.return_processing_pricing || 'Return Processing (RMA)' }}</h3>
                <p class="ff-section__sub">{{ t.return_processing_pricing_sub || 'Pricing for customer returns — no free quantity applies' }}</p>
              </div>
              <button type="button" class="ff-help-pill" @click="openHelp('return_pricing')">
                <i class="ti ti-help-circle"></i> {{ t.how_it_works || 'How it works' }}
              </button>
            </div>
            <div class="columns is-desktop">
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-arrow-back-up"></i> {{ t.fulfillment_order_return_baseprice }}
                    <span class="ff-info" :data-tip="t.fulfillment_order_return_baseprice_tooltip"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <div class="ff-input-wrap">
                    <span class="ff-input-prefix">€</span>
                    <input type="number" step="0.01" v-model="form.fulfillmentOrderReturnBaseprice" class="input ff-input" @keyup="save" />
                  </div>
                  <div class="ff-hint">{{ t.return_first_line_hint }}</div>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-hand-grab"></i> {{ t.fulfillment_order_return_pickprice }}
                    <span class="ff-info" :data-tip="t.fulfillment_order_return_pickprice_tooltip"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <div class="ff-input-wrap">
                    <span class="ff-input-prefix">€</span>
                    <input type="number" step="0.01" v-model="form.fulfillmentOrderReturnPickprice" class="input ff-input" @keyup="save" />
                  </div>
                  <div class="ff-hint">{{ t.return_pick_hint }}</div>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-mail-forward"></i> {{ t.return_email }}
                    <span class="ff-info ff-info--right" :data-tip="t.return_email_tooltip"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <input type="email" v-model="form.returnEmail" class="input ff-input" placeholder="returns@example.com" @keyup="save" />
                </div>
              </div>
            </div>

            <!-- LIVE CALCULATOR — Returns (collapsible — click anywhere to open) -->
            <div class="ff-calc" :class="{ 'is-open': calcOpen.return, 'is-closed-clickable': !calcOpen.return }" @click="!calcOpen.return && toggleCalc('return')">
              <button type="button" class="ff-calc__head ff-calc__head--btn" @click.stop="toggleCalc('return')">
                <i class="ti ti-calculator"></i>
                <span class="ff-calc__head-text">{{ t.calc_return_title || 'Live Calculator — Estimate a sample return' }}</span>
                <span v-if="calcOpen.return" class="ff-calc__head-result">€ {{ calcReturn.total.toFixed(2) }}</span>
                <i class="ti ti-chevron-down ff-calc__head-chev"></i>
              </button>
              <div v-if="calcOpen.return" class="ff-calc__body">
              <div class="ff-calc__inputs">
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">{{ t.calc_lines || 'Lines' }}</label>
                  <input type="number" min="0" v-model.number="calc.returnLines" class="ff-calc__input" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">{{ t.calc_qty_per_line || 'Qty / line' }}</label>
                  <input type="number" min="0" v-model.number="calc.returnQtyPerLine" class="ff-calc__input" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">{{ t.fulfillment_order_return_baseprice }}</label>
                  <input type="number" step="0.01" v-model.number="form.fulfillmentOrderReturnBaseprice" class="ff-calc__input" @input="save" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">{{ t.fulfillment_order_return_pickprice }}</label>
                  <input type="number" step="0.01" v-model.number="form.fulfillmentOrderReturnPickprice" class="ff-calc__input" @input="save" />
                </div>
              </div>
              <div class="ff-calc__breakdown">
                <div class="ff-calc__line"><span>{{ t.calc_total_qty || 'Total qty' }}: {{ calcReturn.lines }} × {{ calcReturn.qty }}</span><span>{{ calcReturn.totalQty }} {{ t.items || 'items' }}</span></div>
                <div class="ff-calc__line"><span>{{ t.calc_base_fee || 'Base fee' }} (1× €{{ calcReturn.base.toFixed(2) }})</span><span>€ {{ calcReturn.baseFee.toFixed(2) }}</span></div>
                <div class="ff-calc__line"><span>{{ t.calc_pick_fee || 'Pick fee' }} ({{ calcReturn.totalQty }} × €{{ calcReturn.pick.toFixed(2) }})</span><span>€ {{ calcReturn.pickFee.toFixed(2) }}</span></div>
                <div class="ff-calc__line ff-calc__line--total"><span>{{ t.calc_estimated || 'Estimated total' }}</span><span>€ {{ calcReturn.total.toFixed(2) }}</span></div>
              </div>
              <div class="ff-calc__formula">
                {{ t.calc_return_formula || 'Total = ReturnBase + ReturnPick × TotalQty (no free quantity)' }}
              </div>
              </div>
            </div>
          </div>

          <!-- ============== SECTION 3: WAREHOUSE RENT (mutually exclusive modes) ============== -->
          <div class="ff-section ff-section--purple">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-building-warehouse"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.warehouse_rent_section || 'Warehouse Rent' }}</h3>
                <p class="ff-section__sub">{{ t.warehouse_rent_section_sub || 'Choose ONE billing method below — they are mutually exclusive' }}</p>
              </div>
              <button type="button" class="ff-help-pill" @click="openHelp('warehouse_rent')">
                <i class="ti ti-help-circle"></i> {{ t.how_it_works || 'How it works' }}
              </button>
            </div>

            <!-- Radio cards: mutually exclusive -->
            <div class="ff-radio-grid">
              <label class="ff-radio-card" :class="{ 'is-active': warehouseRentMode === 'volume' }">
                <input type="radio" value="volume" v-model="warehouseRentMode" class="ff-radio-card__input" />
                <div class="ff-radio-card__inner">
                  <div class="ff-radio-card__icon"><i class="ti ti-cube"></i></div>
                  <div class="ff-radio-card__title">{{ t.volume_based_rent || 'Volume-Based Rent (m³)' }}</div>
                  <div class="ff-radio-card__desc">{{ t.volume_based_rent_desc || 'Bills by actual cubic meters used. Dynamic, scales with stock.' }}</div>
                </div>
              </label>
              <label class="ff-radio-card" :class="{ 'is-active': warehouseRentMode === 'flat' }">
                <input type="radio" value="flat" v-model="warehouseRentMode" class="ff-radio-card__input" />
                <div class="ff-radio-card__inner">
                  <div class="ff-radio-card__icon"><i class="ti ti-layout-grid"></i></div>
                  <div class="ff-radio-card__title">{{ t.flat_rate_rent || 'Flat-Rate (Shelves & Pallets)' }}</div>
                  <div class="ff-radio-card__desc">{{ t.flat_rate_rent_desc || 'Fixed monthly fees per shelf and pallet space.' }}</div>
                </div>
              </label>
              <label class="ff-radio-card" :class="{ 'is-active': warehouseRentMode === 'none' }">
                <input type="radio" value="none" v-model="warehouseRentMode" class="ff-radio-card__input" />
                <div class="ff-radio-card__inner">
                  <div class="ff-radio-card__icon"><i class="ti ti-circle-off"></i></div>
                  <div class="ff-radio-card__title">{{ t.no_warehouse_rent || 'No Warehouse Rent' }}</div>
                  <div class="ff-radio-card__desc">{{ t.no_warehouse_rent_desc || 'Skip warehouse rent billing entirely.' }}</div>
                </div>
              </label>
            </div>

            <!-- Common: Billing Start Date -->
            <div class="columns is-desktop mt-3" v-if="warehouseRentMode !== 'none'">
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-calendar-event"></i> {{ t.accounting_warehouse_rent_starts }}
                    <span class="ff-info" :data-tip="t.accounting_warehouse_rent_starts_tooltip"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <button
                    type="button"
                    class="ff-date-trigger ff-date-trigger--purple"
                    @click="warehouseRentStartsOpen = true"
                  >
                    <i class="ti ti-calendar-event"></i>
                    <span class="ff-date-trigger__value">{{ formatDate(form.accoutingwarehouserentstarts) || (t.select_date || 'Select date') }}</span>
                    <i class="ti ti-chevron-down ff-date-trigger__chev"></i>
                  </button>
                  <div class="ff-hint">{{ t.billing_start_hint }}</div>
                </div>
              </div>
            </div>

            <!-- Volume-mode fields -->
            <div v-if="warehouseRentMode === 'volume'" class="ff-mode-panel ff-mode-panel--volume mt-3">
              <div class="columns is-desktop">
                <div class="column is-half">
                  <div class="ff-field">
                    <label class="ff-label">
                      {{ t.volume_qm3_price }}
                      <span class="ff-info" :data-tip="t.volume_qm3_price_tooltip"><i class="ti ti-info-circle"></i></span>
                    </label>
                    <div class="ff-input-wrap">
                      <span class="ff-input-prefix">€</span>
                      <input type="number" step="0.01" v-model="form.volumeqm3price" class="input ff-input" @keyup="save" />
                      <span class="ff-input-suffix">/ m³</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- LIVE CALCULATOR — Volume rent (collapsible — click anywhere to open) -->
              <div class="ff-calc" :class="{ 'is-open': calcOpen.volume, 'is-closed-clickable': !calcOpen.volume }" @click="!calcOpen.volume && toggleCalc('volume')">
                <button type="button" class="ff-calc__head ff-calc__head--btn" @click.stop="toggleCalc('volume')">
                  <i class="ti ti-calculator"></i>
                  <span class="ff-calc__head-text">{{ t.calc_volume_title || 'Live Calculator — Estimate monthly volume rent' }}</span>
                  <span v-if="calcOpen.volume" class="ff-calc__head-result">€ {{ calcVolume.total.toFixed(2) }}</span>
                  <i class="ti ti-chevron-down ff-calc__head-chev"></i>
                </button>
                <div v-if="calcOpen.volume" class="ff-calc__body">
                <div class="ff-calc__inputs">
                  <div class="ff-calc__input-wrap">
                    <label class="ff-calc__input-label">{{ t.calc_used_m3 || 'Used m³' }}</label>
                    <input type="number" step="0.1" min="0" v-model.number="calc.volumeM3" class="ff-calc__input" />
                  </div>
                  <div class="ff-calc__input-wrap">
                    <label class="ff-calc__input-label">€ / m³</label>
                    <input type="number" step="0.01" v-model.number="form.volumeqm3price" class="ff-calc__input" @input="save" />
                  </div>
                </div>
                <div class="ff-calc__breakdown">
                  <div class="ff-calc__line"><span>{{ calcVolume.m3 }} m³ × €{{ calcVolume.price.toFixed(2) }}/m³</span><span></span></div>
                  <div class="ff-calc__line ff-calc__line--total"><span>{{ t.monthly_total }}</span><span>€ {{ calcVolume.total.toFixed(2) }}</span></div>
                </div>
                <div class="ff-calc__formula">{{ t.calc_volume_formula || 'Monthly = Used m³ × €/m³' }}</div>
                </div>
              </div>
            </div>

            <!-- Flat-rate mode fields -->
            <div v-else-if="warehouseRentMode === 'flat'" class="ff-mode-panel ff-mode-panel--flat mt-3">
              <div class="ff-flat-grid">
                <div class="ff-flat-row">
                  <div class="ff-flat-row__icon"><i class="ti ti-shelves"></i></div>
                  <div class="ff-flat-row__label">{{ t.large_shelves || 'Large Shelves' }}</div>
                  <div class="ff-flat-row__qty">
                    <label class="ff-mini-label">{{ t.qty || 'Qty' }}</label>
                    <input type="number" step="1" v-model="form.shelfRentLargeQty" class="input ff-input" @keyup="save" />
                  </div>
                  <div class="ff-flat-row__price">
                    <label class="ff-mini-label">€ / {{ t.month || 'month' }}</label>
                    <input type="number" step="0.01" v-model="form.shelfRentLargePrice" class="input ff-input" @keyup="save" />
                  </div>
                  <div class="ff-flat-row__total">
                    € {{ ((Number(form.shelfRentLargeQty)||0) * (Number(form.shelfRentLargePrice)||0)).toFixed(2) }}
                  </div>
                </div>
                <div class="ff-flat-row">
                  <div class="ff-flat-row__icon"><i class="ti ti-shelves"></i></div>
                  <div class="ff-flat-row__label">{{ t.small_shelves || 'Small Shelves' }}</div>
                  <div class="ff-flat-row__qty">
                    <label class="ff-mini-label">{{ t.qty || 'Qty' }}</label>
                    <input type="number" step="1" v-model="form.shelfRentSmallQty" class="input ff-input" @keyup="save" />
                  </div>
                  <div class="ff-flat-row__price">
                    <label class="ff-mini-label">€ / {{ t.month || 'month' }}</label>
                    <input type="number" step="0.01" v-model="form.shelfRentSmallPrice" class="input ff-input" @keyup="save" />
                  </div>
                  <div class="ff-flat-row__total">
                    € {{ ((Number(form.shelfRentSmallQty)||0) * (Number(form.shelfRentSmallPrice)||0)).toFixed(2) }}
                  </div>
                </div>
                <div class="ff-flat-row">
                  <div class="ff-flat-row__icon"><i class="ti ti-pallet"></i></div>
                  <div class="ff-flat-row__label">{{ t.pallet_spaces || 'Pallet Spaces' }}</div>
                  <div class="ff-flat-row__qty">
                    <label class="ff-mini-label">{{ t.qty || 'Qty' }}</label>
                    <input type="number" step="1" v-model="form.rentPallettSpaceQty" class="input ff-input" @keyup="save" />
                  </div>
                  <div class="ff-flat-row__price">
                    <label class="ff-mini-label">€ / {{ t.month || 'month' }}</label>
                    <input type="number" step="0.01" v-model="form.rentPallettSpacePrice" class="input ff-input" @keyup="save" />
                  </div>
                  <div class="ff-flat-row__total">
                    € {{ ((Number(form.rentPallettSpaceQty)||0) * (Number(form.rentPallettSpacePrice)||0)).toFixed(2) }}
                  </div>
                </div>
                <div class="ff-flat-row ff-flat-row--total">
                  <div class="ff-flat-row__icon"><i class="ti ti-calculator"></i></div>
                  <div class="ff-flat-row__label">{{ t.monthly_total || 'Monthly Total' }}</div>
                  <div class="ff-flat-row__qty"></div>
                  <div class="ff-flat-row__price"></div>
                  <div class="ff-flat-row__total ff-flat-row__total--big">
                    € {{ flatRateMonthlyTotal.toFixed(2) }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- ============== SECTION 4: DHL SHIPPING ============== -->
          <div class="ff-section ff-section--yellow">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-truck-delivery"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.shipping_dhl_section || 'DHL Shipping' }}</h3>
                <p class="ff-section__sub">{{ t.shipping_dhl_section_sub || 'Internal shipping cost calculation rules' }}</p>
              </div>
              <button type="button" class="ff-help-pill" @click="openHelp('dhl_shipping')">
                <i class="ti ti-help-circle"></i> {{ t.how_it_works || 'How it works' }}
              </button>
            </div>

            <!-- Foreign DHL toggle - critical -->
            <label class="ff-toggle-card" :class="{ 'is-on': form.useForeignDHLAccount }">
              <input type="checkbox" v-model="form.useForeignDHLAccount" class="ff-toggle-card__input" @change="save" />
              <div class="ff-toggle-card__icon"><i class="ti ti-world"></i></div>
              <div class="ff-toggle-card__body">
                <div class="ff-toggle-card__title">{{ t.use_foreign_dhl_account || 'Customer uses own DHL account' }}</div>
                <div class="ff-toggle-card__desc">{{ t.use_foreign_dhl_account_desc || 'When enabled, ALL internal shipping cost calculations are SKIPPED for this customer.' }}</div>
              </div>
              <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
            </label>

            <div v-if="form.useForeignDHLAccount" class="ff-warn-banner mt-2">
              <i class="ti ti-alert-triangle"></i>
              {{ t.foreign_dhl_warning || 'Internal shipping costs will NOT be calculated for this customer. Kleinpaket settings below are disabled.' }}
            </div>

            <!-- Kleinpaket settings (disabled if foreign DHL on) -->
            <div class="mt-3" :class="{ 'ff-disabled-area': form.useForeignDHLAccount }">
              <div class="ff-subhead">
                {{ t.kleinpaket_settings || 'Kleinpaket Settings' }}
                <button type="button" class="ff-help-pill ff-help-pill--sm" @click="openHelp('kleinpaket')">
                  <i class="ti ti-help-circle"></i>
                </button>
              </div>
              <div class="columns is-desktop">
                <div class="column is-half">
                  <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.isAccountingKleinpaket }">
                    <input type="checkbox" v-model="form.isAccountingKleinpaket" class="ff-toggle-card__input" :disabled="form.useForeignDHLAccount" @change="save" />
                    <div class="ff-toggle-card__icon"><i class="ti ti-package"></i></div>
                    <div class="ff-toggle-card__body">
                      <div class="ff-toggle-card__title">{{ t.accounting_kleinpaket || 'Kleinpaket Accounting Rate' }}</div>
                      <div class="ff-toggle-card__desc">{{ t.accounting_kleinpaket_desc || 'Both this AND the shipment must be marked Kleinpaket to apply the special rate.' }}</div>
                    </div>
                    <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
                  </label>
                </div>
                <div class="column is-half">
                  <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.isPriceLimitKleinpaketDisabled }">
                    <input type="checkbox" v-model="form.isPriceLimitKleinpaketDisabled" class="ff-toggle-card__input" :disabled="form.useForeignDHLAccount" @change="save" />
                    <div class="ff-toggle-card__icon"><i class="ti ti-shield-off"></i></div>
                    <div class="ff-toggle-card__body">
                      <div class="ff-toggle-card__title">{{ t.disable_kleinpaket_price_limit || 'Disable Kleinpaket Price Limit' }}</div>
                      <div class="ff-toggle-card__desc">{{ t.disable_kleinpaket_price_limit_desc || 'Removes the upper-cap protection on Kleinpaket prices. Use with care.' }}</div>
                    </div>
                    <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
                  </label>
                </div>
              </div>
              <div class="columns is-desktop">
                <div class="column is-half">
                  <div class="ff-field">
                    <label class="ff-label">
                      <i class="ti ti-currency-euro-off"></i> {{ t.kleinpaket_price_limit || 'Kleinpaket Price Limit' }}
                      <span class="ff-info" :data-tip="t.kleinpaket_price_limit_tip || 'Maximum order value below which a parcel still qualifies for the DHL Kleinpaket service. Compared against the order grand total during DHL label creation.'"><i class="ti ti-info-circle"></i></span>
                    </label>
                    <div class="ff-input-wrap">
                      <span class="ff-input-prefix">€</span>
                      <input type="number" step="0.01" v-model="form.kleinPaketPriceLimit" class="input ff-input" :disabled="form.useForeignDHLAccount" @keyup="save" />
                    </div>
                    <div class="ff-hint">{{ t.kleinpaket_price_limit_hint || 'If "Disable Price Limit" above is ON, this value is ignored.' }}</div>
                  </div>
                </div>
                <div class="column is-half">
                  <div class="ff-field">
                    <label class="ff-label">
                      <i class="ti ti-weight"></i> {{ t.kp_extra_weight || 'Kleinpaket Extra Weight' }}
                      <span class="ff-info ff-info--right" :data-tip="t.kp_extra_weight_tip || 'Additional weight (kg) added to the actual parcel weight when evaluating Kleinpaket eligibility. Default 0.25 kg if blank.'"><i class="ti ti-info-circle"></i></span>
                    </label>
                    <div class="ff-input-wrap">
                      <input type="number" step="0.01" v-model="form.kpExtraWeight" class="input ff-input" :disabled="form.useForeignDHLAccount" @keyup="save" />
                      <span class="ff-input-suffix">kg</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="columns is-desktop">
                <div class="column is-half">
                  <div class="ff-field">
                    <label class="ff-label">
                      <i class="ti ti-mail"></i> {{ t.freight_service_sender_mail || 'Freight Service Sender E-Mail' }}
                      <span class="ff-info" :data-tip="t.freight_service_sender_mail_tip || 'Sender email used on DHL shipping labels. Set per business partner / org. If empty the system default is used.'"><i class="ti ti-info-circle"></i></span>
                    </label>
                    <input type="email" v-model="form.freightServiceSenderMail" class="input ff-input" :disabled="form.useForeignDHLAccount" placeholder="absender@mail.com" @keyup="save" />
                  </div>
                </div>
              </div>
            </div>

            <div class="ff-subhead mt-3">{{ t.shipping_assignments || 'Shipping Assignments' }}</div>
            <div class="columns is-desktop ff-aligned-row">
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-truck"></i> {{ t.default_shipper || 'Default Shipper' }}
                    <span class="ff-info" :data-tip="t.help_default_shipper_tip || 'Default carrier used when creating new shipments for this customer.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <ClientOnly>
                    <SelectBox v-model="form.shipperOrderDefaultId" :options="getOptions?.['shippers']?.records || [{id: form.shipperOrderDefaultId, Name: form.shipperOrderDefault}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/m_shipper', 'shippers')" @change="save" :loading="loading?.['shippers'] ?? true" />
                  </ClientOnly>
                </div>
              </div>
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-tag"></i> {{ t.order_source_custom_order || 'Custom Order Source' }}
                    <span class="ff-info ff-info--right" :data-tip="t.help_custom_order_source_tip || 'Default order-source label used when this customer creates a manual order (e.g. phone, fax, manual entry).'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <ClientOnly>
                    <SelectBox v-model="form.orderSourceCustomOrderId" :options="getOptions?.['ordersources']?.records || [{id: form.orderSourceCustomOrderId, Name: form.orderSourceCustomOrder}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/c_ordersource', 'ordersources')" @change="save" :loading="loading?.['ordersources'] ?? true" />
                  </ClientOnly>
                </div>
              </div>
            </div>

            <!-- Shipping Cost Configuration links — only when foreign DHL is OFF -->
            <div v-if="!form.useForeignDHLAccount" class="sc-pf-section mt-3">
              <div class="sc-pf-section__head">
                <div class="sc-pf-section__icon"><i class="ti ti-coin-euro"></i></div>
                <div class="sc-pf-section__title-wrap">
                  <h4 class="sc-pf-section__title">{{ t.sc_partner_section_title || 'Shipping Cost Configuration' }}</h4>
                  <p class="sc-pf-section__sub">{{ t.sc_partner_section_sub || 'Default DHL shipping prices and per-organization overrides used when calculating int_freight_cost.' }}</p>
                </div>
                <div v-if="partnerLinkedOrg" class="sc-pf-org-pill">
                  <i class="ti ti-building"></i>
                  <span>{{ partnerLinkedOrg.name }}</span>
                </div>
              </div>

              <div v-if="!partnerLinkedOrg && !partnerLinkedOrgLoading" class="sc-pf-warn">
                <i class="ti ti-alert-triangle"></i>
                {{ t.sc_partner_no_org_warn || 'No organization is linked to this business partner — cannot prefill an override.' }}
              </div>

              <div class="sc-pf-link-grid">
                <NuxtLink to="/settings/shipping-costs" class="sc-pf-link sc-pf-link--blue">
                  <div class="sc-pf-link__icon"><i class="ti ti-truck-delivery"></i></div>
                  <div class="sc-pf-link__body">
                    <div class="sc-pf-link__title">{{ t.sc_partner_link_default_title || 'View Default Shipping Costs' }}</div>
                    <div class="sc-pf-link__desc">{{ t.sc_partner_link_default_desc || 'See the global Tier 1 fallback rates per country and weight range.' }}</div>
                    <div class="sc-pf-link__tag sc-pf-link__tag--blue">TIER 1</div>
                  </div>
                  <div class="sc-pf-link__chev"><i class="ti ti-chevron-right"></i></div>
                </NuxtLink>

                <NuxtLink to="/settings/shipping-cost-overrides" class="sc-pf-link sc-pf-link--orange">
                  <div class="sc-pf-link__icon"><i class="ti ti-arrow-bar-up"></i></div>
                  <div class="sc-pf-link__body">
                    <div class="sc-pf-link__title">{{ t.sc_partner_link_overrides_title || 'View Shipping Cost Overrides' }}</div>
                    <div class="sc-pf-link__desc">{{ t.sc_partner_link_overrides_desc || 'See organization & business-partner specific Tier 2 overrides.' }}</div>
                    <div class="sc-pf-link__tag sc-pf-link__tag--orange">TIER 2</div>
                  </div>
                  <div class="sc-pf-link__chev"><i class="ti ti-chevron-right"></i></div>
                </NuxtLink>

                <button type="button" class="sc-pf-link sc-pf-link--purple sc-pf-link--btn" @click="openOverridesModal" :disabled="!partnerLinkedOrg" :class="{ 'sc-pf-link--disabled': !partnerLinkedOrg }">
                  <div class="sc-pf-link__icon"><i class="ti ti-list-search"></i></div>
                  <div class="sc-pf-link__body">
                    <div class="sc-pf-link__title">{{ t.sc_partner_link_modal_title || 'View Existing Overrides' }}</div>
                    <div class="sc-pf-link__desc">{{ t.sc_partner_link_modal_desc || 'List all override records that match the linked organization.' }}</div>
                    <div class="sc-pf-link__tag sc-pf-link__tag--purple">{{ partnerLinkedOrg?.name || '—' }}</div>
                  </div>
                  <div class="sc-pf-link__chev"><i class="ti ti-eye"></i></div>
                </button>

                <NuxtLink :to="{ path: '/settings/shipping-cost-overrides/create', query: shippingCreateOverrideQuery }" class="sc-pf-link sc-pf-link--green" :class="{ 'sc-pf-link--disabled': !partnerLinkedOrg }">
                  <div class="sc-pf-link__icon"><i class="ti ti-plus"></i></div>
                  <div class="sc-pf-link__body">
                    <div class="sc-pf-link__title">{{ t.sc_partner_link_create_title || 'Add Override Shipping Rate' }}</div>
                    <div class="sc-pf-link__desc">{{ t.sc_partner_link_create_desc || 'Create a new Tier 2 override prefilled with this customer\'s organization.' }}</div>
                    <div v-if="partnerLinkedOrg" class="sc-pf-link__tag sc-pf-link__tag--green">{{ partnerLinkedOrg.name }}</div>
                  </div>
                  <div class="sc-pf-link__chev"><i class="ti ti-chevron-right"></i></div>
                </NuxtLink>
              </div>
            </div>

          </div>

          <!-- Existing Overrides Modal -->
          <UModal v-model:open="overridesModalOpen" :ui="{ content: 'sm:max-w-3xl' }">
            <template #content>
              <div class="sc-pf-modal">
                <div class="sc-pf-modal__head">
                  <h3 class="sc-pf-modal__title">
                    <i class="ti ti-list-search"></i>
                    {{ t.sc_partner_modal_title || 'Overrides for Organization' }}
                    <span v-if="partnerLinkedOrg" class="sc-pf-modal__org">{{ partnerLinkedOrg.name }}</span>
                  </h3>
                  <button type="button" class="sc-pf-modal__close" @click="overridesModalOpen = false">
                    <i class="ti ti-x"></i>
                  </button>
                </div>
                <div class="sc-pf-modal__body">
                  <div v-if="overridesModalLoading" class="sc-pf-modal__loading">
                    <i class="ti ti-loader-2"></i> Loading…
                  </div>
                  <div v-else-if="overridesModalRecords.length === 0" class="sc-pf-modal__empty">
                    <i class="ti ti-mood-empty"></i>
                    <div>{{ t.sc_partner_modal_no_records || 'No override records found for this organization.' }}</div>
                  </div>
                  <div v-else>
                    <div class="sc-pf-modal__count">
                      <strong>{{ overridesModalRecords.length }}</strong> {{ t.sc_partner_modal_count || 'records found' }}
                    </div>
                    <div class="sc-pf-modal__table-wrap">
                      <table class="sc-pf-modal__table">
                        <thead>
                          <tr>
                            <th>ID</th>
                            <th>{{ t.sc_country || 'Country' }}</th>
                            <th>{{ t.sc_business_partner || 'Business Partner' }}</th>
                            <th class="sc-pf-modal__num">{{ t.sc_base_price || 'Base (€)' }}</th>
                            <th class="sc-pf-modal__num">{{ t.sc_per_kg || 'Per KG (€)' }}</th>
                            <th>{{ t.sc_weight_range || 'Weight (kg)' }}</th>
                            <th>{{ t.sc_validity_period || 'Validity' }}</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="r in overridesModalRecords" :key="r.id">
                            <td>{{ r.id }}</td>
                            <td>{{ r.C_Country_ID?.identifier || '—' }}</td>
                            <td>{{ r.C_BPartner_ID?.identifier || '—' }}</td>
                            <td class="sc-pf-modal__num">€ {{ Number(r.ShippingBasePrice ?? 0).toFixed(2) }}</td>
                            <td class="sc-pf-modal__num">€ {{ Number(r.ShippingPricePerKG ?? 0).toFixed(2) }}</td>
                            <td>{{ (r.RangeWeightFrom ?? 0) }} – {{ (r.RangeWeightTo ?? 0) }}</td>
                            <td>{{ r.ValidFrom || '—' }} → {{ r.ValidTo || '—' }}</td>
                            <td>
                              <NuxtLink :to="`/settings/shipping-cost-overrides/${r.id}/view`" class="sc-pf-modal__row-btn" @click="overridesModalOpen = false">
                                <i class="ti ti-eye"></i>
                              </NuxtLink>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                <div class="sc-pf-modal__foot">
                  <button type="button" class="sc-pf-modal__btn sc-pf-modal__btn--ghost" @click="overridesModalOpen = false">
                    {{ t.sc_partner_modal_close || 'Close' }}
                  </button>
                  <NuxtLink v-if="partnerLinkedOrg" :to="{ path: '/settings/shipping-cost-overrides/create', query: shippingCreateOverrideQuery }" class="sc-pf-modal__btn sc-pf-modal__btn--primary" @click="overridesModalOpen = false">
                    <i class="ti ti-plus"></i>
                    {{ t.sc_partner_modal_create_btn || 'Add New Override' }}
                  </NuxtLink>
                </div>
              </div>
            </template>
          </UModal>

          <!-- ============== SECTION 5: PACKAGING MATERIAL PRICING ============== -->
          <div class="ff-section ff-section--teal">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-box-seam"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.packaging_material_section || 'Packaging Material Pricing' }}</h3>
                <p class="ff-section__sub">{{ t.packaging_material_section_sub || 'Per-parcel material costs by parcel size — leave blank to use system default' }}</p>
              </div>
              <button type="button" class="ff-help-pill" @click="openHelp('packaging')">
                <i class="ti ti-help-circle"></i> {{ t.how_it_works || 'How it works' }}
              </button>
            </div>
            <div class="ff-packet-grid">
              <div class="ff-packet-card">
                <div class="ff-packet-card__badge ff-packet-card__badge--kp">KP</div>
                <div class="ff-packet-card__name">{{ t.kleinpaket || 'Kleinpaket' }}</div>
                <div class="ff-input-wrap">
                  <span class="ff-input-prefix">€</span>
                  <input type="number" step="0.01" v-model="form.mProductPaket1KpPrice" class="input ff-input" @keyup="save" />
                </div>
              </div>
              <div class="ff-packet-card">
                <div class="ff-packet-card__badge ff-packet-card__badge--s">S</div>
                <div class="ff-packet-card__name">{{ t.standard || 'Standard' }}</div>
                <div class="ff-input-wrap">
                  <span class="ff-input-prefix">€</span>
                  <input type="number" step="0.01" v-model="form.mProductPaket2SPrice" class="input ff-input" @keyup="save" />
                </div>
              </div>
              <div class="ff-packet-card">
                <div class="ff-packet-card__badge ff-packet-card__badge--m">M</div>
                <div class="ff-packet-card__name">{{ t.medium || 'Medium' }}</div>
                <div class="ff-input-wrap">
                  <span class="ff-input-prefix">€</span>
                  <input type="number" step="0.01" v-model="form.mProductPaket3MPrice" class="input ff-input" @keyup="save" />
                </div>
              </div>
              <div class="ff-packet-card">
                <div class="ff-packet-card__badge ff-packet-card__badge--l">L</div>
                <div class="ff-packet-card__name">{{ t.large || 'Large' }}</div>
                <div class="ff-input-wrap">
                  <span class="ff-input-prefix">€</span>
                  <input type="number" step="0.01" v-model="form.mProductPaket4LPrice" class="input ff-input" @keyup="save" />
                </div>
              </div>
              <div class="ff-packet-card">
                <div class="ff-packet-card__badge ff-packet-card__badge--xl">XL</div>
                <div class="ff-packet-card__name">{{ t.extra_large || 'Extra Large' }}</div>
                <div class="ff-input-wrap">
                  <span class="ff-input-prefix">€</span>
                  <input type="number" step="0.01" v-model="form.mProductPaket5XlPrice" class="input ff-input" @keyup="save" />
                </div>
              </div>
            </div>

            <!-- LIVE CALCULATOR — Packaging mix (collapsible — click anywhere to open) -->
            <div class="ff-calc" :class="{ 'is-open': calcOpen.packaging, 'is-closed-clickable': !calcOpen.packaging }" @click="!calcOpen.packaging && toggleCalc('packaging')">
              <button type="button" class="ff-calc__head ff-calc__head--btn" @click.stop="toggleCalc('packaging')">
                <i class="ti ti-calculator"></i>
                <span class="ff-calc__head-text">{{ t.calc_packaging_title || 'Live Calculator — Estimate packaging cost for a parcel mix' }}</span>
                <span v-if="calcOpen.packaging" class="ff-calc__head-result">€ {{ calcPackaging.total.toFixed(2) }}</span>
                <i class="ti ti-chevron-down ff-calc__head-chev"></i>
              </button>
              <div v-if="calcOpen.packaging" class="ff-calc__body">
              <div class="ff-calc__inputs">
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">KP {{ t.qty }}</label>
                  <input type="number" min="0" v-model.number="calc.parcelKp" class="ff-calc__input" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">S {{ t.qty }}</label>
                  <input type="number" min="0" v-model.number="calc.parcelS" class="ff-calc__input" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">M {{ t.qty }}</label>
                  <input type="number" min="0" v-model.number="calc.parcelM" class="ff-calc__input" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">L {{ t.qty }}</label>
                  <input type="number" min="0" v-model.number="calc.parcelL" class="ff-calc__input" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">XL {{ t.qty }}</label>
                  <input type="number" min="0" v-model.number="calc.parcelXl" class="ff-calc__input" />
                </div>
              </div>
              <div class="ff-calc__breakdown">
                <div class="ff-calc__line" v-for="i in calcPackaging.items" :key="i.key">
                  <span><span class="ff-calc__chip" :style="{background: i.color}">{{ i.label }}</span> {{ i.qty }} × €{{ i.price.toFixed(2) }}</span>
                  <span>€ {{ (i.qty * i.price).toFixed(2) }}</span>
                </div>
                <div class="ff-calc__line ff-calc__line--total"><span>{{ t.calc_estimated || 'Estimated total' }}</span><span>€ {{ calcPackaging.total.toFixed(2) }}</span></div>
              </div>
              <div class="ff-calc__formula">{{ t.calc_packaging_formula || 'Total = Σ (Qty × Price) per parcel size' }}</div>
              </div>
            </div>
          </div>

          <!-- ============== SECTION 6: LOGSHIP ACCOUNT + MONTHLY FEE ============== -->
          <div class="ff-section ff-section--pink">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-credit-card"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.subscription_fees_section || 'LogShip Account & Monthly Fee' }}</h3>
                <p class="ff-section__sub">{{ t.subscription_fees_section_sub || 'Toggle the LogShip account flag to enable a fixed monthly platform fee' }}</p>
              </div>
            </div>

            <!-- Master toggle: Account LogShip -->
            <label class="ff-toggle-card" :class="{ 'is-on': form.isAccountLogShip }">
              <input type="checkbox" v-model="form.isAccountLogShip" class="ff-toggle-card__input" @change="save" />
              <div class="ff-toggle-card__icon"><i class="ti ti-receipt"></i></div>
              <div class="ff-toggle-card__body">
                <div class="ff-toggle-card__title">
                  {{ t.account_logship || 'Account on LogShip' }}
                  <span class="ff-info" :data-tip="t.help_account_logship_tip || 'When enabled, this customer is treated as an internal LogShip account. Activates the monthly platform fee field below.'"><i class="ti ti-info-circle"></i></span>
                </div>
                <div class="ff-toggle-card__desc">{{ t.account_logship_desc || 'Activate the monthly platform fee for this customer.' }}</div>
              </div>
              <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
            </label>

            <!-- Monthly fee (visible only when isAccountLogShip = true) -->
            <div v-if="form.isAccountLogShip" class="ff-mode-panel mt-3">
              <div class="columns is-desktop">
                <div class="column is-half">
                  <div class="ff-field">
                    <label class="ff-label">
                      <i class="ti ti-cash"></i> {{ t.logship_monthly_fee }}
                      <span class="ff-info" :data-tip="t.logship_monthly_fee_tooltip"><i class="ti ti-info-circle"></i></span>
                    </label>
                    <div class="ff-input-wrap">
                      <span class="ff-input-prefix">€</span>
                      <input type="number" step="0.01" v-model="form.logshipmonthlyfee" class="input ff-input" @keyup="save" />
                      <span class="ff-input-suffix">/ {{ t.month || 'month' }}</span>
                    </div>
                    <div class="ff-hint">{{ t.help_logship_monthly_fee_hint || 'Fixed monthly fee charged regardless of shipment volume.' }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="ff-callout-mini mt-3">
              <i class="ti ti-info-circle"></i>
              <span>{{ t.logship_disabled_hint || 'Enable "Account on LogShip" above to set a monthly fee.' }}</span>
            </div>

            <!-- Accounting Assignment -->
            <div class="ff-subhead mt-3">{{ t.accounting_assignment || 'Accounting Assignment' }}</div>
            <div class="columns is-desktop">
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-building-bank"></i> {{ t.accounting_org || 'Accounting Organization' }}
                    <span class="ff-info" :data-tip="t.accounting_org_tip || 'Organization under which this customer\'s fulfillment fee orders & invoices are booked. Leave empty to use the partner\'s own organization.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <ClientOnly>
                    <SelectBox v-model="form.accountingAdOrgId" :options="getOptions?.['accounting_orgs']?.records || [{id: form.accountingAdOrgId, Name: form.accountingAdOrg}]" prop="Name" dataprop="id" datatype="string" :size="5" @click="setOptions('models/ad_org', 'accounting_orgs')" @change="(val, opt) => {form.accountingAdOrg = opt.Name; save();}" :loading="loading?.['accounting_orgs'] ?? true" />
                  </ClientOnly>
                </div>
              </div>
            </div>

            <!-- Hourly Service Rate -->
            <div class="ff-subhead mt-3">{{ t.hourly_service_section || 'Hourly Service Rate' }}</div>
            <div class="columns is-desktop">
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-clock-hour-4"></i> {{ t.fulfillment_service_hourly_rate || 'Fulfillment Service Hourly Rate' }}
                    <span class="ff-info" :data-tip="t.fulfillment_service_hourly_rate_tip || 'Billing rate (€/hour) for ad-hoc fulfillment tasks: picking, packing, special handling. Used by the mobile tasks module to calculate billable hours. Default €33/h if blank.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <div class="ff-input-wrap">
                    <span class="ff-input-prefix">€</span>
                    <input type="number" step="0.01" v-model="form.fulfillmentServiceHourlyRate" class="input ff-input" @keyup="save" />
                    <span class="ff-input-suffix">/ {{ t.hour || 'hour' }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- LIVE CALCULATOR — Service hours (collapsible — click anywhere to open) -->
            <div class="ff-calc" :class="{ 'is-open': calcOpen.service, 'is-closed-clickable': !calcOpen.service }" @click="!calcOpen.service && toggleCalc('service')">
              <button type="button" class="ff-calc__head ff-calc__head--btn" @click.stop="toggleCalc('service')">
                <i class="ti ti-calculator"></i>
                <span class="ff-calc__head-text">{{ t.calc_service_title || 'Live Calculator — Estimate hourly service cost' }}</span>
                <span v-if="calcOpen.service" class="ff-calc__head-result">€ {{ calcService.total.toFixed(2) }}</span>
                <i class="ti ti-chevron-down ff-calc__head-chev"></i>
              </button>
              <div v-if="calcOpen.service" class="ff-calc__body">
                <div class="ff-calc__inputs">
                  <div class="ff-calc__input-wrap">
                    <label class="ff-calc__input-label">{{ t.hours || 'Hours' }}</label>
                    <input type="number" step="0.25" min="0" v-model.number="calc.serviceHours" class="ff-calc__input" />
                  </div>
                  <div class="ff-calc__input-wrap">
                    <label class="ff-calc__input-label">€ / {{ t.hour || 'hour' }}</label>
                    <input type="number" step="0.01" v-model.number="form.fulfillmentServiceHourlyRate" class="ff-calc__input" @input="save" />
                  </div>
                </div>
                <div class="ff-calc__breakdown">
                  <div class="ff-calc__line"><span>{{ calcService.hours }} h × €{{ calcService.rate.toFixed(2) }}</span><span></span></div>
                  <div class="ff-calc__line ff-calc__line--total"><span>{{ t.calc_estimated || 'Estimated total' }}</span><span>€ {{ calcService.total.toFixed(2) }}</span></div>
                </div>
                <div class="ff-calc__formula">{{ t.calc_service_formula || 'Total = Hours × €/hour' }}</div>
              </div>
            </div>
          </div>

          <!-- ============== SECTION 9: EXTERNAL INTEGRATIONS ============== -->
          <div class="ff-section ff-section--cyan">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-plug-connected"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.external_integrations_section || 'External Integrations' }}</h3>
                <p class="ff-section__sub">{{ t.external_integrations_section_sub || 'Identifiers linking this partner to external systems (Marketplace, Lexware, etc.)' }}</p>
              </div>
            </div>
            <div class="columns is-desktop">
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-shopping-bag"></i> {{ t.marketplace_username || 'Marketplace Username' }}
                    <span class="ff-info" :data-tip="t.marketplace_username_tip || 'Seller / buyer username on the marketplace (e.g. eBay). Populated automatically when orders are imported from external marketplaces; can be edited manually here.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <input type="text" v-model="form.marketplaceUsername" class="input ff-input" placeholder="e.g. ebay-seller-name" @keyup="save" />
                </div>
              </div>
              <div class="column is-half">
                <div class="ff-field">
                  <label class="ff-label">
                    <i class="ti ti-file-invoice"></i> {{ t.lexware_contact_uuid || 'Lexware Contact UUID' }}
                    <span class="ff-info ff-info--right" :data-tip="t.lexware_contact_uuid_tip || 'Lexoffice/Lexware contact UUID. Created automatically the first time an invoice is uploaded; reused on subsequent uploads. Edit manually only if you need to relink to a different Lexoffice contact.'"><i class="ti ti-info-circle"></i></span>
                  </label>
                  <input type="text" v-model="form.lexwareContactUuid" class="input ff-input" placeholder="auto-populated on first invoice upload" @keyup="save" />
                </div>
              </div>
            </div>
          </div>

          <!-- ============== SECTION 7: FEATURE FLAGS ============== -->
          <div class="ff-section ff-section--gray">
            <div class="ff-section__head">
              <div class="ff-section__icon"><i class="ti ti-toggle-right"></i></div>
              <div class="ff-section__title-wrap">
                <h3 class="ff-section__title">{{ t.feature_flags_section || 'Customer Permissions & Features' }}</h3>
                <p class="ff-section__sub">{{ t.feature_flags_section_sub || 'Toggles affecting which features and reports the customer sees or receives' }}</p>
              </div>
            </div>
            <!-- is-multiline: Bulma columns don't wrap by default — without it all
                 toggle cards get squeezed into one horizontal row. -->
            <div class="columns is-desktop is-multiline">
              <div class="column is-half">
                <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.isAllowFeeReportDownload }">
                  <input type="checkbox" v-model="form.isAllowFeeReportDownload" class="ff-toggle-card__input" @change="save" />
                  <div class="ff-toggle-card__icon"><i class="ti ti-file-download"></i></div>
                  <div class="ff-toggle-card__body">
                    <div class="ff-toggle-card__title">{{ t.allow_fee_report_download || 'Allow Fee Report Download' }}</div>
                    <div class="ff-toggle-card__desc">{{ t.allow_fee_report_download_desc || 'Customer can download their detailed fee/billing reports.' }}</div>
                  </div>
                  <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
                </label>
              </div>
              <div class="column is-half">
                <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.showFulfillmentInvoiceDetails }">
                  <input type="checkbox" v-model="form.showFulfillmentInvoiceDetails" class="ff-toggle-card__input" @change="save" />
                  <div class="ff-toggle-card__icon"><i class="ti ti-list-details"></i></div>
                  <div class="ff-toggle-card__body">
                    <div class="ff-toggle-card__title">{{ t.show_fulfillment_invoice_details || 'Show Fulfillment Invoice Details' }}</div>
                    <div class="ff-toggle-card__desc">{{ t.show_fulfillment_invoice_details_desc || 'Display per-line fulfillment line items on the customer invoice instead of summary totals.' }}</div>
                  </div>
                  <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
                </label>
              </div>
              <div class="column is-half">
                <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.isEditProductImage }">
                  <input type="checkbox" v-model="form.isEditProductImage" class="ff-toggle-card__input" @change="save" />
                  <div class="ff-toggle-card__icon"><i class="ti ti-photo-edit"></i></div>
                  <div class="ff-toggle-card__body">
                    <div class="ff-toggle-card__title">{{ t.allow_edit_product_image || 'Allow Product Image Editing' }}</div>
                    <div class="ff-toggle-card__desc">{{ t.allow_edit_product_image_desc || 'Customer can manage product images (Gallery tab) even with a limited role.' }}</div>
                  </div>
                  <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
                </label>
              </div>
              <div class="column is-half">
                <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.isHideQty }">
                  <input type="checkbox" v-model="form.isHideQty" class="ff-toggle-card__input" @change="save" />
                  <div class="ff-toggle-card__icon"><i class="ti ti-eye-off"></i></div>
                  <div class="ff-toggle-card__body">
                    <div class="ff-toggle-card__title">{{ t.hide_qty_flag_label || 'Hide Stock Quantities' }}</div>
                    <div class="ff-toggle-card__desc">{{ t.hide_qty_flag_desc || 'Hides warehouse stock quantities (on hand, reserved, available, returns) from this partner\'s organization users.' }}</div>
                  </div>
                  <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
                </label>
              </div>
              <div class="column is-half">
                <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.isDisallowExport }">
                  <input type="checkbox" v-model="form.isDisallowExport" class="ff-toggle-card__input" @change="save" />
                  <div class="ff-toggle-card__icon"><i class="ti ti-download-off"></i></div>
                  <div class="ff-toggle-card__body">
                    <div class="ff-toggle-card__title">{{ t.disallow_export_flag_label || 'Disallow Data Export' }}</div>
                    <div class="ff-toggle-card__desc">{{ t.disallow_export_flag_desc || 'Hides all grid export buttons (CSV, Excel, PDF) from this partner\'s organization users.' }}</div>
                  </div>
                  <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
                </label>
              </div>
              <div class="column is-half">
                <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.isTerminationNotice }">
                  <input type="checkbox" v-model="form.isTerminationNotice" class="ff-toggle-card__input" @change="save" />
                  <div class="ff-toggle-card__icon"><i class="ti ti-alert-triangle"></i></div>
                  <div class="ff-toggle-card__body">
                    <div class="ff-toggle-card__title">{{ t.termination_notice_flag_label || 'Termination notice (final reminder)' }}</div>
                    <div class="ff-toggle-card__desc">{{ t.termination_notice_flag_desc || 'Shows every user of this partner\'s organization an overdue-payment warning with the open invoices on each login.' }}</div>
                  </div>
                  <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
                </label>
              </div>
              <div class="column is-half">
                <label class="ff-toggle-card ff-toggle-card--sm" :class="{ 'is-on': form.isTerminated }">
                  <input type="checkbox" v-model="form.isTerminated" class="ff-toggle-card__input" @change="save" />
                  <div class="ff-toggle-card__icon"><i class="ti ti-lock"></i></div>
                  <div class="ff-toggle-card__body">
                    <div class="ff-toggle-card__title">{{ t.terminated_flag_label || 'Terminated / account on hold' }}</div>
                    <div class="ff-toggle-card__desc">{{ t.terminated_flag_desc || 'Fully blocks the organization\'s users after login until this flag is removed — only the open invoices remain visible.' }}</div>
                  </div>
                  <div class="ff-toggle-card__switch"><span class="ff-toggle-card__knob"></span></div>
                </label>
              </div>
            </div>
          </div>
          <!-- Section 8 (Additional References) removed per user request -->


          <!-- Warehouse Rent Starts Date Modal -->
          <UModal v-model:open="warehouseRentStartsOpen" :ui="{ content: 'sm:max-w-xl' }">
            <template #content>
              <div class="ff-date-modal ff-date-modal--purple">
                <div class="ff-date-modal__head">
                  <h3 class="ff-date-modal__title">
                    <i class="ti ti-calendar-event"></i> {{ t.accounting_warehouse_rent_starts }}
                  </h3>
                  <button type="button" class="ff-date-modal__close" @click="warehouseRentStartsOpen = false">
                    <i class="ti ti-x"></i>
                  </button>
                </div>
                <div class="ff-date-modal__body">
                  <DatePicker v-model="form.accoutingwarehouserentstarts" @handler="save" />
                </div>
                <div class="ff-date-modal__foot">
                  <button type="button" class="ff-date-modal__btn ff-date-modal__btn--ghost" @click="form.accoutingwarehouserentstarts = ''; save(); warehouseRentStartsOpen = false;">
                    {{ t.clear || 'Clear' }}
                  </button>
                  <button type="button" class="ff-date-modal__btn ff-date-modal__btn--ghost" @click="form.accoutingwarehouserentstarts = date.now('date'); save();">
                    {{ t.today || 'Today' }}
                  </button>
                  <button type="button" class="ff-date-modal__btn ff-date-modal__btn--primary ff-date-modal__btn--purple" @click="warehouseRentStartsOpen = false">
                    {{ t.done || 'Done' }}
                  </button>
                </div>
              </div>
            </template>
          </UModal>

          <!-- Contracted Signed Date Modal -->
          <UModal v-model:open="contractedSignedOpen" :ui="{ content: 'sm:max-w-xl' }">
            <template #content>
              <div class="ff-date-modal">
                <div class="ff-date-modal__head">
                  <h3 class="ff-date-modal__title">
                    <i class="ti ti-file-signature"></i> {{ t.contracted_signed }}
                  </h3>
                  <button type="button" class="ff-date-modal__close" @click="contractedSignedOpen = false">
                    <i class="ti ti-x"></i>
                  </button>
                </div>
                <div class="ff-date-modal__body">
                  <DatePicker v-model="form.contractedSigned" @handler="save" />
                </div>
                <div class="ff-date-modal__foot">
                  <button type="button" class="ff-date-modal__btn ff-date-modal__btn--ghost" @click="form.contractedSigned = ''; save(); contractedSignedOpen = false;">
                    {{ t.clear || 'Clear' }}
                  </button>
                  <button type="button" class="ff-date-modal__btn ff-date-modal__btn--ghost" @click="form.contractedSigned = date.now('date'); save();">
                    {{ t.today || 'Today' }}
                  </button>
                  <button type="button" class="ff-date-modal__btn ff-date-modal__btn--primary" @click="contractedSignedOpen = false">
                    {{ t.done || 'Done' }}
                  </button>
                </div>
              </div>
            </template>
          </UModal>

          <!-- Help Modal — rich content per key (auto-sizes to content, scrolls when tall) -->
          <UModal
            v-model:open="helpOpen"
            :ui="{
              content: 'sm:max-w-4xl max-h-[calc(100vh-60px)] flex flex-col',
              body: 'p-0 flex flex-col flex-1 min-h-0 overflow-hidden'
            }"
          >
            <template #content>
              <div class="ff-help-modal">
                <div class="ff-help-modal__head">
                  <h3 class="ff-help-modal__title">
                    <i class="ti ti-bulb"></i> {{ helpTitle }}
                  </h3>
                  <button type="button" class="ff-help-modal__close" @click="helpOpen = false">
                    <i class="ti ti-x"></i>
                  </button>
                </div>
                <div class="ff-help-modal__body">

                  <!-- ===== HELP: OUTBOUND PRICING ===== -->
                  <template v-if="helpKey === 'fulfillment_pricing'">
                    <div class="fhm-section">
                      <p class="fhm-p">{{ t.help_fp_intro || 'Each outbound shipment is billed in two parts: a one-time Base Price (charged on the FIRST line only) plus a per-item Pick Price applied to all billable items after the Free Pick Quantity is deducted.' }}</p>
                      <div class="fhm-formula">
                        <span class="fhm-var">Total</span>
                        <span class="fhm-op">=</span>
                        <span class="fhm-var">Base</span>
                        <span class="fhm-op">+</span>
                        <span class="fhm-var">Pick</span>
                        <span class="fhm-op">×</span>
                        <span>(</span>
                        <span class="fhm-var">TotalQty</span>
                        <span class="fhm-op">−</span>
                        <span class="fhm-var">Free</span>
                        <span>)</span>
                      </div>
                    </div>
                    <div class="fhm-section">
                      <h4 class="fhm-h"><i class="ti ti-list"></i>{{ t.help_fp_rules || 'Key rules' }}</h4>
                      <div class="fhm-tiers">
                        <div class="fhm-tier"><div class="fhm-tier__num">1</div><div><div class="fhm-tier__title">{{ t.help_fp_rule1_t || 'Base Price — once per shipment' }}</div><div class="fhm-tier__desc">{{ t.help_fp_rule1_d || 'Charged on the first line only. Lines 2..N have base = €0.' }}</div></div></div>
                        <div class="fhm-tier"><div class="fhm-tier__num">2</div><div><div class="fhm-tier__title">{{ t.help_fp_rule2_t || 'Free Quantity — shipment-wide' }}</div><div class="fhm-tier__desc">{{ t.help_fp_rule2_d || 'Free items are deducted across the entire shipment, not per line.' }}</div></div></div>
                        <div class="fhm-tier"><div class="fhm-tier__num">3</div><div><div class="fhm-tier__title">{{ t.help_fp_rule3_t || 'Pick Price applies to remaining items' }}</div><div class="fhm-tier__desc">{{ t.help_fp_rule3_d || '(TotalQty − Free) × Pick = variable cost.' }}</div></div></div>
                      </div>
                    </div>
                    <div class="fhm-section">
                      <h4 class="fhm-h"><i class="ti ti-bulb-filled"></i>{{ t.help_fp_example || 'Worked example — Base €2.50, Pick €1.00, Free 2' }}</h4>
                      <div class="fhm-example">
                        <div class="fhm-example__title"><i class="ti ti-package"></i>{{ t.help_fp_shipment_3lines || 'Shipment with 3 lines (5 + 3 + 2 items)' }}</div>
                        <div class="fhm-example__row"><div class="fhm-example__lbl">Line 1</div><div class="fhm-example__calc">€2.50 + (5−2)×€1.00</div><div class="fhm-example__amt">€5.50</div></div>
                        <div class="fhm-example__row"><div class="fhm-example__lbl">Line 2</div><div class="fhm-example__calc">€0.00 + 3×€1.00</div><div class="fhm-example__amt">€3.00</div></div>
                        <div class="fhm-example__row"><div class="fhm-example__lbl">Line 3</div><div class="fhm-example__calc">€0.00 + 2×€1.00</div><div class="fhm-example__amt">€2.00</div></div>
                        <div class="fhm-example__total"><span>{{ t.total || 'Total' }}</span><span>€10.50</span></div>
                      </div>
                    </div>
                  </template>

                  <!-- ===== HELP: RETURN PRICING ===== -->
                  <template v-else-if="helpKey === 'return_pricing'">
                    <div class="fhm-section">
                      <p class="fhm-p">{{ t.help_rp_intro || 'Returns are billed separately from outbound. The Return Base Price is charged once per return shipment, and the Return Pick Price applies to EVERY returned item — there is NO free quantity.' }}</p>
                      <div class="fhm-formula">
                        <span class="fhm-var">Total</span>
                        <span class="fhm-op">=</span>
                        <span class="fhm-var">ReturnBase</span>
                        <span class="fhm-op">+</span>
                        <span class="fhm-var">ReturnPick</span>
                        <span class="fhm-op">×</span>
                        <span class="fhm-var">TotalQty</span>
                      </div>
                      <div class="fhm-callout fhm-callout--warn">
                        <i class="ti ti-alert-triangle"></i>
                        <div class="fhm-callout__body">{{ t.help_rp_no_free || 'No free quantity for returns — every returned item is billable.' }}</div>
                      </div>
                    </div>
                    <div class="fhm-section">
                      <h4 class="fhm-h"><i class="ti ti-bulb-filled"></i>{{ t.help_rp_example || 'Worked example — Base €3.00, Pick €1.50' }}</h4>
                      <div class="fhm-example">
                        <div class="fhm-example__title"><i class="ti ti-arrow-back-up"></i>{{ t.help_rp_return_2lines || 'Return shipment with 2 lines (5 + 3 items)' }}</div>
                        <div class="fhm-example__row"><div class="fhm-example__lbl">Line 1</div><div class="fhm-example__calc">€3.00 + 5×€1.50</div><div class="fhm-example__amt">€10.50</div></div>
                        <div class="fhm-example__row"><div class="fhm-example__lbl">Line 2</div><div class="fhm-example__calc">€0.00 + 3×€1.50</div><div class="fhm-example__amt">€4.50</div></div>
                        <div class="fhm-example__total"><span>{{ t.total || 'Total' }}</span><span>€15.00</span></div>
                      </div>
                    </div>
                  </template>

                  <!-- ===== HELP: WAREHOUSE RENT ===== -->
                  <template v-else-if="helpKey === 'warehouse_rent'">
                    <div class="fhm-section">
                      <p class="fhm-p">{{ t.help_wr_intro || 'Two billing methods are mutually exclusive — choose ONE.' }}</p>
                      <div class="fhm-flow">
                        <div class="fhm-flow__step">
                          <div class="fhm-flow__icon"><i class="ti ti-cube"></i></div>
                          <div class="fhm-flow__title">{{ t.help_wr_volume || 'Volume (m³)' }}</div>
                          <div class="fhm-flow__desc">{{ t.help_wr_volume_d || 'Bills by actual cubic meters used. Dynamic, scales with stock.' }}</div>
                        </div>
                        <div class="fhm-flow__step">
                          <div class="fhm-flow__icon"><i class="ti ti-layout-grid"></i></div>
                          <div class="fhm-flow__title">{{ t.help_wr_flat || 'Flat-Rate' }}</div>
                          <div class="fhm-flow__desc">{{ t.help_wr_flat_d || 'Fixed monthly fees per shelf and pallet space.' }}</div>
                        </div>
                        <div class="fhm-flow__step">
                          <div class="fhm-flow__icon"><i class="ti ti-circle-off"></i></div>
                          <div class="fhm-flow__title">{{ t.help_wr_none || 'Manual / None' }}</div>
                          <div class="fhm-flow__desc">{{ t.help_wr_none_d || 'Skipped from auto-invoicing — bill manually outside the system.' }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="fhm-section">
                      <h4 class="fhm-h"><i class="ti ti-calculator"></i>{{ t.help_wr_flat_example || 'Flat-rate example' }}</h4>
                      <div class="fhm-example">
                        <div class="fhm-example__row"><div class="fhm-example__lbl">{{ t.large_shelves || 'Large Shelves' }}</div><div class="fhm-example__calc">3 × €50</div><div class="fhm-example__amt">€150</div></div>
                        <div class="fhm-example__row"><div class="fhm-example__lbl">{{ t.small_shelves || 'Small Shelves' }}</div><div class="fhm-example__calc">5 × €30</div><div class="fhm-example__amt">€150</div></div>
                        <div class="fhm-example__row"><div class="fhm-example__lbl">{{ t.pallet_spaces || 'Pallet Spaces' }}</div><div class="fhm-example__calc">10 × €25</div><div class="fhm-example__amt">€250</div></div>
                        <div class="fhm-example__total"><span>{{ t.monthly_total || 'Monthly Total' }}</span><span>€550</span></div>
                      </div>
                    </div>
                    <div class="fhm-callout fhm-callout--info">
                      <i class="ti ti-calendar-event"></i>
                      <div class="fhm-callout__body">{{ t.help_wr_date_note || '"Billing Start Date" applies to BOTH modes — leave blank to bill from the beginning, or pick a date to start billing from.' }}</div>
                    </div>
                  </template>

                  <!-- ===== HELP: DHL SHIPPING ===== -->
                  <template v-else-if="helpKey === 'dhl_shipping'">
                    <div class="fhm-section">
                      <p class="fhm-p">{{ t.help_dhl_intro || 'DHL costs are calculated per shipment using a 2-tier price lookup.' }}</p>
                      <div class="fhm-tiers">
                        <div class="fhm-tier"><div class="fhm-tier__num">2</div><div><div class="fhm-tier__title">{{ t.help_dhl_tier2 || 'Tier 2 (priority): cust_shippingcost_bpoverride' }}</div><div class="fhm-tier__desc">{{ t.help_dhl_tier2_d || 'Org/customer/weight/date specific overrides — most specific match wins.' }}</div></div></div>
                        <div class="fhm-tier"><div class="fhm-tier__num">1</div><div><div class="fhm-tier__title">{{ t.help_dhl_tier1 || 'Tier 1 (fallback): cust_shippingcost_default' }}</div><div class="fhm-tier__desc">{{ t.help_dhl_tier1_d || 'Country-only general rates if no override matches.' }}</div></div></div>
                      </div>
                    </div>
                    <div class="fhm-section">
                      <h4 class="fhm-h"><i class="ti ti-sigma"></i>{{ t.help_dhl_total || 'Total formula' }}</h4>
                      <div class="fhm-formula">
                        <span class="fhm-var">Base</span>
                        <span class="fhm-op">+</span>
                        <span class="fhm-var">Weight×€/kg</span>
                        <span class="fhm-op">+</span>
                        <span class="fhm-var">CO₂</span>
                        <span class="fhm-op">+</span>
                        <span class="fhm-var">Energy<sub>DE</sub></span>
                        <span class="fhm-op">+</span>
                        <span class="fhm-var">Peak<sub>seasonal</sub></span>
                      </div>
                      <div class="fhm-bars">
                        <div class="fhm-bar"><div class="fhm-bar__lbl">{{ t.base_fee || 'Base fee' }}</div><div class="fhm-bar__track"><div class="fhm-bar__fill" style="width:60%"></div></div><div class="fhm-bar__val">€6.00</div></div>
                        <div class="fhm-bar"><div class="fhm-bar__lbl">{{ t.weight_addon || 'Weight addon' }}</div><div class="fhm-bar__track"><div class="fhm-bar__fill" style="width:25%"></div></div><div class="fhm-bar__val">€2.50</div></div>
                        <div class="fhm-bar"><div class="fhm-bar__lbl">{{ t.co2 || 'CO₂' }}</div><div class="fhm-bar__track"><div class="fhm-bar__fill" style="width:5%"></div></div><div class="fhm-bar__val">€0.19</div></div>
                        <div class="fhm-bar"><div class="fhm-bar__lbl">{{ t.energy || 'Energy (DE)' }}</div><div class="fhm-bar__track"><div class="fhm-bar__fill" style="width:7%"></div></div><div class="fhm-bar__val">€0.75</div></div>
                        <div class="fhm-bar"><div class="fhm-bar__lbl">{{ t.peak || 'Peak (seasonal)' }}</div><div class="fhm-bar__track"><div class="fhm-bar__fill" style="width:3%"></div></div><div class="fhm-bar__val">€0.30</div></div>
                      </div>
                    </div>
                    <div class="fhm-callout fhm-callout--warn">
                      <i class="ti ti-alert-triangle"></i>
                      <div class="fhm-callout__body">{{ t.help_dhl_foreign_warn || 'When "Customer uses own DHL account" is enabled, ALL internal shipping cost calculations are SKIPPED for this customer.' }}</div>
                    </div>
                  </template>

                  <!-- ===== HELP: KLEINPAKET ===== -->
                  <template v-else-if="helpKey === 'kleinpaket'">
                    <div class="fhm-section">
                      <p class="fhm-p">{{ t.help_kp_intro || 'Both conditions must be true to apply the special Kleinpaket rate.' }}</p>
                      <div class="fhm-flow">
                        <div class="fhm-flow__step">
                          <div class="fhm-flow__icon"><i class="ti ti-package"></i></div>
                          <div class="fhm-flow__title">{{ t.help_kp_cond1 || 'Shipment marked Kleinpaket' }}</div>
                          <div class="fhm-flow__desc"><code>m_inout.isdhlkleinpaket = Y</code></div>
                        </div>
                        <div class="fhm-flow__step">
                          <div class="fhm-flow__icon"><i class="ti ti-user-check"></i></div>
                          <div class="fhm-flow__title">{{ t.help_kp_cond2 || 'Customer Kleinpaket-enabled' }}</div>
                          <div class="fhm-flow__desc"><code>c_bpartner.isaccountingkleinpaket = Y</code></div>
                        </div>
                        <div class="fhm-flow__step">
                          <div class="fhm-flow__icon"><i class="ti ti-currency-euro"></i></div>
                          <div class="fhm-flow__title">{{ t.help_kp_result || 'Special rate applied' }}</div>
                          <div class="fhm-flow__desc">{{ t.help_kp_result_d || 'Otherwise standard pricing applies.' }}</div>
                        </div>
                      </div>
                      <div class="fhm-callout fhm-callout--warn">
                        <i class="ti ti-shield-off"></i>
                        <div class="fhm-callout__body">{{ t.help_kp_disable_warn || '"Disable Kleinpaket Price Limit" removes the upper-cap protection — use with care.' }}</div>
                      </div>
                    </div>
                  </template>

                  <!-- ===== HELP: PACKAGING ===== -->
                  <template v-else-if="helpKey === 'packaging'">
                    <div class="fhm-section">
                      <p class="fhm-p">{{ t.help_pkg_intro || 'Per-parcel packaging-material cost by parcel size. Leave any field blank to fall back to the system-wide AD_Client default for that size.' }}</p>
                      <div class="fhm-tiers">
                        <div class="fhm-tier"><div class="fhm-tier__num" style="background:linear-gradient(135deg,#14b8a6,#06b6d4)">KP</div><div><div class="fhm-tier__title">{{ t.kleinpaket || 'Kleinpaket' }}</div><div class="fhm-tier__desc">{{ t.help_pkg_kp || 'Smallest parcel size — minimal packaging.' }}</div></div></div>
                        <div class="fhm-tier"><div class="fhm-tier__num" style="background:linear-gradient(135deg,#22c55e,#16a34a)">S</div><div><div class="fhm-tier__title">{{ t.standard || 'Standard' }}</div><div class="fhm-tier__desc">{{ t.help_pkg_s || 'Default everyday parcel.' }}</div></div></div>
                        <div class="fhm-tier"><div class="fhm-tier__num" style="background:linear-gradient(135deg,#eab308,#ca8a04)">M</div><div><div class="fhm-tier__title">{{ t.medium || 'Medium' }}</div><div class="fhm-tier__desc">{{ t.help_pkg_m || 'Medium parcel — standard box + filler.' }}</div></div></div>
                        <div class="fhm-tier"><div class="fhm-tier__num" style="background:linear-gradient(135deg,#f97316,#ea580c)">L</div><div><div class="fhm-tier__title">{{ t.large || 'Large' }}</div><div class="fhm-tier__desc">{{ t.help_pkg_l || 'Larger box, more filler material.' }}</div></div></div>
                        <div class="fhm-tier"><div class="fhm-tier__num" style="background:linear-gradient(135deg,#ef4444,#dc2626)">XL</div><div><div class="fhm-tier__title">{{ t.extra_large || 'Extra Large' }}</div><div class="fhm-tier__desc">{{ t.help_pkg_xl || 'Largest box for oversized goods.' }}</div></div></div>
                      </div>
                      <div class="fhm-callout fhm-callout--info">
                        <i class="ti ti-info-circle"></i>
                        <div class="fhm-callout__body">{{ t.help_pkg_fallback || 'Empty fields cascade to the AD_Client system default automatically — no need to repeat values.' }}</div>
                      </div>
                    </div>
                  </template>

                  <!-- ===== HELP: PRICING HIERARCHY ===== -->
                  <template v-else-if="helpKey === 'pricing_hierarchy'">
                    <div class="fhm-section">
                      <p class="fhm-p">{{ t.help_ph_intro || 'Effective price is resolved highest-priority-first. The first tier with a value wins.' }}</p>
                      <div class="fhm-tiers">
                        <div class="fhm-tier"><div class="fhm-tier__num">1</div><div><div class="fhm-tier__title">{{ t.help_ph_t1 || 'PRODUCT custom price' }}</div><div class="fhm-tier__desc"><code>iscustomfulfillmentprice = Y</code> — rare overrides for special products.</div></div></div>
                        <div class="fhm-tier"><div class="fhm-tier__num">2</div><div><div class="fhm-tier__title">{{ t.help_ph_t2 || 'RULE pricing' }}</div><div class="fhm-tier__desc"><code>cust_fulfillmentproductpricingrules</code> — granular, weight-tier rules.</div></div></div>
                        <div class="fhm-tier"><div class="fhm-tier__num">3</div><div><div class="fhm-tier__title">{{ t.help_ph_t3 || 'BUSINESS PARTNER defaults' }}</div><div class="fhm-tier__desc">{{ t.help_ph_t3_d || 'The values you set on this form.' }}</div></div></div>
                        <div class="fhm-tier"><div class="fhm-tier__num">4</div><div><div class="fhm-tier__title">{{ t.help_ph_t4 || 'AD_CLIENT system fallback' }}</div><div class="fhm-tier__desc">{{ t.help_ph_t4_d || 'Final fallback when nothing else is set.' }}</div></div></div>
                      </div>
                    </div>
                  </template>

                </div>
              </div>
            </template>
          </UModal>
        </template>
      </template>
      <!-- Preferences and Sales tabs removed — kept fields (greeting, language, first_sale, actual_life_time_value, DUNS, send_email) merged into Partner tab. Hidden fields: flat_discount, min_shelf_life, dunning, order_reference, document_copies, discount_printed, invoice_print_format, order_description, share, acquisition_cost, potential_life_time_value, sales_volume, employees, NAICS. -->

      <!-- Sales Rep selector modal — opens overlay so dropdown isn't clipped -->
      <UModal v-model:open="salesRepModalOpen" :ui="{ content: 'sm:max-w-xl' }">
        <template #content>
          <div class="ff-date-modal ff-date-modal--blue">
            <div class="ff-date-modal__head">
              <h3 class="ff-date-modal__title">
                <i class="ti ti-user-cog"></i> {{ t.representative_agent }}
              </h3>
              <button type="button" class="ff-date-modal__close" @click="salesRepModalOpen = false">
                <i class="ti ti-x"></i>
              </button>
            </div>
            <div class="ff-date-modal__body ff-modal-picker-body">
              <div class="ff-modal-picker-hint">
                {{ t.sales_rep_modal_hint || 'Filtered to active employees flagged as Sales Lead.' }}
              </div>
              <ClientOnly>
                <SelectBox
                  v-model="form.salesRepId"
                  :options="getOptions?.['sales_reps']?.records || [{id: form.salesRepId, Name: form.salesRep}]"
                  prop="Name"
                  dataprop="id"
                  datatype="string"
                  :size="10"
                  @click="setOptions('admin/users/sales-reps', 'sales_reps')"
                  @change="(val, opt) => { form.salesRep = opt?.Name || ''; save(); }"
                  :loading="loading?.['sales_reps'] ?? true"
                />
              </ClientOnly>
            </div>
            <div class="ff-date-modal__foot">
              <button type="button" class="ff-date-modal__btn ff-date-modal__btn--ghost" @click="form.salesRepId = ''; form.salesRep = ''; save(); salesRepModalOpen = false;">
                {{ t.clear || 'Clear' }}
              </button>
              <button type="button" class="ff-date-modal__btn ff-date-modal__btn--primary ff-date-modal__btn--blue" @click="salesRepModalOpen = false">
                {{ t.done || 'Done' }}
              </button>
            </div>
          </div>
        </template>
      </UModal>

    </div>

  </div>
</template>

<style scoped>
/* ===== Fulfillment Tab — Fancy Sectioned Design ===== */

.ff-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid;
  position: relative;
}
.ff-info-banner--blue {
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(59,130,246,0.02));
  border-color: rgba(59,130,246,0.25);
  color: var(--theme-text-primary, #1f2937);
}
.ff-info-banner__icon {
  font-size: 22px;
  color: #3b82f6;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.ff-info-banner__body { flex-grow: 1; }
.ff-info-banner__title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.ff-info-banner__text { font-size: 13px; opacity: 0.85; line-height: 1.4; }
.ff-info-banner__btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.ff-info-banner__btn:hover { background: #2563eb; }

/* Sections */
.ff-section {
  border-radius: 14px;
  padding: 22px 20px 20px;
  margin-bottom: 18px;
  border: 1px solid var(--theme-border, #e5e7eb);
  background: var(--theme-surface, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  position: relative;
  /* Removed overflow:hidden — it was clipping tooltips and popovers */
}
.ff-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
}
.ff-section--green::before  { background: linear-gradient(90deg, #10b981, #34d399); }
.ff-section--orange::before { background: linear-gradient(90deg, #f97316, #fb923c); }
.ff-section--purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.ff-section--yellow::before { background: linear-gradient(90deg, #eab308, #facc15); }
.ff-section--teal::before   { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.ff-section--pink::before   { background: linear-gradient(90deg, #ec4899, #f472b6); }
.ff-section--gray::before   { background: linear-gradient(90deg, #6b7280, #9ca3af); }
.ff-section--slate::before  { background: linear-gradient(90deg, #475569, #64748b); }
.ff-section--cyan::before   { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
.ff-section--blue::before   { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

.ff-section__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--theme-border, #e5e7eb);
}
.ff-section__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.ff-section--green  .ff-section__icon { background: rgba(16,185,129,0.12);  color: #059669; }
.ff-section--orange .ff-section__icon { background: rgba(249,115,22,0.12);  color: #ea580c; }
.ff-section--purple .ff-section__icon { background: rgba(139,92,246,0.12);  color: #7c3aed; }
.ff-section--yellow .ff-section__icon { background: rgba(234,179,8,0.14);   color: #ca8a04; }
.ff-section--teal   .ff-section__icon { background: rgba(20,184,166,0.12);  color: #0d9488; }
.ff-section--pink   .ff-section__icon { background: rgba(236,72,153,0.12);  color: #db2777; }
.ff-section--gray   .ff-section__icon { background: rgba(107,114,128,0.12); color: #4b5563; }
.ff-section--slate  .ff-section__icon { background: rgba(71,85,105,0.12);   color: #475569; }
.ff-section--cyan   .ff-section__icon { background: rgba(6,182,212,0.12);   color: #0891b2; }
.ff-section--blue   .ff-section__icon { background: rgba(59,130,246,0.12);  color: #1d4ed8; }

.ff-section__title-wrap { flex-grow: 1; }
.ff-section__title { font-size: 16px; font-weight: 700; margin: 0; line-height: 1.2; color: var(--theme-text-primary, #111827); }
.ff-section__sub   { font-size: 12px; opacity: 0.7; margin: 2px 0 0; }

.ff-help-pill {
  background: var(--theme-bg-tertiary, #f3f4f6);
  color: var(--theme-text-primary, #374151);
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all 0.2s;
}
.ff-help-pill:hover { background: var(--theme-bg-hover, #e5e7eb); transform: translateY(-1px); }
.ff-help-pill--sm { padding: 3px 8px; font-size: 11px; margin-left: 6px; }

/* Fields */
.ff-field { margin-bottom: 14px; }
.ff-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--theme-text-primary, #374151);
  display: flex; align-items: center; gap: 6px;
}
.ff-label i { color: var(--theme-text-muted, #9ca3af); }
.ff-input { width: 100%; }
.ff-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.ff-input-prefix, .ff-input-suffix {
  display: flex; align-items: center;
  padding: 0 10px;
  background: var(--theme-bg-tertiary, #f3f4f6);
  border: 1px solid var(--theme-border, #e5e7eb);
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-text-muted, #6b7280);
}
.ff-input-prefix { border-right: none; border-radius: 6px 0 0 6px; }
.ff-input-suffix { border-left: none;  border-radius: 0 6px 6px 0; }
.ff-input-wrap .ff-input { border-radius: 0; }
.ff-input-wrap > .ff-input:first-child { border-radius: 6px 0 0 6px; }
.ff-input-wrap > .ff-input:last-child  { border-radius: 0 6px 6px 0; }
.ff-input-wrap > .ff-input:only-child  { border-radius: 6px; }

.ff-hint {
  font-size: 11px;
  color: var(--theme-text-muted, #9ca3af);
  margin-top: 4px;
  font-style: italic;
}

.ff-subhead {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--theme-text-muted, #6b7280);
  margin: 12px 0 8px;
  display: flex; align-items: center; gap: 4px;
}

/* Radio cards (mutually exclusive warehouse rent modes) */
.ff-radio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ff-radio-card {
  position: relative;
  cursor: pointer;
  border: 2px solid var(--theme-border, #e5e7eb);
  border-radius: 12px;
  padding: 14px;
  transition: all 0.2s;
  background: var(--theme-surface, #fff);
}
.ff-radio-card:hover { border-color: #a78bfa; }
.ff-radio-card.is-active {
  border-color: #8b5cf6;
  background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(139,92,246,0.02));
  box-shadow: 0 2px 8px rgba(139,92,246,0.15);
}
.ff-radio-card__input { position: absolute; opacity: 0; pointer-events: none; }
.ff-radio-card__inner { display: flex; flex-direction: column; gap: 6px; }
.ff-radio-card__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(139,92,246,0.12);
  color: #7c3aed;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.ff-radio-card__title { font-weight: 700; font-size: 13px; }
.ff-radio-card__desc  { font-size: 11px; opacity: 0.7; line-height: 1.35; }

/* Mode panels */
.ff-mode-panel {
  border-radius: 10px;
  padding: 14px;
  background: var(--theme-bg-tertiary, #f9fafb);
  border: 1px dashed var(--theme-border, #e5e7eb);
}

/* Flat rate grid */
.ff-flat-grid { display: flex; flex-direction: column; gap: 10px; }
.ff-flat-row {
  display: grid;
  grid-template-columns: 36px 1fr 130px 160px 100px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 8px;
}
.ff-flat-row__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(139,92,246,0.12);
  color: #7c3aed;
  display: flex; align-items: center; justify-content: center;
}
.ff-flat-row__label { font-weight: 600; font-size: 13px; }
.ff-mini-label { font-size: 10px; text-transform: uppercase; opacity: 0.6; display: block; margin-bottom: 2px; }
.ff-flat-row__total {
  font-weight: 700;
  text-align: right;
  color: #7c3aed;
  font-size: 13px;
}
.ff-flat-row--total {
  background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(139,92,246,0.02));
  border-color: rgba(139,92,246,0.3);
}
.ff-flat-row__total--big { font-size: 18px; }

/* Toggle cards (DHL, kleinpaket, fee report etc.) */
.ff-toggle-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--theme-surface, #fff);
  margin-bottom: 8px;
}
.ff-toggle-card:hover { border-color: #facc15; }
.ff-toggle-card.is-on {
  border-color: #eab308;
  background: linear-gradient(135deg, rgba(234,179,8,0.08), rgba(234,179,8,0.02));
}
.ff-toggle-card__input { position: absolute; opacity: 0; pointer-events: none; }
.ff-toggle-card__icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--theme-bg-tertiary, #f3f4f6);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--theme-text-muted, #6b7280);
  flex-shrink: 0;
}
.ff-toggle-card.is-on .ff-toggle-card__icon { background: rgba(234,179,8,0.18); color: #ca8a04; }
.ff-toggle-card__body { flex-grow: 1; min-width: 0; }
.ff-toggle-card__title { font-weight: 700; font-size: 13px; }
.ff-toggle-card__desc  { font-size: 11px; opacity: 0.7; line-height: 1.35; margin-top: 2px; }
.ff-toggle-card__switch {
  width: 40px; height: 22px;
  border-radius: 999px;
  background: var(--theme-border, #d1d5db);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.ff-toggle-card__knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ff-toggle-card.is-on .ff-toggle-card__switch { background: #eab308; }
.ff-toggle-card.is-on .ff-toggle-card__knob   { transform: translateX(18px); }

.ff-warn-banner {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.3);
  color: #c2410c;
  font-size: 13px;
  font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.ff-warn-banner i { font-size: 18px; }

.ff-disabled-area { opacity: 0.5; pointer-events: none; filter: grayscale(0.4); }

/* Packet cards */
.ff-packet-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.ff-packet-card {
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 12px;
  padding: 14px 12px;
  background: var(--theme-surface, #fff);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  transition: all 0.2s;
}
.ff-packet-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(20,184,166,0.15); }
.ff-packet-card__badge {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.ff-packet-card__badge--kp { background: linear-gradient(135deg, #14b8a6, #06b6d4); }
.ff-packet-card__badge--s  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.ff-packet-card__badge--m  { background: linear-gradient(135deg, #eab308, #ca8a04); }
.ff-packet-card__badge--l  { background: linear-gradient(135deg, #f97316, #ea580c); }
.ff-packet-card__badge--xl { background: linear-gradient(135deg, #ef4444, #dc2626); }
.ff-packet-card__name { font-size: 12px; font-weight: 600; }

/* Date trigger button + modal */
.ff-date-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--theme-border, #d1d5db);
  background: var(--theme-surface, #fff);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--theme-text-primary, #374151);
  text-align: left;
  transition: all 0.15s;
  min-height: 38px;
}
.ff-date-trigger:hover {
  border-color: #ec4899;
  background: rgba(236,72,153,0.04);
}
.ff-date-trigger > i:first-child {
  color: #ec4899;
  font-size: 16px;
  flex-shrink: 0;
}
.ff-date-trigger--purple:hover {
  border-color: #8b5cf6;
  background: rgba(139,92,246,0.04);
}
.ff-date-trigger--purple > i:first-child { color: #8b5cf6; }
.ff-date-trigger--blue:hover {
  border-color: #3b82f6;
  background: rgba(59,130,246,0.04);
}
.ff-date-trigger--blue > i:first-child { color: #3b82f6; }
.ff-date-trigger__value { flex-grow: 1; }
.ff-date-trigger__chev {
  color: var(--theme-text-muted, #9ca3af);
  font-size: 14px;
  flex-shrink: 0;
}

.ff-date-modal {
  background: var(--theme-surface, #fff);
  border-radius: 14px;
  width: 520px;
  max-width: 95vw;
  overflow: visible;
}
.ff-date-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--theme-border, #e5e7eb);
  background: linear-gradient(135deg, rgba(236,72,153,0.10), rgba(236,72,153,0.02));
  border-radius: 14px 14px 0 0;
}
.ff-date-modal__title {
  font-size: 18px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 10px;
  color: var(--theme-text-primary, #111827);
}
.ff-date-modal__title i { color: #ec4899; font-size: 22px; }
.ff-date-modal__close {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; color: var(--theme-text-muted, #6b7280);
  padding: 6px; border-radius: 6px;
}
.ff-date-modal__close:hover { background: var(--theme-bg-hover, #f3f4f6); }
.ff-date-modal__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 440px;
}

/* Force tedir-calendar's pop-out picker to render INLINE (always open) inside the modal */
.ff-date-modal__body :deep(.pickerContent) {
  position: static !important;
  display: block !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px;
  width: 100%;
  min-width: 360px;
  box-shadow: none;
  margin-top: 8px;
}
.ff-date-modal__body :deep(.pickerBackdrop) { display: none !important; }
.ff-date-modal__body :deep(.pickerWrap) { width: 100%; }
.ff-date-modal__body :deep(.pickerWrap input.input) {
  font-size: 15px;
  padding: 10px 12px;
  width: 100%;
}
/* Make calendar grid larger and readable */
.ff-date-modal__body :deep(.tedirCalendar .dayGrid),
.ff-date-modal__body :deep(.tedirCalendar .monthGrid) {
  width: 100% !important;
}
.ff-date-modal__body :deep(.tedirCalendar .dayItem),
.ff-date-modal__body :deep(.tedirCalendar .monthItem) {
  font-size: 14px;
  padding: 0.6rem 0 !important;
}
.ff-date-modal__body :deep(.tedirCalendar .weekDay),
.ff-date-modal__body :deep(.tedirCalendar .weekItem) {
  font-size: 13px;
  width: 50px !important;
}
.ff-date-modal__body :deep(.tedirDateControl) {
  font-size: 14px;
  margin-bottom: 8px;
}
.ff-date-modal__body :deep(.tedirDateControl select),
.ff-date-modal__body :deep(.tedirDateControl input) {
  font-size: 14px;
  padding: 6px 8px;
}
.ff-date-modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--theme-border, #e5e7eb);
  background: var(--theme-bg-tertiary, #f9fafb);
}
.ff-date-modal__btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.ff-date-modal__btn--ghost {
  background: transparent;
  border-color: var(--theme-border, #d1d5db);
  color: var(--theme-text-primary, #374151);
}
.ff-date-modal__btn--ghost:hover { background: var(--theme-bg-hover, #f3f4f6); }
.ff-date-modal__btn--primary {
  background: #ec4899; color: #fff;
}
.ff-date-modal__btn--primary:hover { background: #db2777; }
.ff-date-modal__btn--purple { background: #8b5cf6; }
.ff-date-modal__btn--purple:hover { background: #7c3aed; }

.ff-date-modal--purple .ff-date-modal__head {
  background: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(139,92,246,0.02));
}
.ff-date-modal--purple .ff-date-modal__title i { color: #8b5cf6; }

.ff-date-modal__btn--blue { background: #3b82f6; }
.ff-date-modal__btn--blue:hover { background: #2563eb; }
.ff-date-modal--blue .ff-date-modal__head {
  background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(59,130,246,0.02));
}
.ff-date-modal--blue .ff-date-modal__title i { color: #3b82f6; }

/* Modal SelectBox picker — keep dropdown visible inside modal */
.ff-modal-picker-body { min-height: 360px; }
.ff-modal-picker-body :deep(.pickerContent) {
  position: static !important;
  display: block !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 10px;
  width: 100%;
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.ff-modal-picker-body :deep(.pickerBackdrop) { display: none !important; }
.ff-modal-picker-body :deep(.pickerWrap) { width: 100%; }
.ff-modal-picker-body :deep(.pickerWrap input.input),
.ff-modal-picker-body :deep(.pickerWrap input.search) {
  font-size: 14px;
  padding: 10px 12px;
  width: 100%;
}
.ff-modal-picker-hint {
  font-size: 12px;
  color: var(--theme-text-muted, #6b7280);
  font-style: italic;
  background: var(--theme-bg-tertiary, #f9fafb);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
}

/* Help modal */
.ff-help-modal {
  background: var(--theme-surface, #fff);
  border-radius: 14px;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  /* Constrain to viewport so the body can scroll if content is taller */
  max-height: calc(100vh - 60px);
  overflow: hidden;
}
.ff-help-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--theme-border, #e5e7eb);
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.04));
  flex-shrink: 0;
}
.ff-help-modal__title {
  font-size: 20px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 10px;
  color: var(--theme-text-primary, #111827);
}
.ff-help-modal__title i { color: #f59e0b; font-size: 24px; }
.ff-help-modal__close {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; color: var(--theme-text-muted, #6b7280);
  padding: 6px; border-radius: 6px;
}
.ff-help-modal__close:hover { background: var(--theme-bg-hover, #f3f4f6); }
.ff-help-modal__body {
  padding: 24px 28px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.ff-help-modal__body pre {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.7;
  color: var(--theme-text-primary, #374151);
  margin: 0;
  background: transparent;
  padding: 0;
}

/* ===== Z-index fix: SelectBox / DatePicker dropdowns must float over later sections ===== */
:deep(.pickerContent) {
  z-index: 1500 !important;
}
:deep(.pickerWrap) {
  position: relative;
  z-index: 5;
}
/* When the dropdown is open inside a SelectBox, raise its parent ff-section so
   the picker overlay is not covered by the next section's background. */
.ff-section:has(.pickerWrap .pickerContent[style*="display: block"]),
.ff-section:focus-within {
  z-index: 50;
  position: relative;
}

/* ===== Top Strip: Contract + Hierarchy (Customer Profile hidden) ===== */
.ff-top-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 12px;
}
.ff-top-strip--2 { grid-template-columns: 1fr 1.4fr; }
.ff-top-strip > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--theme-border, #e5e7eb);
  background: var(--theme-surface, #fff);
}
.ff-top-strip__contract { background: linear-gradient(135deg, rgba(236,72,153,0.06), rgba(236,72,153,0.01)); border-color: rgba(236,72,153,0.25); }
.ff-top-strip__profile  { background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(20,184,166,0.01)); border-color: rgba(20,184,166,0.25); }
.ff-top-strip__hierarchy { background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.04)); border-color: rgba(59,130,246,0.25); }
.ff-top-strip__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.ff-top-strip__contract .ff-top-strip__icon  { background: rgba(236,72,153,0.15); color: #db2777; }
.ff-top-strip__profile  .ff-top-strip__icon  { background: rgba(20,184,166,0.15); color: #0d9488; }
.ff-top-strip__hierarchy .ff-top-strip__icon { background: rgba(59,130,246,0.15); color: #1d4ed8; }
.ff-top-strip__body { flex-grow: 1; min-width: 0; }
.ff-top-strip__label {
  font-size: 12px; font-weight: 700;
  color: var(--theme-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
  display: flex; align-items: center;
}
.ff-top-strip__sub { font-size: 12px; color: var(--theme-text-muted, #6b7280); }
.ff-top-strip__btn {
  background: rgba(59,130,246,0.12);
  color: #1d4ed8;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.ff-top-strip__btn:hover { background: rgba(59,130,246,0.2); }

.ff-date-trigger--inline {
  padding: 6px 10px;
  font-size: 13px;
  min-height: 32px;
}

/* Aligned row — equal field heights for SelectBoxes */
.ff-aligned-row { align-items: stretch; }
.ff-aligned-row .ff-field { height: 100%; display: flex; flex-direction: column; }

/* Callout mini */
.ff-callout-mini {
  padding: 10px 14px;
  background: rgba(107,114,128,0.08);
  border-radius: 10px;
  border: 1px dashed var(--theme-border, #d1d5db);
  font-size: 13px;
  color: var(--theme-text-muted, #6b7280);
  display: flex; align-items: center; gap: 8px;
}
.ff-callout-mini i { font-size: 16px; }

/* Calculator chip */
.ff-calc__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 18px;
  border-radius: 4px;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  margin-right: 4px;
}

/* ===== Fancy Flag Cards (grouped checkboxes with icons) ===== */
.ff-flag-group {
  margin-bottom: 14px;
}
.ff-flag-group:last-child { margin-bottom: 0; }
.ff-flag-group__head {
  font-size: 12px;
  font-weight: 700;
  color: var(--theme-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.ff-flag-group__head i { color: var(--theme-text-muted, #9ca3af); font-size: 14px; }
.ff-flag-group__sub {
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--theme-text-muted, #9ca3af);
  margin-left: 6px;
  font-style: italic;
}
.ff-flag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.ff-flag {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px;
  padding: 14px 10px 10px;
  border-radius: 12px;
  border: 2px solid var(--theme-border, #e5e7eb);
  background: var(--theme-surface, #fff);
  cursor: pointer;
  transition: all 0.15s;
}
.ff-flag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.ff-flag__input { position: absolute; opacity: 0; pointer-events: none; }
.ff-flag__icon {
  font-size: 24px;
  color: var(--theme-text-muted, #9ca3af);
  margin-bottom: 2px;
}
.ff-flag__lbl {
  font-size: 13px;
  font-weight: 700;
  color: var(--theme-text-primary, #1f2937);
}
.ff-flag__hint {
  font-size: 11px;
  color: var(--theme-text-muted, #9ca3af);
  line-height: 1.35;
}

/* Color variants — when enabled */
.ff-flag.is-on { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.ff-flag--green.is-on  { border-color: #10b981; background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(16,185,129,0.02)); }
.ff-flag--green.is-on .ff-flag__icon { color: #047857; }

.ff-flag--blue.is-on   { border-color: #3b82f6; background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(59,130,246,0.02)); }
.ff-flag--blue.is-on .ff-flag__icon { color: #1d4ed8; }

.ff-flag--orange.is-on { border-color: #f97316; background: linear-gradient(135deg, rgba(249,115,22,0.10), rgba(249,115,22,0.02)); }
.ff-flag--orange.is-on .ff-flag__icon { color: #ea580c; }

.ff-flag--teal.is-on   { border-color: #14b8a6; background: linear-gradient(135deg, rgba(20,184,166,0.10), rgba(20,184,166,0.02)); }
.ff-flag--teal.is-on .ff-flag__icon { color: #0d9488; }

.ff-flag--yellow.is-on { border-color: #eab308; background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(234,179,8,0.02)); }
.ff-flag--yellow.is-on .ff-flag__icon { color: #ca8a04; }

.ff-flag--pink.is-on   { border-color: #ec4899; background: linear-gradient(135deg, rgba(236,72,153,0.10), rgba(236,72,153,0.02)); }
.ff-flag--pink.is-on .ff-flag__icon { color: #db2777; }

.ff-flag--gray.is-on   { border-color: #6b7280; background: linear-gradient(135deg, rgba(107,114,128,0.10), rgba(107,114,128,0.02)); }
.ff-flag--gray.is-on .ff-flag__icon { color: #4b5563; }

/* ===== CSS-only Per-Field Help Icon (reliable on any browser) ===== */
.ff-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--theme-bg-tertiary, #f3f4f6);
  color: var(--theme-text-muted, #9ca3af);
  font-size: 12px;
  cursor: help;
  position: relative;
  margin-left: 4px;
  transition: all 0.15s;
}
.ff-info:hover {
  background: #3b82f6;
  color: #fff;
  transform: scale(1.1);
}
.ff-info::before, .ff-info::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 1000;
}
.ff-info::before {
  content: attr(data-tip);
  background: #1f2937;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  white-space: pre-line;
  width: max-content;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  text-align: left;
}
.ff-info::after {
  content: '';
  border: 6px solid transparent;
  border-top-color: #1f2937;
  bottom: calc(100% + 2px);
  width: 0; height: 0;
}
.ff-info:hover::before, .ff-info:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
/* Anchor to the right when near right edge */
.ff-info--right::before { left: auto; right: 0; transform: none; }
.ff-info--right::after  { left: auto; right: 6px; transform: none; }
.ff-info--right:hover::before { transform: translateY(-2px); }
.ff-info--right:hover::after  { transform: translateY(-2px); }

/* ===== Live Calculator Card (collapsible — closed by default) ===== */
.ff-calc {
  margin-top: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.04));
  border: 1px dashed rgba(59,130,246,0.35);
  transition: all 0.2s;
  overflow: hidden;
}
.ff-calc.is-closed-clickable { cursor: pointer; }
.ff-calc.is-closed-clickable:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(139,92,246,0.06));
  border-color: rgba(59,130,246,0.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}
.ff-calc__head--btn {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 14px 16px;
  text-align: left;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--theme-text-primary, #1f2937);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ff-calc__head-text { flex-grow: 1; }
.ff-calc__head-result {
  background: rgba(59,130,246,0.15);
  color: #1d4ed8;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.ff-calc__head-chev {
  color: var(--theme-text-muted, #6b7280);
  font-size: 18px;
  transition: transform 0.2s;
}
.ff-calc.is-open .ff-calc__head-chev { transform: rotate(180deg); }
.ff-calc__body {
  padding: 0 16px 14px;
  border-top: 1px dashed rgba(59,130,246,0.25);
  cursor: default;
}
.ff-calc__body .ff-calc__inputs { margin-top: 14px; }
.ff-calc__head { /* legacy fallback if any non-collapsible callsite */
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--theme-text-primary, #1f2937);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ff-calc__head i { color: #3b82f6; font-size: 18px; }
.ff-calc__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.ff-calc__input-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ff-calc__input-label {
  font-size: 11px;
  color: var(--theme-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.ff-calc__input {
  padding: 6px 8px;
  border: 1px solid var(--theme-border, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  background: var(--theme-surface, #fff);
}
.ff-calc__breakdown {
  background: var(--theme-surface, #fff);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 12.5px;
  color: var(--theme-text-primary, #374151);
  border: 1px solid var(--theme-border, #e5e7eb);
}
.ff-calc__line {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
}
.ff-calc__line--total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 2px dashed var(--theme-border, #e5e7eb);
  font-weight: 800;
  font-size: 15px;
  color: #1d4ed8;
}
.ff-calc__formula {
  margin-top: 8px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--theme-text-muted, #6b7280);
  text-align: center;
}

/* ===== Rich Help Modal Content ===== */
.fhm-section {
  margin-bottom: 22px;
}
.fhm-section:last-child { margin-bottom: 0; }
.fhm-h {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--theme-text-primary, #111827);
  display: flex; align-items: center; gap: 8px;
}
.fhm-h i { color: #3b82f6; font-size: 20px; }
.fhm-p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--theme-text-primary, #374151);
  margin: 0 0 10px;
}
.fhm-formula {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #e2e8f0;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  margin: 10px 0;
  text-align: center;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.15);
}
.fhm-formula .fhm-op { color: #fbbf24; margin: 0 6px; }
.fhm-formula .fhm-var { color: #86efac; }
.fhm-formula .fhm-num { color: #93c5fd; }
.fhm-example {
  background: var(--theme-bg-tertiary, #f9fafb);
  border-radius: 10px;
  padding: 14px 16px;
  border-left: 4px solid #10b981;
  margin: 10px 0;
}
.fhm-example__title {
  font-size: 13px;
  font-weight: 700;
  color: #047857;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.fhm-example__row {
  display: grid;
  grid-template-columns: 70px 1fr 100px;
  gap: 10px;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--theme-border, #e5e7eb);
  align-items: center;
}
.fhm-example__row:last-child { border-bottom: none; }
.fhm-example__lbl { font-weight: 700; color: var(--theme-text-primary, #1f2937); }
.fhm-example__calc { color: var(--theme-text-muted, #6b7280); font-family: monospace; font-size: 13px; }
.fhm-example__amt { text-align: right; font-weight: 700; color: #047857; }
.fhm-example__total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 2px solid #10b981;
  font-size: 16px;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800;
  color: #047857;
}

.fhm-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.fhm-tier {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--theme-border, #e5e7eb);
  background: var(--theme-surface, #fff);
  align-items: center;
}
.fhm-tier__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 14px;
}
.fhm-tier__title { font-weight: 700; font-size: 14px; color: var(--theme-text-primary, #111827); }
.fhm-tier__desc  { font-size: 13px; color: var(--theme-text-muted, #6b7280); margin-top: 2px; }

.fhm-bars {
  margin: 10px 0;
}
.fhm-bar {
  display: grid;
  grid-template-columns: 130px 1fr 70px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.fhm-bar__lbl { font-weight: 600; color: var(--theme-text-primary, #1f2937); }
.fhm-bar__track {
  height: 14px;
  background: var(--theme-bg-tertiary, #f3f4f6);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.fhm-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: width 0.4s;
}
.fhm-bar__val { text-align: right; font-weight: 700; color: #1d4ed8; font-size: 13px; }

.fhm-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 14px 0;
  flex-wrap: wrap;
}
.fhm-flow__step {
  flex: 1; min-width: 130px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 12px 8px;
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 10px;
  background: var(--theme-surface, #fff);
  text-align: center;
  position: relative;
}
.fhm-flow__step + .fhm-flow__step { margin-left: 24px; }
.fhm-flow__step + .fhm-flow__step::before {
  content: '→';
  position: absolute;
  left: -22px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #94a3b8;
  font-weight: 700;
}
.fhm-flow__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(59,130,246,0.12);
  color: #1d4ed8;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.fhm-flow__title { font-size: 13px; font-weight: 700; color: var(--theme-text-primary, #111827); }
.fhm-flow__desc  { font-size: 11.5px; color: var(--theme-text-muted, #6b7280); line-height: 1.4; }

.fhm-callout {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  margin: 10px 0;
  border: 1px solid;
}
.fhm-callout--warn { background: rgba(249,115,22,0.08); border-color: rgba(249,115,22,0.3); color: #9a3412; }
.fhm-callout--info { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); color: #1e40af; }
.fhm-callout--ok   { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); color: #047857; }
.fhm-callout i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.fhm-callout__body { font-size: 13.5px; line-height: 1.5; flex-grow: 1; }

/* Responsive */
@media (max-width: 1024px) {
  .ff-radio-grid { grid-template-columns: 1fr; }
  .ff-packet-grid { grid-template-columns: repeat(3, 1fr); }
  .ff-flat-row { grid-template-columns: 36px 1fr; gap: 8px; }
  .ff-flat-row__qty, .ff-flat-row__price, .ff-flat-row__total { grid-column: 1 / -1; }
}

/* ===== Shipping Cost Configuration links section ===== */
.sc-pf-section {
  background: linear-gradient(135deg, #fff8e1 0%, #fffdf5 100%);
  border: 1px solid #f5d067;
  border-left: 4px solid #f39c12;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sc-pf-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.sc-pf-section__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#f39c12,#f7b955);
  color: #fff; border-radius: 8px; font-size: 20px;
}
.sc-pf-section__title-wrap { flex-grow: 1; }
.sc-pf-section__title {
  font-size: 16px; font-weight: 700; color: #2c3e50; margin: 0;
}
.sc-pf-section__sub {
  font-size: 12.5px; color: #7f6e3a; margin: 2px 0 0 0;
}
.sc-pf-org-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #f5d067;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #b25400;
}
.sc-pf-warn {
  display: flex; align-items: center; gap: 8px;
  background: #fff3e0; color: #b25400;
  padding: 8px 12px; border-radius: 8px;
  font-size: 12.5px; margin-bottom: 12px;
}
.sc-pf-link-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 800px) { .sc-pf-link-grid { grid-template-columns: 1fr; } }
.sc-pf-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e6e9ef;
  text-decoration: none;
  color: #2c3e50;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.sc-pf-link--btn { font: inherit; width: 100%; }
.sc-pf-link:hover:not(.sc-pf-link--disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.sc-pf-link--disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}
.sc-pf-link__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: #fff; font-size: 20px;
}
.sc-pf-link--blue { border-left: 4px solid #2e86de; }
.sc-pf-link--blue .sc-pf-link__icon { background: linear-gradient(135deg,#2e86de,#54a0ff); }
.sc-pf-link--orange { border-left: 4px solid #ee5a24; }
.sc-pf-link--orange .sc-pf-link__icon { background: linear-gradient(135deg,#ee5a24,#ff7f50); }
.sc-pf-link--green { border-left: 4px solid #10ac84; }
.sc-pf-link--green .sc-pf-link__icon { background: linear-gradient(135deg,#10ac84,#1dd1a1); }
.sc-pf-link--purple { border-left: 4px solid #8b5cf6; }
.sc-pf-link--purple .sc-pf-link__icon { background: linear-gradient(135deg,#8b5cf6,#a78bfa); }
.sc-pf-link__body { flex-grow: 1; min-width: 0; }
.sc-pf-link__title { font-weight: 700; color: #2c3e50; margin-bottom: 2px; font-size: 14px; }
.sc-pf-link__desc { font-size: 12px; color: #7f8c8d; line-height: 1.4; }
.sc-pf-link__tag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.sc-pf-link__tag--blue { background: #2e86de; }
.sc-pf-link__tag--orange { background: #ee5a24; }
.sc-pf-link__tag--green { background: #10ac84; }
.sc-pf-link__tag--purple { background: #8b5cf6; }
.sc-pf-link__chev { color: #9ca3af; font-size: 18px; flex-shrink: 0; }

/* Existing-overrides modal */
.sc-pf-modal {
  background: #fff;
  border-radius: 14px;
  width: 720px;
  max-width: 95vw;
  overflow: hidden;
}
.sc-pf-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(139,92,246,0.02));
}
.sc-pf-modal__title {
  font-size: 18px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 10px; color: #111827;
  flex-wrap: wrap;
}
.sc-pf-modal__title i { color: #8b5cf6; font-size: 22px; }
.sc-pf-modal__org {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #8b5cf6;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.sc-pf-modal__close {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; color: #6b7280; padding: 6px; border-radius: 6px;
}
.sc-pf-modal__close:hover { background: #f3f4f6; }
.sc-pf-modal__body { padding: 18px 24px; min-height: 180px; max-height: 60vh; overflow: auto; }
.sc-pf-modal__loading {
  display: flex; align-items: center; gap: 8px;
  padding: 20px; color: #6b7280;
}
.sc-pf-modal__loading i { animation: sc-spin 1s linear infinite; }
@keyframes sc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.sc-pf-modal__empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px; color: #7f8c8d; font-size: 14px;
}
.sc-pf-modal__empty i { font-size: 36px; color: #b2bec3; }
.sc-pf-modal__count {
  font-size: 13px; color: #2c3e50; margin-bottom: 10px;
}
.sc-pf-modal__table-wrap { overflow-x: auto; }
.sc-pf-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.sc-pf-modal__table th, .sc-pf-modal__table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #f1f3f5;
}
.sc-pf-modal__table th {
  font-weight: 700;
  color: #7f8c8d;
  background: #fafbfc;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sc-pf-modal__num { text-align: right; font-variant-numeric: tabular-nums; }
.sc-pf-modal__row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #2c3e50;
  text-decoration: none;
}
.sc-pf-modal__row-btn:hover { background: #e5e7eb; }
.sc-pf-modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid #e5e7eb;
}
.sc-pf-modal__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600; font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}
.sc-pf-modal__btn--ghost { background: #f3f4f6; color: #374151; }
.sc-pf-modal__btn--ghost:hover { background: #e5e7eb; }
.sc-pf-modal__btn--primary {
  background: linear-gradient(135deg,#8b5cf6,#a78bfa);
  color: #fff;
}
</style>