<script setup>
import { SelectBox } from 'tedir-select'

const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  form: { type: Object, default: null },
  isSave: { type: Boolean, default: false },
  backText: { type: String, default: 'Back' }
})

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

const source = computed(() => props.form ?? props.modelValue ?? {})

const organization = useCookie('logship_organization')
const organizationId = useCookie('logship_organization_id')

const clientName = ref('')
onMounted(() => {
  const stored = localStorage.getItem('logship_clients')
  if (stored) {
    try {
      const arr = JSON.parse(stored)
      if (Array.isArray(arr) && arr[0]?.name) clientName.value = arr[0].name
    } catch (e) {}
  }
})

const buildForm = (src) => ({
  id: src?.id || '',
  uid: src?.uid || '',
  client: src?.client || '',
  clientId: src?.clientId || '',
  organization: src?.organization || organization.value?.Name || '',
  organizationId: src?.organizationId || organizationId.value || '',
  name: src?.name || '',
  description: src?.description || '',
  isActive: src?.isActive ?? true,
  fulfillmentOrderBasePrice: Number(src?.fulfillmentOrderBasePrice) || 0,
  fulfillmentOrderPickPrice: Number(src?.fulfillmentOrderPickPrice) || 0,
  fulfillmentOrderQtyPickFree: Number(src?.fulfillmentOrderQtyPickFree) || 0,
  fulfillOrderBaseWeightMax1: Number(src?.fulfillOrderBaseWeightMax1) || 0,
  fulfillOrderBaseWeightMax2: Number(src?.fulfillOrderBaseWeightMax2) || 0,
  fulfillOrderBaseWeightPrice2: Number(src?.fulfillOrderBaseWeightPrice2) || 0,
  fulfillOrderPickWeightPrice2: Number(src?.fulfillOrderPickWeightPrice2) || 0,
  isFulfillGroupFlatPricing: src?.isFulfillGroupFlatPricing ?? false,
  fulfillGroupFlatPrice1: Number(src?.fulfillGroupFlatPrice1) || 0,
  fulfillGroupFlatPrice2: Number(src?.fulfillGroupFlatPrice2) || 0,
  fulfillMaterialCosts: Number(src?.fulfillMaterialCosts) || 0,
  fulfillOnceFee: Number(src?.fulfillOnceFee) || 0,
  processing: src?.processing ?? false,
  alert: {
    status: src?.alert?.status || '',
    message: src?.alert?.message || '',
    processing: src?.alert?.processing ?? false
  }
})

const form = ref(buildForm(source.value))

watch(source, (val) => {
  form.value = buildForm(val)
}, { deep: true })

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) getOptions.value[key] = res
  loading.value[key] = false
}

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

const save = debounce(() => {
  emit('update:modelValue', form.value)
  emit('save', form.value)
})

const submit = (type) => {
  emit('update:modelValue', form.value)
  emit('save', form.value)
  nextTick(() => emit('submit', type))
}

const back = () => emit('back')

const fmt = (n) => `€ ${(Number(n) || 0).toFixed(2)}`

/* ===== Live calculators ===== */
const calcOpen = ref({ outbound: false, materials: false, weight: false, flat: false })
const toggleCalc = (k) => { calcOpen.value[k] = !calcOpen.value[k] }

const calc = ref({
  outboundLines: 3,
  outboundQtyPerLine: 5,
  materialsUnits: 5,
  materialsShipments: 1,
  weightKg: 2.5,
  weightQty: 5,
  flatKg: 2.5
})

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
  return { lines, qty, totalQty, free, billableQty, baseFee, pickFee, total: baseFee + pickFee, base, pick }
})

const calcMaterials = computed(() => {
  const units = Math.max(0, Number(calc.value.materialsUnits) || 0)
  const shipments = Math.max(1, Number(calc.value.materialsShipments) || 1)
  const mat = Number(form.value.fulfillMaterialCosts) || 0
  const once = Number(form.value.fulfillOnceFee) || 0
  const matTotal = units * mat
  const onceTotal = shipments * once
  return { units, shipments, mat, once, matTotal, onceTotal, total: matTotal + onceTotal }
})

const weightTier = (w) => {
  const max1 = Number(form.value.fulfillOrderBaseWeightMax1) || 0
  const max2 = Number(form.value.fulfillOrderBaseWeightMax2) || 0
  if (max1 === 0 && max2 === 0) return 1
  if (max1 > 0 && w <= max1) return 1
  return 2
}

