<template>
  <div class="edit-calculation-container"
       :class="{ 'has-selection': hasSelection, 'apply-filter': applyFilter, 'add-all': addAll }">
    <div class="header-container">
      <h2 class="page-header">Mass edit calculation</h2>
      <div class="header-controls">
        <basic-button :show-icon="true"
                      :disabled="disableButtons"
                      icon="MapPin" variant="primary"
                      @click="destMgmt"
        >Destination manager
        </basic-button>
        <basic-button :show-icon="true"
                      :disabled="disableButtons"
                      icon="Calculator" variant="primary"
                      @click="calculate"
        >Calculate & close
        </basic-button>
        <basic-button :show-icon="false"
                      :disabled="disableButtons"
                      variant="secondary"
                      @click="close"
        >Close
        </basic-button>

      </div>
    </div>

    <div class="edit-calculation-list-container">
      <div class="edit-calculation-list-header">
        <div>
          <checkbox @checkbox-changed="updateCheckBoxes" :checked="overallCheck"
                    :indeterminate="overallIndeterminate" :disabled="!showData"></checkbox>
        </div>
        <div class="edit-calculation-list-header-cell edit-calculation-list-header-cell--clickable"
             :class="{'edit-calculation-list-header-cell--selected': premiseEditStore.activeSort === 'material'}"
             @click="premiseEditStore.sort('material')">Material
          <sort-button :active="premiseEditStore.activeSort === 'material'"
                       :direction="premiseEditStore.directionSort('material')"/>
        </div>
        <div class="edit-calculation-list-header-cell">Price</div>
        <div class="edit-calculation-list-header-cell">Packaging</div>
        <div class="edit-calculation-list-header-cell edit-calculation-list-header-cell--clickable"
             :class="{'edit-calculation-list-header-cell--selected': premiseEditStore.activeSort === 'supplier'}"
             @click="premiseEditStore.sort('supplier')">Supplier
          <sort-button :active="premiseEditStore.activeSort === 'supplier'"
                       :direction="premiseEditStore.directionSort('supplier')"/>
        </div>
        <div class="edit-calculation-list-header-cell">Annual Quantity</div>
        <div class="edit-calculation-list-header-cell">Routes</div>
        <div class="edit-calculation-list-header-cell">Actions</div>
      </div>

      <!-- Loading Spinner - außerhalb der TransitionGroup -->
      <div v-if="showLoading" class="spinner-container">
        <spinner class="space-around"></spinner>
      </div>

      <!-- Empty State - außerhalb der TransitionGroup -->
      <div v-else-if="showEmpty" class="empty-container">
        <span class="space-around">No Calculations found.</span>
      </div>

      <!-- Rows mit Sort-Animation -->
      <transition-group
          v-else
          name="sort-list"
          tag="div"
          class="edit-calculation-list-body"
          @before-enter="onBeforeEnter"
          @enter="onEnter"
      >
        <bulk-edit-row
            v-for="(premise, index) of premises"
            :key="premise.id"
            :id="premise.id"
            :premise="premise"
            :data-index="index"
            class="edit-calculation-list-item"
            @action="onClickAction"
            @select="updateCheckBox"
            @remove="updateUrl">
        </bulk-edit-row>
      </transition-group>
    </div>

    <mass-edit-dialog v-if="showData" :show="showMultiselectAction" @action="onToolbarAction"
                      :select-count="selectCount"></mass-edit-dialog>


    <modal-dialog title="Missing destinations" :state="modalDialogShow"
                  message="Some of the selected calculations have no destinations set. Would you like to edit the destinations first?"
                  accept-text="Yes" :deny-text="denyText" @click="modalDialogClick"></modal-dialog>

    <modal :z-index="2000" :state="modalShow">
      <div class="modal-content-container">
        <h3 class="sub-header">{{ modalTitle }}</h3>
        <component
            :is="modalComponentType"
            ref="modalComponent"


            v-model:partNumber="modalProps.partNumber"
            v-model:hsCode="modalProps.hsCode"
            v-model:tariffRate="modalProps.tariffRate"
            v-model:tariffUnlocked="modalProps.tariffUnlocked"
            v-model:description="modalProps.description"

            v-model:price="modalProps.price"
            v-model:overSeaShare="modalProps.overSeaShare"
            v-model:includeFcaFee="modalProps.includeFcaFee"

            v-model:length="modalProps.length"
            v-model:width="modalProps.width"
            v-model:height="modalProps.height"
            v-model:weight="modalProps.weight"
            v-model:weightUnit="modalProps.weightUnit"
            v-model:dimensionUnit="modalProps.dimensionUnit"
            v-model:unitCount="modalProps.unitCount"
            v-model:mixable="modalProps.mixable"
            v-model:stackable="modalProps.stackable"

            v-model:hideDescription="modalProps.hideDescription"

            :type="modalType"
            :premiseIds="editIds"

            :fromMassEdit="true"
            :countryId=null
            :responsive="false"

            @close="closeEditModalAction('cancel')"
            @accept="closeEditModalAction('accept')"

        >
        </component>

        <div class="modal-content-footer" @keydown="handleKeyDown($event)">
          <basic-button v-if="!modalCloseOnly" :show-icon="false" @click="closeEditModalAction('accept')">OK
          </basic-button>
          <basic-button variant="secondary" :show-icon="false" @click="closeEditModalAction('cancel')">
            {{ modalCloseOnly ? "Close" : "Cancel" }}
          </basic-button>
        </div>
      </div>
    </modal>

  </div>
