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

const props = defineProps({
  modelValue: Object
})

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

const { t } = useTranslation()
const organization = useCookie('logship_organization')
const organizationId = useCookie('logship_organization_id')

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

const form = ref({
  id: props.modelValue.id || '',
  client: props.modelValue.client || '',
  clientId: props.modelValue.clientId || '',
  organization: props.modelValue.organization || organization.value?.Name || '',
  organizationId: props.modelValue.organizationId ?? organizationId.value ?? 0,
  shipper: props.modelValue.shipper || '',
  shipperId: props.modelValue.shipperId || '',
  country: props.modelValue.country || '',
  countryId: props.modelValue.countryId || '',
  product: props.modelValue.product || '',
  productId: props.modelValue.productId || '',
  shippingBasePrice: props.modelValue.shippingBasePrice ?? 0,
  shippingPricePerKG: props.modelValue.shippingPricePerKG ?? 0,
  rangeWeightFrom: props.modelValue.rangeWeightFrom ?? 0,
  rangeWeightTo: props.modelValue.rangeWeightTo ?? 0,
  validFrom: props.modelValue.validFrom || '',
  validTo: props.modelValue.validTo || '',
  isDHLKleinPaket: props.modelValue.isDHLKleinPaket ?? false,
  isActive: props.modelValue.isActive ?? true,
  processing: props.modelValue.processing ?? false,
  alert: {
    status: props.modelValue.alert?.status || '',
    message: props.modelValue.alert?.message || '',
    processing: props.modelValue.alert?.processing ?? false
  }
})

const loading = ref({})
const getOptions = ref({})
const setOptions = async (url, key) => {
  loading.value[key] = true
  const res = await $fetch('/api/'+url, {
    headers: useRequestHeaders(['cookie'])
  })
  if(res) {
    getOptions.value[key] = res
  }
  loading.value[key] = false
}

watch(() => props.modelValue, () => {
  form.value = { ...form.value, ...props.modelValue }
}, { deep: true })

const isInvalid = computed(() => {
  return !form.value.shipperId || !form.value.countryId || form.value.shippingBasePrice === '' || form.value.shippingBasePrice === null
})

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

// Modal pickers
const orgModal = ref(false)
const shipperModal = ref(false)
const countryModal = ref(false)
const productModal = ref(false)
const validFromModal = ref(false)
const validToModal = ref(false)

const formatDate = (d) => {
  if(!d) return ''
  try {
    const dt = new Date(d)
    if(isNaN(dt.getTime())) return d
    return dt.toLocaleDateString()
  } catch(e) { return d }
}
</script>