const calcWeight = computed(() => {
  const w = Number(calc.value.weightKg) || 0
  const qty = Math.max(0, Number(calc.value.weightQty) || 0)
  const tier = weightTier(w)
  const base = tier === 1
    ? Number(form.value.fulfillmentOrderBasePrice) || 0
    : Number(form.value.fulfillOrderBaseWeightPrice2) || 0
  const pick = tier === 1
    ? Number(form.value.fulfillmentOrderPickPrice) || 0
    : Number(form.value.fulfillOrderPickWeightPrice2) || 0
  const free = Number(form.value.fulfillmentOrderQtyPickFree) || 0
  const billable = Math.max(0, qty - free)
  const pickFee = billable * pick
  return { w, qty, tier, base, pick, free, billable, baseFee: base, pickFee, total: base + pickFee }
})

const calcFlat = computed(() => {
  const w = Number(calc.value.flatKg) || 0
  const tier = weightTier(w)
  const p1 = Number(form.value.fulfillGroupFlatPrice1) || 0
  const p2 = Number(form.value.fulfillGroupFlatPrice2) || 0
  return { w, tier, total: tier === 1 ? p1 : p2, p1, p2 }
})

const weightTierActive = computed(() =>
  (form.value.fulfillOrderBaseWeightMax1 || 0) > 0 ||
  (form.value.fulfillOrderBaseWeightMax2 || 0) > 0
)
</script>