</template>

<script>

import {UrlSafeBase64} from "@/common.js";
import {mapStores} from "pinia";
import {usePremiseEditStore} from "@/store/premiseEdit.js";
import BasicButton from "@/components/UI/BasicButton.vue";
import BulkEditRow from "@/components/layout/bulkedit/BulkEditRow.vue";
import Checkbox from "@/components/UI/Checkbox.vue";
import CalculationListItem from "@/components/layout/calculation/CalculationListItem.vue";
import Spinner from "@/components/UI/Spinner.vue";
import ListEdit from "@/components/UI/ListEdit.vue";
import MassEditDialog from "@/components/UI/MassEditDialog.vue";
import Modal from "@/components/UI/Modal.vue";
import PriceEdit from "@/components/layout/edit/PriceEdit.vue";
import MaterialEdit from "@/components/layout/edit/MaterialEdit.vue";
import PackagingEdit from "@/components/layout/edit/PackagingEdit.vue";

import {useNotificationStore} from "@/store/notification.js";
import {useDestinationEditStore} from "@/store/destinationEdit.js";
import SortButton from "@/components/UI/SortButton.vue";
import DestinationMassEdit from "@/components/layout/edit/destination/mass/DestinationMassEdit.vue";
import DestMassCreate from "@/components/layout/edit/destination/mass/DestMassCreate.vue";
import ModalDialog from "@/components/UI/ModalDialog.vue";
import destinationEdit from "@/components/layout/edit/destination/DestinationEdit.vue";
import logger from "@/logger.js";


const COMPONENT_TYPES = {
  price: PriceEdit,
  material: MaterialEdit,
  packaging: PackagingEdit,
  destinations: DestMassCreate,
  routes: DestinationMassEdit,
  amount: DestinationMassEdit
}

