{"file":"index-BPETUF7a.js","mappings":";;;;;;;;;;;;;;;;;;;AAWO,SAAS,eAAe;AAC7B,QAAM,cAAc,eAAA;AAMpB,WAAS,aAAa,OAAe,SAA4C;AAC/E,UAAM,SAAS,YAAY,gBAAgB;AAC3C,QAAI;AACF,aAAO,IAAI,KAAK,aAAa,QAAQ,OAAO,EAAE,OAAO,KAAK;AAAA,IAC5D,QAAQ;AACN,aAAO,IAAI,KAAK,aAAa,SAAS,OAAO,EAAE,OAAO,KAAK;AAAA,IAC7D;AAAA,EACF;AAMA,WAAS,eACP,OACA,UACA,SACQ;AACR,UAAM,SAAS,YAAY,gBAAgB;AAC3C,UAAM,OAAO,YAAY,YAAY,kBAAkB;AACvD,QAAI;AACF,aAAO,IAAI,KAAK,aAAa,QAAQ;AAAA,QACnC,OAAO;AAAA,QACP,UAAU;AAAA,QACV,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,QACvB,GAAG;AAAA,MAAA,CACJ,EAAE,OAAO,KAAK;AAAA,IACjB,QAAQ;AACN,aAAO,GAAG,MAAM,QAAQ,CAAC,CAAC,IAAI,IAAI;AAAA,IACpC;AAAA,EACF;AAMA,WAAS,WACP,MACA,SACQ;AACR,UAAM,SAAS,YAAY,gBAAgB;AAC3C,UAAM,WAAW,YAAY,kBAAkB;AAC/C,UAAM,IAAI,OAAO,SAAS,YAAY,OAAO,SAAS,WAAW,IAAI,KAAK,IAAI,IAAI;AAElF,QAAI;AACF,aAAO,IAAI,KAAK,eAAe,QAAQ;AAAA,QACrC;AAAA,QACA,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,QACL,GAAG;AAAA,MAAA,CACJ,EAAE,OAAO,CAAC;AAAA,IACb,QAAQ;AACN,aAAO,EAAE,mBAAmB,OAAO;AAAA,IACrC;AAAA,EACF;AAMA,WAAS,eACP,MACA,SACQ;AACR,UAAM,SAAS,YAAY,gBAAgB;AAC3C,UAAM,WAAW,YAAY,kBAAkB;AAC/C,UAAM,IAAI,OAAO,SAAS,YAAY,OAAO,SAAS,WAAW,IAAI,KAAK,IAAI,IAAI;AAElF,QAAI;AACF,aAAO,IAAI,KAAK,eAAe,QAAQ;AAAA,QACrC;AAAA,QACA,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,GAAG;AAAA,MAAA,CACJ,EAAE,OAAO,CAAC;AAAA,IACb,QAAQ;AACN,aAAO,EAAE,eAAe,OAAO;AAAA,IACjC;AAAA,EACF;AAMA,WAAS,cACP,OACA,SACQ;AACR,UAAM,SAAS,YAAY,gBAAgB;AAC3C,QAAI;AACF,aAAO,IAAI,KAAK,aAAa,QAAQ;AAAA,QACnC,OAAO;AAAA,QACP,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,QACvB,GAAG;AAAA,MAAA,CACJ,EAAE,OAAO,QAAQ,GAAG;AAAA,IACvB,QAAQ;AACN,aAAO,GAAG,KAAK;AAAA,IACjB;AAAA,EACF;AAMA,WAAS,sBACP,UACA,SAC8D;AAC9D,UAAM,OAAO,WAAW,YAAY,iBAAiB;AACrD,UAAM,MAAM,YAAY,OAAO;AAC/B,UAAM,QAAQ,WAAW;AACzB,WAAO,EAAE,KAAK,UAAU,KAAK,OAAO,SAAS,KAAA;AAAA,EAC/C;AAMA,WAAS,mBACP,UACA,SACA,UACQ;AACR,UAAM,EAAE,KAAK,KAAK,OAAO,SAAS,SAAS,sBAAsB,UAAU,OAAO;AAClF,UAAM,OAAO,YAAY,YAAY,kBAAkB;AACvD,WAAO,QAAQ,eAAe,KAAK,IAAI,CAAC,WAAW,eAAe,KAAK,IAAI,CAAC,KAAK,IAAI,eAAe,eAAe,OAAO,IAAI,CAAC;AAAA,EACjI;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;;;;;AC0ZA,UAAM,cAAc,eAAA;AACpB,UAAM,EAAE,eAAA,IAAmB,aAAA;AAkE3B,UAAM,OAAO;AAAA,MACX,EAAE,KAAK,SAAS,OAAO,gBAAA;AAAA,MACvB,EAAE,KAAK,WAAW,OAAO,aAAA;AAAA,MACzB,EAAE,KAAK,YAAY,OAAO,aAAA;AAAA,IAAa;AAGzC,UAAM,YAAY,IAAI,OAAO;AAE7B,UAAM,iBAAiB,SAAS,MAAM;AACpC,YAAM,MAAM,KAAK,KAAK,OAAK,EAAE,QAAQ,UAAU,KAAK;AACpD,aAAO,MAAM,IAAI,QAAQ;AAAA,IAC3B,CAAC;AAID,UAAM,WAAW,IAAwB,EAAE;AAC3C,UAAM,UAAU,IAAI,IAAI;AACxB,UAAM,QAAQ,IAAmB,IAAI;AACrC,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,oBAAoB,IAAI,KAAK;AACnC,UAAM,iBAAiB,IAA6B,IAAI;AACxD,UAAM,kBAAkB,IAA6B,IAAI;AACzD,UAAM,aAAa,IAAI,KAAK;AAC5B,UAAM,SAAS,IAAI,KAAK;AACxB,UAAM,mBAAmB,IAA2D,IAAI;AACxF,UAAM,2BAA2B,IAAmB,IAAI;AAIxD,UAAM,eAAe,IAAI,CAAC;AAC1B,UAAM,cAAc,IAAI,EAAE;AAC1B,UAAM,eAAe,IAAI,KAAK;AAI9B,UAAM,cAA2B;AAAA,MAC/B,MAAM;AAAA,MACN,cAAc;AAAA,MACd,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,cAAc;AAAA,MACd,UAAU;AAAA,MACV,cAAc;AAAA,MACd,aAAa;AAAA,MACb,sBAAsB;AAAA,MACtB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,MACtB,2BAA2B;AAAA,MAC3B,eAAe,CAAA;AAAA,IAAC;AAGlB,UAAM,OAAO,SAAsB,EAAE,GAAG,aAAa;AAIrD,aAAS,aAAa,aAAqB,QAAsC;AAC/E,YAAM,OAAO,KAAK,cAAc,WAAW;AAC3C,UAAI,CAAC,KAAM,QAAO;AAClB,aAAO,WAAW,YAAY,KAAK,gBAAgB,KAAK;AAAA,IAC1D;AAcA,aAAS,gBAAgB,aAA6B;AACpD,YAAM,OAAO,KAAK,cAAc,WAAW;AAC3C,UAAI,CAAC,KAAM,QAAO;AAClB,aAAO,KAAK;AAAA,IACd;AAqDA,aAAS,eAAe,KAA+B;AACrD,aAAO,IAAI,OAAO,gBAAgB,IAAI;AAAA,IACxC;AAEA,aAAS,eAAe,KAA+B;AACrD,aAAO,IAAI,OAAO,WAAW,YAAY,IAAI,OAAO,WAAW,SAAS;AAAA,IAC1E;AAEA,aAAS,kBAAkB,KAA+B;AACxD,YAAM,QAAQ,IAAI,OAAO;AACzB,YAAM,UAAU,IAAI,OAAO;AAC3B,UAAI,SAAS,MAAM,SAAS,GAAG;AAC7B,cAAM,IAAI,MAAM,SAAS;AACzB,cAAM,WAAW,EAAE,aAAa,QAAQ,OAAO;AAC/C,eAAO,GAAG,EAAE,aAAa,IAAI,QAAQ;AAAA,MACvC;AACA,UAAI,SAAS;AACX,cAAM,WAAW,QAAQ,aAAa,QAAQ,OAAO;AACrD,eAAO,GAAG,QAAQ,aAAa,IAAI,QAAQ;AAAA,MAC7C;AACA,aAAO;AAAA,IACT;AAEA,aAAS,aAAa,KAAuB,KAA8B;AACzE,YAAM,aAAa,IAAI,OAAO;AAC9B,UAAI,CAAC,WAAY,QAAO;AACxB,aAAQ,WAAmB,GAAG,KAAK;AAAA,IACrC;AAEA,aAAS,kBAAkB,OAAuB;AAChD,UAAI,SAAS,EAAG,QAAO;AACvB,UAAI,SAAS,EAAG,QAAO;AACvB,aAAO;AAAA,IACT;AAEA,aAAS,YAAY,OAAuB;AAC1C,UAAI,SAAS,EAAG,QAAO;AACvB,UAAI,SAAS,EAAG,QAAO;AACvB,aAAO;AAAA,IACT;;+JAtyBqDA,KAAAA,GAAE,gBAAA,CAAA,uDACbA,KAAAA,GAAE,mBAAA,CAAA,4VASjCA,KAAAA,GAAE,qBAAA,CAAA;UAKE,QAAA,OAAO;weAM0BA,KAAAA,GAAE,kBAAA,CAAA,CAAA,qBAAA;AAAA,iBAK9B,MAAA,OAAK;yIACa,MAAA,KAAK,sHAKhCA,KAAAA,GAAE,gBAAA,CAAA;MAKO,WAAA,SAAA,MAAS,WAAM,GAAA;uaAI0BA,KAAAA,GAAE,sBAAA,CAAA,uDACvBA,KAAAA,GAAE,2BAAA,CAAA,4IAK/BA,KAAAA,GAAE,uBAAA,CAAA;;;AAOSC,sBAAA,SAAA,QAAP,QAAG;6PASI,kBAAkB,IAAI,UAAU,GAAA,gBAAA,CAAA,oCAEF,YAAY,IAAI,UAAU,KAAA,oEAGhBC,eAAA,eAAe,GAAG,CAAA,wDAChBA,eAAA,IAAI,IAAI;AAKpD,cAAA,IAAI,cAAU,GAAA;kIAGjBF,KAAAA,GAAE,kBAAA,CAAA,CAAA,SAAA;AAAA;;;AAGC,cAAA,IAAI,qBAAmB;+LAIvBA,KAAAA,GAAE,yBAAA,CAAA,CAAA,SAAA;AAAA;;;AAGF,cAAA,IAAI,uBAAoB,GAAA;kIAE7B,SAAK,GAAK,IAAI,oBAAoB,uBAAA,wBAE7BA,KAAAA,GAAE,sBAAA,CAAA,MAAgCE,eAAA,IAAI,oBAAoB;;;;6FAOrBA,eAAA,kBAAkB,GAAG,CAAA,sEACrBF,KAAAA,GAAE,gBAAA,CAAA,+DAIFE,eAAA,eAAe,GAAG,CAAA,uJAK5DF,KAAAA,GAAE,qBAAA,CAAA,mIAI6BA,KAAAA,GAAE,uBAAA,CAAA,oDACUE,eAAA,aAAa,KAAG,cAAA,CAAA,oHAG5BF,KAAAA,GAAE,sBAAA,CAAA,oDACUE,eAAA,aAAa,KAAG,aAAA,CAAA,oHAG5BF,KAAAA,GAAE,0BAAA,CAAA,oDACUE,eAAA,aAAa,KAAG,sBAAA,CAAA,mGAOxBF,KAAAA,GAAE,qBAAA,CAAA,4DACQE,eAAA,IAAI,UAAU,kLAS3DF,KAAAA,GAAE,eAAA,CAAA,uGAKJG,cAAA,SAAOH,KAAAA,GAAE,iBAAA,CAAA;;;;UAYV,UAAA,OAAS;AAQN,cAAA,yUAAAE,eAAA,WAAA,QAAaF,KAAAA,GAAE,uBAAA,IAA6BA,QAAE,qBAAA,IAAA,OAAiC,eAAe,eAAA,KAAc,CAAA,CAAA,mWAAA;AAejGC,sBAAA,OAAP,QAAG;kDAIF,UAAA,UAAc,IAAI,yLAIvBC,eAAA,IAAI,KAAK;;;YAOH,UAAA,UAAS,SAAA;2HAGgDF,KAAAA,GAAE,oBAAA,CAAA,kBAEvDG,cAAA,SAAA,KAAK,IAAI,wKAGjBA,cAAA,eAAaH,KAAAA,GAAE,gCAAA,CAAA,4FAM8CA,KAAAA,GAAE,4BAAA,CAAA,kBAEvDG,cAAA,SAAA,KAAK,YAAY,wKAGzBA,cAAA,eAAaH,KAAAA,GAAE,wCAAA,CAAA,gIAOgDA,KAAAA,GAAE,oBAAA,CAAA,mMAEvDI,sBAAA,MAAA,QAAA,KAAK,IAAI,IAATC,gBAAA,KAAK,MAAI,SAAA,IAATC,cAAA,KAAK,MAAI,SAAA,CAAA,IAAA,cAAA,qBAGSN,KAAAA,GAAE,uBAAA,CAAA,sCAHpBI,sBAAA,MAAA,QAAA,KAAK,IAAI,IAATC,gBAAA,KAAK,MAAI,WAAA,IAATC,cAAA,KAAK,MAAI,WAAA,CAAA,IAAA,cAAA,qBAIWN,KAAAA,GAAE,yBAAA,CAAA,6GAI+BA,KAAAA,GAAE,0BAAA,CAAA,kBAEhDG,cAAA,SAAA,KAAK,UAAU,kPAMSH,KAAAA,GAAE,+BAAA,CAAA,yIAOoBA,KAAAA,GAAE,wBAAA,CAAA,kBAEvDG,cAAA,SAAA,KAAK,QAAQ,wKAGrBA,cAAA,eAAaH,KAAAA,GAAE,oCAAA,CAAA,4FAI8CA,KAAAA,GAAE,qBAAA,CAAA,kBAEvDG,cAAA,SAAA,KAAK,KAAK,wKAGlBA,cAAA,eAAaH,KAAAA,GAAE,iCAAA,CAAA,4DAQTI,sBAAA,MAAA,QAAA,KAAK,SAAS,IAAdC,gBAAA,KAAK,WAAS,IAAA,IAAd,KAAK,SAAS,IAAA,aAAA,8LAKgCL,KAAAA,GAAE,yBAAA,CAAA,mIAKFA,KAAAA,GAAE,0BAAA,CAAA,2EAI5CI,sBAAA,MAAA,QAAA,KAAK,mBAAmB,IAAxBC,gBAAA,KAAK,qBAAmB,IAAA,IAAxB,KAAK,mBAAmB,IAAA,aAAA,gNAM9BL,KAAAA,GAAE,mCAAA,CAAA,uFAI6CA,KAAAA,GAAE,0BAAA,CAAA,kBAEpCG,cAAA,SAAA,KAAK,oBAAoB,oPAMDH,KAAAA,GAAE,+BAAA,CAAA;;;;YAOzC,UAAA,UAAS,WAAA;oHAGyCA,KAAAA,GAAE,6BAAA,CAAA,iQAMWA,KAAAA,GAAE,6BAAA,CAAA,mFACFA,KAAAA,GAAE,4BAAA,CAAA,mFACFA,KAAAA,GAAE,wBAAA,CAAA;wBAI7CO,MAAA,WAAA,EAAY,SAAO,CAA7B,WAAM;oKAGFL,eAAA,OAAO,YAAY,iDACaA,eAAA,OAAO,QAAQ,MAAQA,eAAA,OAAO,gBAAgB,yDAKtFC,cAAA,SAAO,aAAa,OAAO,cAAY,SAAA,CAAA,kOAUvCA,cAAA,SAAO,aAAa,OAAO,cAAY,QAAA,CAAA,kOAUvCA,cAAA,SAAO,gBAAgB,OAAO,YAAY,CAAA;;2KAeKH,KAAAA,GAAE,2BAAA,CAAA,wKAKJA,KAAAA,GAAE,yBAAA,CAAA,yCAEpC,aAAA,KAAY,8RASsBA,KAAAA,GAAE,wBAAA,CAAA;wBAK3BO,MAAA,WAAA,EAAY,SAAO,CAA7B,WAAM;0CAAqD,SAAO,OAAO,gBAAgB,wCAH/F,YAAA,KAAW,oBAAX,YAAA,OAGwE,OAAO,gBAAgB,kBAH/F,YAAA,OAGwE,OAAO,gBAAgB,CAAA,IAAA,cAAA,MACnGL,eAAA,OAAO,YAAY,OAASA,eAAA,OAAO,gBAAgB;;+GAKNF,KAAAA,GAAE,wBAAA,CAAA,CAAA,mLAAA;wBAK3BO,MAAA,WAAA,EAAY,SAAO,CAA7B,WAAM;0CAAqD,SAAO,OAAO,QAAQ,wCAHvF,aAAA,KAAY,oBAAZ,aAAA,OAGwE,OAAO,QAAQ,kBAHvF,aAAA,OAGwE,OAAO,QAAQ,CAAA,IAAA,cAAA,MAC3FL,eAAA,OAAO,QAAQ,MAAQA,eAAA,OAAO,YAAY;;oMASPF,KAAAA,GAAE,mBAAA,CAAA,+DACDO,MAAA,cAAA,EAAe,aAAA,OAAc,aAAA,KAAY,CAAA,yHAG1CP,KAAAA,GAAE,mBAAA,CAAA,qBAA6B,YAAA,KAAW,sDACrCE,eAAAK,MAAA,cAAA,EAAe,aAAA,SAAgB,YAAA,cAAoB,aAAA,KAAY,CAAA,oJAGpEP,KAAAA,GAAE,qBAAA,CAAA,sDACKE,eAAAK,MAAA,cAAA,EAAe,aAAA,SAAY,IAAQ,YAAA,cAAoB,aAAA,KAAY,CAAA,+YAajHP,KAAAA,GAAE,qBAAA,CAAA;;;;YAQJ,UAAA,UAAS,YAAA;oHAGyCA,KAAAA,GAAE,qBAAA,CAAA,kHAGHA,KAAAA,GAAE,uBAAA,CAAA,kBAEpCG,cAAA,SAAA,KAAK,YAAY,8PAOiBH,KAAAA,GAAE,sBAAA,CAAA,kBAEpCG,cAAA,SAAA,KAAK,WAAW,8PAOkBH,KAAAA,GAAE,0BAAA,CAAA,kBAEpCG,cAAA,SAAA,KAAK,oBAAoB,sTAWUH,KAAAA,GAAE,+BAAA,CAAA,+TAEhDE,eAAA,KAAK,yBAAyB,qEAKCF,KAAAA,GAAE,oCAAA,CAAA;cACnC,yBAAA,OAAwB;yEAAuC,yBAAA,KAAwB,CAAA,MAAA;AAAA;;;;;;;6JAQ/F,eAAA,KAAc,2IAOZA,KAAAA,GAAE,iBAAA,CAAA,0CAIM,OAAA,KAAM,IAAA,cAAA;YAGN,OAAA,OAAM;;;;;iCAId,WAAA,QAAaA,KAAAA,GAAE,iBAAA,IAAsBA,KAAAA,GAAE,eAAA,CAAA,CAAA,mCAAA;AAAA;;;AAS5C,UAAA,kBAAA,SAAqB,gBAAA,OAAe;gQAKaA,KAAAA,GAAE,uBAAA,CAAA,+DAElDA,KAAAA,GAAE,2BAAA,EAAA,MAAoC,eAAe,gBAAA,KAAe,EAAA,CAAA,CAAA,qJAOlEA,KAAAA,GAAE,iBAAA,CAAA,0CAIM,OAAA,KAAM,IAAA,cAAA,0KAGdA,KAAAA,GAAE,qBAAA,CAAA;;;;UAQL,iBAAA,OAAgB;6BAEdQ,eAAA,CAAA,iBAAA,MAAiB,SAAI,0JAI1BN,eAAA,iBAAA,MAAiB,OAAO;;;;;;;;;;;;;;","names":["$t","_ssrRenderList","_ssrInterpolate","_ssrRenderAttr","_ssrIncludeBooleanAttr","_ssrLooseContain","_ssrLooseEqual","_unref","_ssrRenderClass"],"sources":["../../../../composables/useFormatter.ts","../../../../pages/packages/index.vue"],"sourcesContent":["import { useRegionStore } from '~/stores/region'\n\n/**\n * 🌍 useFormatter Composable\n *\n * Provides locale-aware formatting utilities for numbers, currencies, dates,\n * and percentages. Uses the active region configuration from the RegionStore\n * to determine the appropriate locale, currency, and timezone.\n *\n * Falls back to 'en-EU' locale and 'EUR' currency if no region is configured.\n */\nexport function useFormatter() {\n  const regionStore = useRegionStore()\n\n  /**\n   * Format a number according to the active locale.\n   * Example: 1234567.89 → \"1,234,567.89\" (en) or \"1 234 567,89\" (hu)\n   */\n  function formatNumber(value: number, options?: Intl.NumberFormatOptions): string {\n    const locale = regionStore.activeLocale || 'en-EU'\n    try {\n      return new Intl.NumberFormat(locale, options).format(value)\n    } catch {\n      return new Intl.NumberFormat('en-EU', options).format(value)\n    }\n  }\n\n  /**\n   * Format a currency value according to the active region's currency and locale.\n   * Example: 1234.50 → \"€1,234.50\" (EUR/en) or \"3 456 Ft\" (HUF/hu)\n   */\n  function formatCurrency(\n    value: number,\n    currency?: string,\n    options?: Intl.NumberFormatOptions,\n  ): string {\n    const locale = regionStore.activeLocale || 'en-EU'\n    const curr = currency || regionStore.activeCurrency || 'EUR'\n    try {\n      return new Intl.NumberFormat(locale, {\n        style: 'currency',\n        currency: curr,\n        minimumFractionDigits: 2,\n        maximumFractionDigits: 2,\n        ...options,\n      }).format(value)\n    } catch {\n      return `${value.toFixed(2)} ${curr}`\n    }\n  }\n\n  /**\n   * Format a date according to the active locale and timezone.\n   * Example: 2026-06-24 → \"24/06/2026\" (en-GB) or \"2026. 06. 24.\" (hu-HU)\n   */\n  function formatDate(\n    date: Date | string | number,\n    options?: Intl.DateTimeFormatOptions,\n  ): string {\n    const locale = regionStore.activeLocale || 'en-EU'\n    const timezone = regionStore.activeTimezone || 'Europe/Brussels'\n    const d = typeof date === 'string' || typeof date === 'number' ? new Date(date) : date\n\n    try {\n      return new Intl.DateTimeFormat(locale, {\n        timezone,\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        ...options,\n      }).format(d)\n    } catch {\n      return d.toLocaleDateString('en-GB')\n    }\n  }\n\n  /**\n   * Format a datetime with time according to the active locale and timezone.\n   * Example: \"2026-06-24T14:30:00Z\" → \"24/06/2026, 16:30\" (hu-HU/Budapest)\n   */\n  function formatDateTime(\n    date: Date | string | number,\n    options?: Intl.DateTimeFormatOptions,\n  ): string {\n    const locale = regionStore.activeLocale || 'en-EU'\n    const timezone = regionStore.activeTimezone || 'Europe/Brussels'\n    const d = typeof date === 'string' || typeof date === 'number' ? new Date(date) : date\n\n    try {\n      return new Intl.DateTimeFormat(locale, {\n        timezone,\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        ...options,\n      }).format(d)\n    } catch {\n      return d.toLocaleString('en-GB')\n    }\n  }\n\n  /**\n   * Format a percentage value.\n   * Example: 27 → \"27%\" or 27.5 → \"27,5%\" (hu)\n   */\n  function formatPercent(\n    value: number,\n    options?: Intl.NumberFormatOptions,\n  ): string {\n    const locale = regionStore.activeLocale || 'en-EU'\n    try {\n      return new Intl.NumberFormat(locale, {\n        style: 'percent',\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 1,\n        ...options,\n      }).format(value / 100)\n    } catch {\n      return `${value}%`\n    }\n  }\n\n  /**\n   * Calculate price including VAT for the active region.\n   * VAT rate comes from the active region's default_vat_rate.\n   */\n  function calculatePriceWithVat(\n    netPrice: number,\n    vatRate?: number,\n  ): { net: number; vat: number; gross: number; vatRate: number } {\n    const rate = vatRate ?? regionStore.activeVatRate ?? 0\n    const vat = netPrice * (rate / 100)\n    const gross = netPrice + vat\n    return { net: netPrice, vat, gross, vatRate: rate }\n  }\n\n  /**\n   * Format a price range with VAT breakdown.\n   * Example: (100, 27) → \"Net: €100.00 | VAT: €27.00 (27%) | Gross: €127.00\"\n   */\n  function formatPriceWithVat(\n    netPrice: number,\n    vatRate?: number,\n    currency?: string,\n  ): string {\n    const { net, vat, gross, vatRate: rate } = calculatePriceWithVat(netPrice, vatRate)\n    const curr = currency || regionStore.activeCurrency || 'EUR'\n    return `Net: ${formatCurrency(net, curr)} | VAT: ${formatCurrency(vat, curr)} (${rate}%) | Gross: ${formatCurrency(gross, curr)}`\n  }\n\n  return {\n    formatNumber,\n    formatCurrency,\n    formatDate,\n    formatDateTime,\n    formatPercent,\n    calculatePriceWithVat,\n    formatPriceWithVat,\n  }\n}\n","<template>\n  <div>\n    <!-- Page Header -->\n    <div class=\"mb-8 flex items-center justify-between\">\n      <div>\n        <h1 class=\"text-2xl font-bold text-white\">{{ $t('packages.title') }}</h1>\n        <p class=\"text-slate-400 mt-1\">{{ $t('packages.subtitle') }}</p>\n      </div>\n      <button\n        @click=\"openCreateModal\"\n        class=\"px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white font-medium rounded-lg transition text-sm flex items-center gap-2\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\" />\n        </svg>\n        {{ $t('packages.create_new') }}\n      </button>\n    </div>\n\n    <!-- Loading State -->\n    <div v-if=\"loading\" class=\"flex items-center justify-center py-20\">\n      <div class=\"flex flex-col items-center gap-3\">\n        <svg class=\"animate-spin h-8 w-8 text-indigo-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"></path>\n        </svg>\n        <span class=\"text-slate-400 text-sm\">{{ $t('packages.loading') }}</span>\n      </div>\n    </div>\n\n    <!-- Error State -->\n    <div v-else-if=\"error\" class=\"bg-red-900/30 border border-red-700 rounded-xl p-6 text-center\">\n      <p class=\"text-red-300 mb-3\">{{ error }}</p>\n      <button\n        @click=\"fetchPackages\"\n        class=\"px-4 py-2 bg-red-700 hover:bg-red-600 text-white rounded-lg transition text-sm\"\n      >\n        {{ $t('packages.retry') }}\n      </button>\n    </div>\n\n    <!-- Empty State -->\n    <div v-else-if=\"packages.length === 0\" class=\"bg-slate-800/50 border border-slate-700 rounded-xl p-12 text-center\">\n      <svg class=\"w-16 h-16 mx-auto text-slate-600 mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\" />\n      </svg>\n      <h3 class=\"text-lg font-medium text-slate-300 mb-2\">{{ $t('packages.no_packages') }}</h3>\n      <p class=\"text-slate-500 mb-6\">{{ $t('packages.no_packages_desc') }}</p>\n      <button\n        @click=\"openCreateModal\"\n        class=\"px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white font-medium rounded-lg transition text-sm\"\n      >\n        {{ $t('packages.create_first') }}\n      </button>\n    </div>\n\n    <!-- Package Tier Cards Grid -->\n    <div v-else class=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-8\">\n      <div\n        v-for=\"pkg in packages\"\n        :key=\"pkg.id\"\n        class=\"bg-slate-800 rounded-xl border border-slate-700 p-6 flex flex-col transition-all hover:border-slate-600\"\n      >\n        <!-- Card Header -->\n        <div class=\"flex items-center justify-between mb-4\">\n          <div class=\"flex items-center gap-3\">\n            <div\n              class=\"p-2 rounded-lg\"\n              :class=\"getTierColorClass(pkg.tier_level)\"\n            >\n              <span class=\"w-5 h-5 text-lg\" v-html=\"getTierIcon(pkg.tier_level)\" />\n            </div>\n            <div>\n              <h2 class=\"text-lg font-semibold text-white\">{{ getDisplayName(pkg) }}</h2>\n              <span class=\"text-xs text-slate-500 font-mono\">{{ pkg.name }}</span>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-1.5 flex-wrap\">\n            <span\n              v-if=\"pkg.tier_level >= 1\"\n              class=\"px-2 py-0.5 text-xs font-semibold rounded-full bg-indigo-500/20 text-indigo-300\"\n            >\n              {{ $t('packages.popular') }}\n            </span>\n            <span\n              v-if=\"pkg.is_default_fallback\"\n              class=\"px-2 py-0.5 text-xs font-semibold rounded-full bg-amber-500/20 text-amber-300\"\n              title=\"Default fallback package for expired subscriptions\"\n            >\n              🔒 {{ $t('packages.fallback_badge') }}\n            </span>\n            <span\n              v-if=\"pkg.trial_days_on_signup > 0\"\n              class=\"px-2 py-0.5 text-xs font-semibold rounded-full bg-emerald-500/20 text-emerald-300\"\n              :title=\"`${pkg.trial_days_on_signup} days trial on signup`\"\n            >\n              🎯 {{ $t('packages.trial_badge') }}: {{ pkg.trial_days_on_signup }}d\n            </span>\n          </div>\n        </div>\n\n        <!-- Price -->\n        <div class=\"mb-4\">\n          <span class=\"text-3xl font-bold text-white\">{{ getFormattedPrice(pkg) }}</span>\n          <span class=\"text-sm text-slate-400 ml-1\">/ {{ $t('packages.month') }}</span>\n        </div>\n\n        <!-- Description / Subtitle -->\n        <p class=\"text-sm text-slate-400 mb-4 flex-1\">{{ getDescription(pkg) }}</p>\n\n        <!-- Allowances -->\n        <div class=\"border-t border-slate-700 pt-4 mb-4\">\n          <h3 class=\"text-xs font-semibold uppercase tracking-wider text-slate-500 mb-3\">\n            {{ $t('packages.allowances') }}\n          </h3>\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between text-sm\">\n              <span class=\"text-slate-400\">{{ $t('packages.max_vehicles') }}</span>\n              <span class=\"text-slate-200 font-medium\">{{ getAllowance(pkg, 'max_vehicles') }}</span>\n            </div>\n            <div class=\"flex items-center justify-between text-sm\">\n              <span class=\"text-slate-400\">{{ $t('packages.max_garages') }}</span>\n              <span class=\"text-slate-200 font-medium\">{{ getAllowance(pkg, 'max_garages') }}</span>\n            </div>\n            <div class=\"flex items-center justify-between text-sm\">\n              <span class=\"text-slate-400\">{{ $t('packages.monthly_credits') }}</span>\n              <span class=\"text-slate-200 font-medium\">{{ getAllowance(pkg, 'monthly_free_credits') }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Tier Level Badge -->\n        <div class=\"mb-4\">\n          <span class=\"text-xs text-slate-500\">{{ $t('packages.tier_level') }}: </span>\n          <span class=\"text-xs font-mono text-slate-400\">{{ pkg.tier_level }}</span>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"flex gap-2\">\n          <button\n            @click=\"openEditModal(pkg)\"\n            class=\"flex-1 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-lg transition text-sm\"\n          >\n            {{ $t('packages.edit') }}\n          </button>\n          <button\n            @click=\"confirmDelete(pkg)\"\n            class=\"px-3 py-2.5 bg-red-700 hover:bg-red-600 text-red-200 rounded-lg transition\"\n            :title=\"$t('packages.delete')\"\n          >\n            <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- ── Create / Edit Modal (Tabbed Layout) ──────────────────────── -->\n    <div\n      v-if=\"showModal\"\n      class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60\"\n      @click.self=\"showModal = false\"\n    >\n      <div class=\"bg-slate-800 border border-slate-700 rounded-xl w-full max-w-3xl mx-4 shadow-2xl max-h-[90vh] flex flex-col\">\n        <!-- Modal Header -->\n        <div class=\"flex items-center justify-between px-6 py-4 border-b border-slate-700\">\n          <h3 class=\"text-lg font-semibold text-white\">\n            {{ isCreating ? $t('packages.create_title') : ($t('packages.edit_title') + ': ' + getDisplayName(editingPackage!)) }}\n          </h3>\n          <button\n            @click=\"showModal = false\"\n            class=\"p-1 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n        <!-- Tab Navigation -->\n        <div class=\"flex border-b border-slate-700 px-6\">\n          <button\n            v-for=\"tab in tabs\"\n            :key=\"tab.key\"\n            @click=\"activeTab = tab.key\"\n            class=\"px-4 py-3 text-sm font-medium border-b-2 transition\"\n            :class=\"activeTab === tab.key\n              ? 'border-indigo-500 text-indigo-300'\n              : 'border-transparent text-slate-400 hover:text-slate-200 hover:border-slate-500'\"\n          >\n            {{ tab.label }}\n          </button>\n        </div>\n\n        <!-- Tab Content (scrollable) -->\n        <div class=\"flex-1 overflow-y-auto px-6 py-5\">\n          <!-- ═══ TAB 1: Basic Info ═══ -->\n          <div v-if=\"activeTab === 'basic'\" class=\"space-y-4\">\n            <!-- Name -->\n            <div>\n              <label class=\"block text-sm font-medium text-slate-300 mb-1\">{{ $t('packages.form_name') }}</label>\n              <input\n                v-model=\"form.name\"\n                type=\"text\"\n                class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                :placeholder=\"$t('packages.form_name_placeholder')\"\n              />\n            </div>\n\n            <!-- Display Name -->\n            <div>\n              <label class=\"block text-sm font-medium text-slate-300 mb-1\">{{ $t('packages.form_display_name') }}</label>\n              <input\n                v-model=\"form.display_name\"\n                type=\"text\"\n                class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                :placeholder=\"$t('packages.form_display_name_placeholder')\"\n              />\n            </div>\n\n            <!-- Type & Tier Level -->\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div>\n                <label class=\"block text-sm font-medium text-slate-300 mb-1\">{{ $t('packages.form_type') }}</label>\n                <select\n                  v-model=\"form.type\"\n                  class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                >\n                  <option value=\"private\">{{ $t('packages.type_private') }}</option>\n                  <option value=\"corporate\">{{ $t('packages.type_corporate') }}</option>\n                </select>\n              </div>\n              <div>\n                <label class=\"block text-sm font-medium text-slate-300 mb-1\">{{ $t('packages.form_tier_level') }}</label>\n                <input\n                  v-model.number=\"form.tier_level\"\n                  type=\"number\"\n                  min=\"0\"\n                  max=\"10\"\n                  class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                />\n                <p class=\"text-xs text-slate-500 mt-1\">{{ $t('packages.form_tier_level_hint') }}</p>\n              </div>\n            </div>\n\n            <!-- Subtitle & Badge -->\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div>\n                <label class=\"block text-sm font-medium text-slate-300 mb-1\">{{ $t('packages.form_subtitle') }}</label>\n                <input\n                  v-model=\"form.subtitle\"\n                  type=\"text\"\n                  class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                  :placeholder=\"$t('packages.form_subtitle_placeholder')\"\n                />\n              </div>\n              <div>\n                <label class=\"block text-sm font-medium text-slate-300 mb-1\">{{ $t('packages.form_badge') }}</label>\n                <input\n                  v-model=\"form.badge\"\n                  type=\"text\"\n                  class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                  :placeholder=\"$t('packages.form_badge_placeholder')\"\n                />\n              </div>\n            </div>\n\n            <!-- Is Custom -->\n            <div class=\"flex items-center gap-3\">\n              <input\n                v-model=\"form.is_custom\"\n                type=\"checkbox\"\n                id=\"is_custom\"\n                class=\"rounded bg-slate-700 border-slate-600 text-indigo-600 focus:ring-indigo-500\"\n              />\n              <label for=\"is_custom\" class=\"text-sm text-slate-300\">{{ $t('packages.form_is_custom') }}</label>\n            </div>\n\n            <!-- Singleton Rules -->\n            <div class=\"border-t border-slate-700 pt-4\">\n              <h4 class=\"text-sm font-semibold text-slate-300 mb-3\">{{ $t('packages.singleton_rules') }}</h4>\n              <div class=\"space-y-4\">\n                <div class=\"flex items-center gap-3\">\n                  <input\n                    v-model=\"form.is_default_fallback\"\n                    type=\"checkbox\"\n                    id=\"is_default_fallback\"\n                    class=\"rounded bg-slate-700 border-slate-600 text-amber-500 focus:ring-amber-500\"\n                  />\n                  <label for=\"is_default_fallback\" class=\"text-sm text-slate-300\">\n                    {{ $t('packages.form_is_default_fallback') }}\n                  </label>\n                </div>\n                <div>\n                  <label class=\"block text-sm text-slate-300 mb-1\">{{ $t('packages.form_trial_days') }}</label>\n                  <input\n                    v-model.number=\"form.trial_days_on_signup\"\n                    type=\"number\"\n                    min=\"0\"\n                    max=\"365\"\n                    class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-emerald-500 focus:border-transparent\"\n                  />\n                  <p class=\"text-xs text-slate-500 mt-1\">{{ $t('packages.form_trial_days_hint') }}</p>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ═══ TAB 2: Pricing (Per-Region + Smart Calculator) ═══ -->\n          <div v-if=\"activeTab === 'pricing'\" class=\"space-y-6\">\n            <!-- Per-Region Pricing Grid -->\n            <div>\n              <h4 class=\"text-sm font-semibold text-slate-300 mb-3\">{{ $t('packages.per_region_pricing') }}</h4>\n              <div class=\"overflow-x-auto\">\n                <table class=\"w-full text-sm\">\n                  <thead>\n                    <tr class=\"border-b border-slate-700\">\n                      <th class=\"text-left py-2 px-3 text-slate-400 font-medium\">Region</th>\n                      <th class=\"text-left py-2 px-3 text-slate-400 font-medium\">{{ $t('packages.form_monthly_price') }}</th>\n                      <th class=\"text-left py-2 px-3 text-slate-400 font-medium\">{{ $t('packages.form_yearly_price') }}</th>\n                      <th class=\"text-left py-2 px-3 text-slate-400 font-medium\">{{ $t('packages.form_currency') }}</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr v-for=\"region in regionStore.regions\" :key=\"region.country_code\" class=\"border-b border-slate-700/50\">\n                      <td class=\"py-2 px-3 text-slate-200 font-medium\">\n                        <span class=\"inline-flex items-center gap-1.5\">\n                          <span>{{ region.country_code }}</span>\n                          <span class=\"text-xs text-slate-500\">({{ region.currency }}, {{ region.default_vat_rate }}% VAT)</span>\n                        </span>\n                      </td>\n                      <td class=\"py-2 px-3\">\n                        <input\n                          :value=\"getZonePrice(region.country_code, 'monthly')\"\n                          @input=\"setZonePrice(region.country_code, 'monthly', ($event.target as HTMLInputElement).value)\"\n                          type=\"number\"\n                          step=\"0.01\"\n                          min=\"0\"\n                          class=\"w-full px-2 py-1.5 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                        />\n                      </td>\n                      <td class=\"py-2 px-3\">\n                        <input\n                          :value=\"getZonePrice(region.country_code, 'yearly')\"\n                          @input=\"setZonePrice(region.country_code, 'yearly', ($event.target as HTMLInputElement).value)\"\n                          type=\"number\"\n                          step=\"0.01\"\n                          min=\"0\"\n                          class=\"w-full px-2 py-1.5 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                        />\n                      </td>\n                      <td class=\"py-2 px-3\">\n                        <input\n                          :value=\"getZoneCurrency(region.country_code)\"\n                          @input=\"setZoneCurrency(region.country_code, ($event.target as HTMLInputElement).value)\"\n                          type=\"text\"\n                          maxlength=\"3\"\n                          class=\"w-full px-2 py-1.5 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent uppercase\"\n                        />\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </div>\n\n            <!-- Smart Pricing Calculator -->\n            <div class=\"border-t border-slate-700 pt-5\">\n              <h4 class=\"text-sm font-semibold text-slate-300 mb-3\">🧮 {{ $t('packages.smart_calculator') }}</h4>\n              <div class=\"bg-slate-700/30 rounded-xl p-4 space-y-4\">\n                <!-- Calculator Inputs -->\n                <div class=\"grid grid-cols-3 gap-4\">\n                  <div>\n                    <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('packages.calc_net_price') }}</label>\n                    <input\n                      v-model.number=\"calcNetPrice\"\n                      type=\"number\"\n                      step=\"0.01\"\n                      min=\"0\"\n                      class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-emerald-500 focus:border-transparent\"\n                      placeholder=\"0.00\"\n                    />\n                  </div>\n                  <div>\n                    <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('packages.calc_vat_rate') }}</label>\n                    <select\n                      v-model=\"calcVatRate\"\n                      class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-emerald-500 focus:border-transparent\"\n                    >\n                      <option v-for=\"region in regionStore.regions\" :key=\"region.country_code\" :value=\"region.default_vat_rate\">\n                        {{ region.country_code }} — {{ region.default_vat_rate }}%\n                      </option>\n                    </select>\n                  </div>\n                  <div>\n                    <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('packages.calc_currency') }}</label>\n                    <select\n                      v-model=\"calcCurrency\"\n                      class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-emerald-500 focus:border-transparent\"\n                    >\n                      <option v-for=\"region in regionStore.regions\" :key=\"region.country_code\" :value=\"region.currency\">\n                        {{ region.currency }} ({{ region.country_code }})\n                      </option>\n                    </select>\n                  </div>\n                </div>\n\n                <!-- Calculator Results -->\n                <div class=\"grid grid-cols-3 gap-4 pt-2\">\n                  <div class=\"bg-slate-800 rounded-lg p-3 text-center\">\n                    <p class=\"text-xs text-slate-400 mb-1\">{{ $t('packages.calc_net') }}</p>\n                    <p class=\"text-lg font-bold text-white\">{{ formatCurrency(calcNetPrice, calcCurrency) }}</p>\n                  </div>\n                  <div class=\"bg-slate-800 rounded-lg p-3 text-center\">\n                    <p class=\"text-xs text-slate-400 mb-1\">{{ $t('packages.calc_vat') }} ({{ calcVatRate }}%)</p>\n                    <p class=\"text-lg font-bold text-amber-400\">{{ formatCurrency(calcNetPrice * (calcVatRate / 100), calcCurrency) }}</p>\n                  </div>\n                  <div class=\"bg-slate-800 rounded-lg p-3 text-center ring-2 ring-emerald-500/50\">\n                    <p class=\"text-xs text-slate-400 mb-1\">{{ $t('packages.calc_gross') }}</p>\n                    <p class=\"text-lg font-bold text-emerald-400\">{{ formatCurrency(calcNetPrice * (1 + calcVatRate / 100), calcCurrency) }}</p>\n                  </div>\n                </div>\n\n                <!-- Quick Apply Button -->\n                <div class=\"flex justify-end pt-1\">\n                  <button\n                    @click=\"applyCalculatorToActiveRegion\"\n                    class=\"px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-medium rounded-lg transition flex items-center gap-2\"\n                  >\n                    <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n                    </svg>\n                    {{ $t('packages.calc_apply') }}\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- ═══ TAB 3: Features ═══ -->\n          <div v-if=\"activeTab === 'features'\" class=\"space-y-5\">\n            <!-- Allowances -->\n            <div>\n              <h4 class=\"text-sm font-semibold text-slate-300 mb-3\">{{ $t('packages.allowances') }}</h4>\n              <div class=\"grid grid-cols-3 gap-4\">\n                <div>\n                  <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('packages.max_vehicles') }}</label>\n                  <input\n                    v-model.number=\"form.max_vehicles\"\n                    type=\"number\"\n                    min=\"0\"\n                    class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                  />\n                </div>\n                <div>\n                  <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('packages.max_garages') }}</label>\n                  <input\n                    v-model.number=\"form.max_garages\"\n                    type=\"number\"\n                    min=\"0\"\n                    class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                  />\n                </div>\n                <div>\n                  <label class=\"block text-xs text-slate-400 mb-1\">{{ $t('packages.monthly_credits') }}</label>\n                  <input\n                    v-model.number=\"form.monthly_free_credits\"\n                    type=\"number\"\n                    min=\"0\"\n                    class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                  />\n                </div>\n              </div>\n            </div>\n\n            <!-- Feature Capabilities (JSON editor) -->\n            <div class=\"border-t border-slate-700 pt-4\">\n              <h4 class=\"text-sm font-semibold text-slate-300 mb-3\">{{ $t('packages.feature_capabilities') }}</h4>\n              <textarea\n                v-model=\"form.feature_capabilities_json\"\n                rows=\"8\"\n                class=\"w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white text-sm font-mono focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n                placeholder='{\\n  \"ai_analysis\": true,\\n  \"priority_support\": false,\\n  \"api_access\": true\\n}'\n              ></textarea>\n              <p class=\"text-xs text-slate-500 mt-1\">{{ $t('packages.feature_capabilities_hint') }}</p>\n              <p v-if=\"featureCapabilitiesError\" class=\"text-xs text-red-400 mt-1\">{{ featureCapabilitiesError }}</p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Modal Footer -->\n        <div class=\"flex items-center justify-between px-6 py-4 border-t border-slate-700\">\n          <div class=\"text-xs text-slate-500\">\n            {{ activeTabLabel }}\n          </div>\n          <div class=\"flex items-center gap-3\">\n            <button\n              @click=\"showModal = false\"\n              class=\"px-4 py-2 text-sm text-slate-400 hover:text-white transition\"\n            >\n              {{ $t('packages.cancel') }}\n            </button>\n            <button\n              @click=\"savePackage\"\n              :disabled=\"saving\"\n              class=\"px-6 py-2 bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-600 disabled:cursor-not-allowed text-white font-medium rounded-lg transition text-sm flex items-center gap-2\"\n            >\n              <svg v-if=\"saving\" class=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"></path>\n              </svg>\n              {{ isCreating ? $t('packages.create') : $t('packages.save') }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Delete Confirmation Modal -->\n    <div\n      v-if=\"showDeleteConfirm && deletingPackage\"\n      class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60\"\n      @click.self=\"showDeleteConfirm = false\"\n    >\n      <div class=\"bg-slate-800 border border-slate-700 rounded-xl w-full max-w-md mx-4 p-6 shadow-2xl\">\n        <h3 class=\"text-lg font-semibold text-white mb-2\">{{ $t('packages.delete_title') }}</h3>\n        <p class=\"text-slate-400 text-sm mb-6\">\n          {{ $t('packages.delete_confirm', { name: getDisplayName(deletingPackage) }) }}\n        </p>\n        <div class=\"flex items-center justify-end gap-3\">\n          <button\n            @click=\"showDeleteConfirm = false\"\n            class=\"px-4 py-2 text-sm text-slate-400 hover:text-white transition\"\n          >\n            {{ $t('packages.cancel') }}\n          </button>\n          <button\n            @click=\"deletePackage\"\n            :disabled=\"saving\"\n            class=\"px-6 py-2 bg-red-600 hover:bg-red-500 disabled:bg-slate-600 disabled:cursor-not-allowed text-white font-medium rounded-lg transition text-sm\"\n          >\n            {{ $t('packages.delete_btn') }}\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Save Notification -->\n    <div\n      v-if=\"saveNotification\"\n      class=\"fixed bottom-6 right-6 px-5 py-3 rounded-xl shadow-xl text-sm font-medium z-50\"\n      :class=\"saveNotification.type === 'success'\n        ? 'bg-emerald-600 text-white'\n        : 'bg-red-600 text-white'\"\n    >\n      {{ saveNotification.message }}\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, reactive, computed, onMounted } from 'vue'\nimport { useRegionStore } from '~/stores/region'\nimport { useFormatter } from '~/composables/useFormatter'\n\ndefinePageMeta({\n  middleware: 'auth',\n})\n\n// ── Region Store & Formatter ──────────────────────────────────────\nconst regionStore = useRegionStore()\nconst { formatCurrency } = useFormatter()\n\n// ── Types ──────────────────────────────────────────────────────────\n\ninterface SubscriptionTier {\n  id: number\n  name: string\n  rules: {\n    type: string\n    display_name?: string | null\n    pricing?: {\n      monthly_price: number\n      yearly_price: number\n      currency: string\n      credit_price?: number | null\n    } | null\n    pricing_zones?: Record<string, {\n      monthly_price: number\n      yearly_price: number\n      currency: string\n      credit_price?: number | null\n    }> | null\n    allowances?: {\n      max_vehicles: number\n      max_garages: number\n      monthly_free_credits: number\n    } | null\n    marketing?: {\n      subtitle?: string | null\n      badge?: string | null\n      highlight_color?: string | null\n    } | null\n    lifecycle?: {\n      is_public?: boolean\n      available_until?: string | null\n    } | null\n  }\n  is_custom: boolean\n  tier_level: number\n  feature_capabilities: Record<string, any>\n  is_default_fallback: boolean\n  trial_days_on_signup: number\n}\n\ninterface PackageForm {\n  name: string\n  display_name: string\n  type: string\n  tier_level: number\n  monthly_price: number\n  yearly_price: number\n  currency: string\n  max_vehicles: number\n  max_garages: number\n  monthly_free_credits: number\n  subtitle: string\n  badge: string\n  is_custom: boolean\n  is_default_fallback: boolean\n  trial_days_on_signup: number\n  feature_capabilities_json: string\n  pricing_zones: Record<string, { monthly_price: number; yearly_price: number; currency: string }>\n}\n\n// ── Tab Configuration ──────────────────────────────────────────────\n\nconst tabs = [\n  { key: 'basic', label: '📋 Basic Info' },\n  { key: 'pricing', label: '💰 Pricing' },\n  { key: 'features', label: '⚡ Features' },\n]\n\nconst activeTab = ref('basic')\n\nconst activeTabLabel = computed(() => {\n  const tab = tabs.find(t => t.key === activeTab.value)\n  return tab ? tab.label : ''\n})\n\n// ── State ──────────────────────────────────────────────────────────\n\nconst packages = ref<SubscriptionTier[]>([])\nconst loading = ref(true)\nconst error = ref<string | null>(null)\nconst showModal = ref(false)\nconst showDeleteConfirm = ref(false)\nconst editingPackage = ref<SubscriptionTier | null>(null)\nconst deletingPackage = ref<SubscriptionTier | null>(null)\nconst isCreating = ref(false)\nconst saving = ref(false)\nconst saveNotification = ref<{ type: 'success' | 'error'; message: string } | null>(null)\nconst featureCapabilitiesError = ref<string | null>(null)\n\n// ── Smart Pricing Calculator State ─────────────────────────────────\n\nconst calcNetPrice = ref(0)\nconst calcVatRate = ref(27)\nconst calcCurrency = ref('EUR')\n\n// ── Default Form ───────────────────────────────────────────────────\n\nconst defaultForm: PackageForm = {\n  name: '',\n  display_name: '',\n  type: 'private',\n  tier_level: 0,\n  monthly_price: 0,\n  yearly_price: 0,\n  currency: 'EUR',\n  max_vehicles: 1,\n  max_garages: 1,\n  monthly_free_credits: 0,\n  subtitle: '',\n  badge: '',\n  is_custom: false,\n  is_default_fallback: false,\n  trial_days_on_signup: 0,\n  feature_capabilities_json: '{\\n  \"ai_analysis\": false,\\n  \"priority_support\": false,\\n  \"api_access\": false\\n}',\n  pricing_zones: {}\n}\n\nconst form = reactive<PackageForm>({ ...defaultForm })\n\n// ── Pricing Zone Helpers ───────────────────────────────────────────\n\nfunction getZonePrice(countryCode: string, period: 'monthly' | 'yearly'): number {\n  const zone = form.pricing_zones[countryCode]\n  if (!zone) return 0\n  return period === 'monthly' ? zone.monthly_price : zone.yearly_price\n}\n\nfunction setZonePrice(countryCode: string, period: 'monthly' | 'yearly', value: string) {\n  const num = parseFloat(value) || 0\n  if (!form.pricing_zones[countryCode]) {\n    form.pricing_zones[countryCode] = { monthly_price: 0, yearly_price: 0, currency: 'EUR' }\n  }\n  if (period === 'monthly') {\n    form.pricing_zones[countryCode].monthly_price = num\n  } else {\n    form.pricing_zones[countryCode].yearly_price = num\n  }\n}\n\nfunction getZoneCurrency(countryCode: string): string {\n  const zone = form.pricing_zones[countryCode]\n  if (!zone) return 'EUR'\n  return zone.currency\n}\n\nfunction setZoneCurrency(countryCode: string, value: string) {\n  if (!form.pricing_zones[countryCode]) {\n    form.pricing_zones[countryCode] = { monthly_price: 0, yearly_price: 0, currency: 'EUR' }\n  }\n  form.pricing_zones[countryCode].currency = value.toUpperCase()\n}\n\n/**\n * Apply the Smart Pricing Calculator result to the currently selected region's monthly price.\n */\nfunction applyCalculatorToActiveRegion() {\n  const targetRegion = regionStore.regions.find(r => r.default_vat_rate === calcVatRate)\n  if (!targetRegion) {\n    showNotification('error', 'No region found with the selected VAT rate')\n    return\n  }\n  const code = targetRegion.country_code\n  if (!form.pricing_zones[code]) {\n    form.pricing_zones[code] = { monthly_price: 0, yearly_price: 0, currency: targetRegion.currency }\n  }\n  form.pricing_zones[code].monthly_price = calcNetPrice\n  form.pricing_zones[code].currency = calcCurrency\n  showNotification('success', `Applied net price ${formatCurrency(calcNetPrice, calcCurrency)} to ${code} region`)\n}\n\n// ── API Helpers ────────────────────────────────────────────────────\n\nfunction getAuthHeaders() {\n  const tokenCookie = useCookie('access_token')\n  const token = tokenCookie.value\n  return token ? { Authorization: `Bearer ${token}` } : {}\n}\n\nasync function fetchPackages() {\n  loading.value = true\n  error.value = null\n  try {\n    const res = await $fetch<{ total: number; tiers: SubscriptionTier[] }>('/api/v1/admin/packages', {\n      headers: getAuthHeaders(),\n    })\n    packages.value = res.tiers || []\n  } catch (err: any) {\n    error.value = err?.data?.detail || err?.message || 'Failed to load packages'\n    console.error('[Packages] Fetch error:', err)\n  } finally {\n    loading.value = false\n  }\n}\n\n// ── Display Helpers ────────────────────────────────────────────────\n\nfunction getDisplayName(pkg: SubscriptionTier): string {\n  return pkg.rules?.display_name || pkg.name\n}\n\nfunction getDescription(pkg: SubscriptionTier): string {\n  return pkg.rules?.marketing?.subtitle || pkg.rules?.marketing?.badge || ''\n}\n\nfunction getFormattedPrice(pkg: SubscriptionTier): string {\n  const zones = pkg.rules?.pricing_zones\n  const pricing = pkg.rules?.pricing\n  if (zones && zones['DEFAULT']) {\n    const p = zones['DEFAULT']\n    const currency = p.currency === 'HUF' ? 'Ft' : '€'\n    return `${p.monthly_price} ${currency}`\n  }\n  if (pricing) {\n    const currency = pricing.currency === 'HUF' ? 'Ft' : '€'\n    return `${pricing.monthly_price} ${currency}`\n  }\n  return '—'\n}\n\nfunction getAllowance(pkg: SubscriptionTier, key: string): number | string {\n  const allowances = pkg.rules?.allowances\n  if (!allowances) return '—'\n  return (allowances as any)[key] ?? '—'\n}\n\nfunction getTierColorClass(level: number): string {\n  if (level >= 2) return 'bg-purple-500/10 text-purple-400'\n  if (level >= 1) return 'bg-amber-500/10 text-amber-400'\n  return 'bg-slate-500/10 text-slate-400'\n}\n\nfunction getTierIcon(level: number): string {\n  if (level >= 2) return '🏢'\n  if (level >= 1) return '⭐'\n  return '🔓'\n}\n\n// ── Modal Actions ──────────────────────────────────────────────────\n\nfunction openCreateModal() {\n  isCreating.value = true\n  editingPackage.value = null\n  activeTab.value = 'basic'\n  Object.assign(form, defaultForm)\n  showModal.value = true\n}\n\nfunction openEditModal(pkg: SubscriptionTier) {\n  isCreating.value = false\n  editingPackage.value = pkg\n  activeTab.value = 'basic'\n\n  const rules = pkg.rules || {} as any\n  const pricing = rules.pricing_zones?.DEFAULT || rules.pricing || {}\n  const allowances = rules.allowances || {}\n\n  form.name = pkg.name\n  form.display_name = rules.display_name || ''\n  form.type = rules.type || 'private'\n  form.tier_level = pkg.tier_level\n  form.monthly_price = pricing.monthly_price || 0\n  form.yearly_price = pricing.yearly_price || 0\n  form.currency = pricing.currency || 'EUR'\n  form.max_vehicles = allowances.max_vehicles || 1\n  form.max_garages = allowances.max_garages || 1\n  form.monthly_free_credits = allowances.monthly_free_credits || 0\n  form.subtitle = rules.marketing?.subtitle || ''\n  form.badge = rules.marketing?.badge || ''\n  form.is_custom = pkg.is_custom\n  form.is_default_fallback = pkg.is_default_fallback\n  form.trial_days_on_signup = pkg.trial_days_on_signup\n\n  // Load pricing zones\n  form.pricing_zones = {}\n  if (rules.pricing_zones) {\n    for (const [code, zone] of Object.entries(rules.pricing_zones)) {\n      form.pricing_zones[code] = {\n        monthly_price: zone.monthly_price || 0,\n        yearly_price: zone.yearly_price || 0,\n        currency: zone.currency || 'EUR',\n      }\n    }\n  }\n\n  // Load feature capabilities as JSON string\n  form.feature_capabilities_json = JSON.stringify(pkg.feature_capabilities || {}, null, 2)\n\n  showModal.value = true\n}\n\nfunction confirmDelete(pkg: SubscriptionTier) {\n  deletingPackage.value = pkg\n  showDeleteConfirm.value = true\n}\n\n// ── Save / Create ──────────────────────────────────────────────────\n\nasync function savePackage() {\n  if (!form.name.trim()) {\n    showNotification('error', 'Package name is required')\n    return\n  }\n\n  // Validate feature_capabilities JSON\n  let featureCapabilities: Record<string, any> = {}\n  try {\n    featureCapabilities = JSON.parse(form.feature_capabilities_json)\n    featureCapabilitiesError.value = null\n  } catch {\n    featureCapabilitiesError.value = 'Invalid JSON in feature capabilities'\n    activeTab.value = 'features'\n    return\n  }\n\n  saving.value = true\n  try {\n    // Build pricing_zones from form, ensuring DEFAULT is always present\n    const pricingZones: Record<string, any> = { ...form.pricing_zones }\n    if (!pricingZones['DEFAULT']) {\n      pricingZones['DEFAULT'] = {\n        monthly_price: form.monthly_price,\n        yearly_price: form.yearly_price,\n        currency: form.currency.toUpperCase(),\n      }\n    }\n\n    const rulesPayload: any = {\n      type: form.type,\n      display_name: form.display_name || null,\n      pricing_zones: pricingZones,\n      allowances: {\n        max_vehicles: form.max_vehicles,\n        max_garages: form.max_garages,\n        monthly_free_credits: form.monthly_free_credits,\n      },\n      marketing: {\n        subtitle: form.subtitle || null,\n        badge: form.badge || null,\n      },\n      lifecycle: {\n        is_public: true,\n      },\n    }\n\n    if (isCreating.value) {\n      // POST - Create new package\n      await $fetch('/api/v1/admin/packages', {\n        method: 'POST',\n        headers: {\n          ...getAuthHeaders(),\n          'Content-Type': 'application/json',\n        },\n        body: {\n          name: form.name.trim().toLowerCase(),\n          rules: rulesPayload,\n          is_custom: form.is_custom,\n          tier_level: form.tier_level,\n          feature_capabilities: featureCapabilities,\n          is_default_fallback: form.is_default_fallback,\n          trial_days_on_signup: form.trial_days_on_signup,\n        },\n      })\n      showNotification('success', `Package \"${form.name}\" created successfully`)\n    } else if (editingPackage.value) {\n      // PATCH - Update existing package\n      await $fetch(`/api/v1/admin/packages/${editingPackage.value.id}`, {\n        method: 'PATCH',\n        headers: {\n          ...getAuthHeaders(),\n          'Content-Type': 'application/json',\n        },\n        body: {\n          name: form.name.trim().toLowerCase(),\n          rules: rulesPayload,\n          is_custom: form.is_custom,\n          tier_level: form.tier_level,\n          feature_capabilities: featureCapabilities,\n          is_default_fallback: form.is_default_fallback,\n          trial_days_on_signup: form.trial_days_on_signup,\n        },\n      })\n      showNotification('success', `Package \"${form.name}\" updated successfully`)\n    }\n\n    showModal.value = false\n    await fetchPackages()\n  } catch (err: any) {\n    const detail = err?.data?.detail || err?.message || 'Operation failed'\n    showNotification('error', detail)\n    console.error('[Packages] Save error:', err)\n  } finally {\n    saving.value = false\n  }\n}\n\nasync function deletePackage() {\n  if (!deletingPackage.value) return\n\n  saving.value = true\n  try {\n    await $fetch(`/api/v1/admin/packages/${deletingPackage.value.id}`, {\n      method: 'DELETE',\n      headers: getAuthHeaders(),\n    })\n    showNotification('success', `Package \"${getDisplayName(deletingPackage.value)}\" deactivated`)\n    showDeleteConfirm.value = false\n    deletingPackage.value = null\n    await fetchPackages()\n  } catch (err: any) {\n    const detail = err?.data?.detail || err?.message || 'Delete failed'\n    showNotification('error', detail)\n    console.error('[Packages] Delete error:', err)\n  } finally {\n    saving.value = false\n  }\n}\n\n// ── Notification ───────────────────────────────────────────────────\n\nfunction showNotification(type: 'success' | 'error', message: string) {\n  saveNotification.value = { type, message }\n  setTimeout(() => {\n    saveNotification.value = null\n  }, 4000)\n}\n\n// ── Lifecycle ──────────────────────────────────────────────────────\n\nonMounted(() => {\n  fetchPackages()\n  regionStore.fetchRegions()\n})\n</script>"],"version":3}