<template>
  <div class="ppr-wrap" @mouseleave.self="save">
    <div class="mx-5">
      <AlertBox :alert="form.alert" />

      <!-- Action bar (only in create/duplicate mode) -->
      <div v-if="isSave" class="ppr-actionbar">
        <div class="d-flex gap-10px">
          <button
            type="button"
            class="button is-primary"
            :class="(form.name === '' || form.alert.processing) ? 'pointerEvents-none opacity-0.6' : ''"
            @click="submit('onlysave')"
          >
            <i class="ti ti-device-floppy me-1"></i> Save
          </button>
          <button
            type="button"
            class="button"
            :class="(form.name === '' || form.alert.processing) ? 'pointerEvents-none opacity-0.6' : ''"
            @click="submit('next')"
          >
            <i class="ti ti-check me-1"></i> Save + Exit
          </button>
        </div>
        <button type="button" class="button" @click="back">
          <i class="ti ti-chevron-left me-1"></i> {{ backText }}
        </button>
      </div>

      <!-- ============== TOP STRIP: SCOPE + 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-id-badge-2"></i></div>
          <div class="ff-top-strip__body">
            <div class="ff-top-strip__label">
              Rule Scope
              <span class="ff-info" data-tip="Each rule is scoped to one organization and one tenant. When a product is linked to this rule, the prices here override the business partner defaults."><i class="ti ti-info-circle"></i></span>
            </div>
            <div class="ppr-scope-sub">
              <span><i class="ti ti-building"></i> {{ form.organization || '—' }}</span>
              <span class="ppr-scope-dot">·</span>
              <span><i class="ti ti-users"></i> {{ clientName || '—' }}</span>
            </div>
          </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">Pricing Hierarchy</div>
            <div class="ppr-hierarchy-chain">
              <span class="ppr-chip">Product override</span>
              <i class="ti ti-chevron-right"></i>
              <span class="ppr-chip ppr-chip--active">Rule <small>(you are here)</small></span>
              <i class="ti ti-chevron-right"></i>
              <span class="ppr-chip">Business Partner default</span>
              <i class="ti ti-chevron-right"></i>
              <span class="ppr-chip">System fallback</span>
            </div>
          </div>
        </div>
      </div>

      <!-- ============== SECTION 1: IDENTITY ============== -->
      <div class="ff-section ff-section--blue">
        <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">Identity &amp; Scope</h3>
            <p class="ff-section__sub">Name this rule and bind it to the organization that will use it</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-signature"></i> Rule Name *
                <span class="ff-info" data-tip="A unique, descriptive label. Shows up on products, invoices and reports. Tip: include the weight band or product family, e.g. 'WC toilet parcel up to 31.5 kg'."><i class="ti ti-info-circle"></i></span>
              </label>
              <input type="text" v-model="form.name" class="input ff-input" placeholder="e.g. WC Toilet Package up to 31.5 kg" @keyup="save" />
              <div class="ff-hint">Appears on the product form when selecting a pricing rule.</div>
            </div>
          </div>
          <div class="column is-one-quarter">
            <div class="ff-field">
              <label class="ff-label">
                <i class="ti ti-building"></i> Organization *
                <span class="ff-info" data-tip="Rule applies only within this organization. Clients with multiple orgs need one rule per org."><i class="ti ti-info-circle"></i></span>
              </label>
              <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"
              />
            </div>
          </div>
          <div class="column is-one-quarter">
            <div class="ff-field">
              <label class="ff-label">
                <i class="ti ti-toggle-right"></i> Status
                <span class="ff-info ff-info--right" data-tip="Only active rules are applied during accounting runs. Inactive rules remain for historical reference and can be re-enabled anytime."><i class="ti ti-info-circle"></i></span>
              </label>
              <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-checks ff-flag__icon"></i>
                <span class="ff-flag__lbl">{{ form.isActive ? 'Active' : 'Inactive' }}</span>
                <span class="ff-flag__hint">{{ form.isActive ? 'Used in accounting' : 'Not applied' }}</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- ============== SECTION 2: OUTBOUND 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">Outbound Fulfillment Pricing</h3>
            <p class="ff-section__sub">Base fee per shipment + pick fee per item (with free picks deducted once)</p>
          </div>
        </div>

        <div class="ppr-explain">
          <div class="ppr-explain__title"><i class="ti ti-bulb"></i> How it's calculated</div>
          <p><strong>Base Price</strong> is charged only on the <strong>first line</strong> of each shipment; later lines have base = 0. <strong>Pick Price</strong> is applied per item, but the <strong>Free Pick Quantity</strong> is deducted once from the shipment total (not per line).</p>
          <code class="ppr-formula">Total = Base + Pick × (Σ qty − Free)</code>
        </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> Base Price *
                <span class="ff-info" data-tip="One-time base fee charged once per shipment (first line only). Subsequent lines of the same shipment have a base fee of 0."><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" min="0" v-model.number="form.fulfillmentOrderBasePrice" class="input ff-input" @keyup="save" @change="save" />
              </div>
              <div class="ff-hint">Charged once per shipment</div>
            </div>
          </div>
          <div class="column is-one-third">
            <div class="ff-field">
              <label class="ff-label">
                <i class="ti ti-hand-grab"></i> Pick Price / Unit *
                <span class="ff-info" data-tip="Cost per picked / handled item. Applied to shipment quantity AFTER free quantity is deducted. Free quantity is shared across all lines."><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" min="0" v-model.number="form.fulfillmentOrderPickPrice" class="input ff-input" @keyup="save" @change="save" />
              </div>
              <div class="ff-hint">Per picked item (after free qty)</div>
            </div>
          </div>
          <div class="column is-one-third">
            <div class="ff-field">
              <label class="ff-label">
                <i class="ti ti-gift"></i> Free Pick Quantity
                <span class="ff-info ff-info--right" data-tip="Number of items picked for free per shipment (promotional / included picks). Applied ONCE per shipment, shared across all lines. Default minimum: 1."><i class="ti ti-info-circle"></i></span>
              </label>
              <input type="number" step="1" min="0" v-model.number="form.fulfillmentOrderQtyPickFree" class="input ff-input" @keyup="save" @change="save" />
              <div class="ff-hint">Free picks deducted once per shipment</div>
            </div>
          </div>
        </div>

        <!-- LIVE CALCULATOR — Outbound -->
        <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--btn" @click.stop="toggleCalc('outbound')">
            <i class="ti ti-calculator"></i>
            <span class="ff-calc__head-text">Live Calculator — Estimate a sample shipment</span>
            <span v-if="calcOpen.outbound" class="ff-calc__head-result">{{ fmt(calcOutbound.total) }}</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">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">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">Base</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">Pick</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">Free qty</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>Total qty: {{ calcOutbound.lines }} × {{ calcOutbound.qty }}</span><span>{{ calcOutbound.totalQty }} items</span></div>
              <div class="ff-calc__line"><span>Billable: {{ calcOutbound.totalQty }} − {{ calcOutbound.free }} free</span><span>{{ calcOutbound.billableQty }} items</span></div>
              <div class="ff-calc__line"><span>Base fee (1× {{ fmt(calcOutbound.base) }})</span><span>{{ fmt(calcOutbound.baseFee) }}</span></div>
              <div class="ff-calc__line"><span>Pick fee ({{ calcOutbound.billableQty }} × {{ fmt(calcOutbound.pick) }})</span><span>{{ fmt(calcOutbound.pickFee) }}</span></div>
              <div class="ff-calc__line ff-calc__line--total"><span>Estimated total</span><span>{{ fmt(calcOutbound.total) }}</span></div>
            </div>
            <div class="ff-calc__formula">Total = Base + Pick × (TotalQty − Free)</div>
          </div>
        </div>
      </div>

      <!-- ============== SECTION 3: MATERIAL COSTS & ONCE FEE ============== -->
      <div class="ff-section ff-section--teal">
        <div class="ff-section__head">
          <div class="ff-section__icon"><i class="ti ti-package"></i></div>
          <div class="ff-section__title-wrap">
            <h3 class="ff-section__title">Material Costs &amp; Once Fee</h3>
            <p class="ff-section__sub">Per-unit material charges and one-time surcharges added on top of base pricing</p>
          </div>
        </div>

        <div class="ppr-explain ppr-explain--teal">
          <div class="ppr-explain__title"><i class="ti ti-bulb"></i> How it's calculated</div>
          <p><strong>Material Costs</strong> are additional per-item charges (e.g. labels, warning stickers, fragile tape). <strong>Once Fee</strong> is a fixed surcharge added once per shipment, regardless of quantity.</p>
          <code class="ppr-formula">Extras = Units × Material + Once Fee</code>
        </div>

        <div class="columns is-desktop">
          <div class="column is-half">
            <div class="ff-field">
              <label class="ff-label">
                <i class="ti ti-tag"></i> Material Cost / Unit
                <span class="ff-info" data-tip="Additional per-item charge for packaging materials or stickers (e.g. fragile labels, heavy-package warnings, orientation notices)."><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" min="0" v-model.number="form.fulfillMaterialCosts" class="input ff-input" @keyup="save" @change="save" />
                <span class="ff-input-suffix">/ item</span>
              </div>
              <div class="ff-hint">Multiplied by picked quantity</div>
            </div>
          </div>
          <div class="column is-half">
            <div class="ff-field">
              <label class="ff-label">
                <i class="ti ti-coin"></i> Once Fee
                <span class="ff-info ff-info--right" data-tip="One-time surcharge added per shipment — independent of quantity or weight. Useful for small admin / handling fees."><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" min="0" v-model.number="form.fulfillOnceFee" class="input ff-input" @keyup="save" @change="save" />
                <span class="ff-input-suffix">/ shipment</span>
              </div>
              <div class="ff-hint">Flat, applied once per shipment</div>
            </div>
          </div>
        </div>

        <div class="ff-calc" :class="{ 'is-open': calcOpen.materials, 'is-closed-clickable': !calcOpen.materials }" @click="!calcOpen.materials && toggleCalc('materials')">
          <button type="button" class="ff-calc__head--btn" @click.stop="toggleCalc('materials')">
            <i class="ti ti-calculator"></i>
            <span class="ff-calc__head-text">Live Calculator — Material &amp; Once Fee</span>
            <span v-if="calcOpen.materials" class="ff-calc__head-result">{{ fmt(calcMaterials.total) }}</span>
            <i class="ti ti-chevron-down ff-calc__head-chev"></i>
          </button>
          <div v-if="calcOpen.materials" class="ff-calc__body">
            <div class="ff-calc__inputs">
              <div class="ff-calc__input-wrap">
                <label class="ff-calc__input-label">Units</label>
                <input type="number" min="0" v-model.number="calc.materialsUnits" class="ff-calc__input" />
              </div>
              <div class="ff-calc__input-wrap">
                <label class="ff-calc__input-label">Shipments</label>
                <input type="number" min="1" v-model.number="calc.materialsShipments" class="ff-calc__input" />
              </div>
              <div class="ff-calc__input-wrap">
                <label class="ff-calc__input-label">Material / item</label>
                <input type="number" step="0.01" v-model.number="form.fulfillMaterialCosts" class="ff-calc__input" @input="save" />
              </div>
              <div class="ff-calc__input-wrap">
                <label class="ff-calc__input-label">Once fee</label>
                <input type="number" step="0.01" v-model.number="form.fulfillOnceFee" class="ff-calc__input" @input="save" />
              </div>
            </div>
            <div class="ff-calc__breakdown">
              <div class="ff-calc__line"><span>Material total ({{ calcMaterials.units }} × {{ fmt(calcMaterials.mat) }})</span><span>{{ fmt(calcMaterials.matTotal) }}</span></div>
              <div class="ff-calc__line"><span>Once fee total ({{ calcMaterials.shipments }} × {{ fmt(calcMaterials.once) }})</span><span>{{ fmt(calcMaterials.onceTotal) }}</span></div>
              <div class="ff-calc__line ff-calc__line--total"><span>Extras total</span><span>{{ fmt(calcMaterials.total) }}</span></div>
            </div>
            <div class="ff-calc__formula">Extras = Units × Material + Shipments × OnceFee</div>
          </div>
        </div>
      </div>

      <!-- ============== SECTION 4: WEIGHT TIERS ============== -->
      <div class="ff-section ff-section--orange">
        <div class="ff-section__head">
          <div class="ff-section__icon"><i class="ti ti-weight"></i></div>
          <div class="ff-section__title-wrap">
            <h3 class="ff-section__title">
              Weight-Based Tiered Pricing
              <span v-if="weightTierActive" class="ppr-tag ppr-tag--active">active</span>
              <span v-else class="ppr-tag">disabled</span>
            </h3>
            <p class="ff-section__sub">Apply different base &amp; pick rates once shipment weight crosses a threshold</p>
          </div>
        </div>

        <div class="ppr-explain ppr-explain--orange">
          <div class="ppr-explain__title"><i class="ti ti-bulb"></i> How it's calculated</div>
          <p>When shipment weight is <strong>≤ Tier 1 Max</strong>, the main Base &amp; Pick prices (from the Outbound section) apply. When it exceeds Tier 1 Max, <strong>Tier 2 prices</strong> below are used instead. Leave both maxes at <code>0</code> to disable tiering.</p>
          <code class="ppr-formula">w ≤ Max₁ → Base + Pick · (qty − free) &nbsp;·&nbsp; else → Base₂ + Pick₂ · (qty − free)</code>
        </div>

        <div class="columns is-desktop">
          <div class="column is-half">
            <div class="ff-field">
              <label class="ff-label">
                <i class="ti ti-ruler-measure"></i> Tier 1 Max Weight
                <span class="ff-info" data-tip="Maximum shipment weight for Tier 1 (inclusive). Below or equal to this value, the main Base/Pick prices apply. Set to 0 to disable tiers."><i class="ti ti-info-circle"></i></span>
              </label>
              <div class="ff-input-wrap">
                <input type="number" step="0.1" min="0" v-model.number="form.fulfillOrderBaseWeightMax1" class="input ff-input" @keyup="save" @change="save" />
                <span class="ff-input-suffix">kg</span>
              </div>
              <div class="ff-hint">Below → uses Base / Pick from Outbound section</div>
            </div>
          </div>
          <div class="column is-half">
            <div class="ff-field">
              <label class="ff-label">
                <i class="ti ti-ruler-2"></i> Tier 2 Max Weight
                <span class="ff-info ff-info--right" data-tip="Upper bound of Tier 2 (inclusive). For shipments above Tier 1 Max and up to this value, Tier 2 Base & Pick prices apply."><i class="ti ti-info-circle"></i></span>
              </label>
              <div class="ff-input-wrap">
                <input type="number" step="0.1" min="0" v-model.number="form.fulfillOrderBaseWeightMax2" class="input ff-input" @keyup="save" @change="save" />
                <span class="ff-input-suffix">kg</span>
              </div>
              <div class="ff-hint">Above Tier 1, up to this value → Tier 2 prices</div>
            </div>
          </div>
        </div>

        <div v-if="weightTierActive" class="ppr-subpanel">
          <div class="ppr-subpanel__head"><i class="ti ti-chart-bar"></i> Tier 2 Prices</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"></i> Tier 2 Base Price
                  <span class="ff-info" data-tip="Replaces the main Base Price when shipment weight falls into Tier 2. Charged once per shipment."><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" min="0" v-model.number="form.fulfillOrderBaseWeightPrice2" class="input ff-input" @keyup="save" @change="save" />
                </div>
              </div>
            </div>
            <div class="column is-half">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-hand-grab"></i> Tier 2 Pick Price / Unit
                  <span class="ff-info ff-info--right" data-tip="Replaces the main Pick Price per unit when shipment weight falls into Tier 2."><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" min="0" v-model.number="form.fulfillOrderPickWeightPrice2" class="input ff-input" @keyup="save" @change="save" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="ff-calc" :class="{ 'is-open': calcOpen.weight, 'is-closed-clickable': !calcOpen.weight }" @click="!calcOpen.weight && toggleCalc('weight')">
          <button type="button" class="ff-calc__head--btn" @click.stop="toggleCalc('weight')">
            <i class="ti ti-calculator"></i>
            <span class="ff-calc__head-text">Live Calculator — Which tier applies?</span>
            <span v-if="calcOpen.weight" class="ff-calc__head-result">T{{ calcWeight.tier }} · {{ fmt(calcWeight.total) }}</span>
            <i class="ti ti-chevron-down ff-calc__head-chev"></i>
          </button>
          <div v-if="calcOpen.weight" class="ff-calc__body">
            <div class="ff-calc__inputs">
              <div class="ff-calc__input-wrap">
                <label class="ff-calc__input-label">Weight (kg)</label>
                <input type="number" step="0.1" min="0" v-model.number="calc.weightKg" class="ff-calc__input" />
              </div>
              <div class="ff-calc__input-wrap">
                <label class="ff-calc__input-label">Shipment qty</label>
                <input type="number" min="0" v-model.number="calc.weightQty" class="ff-calc__input" />
              </div>
              <div class="ff-calc__input-wrap">
                <label class="ff-calc__input-label">Max 1 (kg)</label>
                <input type="number" step="0.1" v-model.number="form.fulfillOrderBaseWeightMax1" class="ff-calc__input" @input="save" />
              </div>
              <div class="ff-calc__input-wrap">
                <label class="ff-calc__input-label">Max 2 (kg)</label>
                <input type="number" step="0.1" v-model.number="form.fulfillOrderBaseWeightMax2" class="ff-calc__input" @input="save" />
              </div>
            </div>
            <div class="ff-calc__breakdown">
              <div class="ff-calc__line"><span>Applied tier</span><span>Tier {{ calcWeight.tier }}</span></div>
              <div class="ff-calc__line"><span>Base price (Tier {{ calcWeight.tier }})</span><span>{{ fmt(calcWeight.base) }}</span></div>
              <div class="ff-calc__line"><span>Pick fee ({{ calcWeight.billable }} × {{ fmt(calcWeight.pick) }})</span><span>{{ fmt(calcWeight.pickFee) }}</span></div>
              <div class="ff-calc__line ff-calc__line--total"><span>Estimated total</span><span>{{ fmt(calcWeight.total) }}</span></div>
            </div>
            <div class="ff-calc__formula">Tier 1 if w ≤ Max₁ · Tier 2 otherwise</div>
          </div>
        </div>
      </div>

      <!-- ============== SECTION 5: GROUP FLAT PRICING ============== -->
      <div class="ff-section ff-section--purple">
        <div class="ff-section__head">
          <div class="ff-section__icon"><i class="ti ti-tag-off"></i></div>
          <div class="ff-section__title-wrap">
            <h3 class="ff-section__title">Group Flat Pricing
              <span v-if="form.isFulfillGroupFlatPricing" class="ppr-tag ppr-tag--active">enabled</span>
              <span v-else class="ppr-tag">disabled</span>
            </h3>
            <p class="ff-section__sub">Replace per-item base &amp; pick calculation with a single flat amount per weight tier</p>
          </div>
        </div>

        <div class="ppr-explain ppr-explain--purple">
          <div class="ppr-explain__title"><i class="ti ti-bulb"></i> How it's calculated</div>
          <p>When enabled, the entire shipment is charged a <strong>single flat amount</strong> based on its weight tier. The tier boundaries from the <em>Weight-Based</em> section above are reused. Per-item base &amp; pick calculations are ignored.</p>
          <code class="ppr-formula">w ≤ Max₁ → Flat Price 1 · else → Flat Price 2</code>
        </div>

        <label class="ff-flag ff-flag--blue mb-3" :class="{ 'is-on': form.isFulfillGroupFlatPricing }">
          <input type="checkbox" v-model="form.isFulfillGroupFlatPricing" class="ff-flag__input" @change="save" />
          <i class="ti ti-tag ff-flag__icon"></i>
          <span class="ff-flag__lbl">Use flat pricing</span>
          <span class="ff-flag__hint">Overrides per-item calculation — one total per weight tier</span>
        </label>

        <div v-if="form.isFulfillGroupFlatPricing">
          <div class="columns is-desktop">
            <div class="column is-half">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-weight"></i> Flat Price — Tier 1
                  <span class="ff-info" data-tip="Flat total charged for the whole shipment when its weight is ≤ Tier 1 Max."><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" min="0" v-model.number="form.fulfillGroupFlatPrice1" class="input ff-input" @keyup="save" @change="save" />
                </div>
                <div class="ff-hint">Applied when weight ≤ {{ form.fulfillOrderBaseWeightMax1 || 0 }} kg</div>
              </div>
            </div>
            <div class="column is-half">
              <div class="ff-field">
                <label class="ff-label">
                  <i class="ti ti-weight"></i> Flat Price — Tier 2
                  <span class="ff-info ff-info--right" data-tip="Flat total charged for the whole shipment when its weight falls into Tier 2 (above Tier 1 Max, up to Tier 2 Max)."><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" min="0" v-model.number="form.fulfillGroupFlatPrice2" class="input ff-input" @keyup="save" @change="save" />
                </div>
                <div class="ff-hint">Applied above Tier 1, up to {{ form.fulfillOrderBaseWeightMax2 || 0 }} kg</div>
              </div>
            </div>
          </div>

          <div class="ff-calc" :class="{ 'is-open': calcOpen.flat, 'is-closed-clickable': !calcOpen.flat }" @click="!calcOpen.flat && toggleCalc('flat')">
            <button type="button" class="ff-calc__head--btn" @click.stop="toggleCalc('flat')">
              <i class="ti ti-calculator"></i>
              <span class="ff-calc__head-text">Live Calculator — Flat pricing</span>
              <span v-if="calcOpen.flat" class="ff-calc__head-result">T{{ calcFlat.tier }} · {{ fmt(calcFlat.total) }}</span>
              <i class="ti ti-chevron-down ff-calc__head-chev"></i>
            </button>
            <div v-if="calcOpen.flat" class="ff-calc__body">
              <div class="ff-calc__inputs">
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">Weight (kg)</label>
                  <input type="number" step="0.1" min="0" v-model.number="calc.flatKg" class="ff-calc__input" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">Max 1 (kg)</label>
                  <input type="number" step="0.1" v-model.number="form.fulfillOrderBaseWeightMax1" class="ff-calc__input" @input="save" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">Flat 1</label>
                  <input type="number" step="0.01" v-model.number="form.fulfillGroupFlatPrice1" class="ff-calc__input" @input="save" />
                </div>
                <div class="ff-calc__input-wrap">
                  <label class="ff-calc__input-label">Flat 2</label>
                  <input type="number" step="0.01" v-model.number="form.fulfillGroupFlatPrice2" class="ff-calc__input" @input="save" />
                </div>
              </div>
              <div class="ff-calc__breakdown">
                <div class="ff-calc__line"><span>Applied tier</span><span>Tier {{ calcFlat.tier }}</span></div>
                <div class="ff-calc__line ff-calc__line--total"><span>Flat charge</span><span>{{ fmt(calcFlat.total) }}</span></div>
              </div>
              <div class="ff-calc__formula">w ≤ Max₁ → Flat 1 · else → Flat 2</div>
            </div>
          </div>
        </div>
      </div>

      <!-- ============== SECTION 6: DESCRIPTION ============== -->
      <div class="ff-section ff-section--gray">
        <div class="ff-section__head">
          <div class="ff-section__icon"><i class="ti ti-notes"></i></div>
          <div class="ff-section__title-wrap">
            <h3 class="ff-section__title">Description / Breakdown Notes</h3>
            <p class="ff-section__sub">Free-text notes, often used to record how the price was composed</p>
          </div>
        </div>
        <textarea
          v-model="form.description"
          class="textarea ff-input"
          rows="4"
          placeholder="e.g. Pickpreis 2,9 EUR + VP Zeit 6 Min (3,3 EUR) + 6 Aufkleber zerbrechlich (0,6 EUR) + …"
          @keyup="save"
        ></textarea>
      </div>
    </div>
  </div>