export default {
  name: "MassEdit",
  components: {
    ModalDialog,
    SortButton,
    Modal,
    MassEditDialog,
    ListEdit,
    Spinner,
    CalculationListItem,
    Checkbox,
    BulkEditRow,
    BasicButton
  },
  data() {
    return {
      ids: [],
      isCtrlPressed: false,
      isShiftPressed: false,
      overallCheck: false,
      overallIndeterminate: false,
      bulkQuery: null,
      modalTitle: null,
      modalType: null,
      modalProps: null,
      editIds: null,
      processingMessage: "Please wait. Calculating ...",
      showCalculationModal: false,
      isInitialLoad: true,
      modalDialogShow: false,
      modalStash: null,
      denyText: 'No'
    }
  },
  computed: {
    ...mapStores(usePremiseEditStore, useNotificationStore, useDestinationEditStore),
    disableButtons() {
      return this.premiseEditStore.selectedLoading;
    },
    premises() {
      return this.premiseEditStore.getPremisses;
    },
    hasSelection() {
      if (this.premiseEditStore.isLoading || this.premiseEditStore.selectedLoading) {
        return false;
      }
      return !this.addAll && !this.applyFilter && this.premiseEditStore.someChecked;
    },
    applyFilter() {
      return this.isCtrlPressed && this.isShiftPressed;
    },
    addAll() {
      return this.isCtrlPressed && !this.isShiftPressed;
    },
    showMultiselectAction() {
      return this.selectCount > 0;
    },
    selectCount() {
      return this.premiseEditStore.getSelectedPremiseIds?.length ?? 0;
    },
    showEmpty() {
      return this.premiseEditStore.showEmpty;
    },
    showLoading() {
      return this.premiseEditStore.isLoading;
    },
    showData() {
      return this.premiseEditStore.showData;
    },
    modalCloseOnly() {
      //TODO: fix material editing.
      return this.modalType === 'material' && !this.modalProps.tariffUnlocked; //TODO: check all selected.
    },
    modalShow() {
      return ((this.modalType ?? null) !== null);
    },
    modalComponentType() {
      return this.modalType ? COMPONENT_TYPES[this.modalType] : null;
    },
    showProcessingModal() {
      return this.premiseEditStore.showProcessingModal || this.destinationEditStore.showProcessingModal;
    },
    shownProcessingMessage() {
      return this.processingMessage;
    }
  },
  watch: {
    showProcessingModal(newState, _) {
      if (newState) {
        this.notificationStore.setSpinner(this.shownProcessingMessage);
      } else {
        this.notificationStore.clearSpinner();
      }
    }
  },
  async created() {
    this.bulkQuery = this.$route.params.ids;
    this.ids = new UrlSafeBase64().decodeIds(this.$route.params.ids);
    const premisses = await this.premiseEditStore.load(this.ids);
    this.destinationEditStore.setupDestinations(premisses);

  },
  mounted() {
    window.addEventListener('keydown', this.handleKeyDown);
    window.addEventListener('keyup', this.handleKeyUp);
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleKeyDown);
    window.removeEventListener('keyup', this.handleKeyUp);
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === 'Control') {
        this.isCtrlPressed = true;
      } else if (event.key === 'Shift') {
        this.isShiftPressed = true;
      }

      if (event.key === 'Escape') {
        this.fillData(this.modalType);
        this.modalType = null;
      }

    },
    handleKeyUp(event) {
      if (event.key === 'Control') {
        this.isCtrlPressed = false;
      } else if (event.key === 'Shift') {
        this.isShiftPressed = false;
      }
    },
    updateUrl(id) {
      const idx = this.ids.findIndex(curId => curId === id);

      if (idx > -1) {
        this.ids.splice(idx, 1);

        this.$router.replace({
          name: "bulk",
          params: {
            ids: new UrlSafeBase64().encodeIds(this.ids)
          }
        });
      }
    },
    destMgmt() {
      this.fillData('destinations');
      this.editIds = null;
      this.modalTitle = 'Destination Manager'
      this.modalType = 'destinations';
    },
    async calculate() {
      this.showCalculationModal = true;
      const error = await this.premiseEditStore.startCalculation();

      if (error === null) {
        this.close()
      }
      this.showCalculationModal = false;
    },
    close() {
      this.$router.push({name: "calculation-list"});
    },

    /* checkbox handling */

    updateCheckBox(data) {
      this.premiseEditStore.setChecked(data.id, data.checked);
      this.updateOverallCheckBox();
    },
    updateCheckBoxes(value) {
      this.premiseEditStore.setAll(value);
      this.updateOverallCheckBox();
    },
    updateOverallCheckBox() {
      this.overallCheck = this.premiseEditStore.allChecked;

      if (!this.overallCheck)
        this.overallIndeterminate = this.premiseEditStore.someChecked;
    },


    /* click listeners */

    onToolbarAction(action) {
      if (action === 'deselect') {
        this.updateCheckBoxes(false);
      } else
        this.openModal(action, this.premiseEditStore.getSelectedPremiseIds);
    },
    onClickAction(data) {

      const actions = data.action.split("-");

      if (actions.length === 1) {
        const massEdit = 0 !== this.selectCount;
        this.openModal(data.action, massEdit ? this.premiseEditStore.getSelectedPremiseIds : [data.id], data.id, massEdit);
      } else if (actions.length === 2) { /* ctrl or ctrl + shift */
        this.premiseEditStore.setBy(actions[0], actions[1], data.id);
        this.updateOverallCheckBox();
      }
    },

    /* modal handling */

    modalDialogClick(action) {

      this.modalDialogShow = false;

      if (action === 'dismiss') {
        this.modalStash = null;
        return;
      }

      if (action === 'deny') {
        this.openModal(this.modalStash.type, this.modalStash.ids, this.modalStash.dataSource, this.modalStash.massEdit)
        this.modalStash = null;
        return;
      }

      this.destMgmt();


    },

    openModal(type, ids, dataSource = -1, massEdit = true) {

      logger.log("open modal", type, ids, dataSource, massEdit, this.modalStash, this.modalDialogShow)

      if ((type === 'amount' || type === 'routes') && this.modalStash === null) {

        const state = this.destinationEditStore.checkDestinationAssignment(ids);

        if (state === 'some' || state === 'none') {
          this.denyText = state === 'none' ? null : 'No'
          this.modalDialogShow = true;
          // stash for later.
          this.modalStash = {type: type, ids: ids, dataSource: dataSource, massEdit: massEdit};
        }
      }

      if ((type === 'amount' || type === 'routes')) {
        if (dataSource !== -1)
          ids = [dataSource];
      }

      if (!this.modalDialogShow) {
        logger.log("open modal (actual)", type, ids, dataSource, massEdit, this.modalStash, this.modalDialogShow)
        this.fillData(type, dataSource, massEdit);
        this.editIds = ids;
        this.modalType = type;
      }

    },
    async closeEditModalAction(action) {

      let massUpdate = false;

      if (this.modalType === 'amount' || this.modalType === 'routes' || this.modalType === "destinations") {

        if (action === 'accept') {

          if (this.modalType === "destinations") {
            const setMatrix = this.$refs.modalComponent?.destMatrix;

            if (setMatrix) {
              await this.destinationEditStore.massSetDestinations(setMatrix);
            }
          } else {
            massUpdate = true
          }
        }

        // Clear data
        this.fillData(this.modalType);
        this.modalType = null;

        if(massUpdate) {
          await this.destinationEditStore.massUpdateDestinations(this.editIds);
        }

        if (this.modalStash && action === 'accept') {
          setTimeout(() => {
            this.openModal(this.modalStash.type, this.modalStash.ids, this.modalStash.dataSource, this.modalStash.massEdit);
            this.modalStash = null;
          }, 300);
        } else {
          this.modalStash = null;
        }

      } else if (action === "accept") {
        await this.premiseEditStore.batchUpdate(this.modalType, this.editIds, this.modalProps);
        // Clear data
        this.fillData(this.modalType);
        this.modalType = null;
      } else if (action === "cancel") {
        // Clear data
        this.fillData(this.modalType);
        this.modalType = null;
      }
    },
    fillData(type, id = -1, hideDescription = false) {

      if (id === -1) {

        if (type === 'price')
          this.modalProps = {price: null, overSeaShare: null, includeFcaFee: null};

        if (type === 'material')
          this.modalProps = {
            partNumber: "",
            hsCode: null,
            tariffRate: null,
            tariffUnlocked: false,
            description: null,
            hideDescription: hideDescription
          };

        if (type === 'packaging')
          this.modalProps = {
            length: null,
            width: null,
            height: null,
            weight: null,
            weightUnit: "KG",
            dimensionUnit: "MM",
            unitCount: null,
            mixable: true,
            stackable: true
          };

        if (type === 'amount' || type === 'routes' || type === 'destinations') {
          this.modalTitle = "Edit destinations";
          this.modalProps = {};
        }

      } else {
        const premise = this.premiseEditStore.getById(id);

        this.modalTitle = "Edit ".concat(type);

        if (type === "price") {
          this.modalProps = {
            price: premise.material_cost,
            overSeaShare: premise.oversea_share,
            includeFcaFee: premise.is_fca_enabled
          }
        } else if (type === "material") {

          this.modalProps = {
            partNumber: premise.material.part_number,
            hsCode: premise.hs_code,
            tariffRate: premise.tariff_rate ?? null,
            tariffUnlocked: premise.tariff_unlocked,
            description: premise.material.name ?? "",
            hideDescription: hideDescription
          }

        } else if (type === "packaging") {
          this.modalProps = {
            length: premise.handling_unit.length,
            width: premise.handling_unit.width,
            height: premise.handling_unit.height,
            weight: premise.handling_unit.weight,
            weightUnit: premise.handling_unit.weight_unit ?? "KG",
            dimensionUnit: premise.handling_unit.dimension_unit ?? "MM",
            unitCount: premise.handling_unit.content_unit_count,
            mixable: premise.is_mixable ?? true,
            stackable: premise.is_stackable ?? true
          }
        } else if (type === 'amount' || type === 'routes' || type === 'destinations') {
          this.modalTitle = "Edit destinations";
          this.modalProps = {type: type};
        }
      }
    },

    /* Animation hooks */

    onBeforeEnter(el) {
      if (this.isInitialLoad) {
        el.style.opacity = 0;
        el.style.transform = 'translateY(2rem)';
      }
    }
    ,
    onEnter(el, done) {
      if (this.isInitialLoad) {
        const index = parseInt(el.dataset.index) || 0;
        const delay = index * 50; // 50ms Verzögerung pro Element

        setTimeout(() => {
          el.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
          el.style.opacity = 1;
          el.style.transform = 'translateY(0)';

          // Cleanup nach Animation
          setTimeout(() => {
            el.style.transition = '';
            el.style.opacity = '';
            el.style.transform = '';
            done();

            // Nach dem letzten Element isInitialLoad deaktivieren
            if (index === this.premises.length - 1) {
              this.isInitialLoad = false;
            }
          }, 400);
        }, delay);
      } else {
        done();
      }
    }
  }
}
</script>
<style scoped>