<template>
  <form @submit.prevent="save()">
    <div class="my-4 mx-3">
      <AlertAction v-model='form.alert.status' :alert="form.alert" />

      <SettingsShippingCostTierInfo tier="default" />

      <!-- Section: Routing -->
      <div class="sc-card">
        <div class="sc-card-head sc-grad-blue">
          <span class="tf-icon ti ti-route"></span>
          <span>{{ t.sc_routing_scope || 'Routing & Scope' }}</span>
        </div>
        <div class="sc-card-body">
          <div class="columns is-desktop">
            <div class="column is-one-third">
              <label class="sc-label">
                <i class="ti ti-building"></i> {{ t.sc_organization || 'Organization' }} *
                <span class="sc-info" :data-tip="t.sc_help_org_default || 'Owning organization. Use ‘*’ for the global default rate.'"><i class="ti ti-info-circle"></i></span>
              </label>
              <button type="button" class="sc-trigger sc-trigger--blue" @click="orgModal = true; setOptions('models/ad_org', 'orgs')">
                <i class="ti ti-building"></i>
                <span class="sc-trigger__value">{{ form.organization || (t.sc_select || 'Select…') }}</span>
                <i class="ti ti-chevron-down sc-trigger__chev"></i>
              </button>
            </div>
            <div class="column is-one-third">
              <label class="sc-label">
                <i class="ti ti-truck-delivery"></i> {{ t.sc_shipper || 'Shipper' }} *
                <span class="sc-info" :data-tip="t.sc_help_shipper || 'Carrier/shipping provider (e.g. DHL).'"><i class="ti ti-info-circle"></i></span>
              </label>
              <button type="button" class="sc-trigger sc-trigger--green" @click="shipperModal = true; setOptions('materials/shippers', 'shippers')">
                <i class="ti ti-truck-delivery"></i>
                <span class="sc-trigger__value">{{ form.shipper || (t.sc_select || 'Select…') }}</span>
                <i class="ti ti-chevron-down sc-trigger__chev"></i>
              </button>
            </div>
            <div class="column is-one-third">
              <label class="sc-label">
                <i class="ti ti-flag"></i> {{ t.sc_destination_country || 'Destination Country' }} *
                <span class="sc-info" :data-tip="t.sc_help_country || 'Destination country for the shipment.'"><i class="ti ti-info-circle"></i></span>
              </label>
              <button type="button" class="sc-trigger sc-trigger--purple" @click="countryModal = true; setOptions('models/c_country', 'countries')">
                <i class="ti ti-flag"></i>
                <span class="sc-trigger__value">{{ form.country || (t.sc_select || 'Select…') }}</span>
                <i class="ti ti-chevron-down sc-trigger__chev"></i>
              </button>
            </div>
          </div>

          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="sc-label">
                <i class="ti ti-package"></i> {{ t.sc_product_optional || 'Product (optional)' }}
                <span class="sc-info" :data-tip="t.sc_help_product || 'Restrict this rate to a specific product (rare).'"><i class="ti ti-info-circle"></i></span>
              </label>
              <button type="button" class="sc-trigger sc-trigger--teal" @click="productModal = true; setOptions('models/m_product', 'products')">
                <i class="ti ti-package"></i>
                <span class="sc-trigger__value">{{ form.product || (t.sc_select || 'Select…') }}</span>
                <i class="ti ti-chevron-down sc-trigger__chev"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Section: Pricing -->
      <div class="sc-card">
        <div class="sc-card-head sc-grad-green">
          <span class="tf-icon ti ti-currency-euro"></span>
          <span>{{ t.sc_pricing || 'Pricing' }}</span>
        </div>
        <div class="sc-card-body">
          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="sc-label">
                {{ t.sc_base_price || 'Base Shipping Price (€)' }} *
                <span class="sc-info" :data-tip="t.sc_help_base_default || 'Fixed base shipping fee. Used as base for the int_freight_cost calculation. Fallback €25.00 if no row matches.'"><i class="ti ti-info-circle"></i></span>
              </label>
              <input type="number" step="0.01" v-model.number="form.shippingBasePrice" class="input sc-input" placeholder="0.00" />
            </div>
            <div class="column is-half">
              <label class="sc-label">
                {{ t.sc_per_kg || 'Shipping Price per KG (€)' }}
                <span class="sc-info" :data-tip="t.sc_help_per_kg || 'Multiplier per kilogram. Formula: shipment_weight × shippingPricePerKG.'"><i class="ti ti-info-circle"></i></span>
              </label>
              <input type="number" step="0.01" v-model.number="form.shippingPricePerKG" class="input sc-input" placeholder="0.00" />
            </div>
          </div>
        </div>
      </div>

      <!-- Section: Weight Range -->
      <div class="sc-card">
        <div class="sc-card-head sc-grad-purple">
          <span class="tf-icon ti ti-weight"></span>
          <span>{{ t.sc_weight_range || 'Weight Range (optional)' }}</span>
        </div>
        <div class="sc-card-body">
          <p class="sc-hint">{{ t.sc_hint_weight_range || 'Leave both at 0 for an open range. More specific rows take precedence.' }}</p>
          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="sc-label">{{ t.sc_from_kg || 'From (kg)' }}</label>
              <input type="number" step="0.01" v-model.number="form.rangeWeightFrom" class="input sc-input" placeholder="0" />
            </div>
            <div class="column is-half">
              <label class="sc-label">{{ t.sc_to_kg || 'To (kg)' }}</label>
              <input type="number" step="0.01" v-model.number="form.rangeWeightTo" class="input sc-input" placeholder="0" />
            </div>
          </div>
        </div>
      </div>

      <!-- Section: Date Range -->
      <div class="sc-card">
        <div class="sc-card-head sc-grad-teal">
          <span class="tf-icon ti ti-calendar"></span>
          <span>{{ t.sc_validity_period || 'Validity Period (optional)' }}</span>
        </div>
        <div class="sc-card-body">
          <p class="sc-hint">{{ t.sc_hint_validity || 'Used as filter shipping_date BETWEEN ValidFrom AND ValidTo. Leave blank for always valid.' }}</p>
          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="sc-label">{{ t.sc_valid_from || 'Valid From' }}</label>
              <button type="button" class="sc-trigger sc-trigger--purple" @click="validFromModal = true">
                <i class="ti ti-calendar-event"></i>
                <span class="sc-trigger__value">{{ formatDate(form.validFrom) || (t.sc_select_date || 'Select date') }}</span>
                <i class="ti ti-chevron-down sc-trigger__chev"></i>
              </button>
            </div>
            <div class="column is-half">
              <label class="sc-label">{{ t.sc_valid_to || 'Valid To' }}</label>
              <button type="button" class="sc-trigger sc-trigger--purple" @click="validToModal = true">
                <i class="ti ti-calendar-event"></i>
                <span class="sc-trigger__value">{{ formatDate(form.validTo) || (t.sc_select_date || 'Select date') }}</span>
                <i class="ti ti-chevron-down sc-trigger__chev"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Section: Flags -->
      <div class="sc-card">
        <div class="sc-card-head sc-grad-orange">
          <span class="tf-icon ti ti-flag"></span>
          <span>{{ t.sc_flags || 'Flags' }}</span>
        </div>
        <div class="sc-card-body">
          <div class="columns is-desktop">
            <div class="column is-half">
              <label class="sc-toggle">
                <input type="checkbox" v-model="form.isActive" />
                <span class="sc-toggle-slider"></span>
                <span class="sc-toggle-label">{{ t.sc_active || 'Active' }}</span>
              </label>
              <p class="sc-hint">{{ t.sc_hint_active || 'Inactive rows are ignored by the lookup.' }}</p>
            </div>
            <div class="column is-half">
              <label class="sc-toggle">
                <input type="checkbox" v-model="form.isDHLKleinPaket" />
                <span class="sc-toggle-slider sc-toggle-amber"></span>
                <span class="sc-toggle-label">{{ t.sc_kleinpaket || 'DHL Kleinpaket Rate' }}</span>
              </label>
              <p class="sc-hint">{{ t.sc_hint_kleinpaket || 'Special small-parcel pricing. Both flags must be set for this rate to apply.' }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Tenant readonly -->
      <div class="sc-card">
        <div class="sc-card-head sc-grad-grey">
          <span class="tf-icon ti ti-building"></span>
          <span>{{ t.sc_tenant || 'Tenant' }}</span>
        </div>
        <div class="sc-card-body">
          <input type="text" :value="clientName" class="input sc-input" readonly />
        </div>
      </div>

    </div>

    <div class="my-3 mx-3 d-flex gap-10px">
      <button type="submit" class="button sc-btn sc-btn-primary" :class="(isInvalid || form.processing) ? 'pointerEvents-none opacity-0.6' : ''">
        <span class="tf-icon ti ti-device-floppy"></span> {{ t.sc_btn_submit || 'Submit' }}
      </button>
      <button type="button" @click="save('preview')" class="button sc-btn" :class="(isInvalid || form.processing) ? 'pointerEvents-none opacity-0.6' : ''">
        <span class="tf-icon ti ti-eye"></span> {{ t.sc_btn_submit_preview || 'Submit & Preview' }}
      </button>
      <button type="button" @click="save('changes')" class="button sc-btn" :class="(isInvalid || form.processing) ? 'pointerEvents-none opacity-0.6' : ''">
        <span class="tf-icon ti ti-refresh"></span> {{ t.sc_btn_save_changes || 'Save Changes' }}
      </button>
    </div>

    <!-- Organization Modal -->
    <UModal v-model:open="orgModal" :ui="{ content: 'sm:max-w-xl' }">
      <template #content>
        <div class="sc-modal sc-modal--blue">
          <div class="sc-modal__head">
            <h3 class="sc-modal__title"><i class="ti ti-building"></i> {{ t.sc_organization || 'Organization' }}</h3>
            <button type="button" class="sc-modal__close" @click="orgModal = false"><i class="ti ti-x"></i></button>
          </div>
          <div class="sc-modal__body sc-picker-body">
            <ClientOnly>
              <SelectBox v-model="form.organizationId" :options="getOptions?.['orgs']?.records || [{id: form.organizationId, Name: form.organization}]" prop="Name" dataprop="id" datatype="string" :size="10" @change="(val, opt) => { form.organization = opt?.Name || '' }" :loading="loading?.['orgs'] ?? true" />
            </ClientOnly>
          </div>
          <div class="sc-modal__foot">
            <button type="button" class="sc-modal__btn sc-modal__btn--ghost" @click="orgModal = false">{{ t.done || 'Done' }}</button>
          </div>
        </div>
      </template>
    </UModal>

    <!-- Shipper Modal -->
    <UModal v-model:open="shipperModal" :ui="{ content: 'sm:max-w-xl' }">
      <template #content>
        <div class="sc-modal sc-modal--green">
          <div class="sc-modal__head">
            <h3 class="sc-modal__title"><i class="ti ti-truck-delivery"></i> {{ t.sc_shipper || 'Shipper' }}</h3>
            <button type="button" class="sc-modal__close" @click="shipperModal = false"><i class="ti ti-x"></i></button>
          </div>
          <div class="sc-modal__body sc-picker-body">
            <ClientOnly>
              <SelectBox v-model="form.shipperId" :options="getOptions?.['shippers']?.records || [{id: form.shipperId, Name: form.shipper}]" prop="Name" dataprop="id" datatype="string" :size="10" @change="(val, opt) => { form.shipper = opt?.Name || '' }" :loading="loading?.['shippers'] ?? true" />
            </ClientOnly>
          </div>
          <div class="sc-modal__foot">
            <button type="button" class="sc-modal__btn sc-modal__btn--ghost" @click="shipperModal = false">{{ t.done || 'Done' }}</button>
          </div>
        </div>
      </template>
    </UModal>

    <!-- Country Modal -->
    <UModal v-model:open="countryModal" :ui="{ content: 'sm:max-w-xl' }">
      <template #content>
        <div class="sc-modal sc-modal--purple">
          <div class="sc-modal__head">
            <h3 class="sc-modal__title"><i class="ti ti-flag"></i> {{ t.sc_destination_country || 'Destination Country' }}</h3>
            <button type="button" class="sc-modal__close" @click="countryModal = false"><i class="ti ti-x"></i></button>
          </div>
          <div class="sc-modal__body sc-picker-body">
            <ClientOnly>
              <SelectBox v-model="form.countryId" :options="getOptions?.['countries']?.records || [{id: form.countryId, Name: form.country}]" prop="Name" dataprop="id" datatype="string" :size="10" @change="(val, opt) => { form.country = opt?.Name || '' }" :loading="loading?.['countries'] ?? true" />
            </ClientOnly>
          </div>
          <div class="sc-modal__foot">
            <button type="button" class="sc-modal__btn sc-modal__btn--ghost" @click="countryModal = false">{{ t.done || 'Done' }}</button>
          </div>
        </div>
      </template>
    </UModal>

    <!-- Product Modal -->
    <UModal v-model:open="productModal" :ui="{ content: 'sm:max-w-xl' }">
      <template #content>
        <div class="sc-modal sc-modal--teal">
          <div class="sc-modal__head">
            <h3 class="sc-modal__title"><i class="ti ti-package"></i> {{ t.sc_product || 'Product' }}</h3>
            <button type="button" class="sc-modal__close" @click="productModal = false"><i class="ti ti-x"></i></button>
          </div>
          <div class="sc-modal__body sc-picker-body">
            <ClientOnly>
              <SelectBox v-model="form.productId" :options="getOptions?.['products']?.records || [{id: form.productId, Name: form.product}]" prop="Name" dataprop="id" datatype="string" :size="10" @change="(val, opt) => { form.product = opt?.Name || '' }" :loading="loading?.['products'] ?? true" />
            </ClientOnly>
          </div>
          <div class="sc-modal__foot">
            <button type="button" class="sc-modal__btn sc-modal__btn--ghost" @click="form.productId = ''; form.product = ''; productModal = false">{{ t.clear || 'Clear' }}</button>
            <button type="button" class="sc-modal__btn sc-modal__btn--primary" @click="productModal = false">{{ t.done || 'Done' }}</button>
          </div>
        </div>
      </template>
    </UModal>

    <!-- Valid From Modal -->
    <UModal v-model:open="validFromModal" :ui="{ content: 'sm:max-w-xl' }">
      <template #content>
        <div class="sc-modal sc-modal--purple">
          <div class="sc-modal__head">
            <h3 class="sc-modal__title"><i class="ti ti-calendar-event"></i> {{ t.sc_valid_from || 'Valid From' }}</h3>
            <button type="button" class="sc-modal__close" @click="validFromModal = false"><i class="ti ti-x"></i></button>
          </div>
          <div class="sc-modal__body sc-date-body">
            <DatePicker v-model="form.validFrom" />
          </div>
          <div class="sc-modal__foot">
            <button type="button" class="sc-modal__btn sc-modal__btn--ghost" @click="form.validFrom = ''; validFromModal = false">{{ t.clear || 'Clear' }}</button>
            <button type="button" class="sc-modal__btn sc-modal__btn--ghost" @click="form.validFrom = date.now('date')">{{ t.today || 'Today' }}</button>
            <button type="button" class="sc-modal__btn sc-modal__btn--primary" @click="validFromModal = false">{{ t.done || 'Done' }}</button>
          </div>
        </div>
      </template>
    </UModal>

    <!-- Valid To Modal -->
    <UModal v-model:open="validToModal" :ui="{ content: 'sm:max-w-xl' }">
      <template #content>
        <div class="sc-modal sc-modal--purple">
          <div class="sc-modal__head">
            <h3 class="sc-modal__title"><i class="ti ti-calendar-event"></i> {{ t.sc_valid_to || 'Valid To' }}</h3>
            <button type="button" class="sc-modal__close" @click="validToModal = false"><i class="ti ti-x"></i></button>
          </div>
          <div class="sc-modal__body sc-date-body">
            <DatePicker v-model="form.validTo" />
          </div>
          <div class="sc-modal__foot">
            <button type="button" class="sc-modal__btn sc-modal__btn--ghost" @click="form.validTo = ''; validToModal = false">{{ t.clear || 'Clear' }}</button>
            <button type="button" class="sc-modal__btn sc-modal__btn--ghost" @click="form.validTo = date.now('date')">{{ t.today || 'Today' }}</button>
            <button type="button" class="sc-modal__btn sc-modal__btn--primary" @click="validToModal = false">{{ t.done || 'Done' }}</button>
          </div>
        </div>
      </template>
    </UModal>
  </form>
</template>

<style scoped>
.sc-card {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sc-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #fff;
  font-weight: 600;
}
.sc-grad-blue { background: linear-gradient(135deg,#2e86de,#54a0ff); }
.sc-grad-green { background: linear-gradient(135deg,#10ac84,#1dd1a1); }
.sc-grad-purple { background: linear-gradient(135deg,#5f27cd,#8854d0); }
.sc-grad-teal { background: linear-gradient(135deg,#0abde3,#48dbfb); }
.sc-grad-orange { background: linear-gradient(135deg,#ee5a24,#ff7f50); }
.sc-grad-grey { background: linear-gradient(135deg,#576574,#8395a7); }
.sc-card-body { padding: 14px; }
.sc-input { border-radius: 6px !important; }
.sc-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: #2c3e50;
  margin-bottom: 6px;
}
.sc-label > i { color: #7f8c8d; }
.sc-hint {
  font-size: 12px;
  color: #7f8c8d;
  margin: 4px 0 8px;
}
.sc-hint code {
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Custom info tooltip */
.sc-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  color: #7f8c8d;
  margin-left: 4px;
}
.sc-info > i { font-size: 14px; }
.sc-info::before, .sc-info::after {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 9999;
  transition: opacity 0.15s;
  pointer-events: none;
}
.sc-info::after {
  content: attr(data-tip);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  width: 320px;
  max-width: 90vw;
  white-space: normal;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.sc-info::before {
  content: '';
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
}
.sc-info:hover::before, .sc-info:hover::after { visibility: visible; opacity: 1; }

/* Trigger button (used for select + date pickers) */
.sc-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  text-align: left;
  transition: all 0.15s;
  min-height: 40px;
}
.sc-trigger:hover { border-color: #2e86de; background: rgba(46,134,222,0.04); }
.sc-trigger > i:first-child { font-size: 16px; flex-shrink: 0; color: #2e86de; }
.sc-trigger__value { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-trigger__chev { color: #9ca3af; font-size: 14px; flex-shrink: 0; }
.sc-trigger--blue:hover { border-color: #2e86de; background: rgba(46,134,222,0.04); }
.sc-trigger--blue > i:first-child { color: #2e86de; }
.sc-trigger--green:hover { border-color: #10ac84; background: rgba(16,172,132,0.04); }
.sc-trigger--green > i:first-child { color: #10ac84; }
.sc-trigger--purple:hover { border-color: #8b5cf6; background: rgba(139,92,246,0.04); }
.sc-trigger--purple > i:first-child { color: #8b5cf6; }
.sc-trigger--teal:hover { border-color: #0abde3; background: rgba(10,189,227,0.04); }
.sc-trigger--teal > i:first-child { color: #0abde3; }

/* Toggle switches */
.sc-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.sc-toggle input { display: none; }
.sc-toggle-slider {
  width: 38px; height: 22px; background: #b2bec3; border-radius: 999px;
  position: relative; transition: background 0.2s;
}
.sc-toggle-slider::after {
  content: ''; width: 18px; height: 18px; background: #fff; border-radius: 50%;
  position: absolute; top: 2px; left: 2px; transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.sc-toggle input:checked + .sc-toggle-slider { background: #10ac84; }
.sc-toggle input:checked + .sc-toggle-slider.sc-toggle-amber { background: #f39c12; }
.sc-toggle input:checked + .sc-toggle-slider::after { transform: translateX(16px); }
.sc-toggle-label { font-weight: 600; color: #2d3436; }

.sc-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; }
.sc-btn-primary { background: linear-gradient(135deg,#2e86de,#54a0ff); color: #fff; border: none; }

/* Modals */
.sc-modal {
  background: #fff;
  border-radius: 14px;
  width: 560px;
  max-width: 95vw;
  overflow: visible;
}
.sc-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, rgba(46,134,222,0.10), rgba(46,134,222,0.02));
  border-radius: 14px 14px 0 0;
}
.sc-modal--green .sc-modal__head { background: linear-gradient(135deg, rgba(16,172,132,0.10), rgba(16,172,132,0.02)); }
.sc-modal--purple .sc-modal__head { background: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(139,92,246,0.02)); }
.sc-modal--teal .sc-modal__head { background: linear-gradient(135deg, rgba(10,189,227,0.10), rgba(10,189,227,0.02)); }
.sc-modal__title {
  font-size: 18px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 10px;
  color: #111827;
}
.sc-modal__title i { color: #2e86de; font-size: 22px; }
.sc-modal--green .sc-modal__title i { color: #10ac84; }
.sc-modal--purple .sc-modal__title i { color: #8b5cf6; }
.sc-modal--teal .sc-modal__title i { color: #0abde3; }
.sc-modal__close {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; color: #6b7280; padding: 6px; border-radius: 6px;
}
.sc-modal__close:hover { background: #f3f4f6; }
.sc-modal__body { padding: 24px; min-height: 360px; }
.sc-modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid #e5e7eb;
}
.sc-modal__btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
}
.sc-modal__btn--ghost { background: #f3f4f6; color: #374151; }
.sc-modal__btn--ghost:hover { background: #e5e7eb; }
.sc-modal__btn--primary { background: linear-gradient(135deg,#2e86de,#54a0ff); color: #fff; }

/* SelectBox in picker body */
.sc-picker-body :deep(.tedirSelect) { width: 100%; }
.sc-picker-body :deep(.selectInput) { width: 100%; }

/* Force tedir-calendar pop-out picker to render INLINE inside modal */
.sc-date-body { display: flex; flex-direction: column; align-items: center; }
.sc-date-body :deep(.pickerContent) {
  position: static !important;
  display: block !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  width: 100%;
  min-width: 360px;
  box-shadow: none;
  margin-top: 8px;
}
.sc-date-body :deep(.pickerBackdrop) { display: none !important; }
.sc-date-body :deep(.pickerWrap) { width: 100%; }
.sc-date-body :deep(.pickerWrap input.input) { font-size: 15px; padding: 10px 12px; width: 100%; }
.sc-date-body :deep(.tedirCalendar .dayGrid),
.sc-date-body :deep(.tedirCalendar .monthGrid) { width: 100% !important; }
.sc-date-body :deep(.tedirCalendar .dayItem),
.sc-date-body :deep(.tedirCalendar .monthItem) { font-size: 14px; padding: 0.6rem 0 !important; }
</style>