</template>

<style scoped>
.ppr-wrap { padding: 1rem 0 2rem; }

.ppr-actionbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  background: var(--theme-bg-secondary, #f7f8fa);
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 10px;
  position: sticky;
  top: 0;
  z-index: 40;
}

/* ===== Sections (mirrored from PartnerForm convention) ===== */
.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;
}
.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--teal::before   { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.ff-section--gray::before   { background: linear-gradient(90deg, #6b7280, #9ca3af); }
.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--teal   .ff-section__icon { background: rgba(20, 184, 166, 0.12);  color: #0d9488; }
.ff-section--gray   .ff-section__icon { background: rgba(107, 114, 128, 0.12); color: #4b5563; }
.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);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ff-section__sub { font-size: 12px; opacity: 0.7; margin: 2px 0 0; }

/* ===== Fields ===== */
.ff-field { margin-bottom: 14px; }
.ff-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--theme-text-primary, #374151);
}
.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;
}

/* ===== Flags (toggle pills) ===== */
.ff-flag {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--theme-surface, #fff);
  min-height: 44px;
}
.ff-flag:hover { border-color: #60a5fa; }
.ff-flag__input { position: absolute; opacity: 0; pointer-events: none; }
.ff-flag__icon { font-size: 18px; color: var(--theme-text-muted, #9ca3af); }
.ff-flag__lbl { font-weight: 700; font-size: 13px; }
.ff-flag__hint { font-size: 11px; opacity: 0.7; margin-left: auto; }
.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; }

/* ===== CSS-only per-field help icon ===== */
.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);
}
.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); }