.sub-header {
  flex-shrink: 0; /* Prevent header from shrinking */
  margin-bottom: 1.6rem;
}

/* Global style für copy-mode cursor */
.edit-calculation-container.has-selection :deep(.edit-calculation-list-header-cell--copyable:hover) {
  cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEyOC41MSAxMzQuMDUiPjxkZWZzPjxzdHlsZT4uY3tmaWxsOm5vbmU7fS5jLC5ke3N0cm9rZTojMDEwMTAxO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4O30uZHtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJhIj48cGF0aCBjbGFzcz0iYyIgZD0ibTU0Ljg5LDExMi41MWgtMi4yNGMtMS4yNCwwLTIuMjQtMS0yLjI0LTIuMjR2LTIuMjQiLz48bGluZSBjbGFzcz0iYyIgeDE9IjcwLjU3IiB5MT0iNzYuNjciIHgyPSI2My44NSIgeTI9Ijc2LjY3Ii8+PGxpbmUgY2xhc3M9ImMiIHgxPSI3MC41NyIgeTE9IjExMi41MSIgeDI9IjY2LjA5IiB5Mj0iMTEyLjUxIi8+PGxpbmUgY2xhc3M9ImMiIHgxPSI4Ni4yNSIgeTE9Ijk5LjA3IiB4Mj0iODYuMjUiIHkyPSI5Mi4zNSIvPjxsaW5lIGNsYXNzPSJjIiB4MT0iNTAuNDEiIHkxPSI5Ni44MyIgeDI9IjUwLjQxIiB5Mj0iOTIuMzUiLz48cGF0aCBjbGFzcz0iYyIgZD0ibTgxLjc3LDExMi41MWgyLjI0YzEuMjQsMCwyLjI0LTEsMi4yNC0yLjI0di0yLjI0Ii8+PHBhdGggY2xhc3M9ImMiIGQ9Im04MS43Nyw3Ni42N2gyLjI0YzEuMjQsMCwyLjI0LDEsMi4yNCwyLjI0djIuMjQiLz48cGF0aCBjbGFzcz0iYyIgZD0ibTU0Ljg5LDc2LjY3aC0yLjI0Yy0xLjI0LDAtMi4yNCwxLTIuMjQsMi4yNHYyLjI0Ii8+PHBhdGggY2xhc3M9ImMiIGQ9Im04Ni4yNSw5OS4wN2gxMS4yYzEuMjQsMCwyLjI0LTEsMi4yNC0yLjI0di0zMS4zNmMwLTEuMjQtMS0yLjI0LTIuMjQtMi4yNGgtMzEuMzZjLTEuMjQsMC0yLjI0LDEtMi4yNCwyLjI0djExLjIiLz48L2c+PGcgaWQ9ImIiPjxwYXRoIGNsYXNzPSJkIiBkPSJtNDQuMDgsNDQuMDdsMzIuOTQtOS4yYzEuNjktLjUyLDIuNjQtMi4zMSwyLjEyLTQtLjMtLjk4LTEuMDUtMS43NS0yLjAxLTIuMDlMNi43MywyLjY3Yy0xLjY3LS41Ny0zLjQ5LjMzLTQuMDYsMi0uMjMuNjYtLjIzLDEuMzgsMCwyLjA1bDI2LjExLDcwLjRjLjU4LDEuNjcsMi40LDIuNTYsNC4wNywxLjk4Ljk3LS4zMywxLjcxLTEuMTEsMi4wMS0yLjA5bDkuMjItMzIuOTRaIi8+PC9nPjwvc3ZnPg==") 12 12, pointer;
  background-color: #f8fafc;
  border-radius: 0.8rem;
}

/* Global style für filter-mode cursor */
.edit-calculation-container.add-all :deep(.bulk-edit-row__cell--filterable:hover) {
  cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEyOC41MSAxMzQuMDUiPjxkZWZzPjxzdHlsZT4uY3tmaWxsOm5vbmU7fS5jLC5ke3N0cm9rZTojMDEwMTAxO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4O30uZHtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJhIj48bGluZSBjbGFzcz0iYyIgeDE9IjczLjAzIiB5MT0iNzUuNTUiIHgyPSI2Ni4zOCIgeTI9Ijc1LjU1Ii8+PGxpbmUgY2xhc3M9ImMiIHgxPSI2Ni4zOCIgeTE9IjExMi4xNiIgeDI9IjczLjAzIiB5Mj0iMTEyLjE2Ii8+PHBhdGggY2xhc3M9ImMiIGQ9Im04MS4zNSw3NS41NWg0Ljk5Yy45MiwwLDEuNjYuNzUsMS42NiwxLjY2djQuOTkiLz48bGluZSBjbGFzcz0iYyIgeDE9Ijg4LjAxIiB5MT0iOTcuMTgiIHgyPSI4OC4wMSIgeTI9IjkwLjUzIi8+PHBhdGggY2xhc3M9ImMiIGQ9Im04MS4zNSwxMTIuMTZoNC45OWMuOTIsMCwxLjY2LS43NSwxLjY2LTEuNjZ2LTQuOTkiLz48bGluZSBjbGFzcz0iYyIgeDE9IjUxLjQiIHkxPSI5MC41MyIgeDI9IjUxLjQiIHkyPSI5Ny4xOCIvPjxwYXRoIGNsYXNzPSJjIiBkPSJtNTguMDUsMTEyLjE2aC00Ljk5Yy0uOTIsMC0xLjY2LS43NS0xLjY2LTEuNjZ2LTQuOTkiLz48cGF0aCBjbGFzcz0iYyIgZD0ibTU4LjA1LDc1LjU1aC00Ljk5Yy0uOTIsMC0xLjY2Ljc1LTEuNjYsMS42NnY0Ljk5Ii8+PC9nPjxnIGlkPSJiIj48cGF0aCBjbGFzcz0iZCIgZD0ibTQ0LjA4LDQ0LjA3bDMyLjk0LTkuMmMxLjY5LS41MiwyLjY0LTIuMzEsMi4xMi00LS4zLS45OC0xLjA1LTEuNzUtMi4wMS0yLjA5TDYuNzMsMi42N2MtMS42Ny0uNTctMy40OS4zMy00LjA2LDItLjIzLjY2LS4yMywxLjM4LDAsMi4wNWwyNi4xMSw3MC40Yy41OCwxLjY3LDIuNCwyLjU2LDQuMDcsMS45OC45Ny0uMzMsMS43MS0xLjExLDIuMDEtMi4wOWw5LjIyLTMyLjk0WiIvPjwvZz48L3N2Zz4=") 12 12, pointer;
  background-color: #f8fafc;
  border-radius: 0.8rem;
}