/* ===== Explanation boxes ===== */
.ppr-explain {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.01));
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-left: 3px solid #10b981;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--theme-text-primary, #374151);
}
.ppr-explain__title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: #065f46;
}
.ppr-explain__title i { font-size: 16px; }
.ppr-explain p { margin: 4px 0; }
.ppr-explain code.ppr-formula {
  display: inline-block;
  margin-top: 6px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.05);
  padding: 4px 8px;
  border-radius: 6px;
}
.ppr-explain--teal {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.06), rgba(20, 184, 166, 0.01));
  border-color: rgba(20, 184, 166, 0.22);
  border-left-color: #14b8a6;
}
.ppr-explain--teal .ppr-explain__title { color: #0f766e; }
.ppr-explain--orange {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.06), rgba(249, 115, 22, 0.01));
  border-color: rgba(249, 115, 22, 0.22);
  border-left-color: #f97316;
}
.ppr-explain--orange .ppr-explain__title { color: #9a3412; }
.ppr-explain--purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(139, 92, 246, 0.01));
  border-color: rgba(139, 92, 246, 0.22);
  border-left-color: #8b5cf6;
}
.ppr-explain--purple .ppr-explain__title { color: #6d28d9; }

/* ===== Status tag pill ===== */
.ppr-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--theme-bg-tertiary, #f3f4f6);
  color: var(--theme-text-muted, #6b7280);
}
.ppr-tag--active {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.ppr-subpanel {
  background: var(--theme-bg-tertiary, #f9fafb);
  border: 1px dashed var(--theme-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.ppr-subpanel__head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--theme-text-muted, #6b7280);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== Live calculator card ===== */
.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__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 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;
}

/* ===== Top Strip ===== */
.ff-top-strip {
  display: grid;
  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__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__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;
}

.ppr-scope-sub {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-text-primary, #374151);
}
.ppr-scope-sub i { margin-right: 4px; color: var(--theme-text-muted, #9ca3af); }
.ppr-scope-dot { color: var(--theme-text-muted, #9ca3af); }

.ppr-hierarchy-chain {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
}
.ppr-hierarchy-chain i { color: var(--theme-text-muted, #9ca3af); }
.ppr-chip {
  padding: 3px 9px;
  background: var(--theme-bg-tertiary, #f3f4f6);
  border-radius: 999px;
  font-weight: 600;
  color: var(--theme-text-muted, #6b7280);
}
.ppr-chip--active {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}
.ppr-chip small { opacity: 0.8; font-weight: 500; }

/* Z-index fix: SelectBox dropdowns over later sections */
:deep(.pickerContent) { z-index: 1500 !important; }
:deep(.pickerWrap) { position: relative; z-index: 5; }
.ff-section:focus-within { z-index: 50; position: relative; }
</style>