/* Global style für filter-mode cursor */
.edit-calculation-container.apply-filter :deep(.bulk-edit-row__cell--filterable:hover) {
  cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEyOC41MSAxMzQuMDUiPjxkZWZzPjxzdHlsZT4uZHtzdHJva2U6IzAwMDt9LmQsLmV7ZmlsbDpub25lO30uZCwuZSwuZntzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjVweDt9LmUsLmZ7c3Ryb2tlOiMwMTAxMDE7fS5me2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImEiPjxsaW5lIGNsYXNzPSJlIiB4MT0iNzMuMDMiIHkxPSI3NS41NSIgeDI9IjY2LjM4IiB5Mj0iNzUuNTUiLz48bGluZSBjbGFzcz0iZSIgeDE9IjY2LjM4IiB5MT0iMTEyLjE2IiB4Mj0iNzMuMDMiIHkyPSIxMTIuMTYiLz48cGF0aCBjbGFzcz0iZSIgZD0ibTgxLjM1LDc1LjU1aDQuOTljLjkyLDAsMS42Ni43NSwxLjY2LDEuNjZ2NC45OSIvPjxsaW5lIGNsYXNzPSJlIiB4MT0iODguMDEiIHkxPSI5Ny4xOCIgeDI9Ijg4LjAxIiB5Mj0iOTAuNTMiLz48cGF0aCBjbGFzcz0iZSIgZD0ibTgxLjM1LDExMi4xNmg0Ljk5Yy45MiwwLDEuNjYtLjc1LDEuNjYtMS42NnYtNC45OSIvPjxsaW5lIGNsYXNzPSJlIiB4MT0iNTEuNCIgeTE9IjkwLjUzIiB4Mj0iNTEuNCIgeTI9Ijk3LjE4Ii8+PHBhdGggY2xhc3M9ImUiIGQ9Im01OC4wNSwxMTIuMTZoLTQuOTljLS45MiwwLTEuNjYtLjc1LTEuNjYtMS42NnYtNC45OSIvPjxwYXRoIGNsYXNzPSJlIiBkPSJtNTguMDUsNzUuNTVoLTQuOTljLS45MiwwLTEuNjYuNzUtMS42NiwxLjY2djQuOTkiLz48L2c+PGcgaWQ9ImIiPjxwYXRoIGNsYXNzPSJmIiBkPSJtNDQuMDgsNDQuMDdsMzIuOTQtOS4yYzEuNjktLjUyLDIuNjQtMi4zMSwyLjEyLTQtLjMtLjk4LTEuMDUtMS43NS0yLjAxLTIuMDlMNi43MywyLjY3Yy0xLjY3LS41Ny0zLjQ5LjMzLTQuMDYsMi0uMjMuNjYtLjIzLDEuMzgsMCwyLjA1bDI2LjExLDcwLjRjLjU4LDEuNjcsMi40LDIuNTYsNC4wNywxLjk4Ljk3LS4zMywxLjcxLTEuMTEsMi4wMS0yLjA5bDkuMjItMzIuOTRaIi8+PC9nPjxnIGlkPSJjIj48bGluZSBjbGFzcz0iZCIgeDE9Ijk5LjM4IiB5MT0iOTQuMTkiIHgyPSIxMjYuMDEiIHkyPSI5NC4xOSIvPjxsaW5lIGNsYXNzPSJkIiB4MT0iMTEyLjY5IiB5MT0iODAuODciIHgyPSIxMTIuNjkiIHkyPSIxMDcuNTEiLz48L2c+PC9zdmc+") 12 12, pointer;
  background-color: #f8fafc;
  border-radius: 0.8rem;
}


.space-around {
  margin: 3rem;
}


.modal-content-container {
  display: flex;
  flex-direction: column;
  min-width: 50rem;
}

.modal-content-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
}

/* Sort Animation für Rows */
.sort-list-move {
  transition: transform 0.4s ease;
}

/* Verhindere Animation während des Entfernens */
.sort-list-leave-active {
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Enter-Animation wird via JavaScript gesteuert für staggered effect */


.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
}

.edit-calculation-list-container {
  background: white;
  border-radius: 1.2rem;
  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.edit-calculation-list-body {
  position: relative;
}

.edit-calculation-list-header {
  display: grid;
  grid-template-columns: 6rem 0.8fr 0.7fr 1fr 1fr 1.2fr 2fr 10rem;
  gap: 1.6rem;
  padding: 2.4rem;
  background-color: #ffffff;
  border-bottom: 0.1rem solid rgba(107, 134, 156, 0.2);
  font-weight: 500;
  font-size: 1.4rem;
  color: #6B869C;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

.edit-calculation-list-header-cell {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.edit-calculation-list-header-cell--copyable {
}

.edit-calculation-list-header-cell--clickable {
  cursor: pointer;
  user-select: none;
}

.edit-calculation-list-header-cell--selected {
  color: #002F54;
}

.edit-calculation-container {
  display: flex;
  flex-direction: column;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
}

.header-controls {
  display: flex;
  gap: 1.6rem;
}
</style>
