<template>
  <div>
    <div class="row row-sm">
      <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 grid-margin">
        <!-- Search Form -->
        <form @submit.prevent="searchRefresh" class="mb-3">
          <div class="row">
            <div class="col-lg-2 col-md-6 mb-3">
              <label>Tìm kiếm</label>
              <input type="text" v-model="searchModel.Search.PredicateObject.Keyword" class="form-control"
                placeholder="Mã phiếu, tên khách hàng..." />
            </div>
            <div class="col-lg-2 col-md-6 mb-3">
              <label>Ngày tạo</label>
              <VueDatePicker ref="createDatePicker" v-model="date" :enable-time-picker="false" range multi-calendars
                auto-apply :format="format" @update:model-value="handleDate">
                <template #left-sidebar>
                  <DateRangeSidebar @change-date="onChangeDate"></DateRangeSidebar>
                </template>
              </VueDatePicker>
            </div>
            <div class="col-lg-2 col-md-6 mb-3">
              <label>Loại phiếu</label>
              <v-select label="Name" :options="typeOptions" v-model="searchModel.Search.PredicateObject.Type"
                :reduce="(option) => option.Id"></v-select>
            </div>
            <div class="col-lg-2 col-md-6 mb-3">
              <label>Trạng thái</label>
              <v-select label="Name" :options="statusOptions" v-model="searchModel.Search.PredicateObject.Status"
                :reduce="(option) => option.Id"></v-select>
            </div>

            <div class="col-lg-2 col-md-6 mb-3">
              <label>Hóa đơn</label>
              <v-select label="Name" :options="hasTaxInvoiceOptions"
                v-model="searchModel.Search.PredicateObject.HasTaxInvoice" :reduce="(option) => option.Id"></v-select>
            </div>
            <div class="col-lg-2 col-md-6 mb-3" v-if="searchModel.Search.PredicateObject.HasTaxInvoice === true">
              <label>Trạng thái HĐ</label>
              <v-select label="Name" :options="taxInvoiceStatusOptions"
                v-model="searchModel.Search.PredicateObject.TaxInvoiceStatus"
                :reduce="(option) => option.Id"></v-select>
            </div>
            <div class="col-lg-2 col-md-12 mb-3 d-flex align-items-end">
              <button type="submit" class="btn btn-dark me-2" :disabled="loading">
                <i v-show="!loading" class="fe fe-search"></i>
                <span v-show="loading" class="spinner-border spinner-border-sm"></span>
                <span>Tìm kiếm</span>
              </button>
              <button type="button" class="btn btn-outline-secondary" @click="resetSearch" :disabled="loading">
                <i class="fe fe-refresh-cw"></i>
                <span>Đặt lại</span>
              </button>
            </div>
          </div>
        </form>

        <!-- Summary Cards -->
        <div class="row mb-3" v-if="!loading && items.length > 0">
          <div class="col-md-3">
            <div class="card summary-card bg-primary-gradient text-white">
              <div class="card-body py-3">
                <div class="d-flex align-items-start justify-content-between">
                  <div class="flex-grow-1">
                    <h6 class="mb-2 text-white-50">Tổng phiếu</h6>
                    <h3 class="mb-2 fw-bold">{{ searchModel.Pagination.Total }}</h3>
                    <div class="summary-amounts">
                      <div class="d-flex justify-content-between tx-11 mb-1">
                        <span class="text-white-50">COD:</span>
                        <span class="fw-medium">{{ formatCurrency(totalCodAmount) }}</span>
                      </div>
                      <div class="d-flex justify-content-between tx-11 mb-1">
                        <span class="text-white-50">Phí:</span>
                        <span class="fw-medium">{{ formatCurrency(totalFeeAmount) }}</span>
                      </div>
                      <div class="d-flex justify-content-between tx-11 pt-1 border-top border-white-25">
                        <span class="fw-medium">Tổng:</span>
                        <span class="fw-bold">{{ formatCurrency(totalAmount) }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="summary-icon">
                    <i class="fe fe-file-text"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card summary-card bg-warning-gradient text-white">
              <div class="card-body py-3">
                <div class="d-flex align-items-start justify-content-between">
                  <div class="flex-grow-1">
                    <h6 class="mb-2 text-white-50">Chờ duyệt</h6>
                    <h3 class="mb-2 fw-bold">{{ countByStatus(2) }}</h3>
                    <div class="summary-amounts">
                      <div class="d-flex justify-content-between tx-11 mb-1">
                        <span class="text-white-50">COD:</span>
                        <span class="fw-medium">{{ formatCurrency(totalCodAmountByStatus(2)) }}</span>
                      </div>
                      <div class="d-flex justify-content-between tx-11 mb-1">
                        <span class="text-white-50">Phí:</span>
                        <span class="fw-medium">{{ formatCurrency(totalFeeAmountByStatus(2)) }}</span>
                      </div>
                      <div class="d-flex justify-content-between tx-11 pt-1 border-top border-white-25">
                        <span class="fw-medium">Tổng:</span>
                        <span class="fw-bold">{{ formatCurrency(totalAmountByStatus(2)) }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="summary-icon">
                    <i class="fe fe-clock"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card summary-card bg-info-gradient text-white">
              <div class="card-body py-3">
                <div class="d-flex align-items-start justify-content-between">
                  <div class="flex-grow-1">
                    <h6 class="mb-2 text-white-50">Đã duyệt</h6>
                    <h3 class="mb-2 fw-bold">{{ countByStatus(3) }}</h3>
                    <div class="summary-amounts">
                      <div class="d-flex justify-content-between tx-11 mb-1">
                        <span class="text-white-50">COD:</span>
                        <span class="fw-medium">{{ formatCurrency(totalCodAmountByStatus(3)) }}</span>
                      </div>
                      <div class="d-flex justify-content-between tx-11 mb-1">
                        <span class="text-white-50">Phí:</span>
                        <span class="fw-medium">{{ formatCurrency(totalFeeAmountByStatus(3)) }}</span>
                      </div>
                      <div class="d-flex justify-content-between tx-11 pt-1 border-top border-white-25">
                        <span class="fw-medium">Tổng:</span>
                        <span class="fw-bold">{{ formatCurrency(totalAmountByStatus(3)) }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="summary-icon">
                    <i class="fe fe-check-circle"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card summary-card bg-success-gradient text-white">
              <div class="card-body py-3">
                <div class="d-flex align-items-start justify-content-between">
                  <div class="flex-grow-1">
                    <h6 class="mb-2 text-white-50">Hoàn thành</h6>
                    <h3 class="mb-2 fw-bold">{{ countByStatus(4) }}</h3>
                    <div class="summary-amounts">
                      <div class="d-flex justify-content-between tx-11 mb-1">
                        <span class="text-white-50">COD:</span>
                        <span class="fw-medium">{{ formatCurrency(totalCodAmountByStatus(4)) }}</span>
                      </div>
                      <div class="d-flex justify-content-between tx-11 mb-1">
                        <span class="text-white-50">Phí:</span>
                        <span class="fw-medium">{{ formatCurrency(totalFeeAmountByStatus(4)) }}</span>
                      </div>
                      <div class="d-flex justify-content-between tx-11 pt-1 border-top border-white-25">
                        <span class="fw-medium">Tổng:</span>
                        <span class="fw-bold">{{ formatCurrency(totalAmountByStatus(4)) }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="summary-icon">
                    <i class="fe fe-check-square"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Results Card -->
        <div class="card card-table shadow-none">
          <div class="card-body card-table-body">
            <div class="table-responsive border-top mg-b-10">
              <table class="table table-vcenter table-hover mb-0" style="min-height:300px">
                <thead>
                  <tr>
                    <th class="wd-lg-20p min-width-1"><span>Thông tin chung</span></th>
                    <th class="wd-lg-15p min-width-1"><span>Khách hàng</span></th>
                    <th class="wd-lg-8p min-width-1 text-center"><span>Hóa đơn</span></th>
                    <th class="wd-lg-8p min-width-1 text-center"><span>Số đơn</span></th>
                    <th class="wd-lg-15p min-width-1 text-end"><span>Số tiền</span></th>
                    <th class="wd-lg-8p"></th>
                  </tr>
                </thead>
                <tbody v-if="loading">
                  <tr>
                    <td colspan="6" class="tx-semibold text-center text-default py-5">
                      <span class="spinner-border spinner-border-sm me-2"></span>
                      <span>Đang tải dữ liệu...</span>
                    </td>
                  </tr>
                </tbody>
                <tbody v-if="!loading && items.length <= 0">
                  <tr>
                    <td colspan="6" class="tx-semibold text-center text-muted py-5">
                      <i class="fe fe-inbox fs-3 d-block mb-2"></i>
                      Không tìm thấy phiếu đối soát nào!
                    </td>
                  </tr>
                </tbody>
                <tbody v-if="!loading && items.length > 0" class="tx-13">
                  <tr v-for="item in items" :key="item.Id" class="slip-row">
                    <!-- Thông tin chung -->
                    <td class="align-middle">
                      <div class="general-info">
                        <div class="mb-2">
                          <span class="fw-semibold text-primary">{{ item.Code }}</span>
                          <span class="tx-11 text-muted ms-2">
                            <i class="fe fe-user me-1"></i>{{ item.CreatedByUserName }}
                          </span>
                        </div>
                        <div class="d-flex gap-2 flex-wrap mb-2">
                          <span :class="getTypeBadgeClass(item.Type)">
                            {{ item.TypeName }}
                          </span>
                          <span :class="getStatusBadgeClass(item.Status)">
                            {{ item.StatusName }}
                          </span>
                        </div>
                        <div class="tx-11 text-muted">
                          <i class="fe fe-clock me-1"></i>
                          {{ formatDate(item.CreatedTime) }} {{ formatTime(item.CreatedTime) }}
                        </div>
                      </div>
                    </td>

                    <!-- Khách hàng -->
                    <td class="align-middle">
                      <div class="customer-info">
                        <div class="fw-medium">{{ item.CustomerName }}</div>
                        <div class="tx-11 text-muted">
                          <i class="fe fe-phone me-1"></i>{{ item.CustomerPhone }}
                        </div>
                      </div>
                    </td>


                    <!-- Hóa đơn -->
                    <td class="text-center align-middle">
                      <span v-if="item.HasTaxInvoice" :class="getTaxInvoiceStatusBadgeClass(item.TaxInvoiceStatus)">
                        <i class="fe fe-file-text me-1"></i>
                        {{ item.TaxInvoiceStatusName }}
                      </span>
                      <span v-else class="text-muted tx-12">
                        <i class="fe fe-minus"></i>
                      </span>
                    </td>

                    <!-- Số đơn -->
                    <td class="text-center align-middle">
                      <span class="badge badge-lg bg-primary-transparent text-primary">
                        {{ item.OrderCount }} đơn
                      </span>
                    </td>

                    <!-- Số tiền -->
                    <td class="align-middle">
                      <div class="financial-info">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                          <span class="tx-11 text-muted">COD:</span>
                          <span class="fw-semibold text-info">{{ formatCurrency(item.TotalCodAmount) }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-1">
                          <span class="tx-11 text-muted">Phí:</span>
                          <span class="fw-semibold text-warning">{{ formatCurrency(item.TotalFeeAmount) }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-1 border-top">
                          <span class="tx-11 fw-medium">Tổng:</span>
                          <span class="fw-bold" :class="item.Type === 1 ? 'text-success' : 'text-danger'">
                            {{ formatCurrency(item.FinalAmount) }}
                          </span>
                        </div>
                      </div>
                    </td>

                    <!-- Thao tác -->
                    <td class="align-middle text-end">
                      <router-link :to="{ name: 'customer-reconciliation-slip-detail', params: { id: item.Id } }"
                        target="_blank" class="btn btn-sm btn-primary-gradient btn-action">
                        <i class="fe fe-eye me-1"></i>
                        Chi tiết
                      </router-link>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <pager ref="ctrlPager" v-show="!loading && items.length > 0" @PageSizeChanged="PageSizeChanged"
              @PageIndexChanged="PageIndexChanged" :Total="searchModel.Pagination.Total" :TotalCurrent="items.length">
            </pager>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useToast } from 'vue-toastification'
import reconciliationService from '@/services/reconciliationService'
import DatepickerInstance from "@vuepic/vue-datepicker"
import { DateRangeSidebar } from '@/components/index'

const router = useRouter()
const toast = useToast()

// Define emits
const emit = defineEmits(['update-count'])

// Reactive data
const loading = ref(false)
const items = reactive([])

const searchModel = reactive({
  Pagination: {
    Total: 0,
    PageIndex: 1,
    PageSize: 20
  },
  Sort: {
    Predicate: 'CreatedTime',
    Reverse: true
  },
  Search: {
    PredicateObject: {
      Keyword: '',
      Type: null,
      Status: null,
      CreatedStart: null,
      CreatedEnd: null,
      HasTaxInvoice: null,
      TaxInvoiceStatus: null
    }
  }
})

const date = ref()
const createDatePicker = ref(DatepickerInstance)

const format = (dates) => {
  let start = dates[0]
  let end = dates[1]
  const dayStart = start.getDate()
  const monthStart = start.getMonth() + 1
  const yearStart = start.getFullYear()
  const dayEnd = end.getDate()
  const monthEnd = end.getMonth() + 1
  const yearEnd = end.getFullYear()

  return `${dayStart}/${monthStart}/${yearStart} - ${dayEnd}/${monthEnd}/${yearEnd}`
}

function onChangeDate(newDates) {
  date.value = newDates
  createDatePicker.value.closeMenu()
  handleDate(newDates)
}

function handleDate(modelData) {
  if (modelData != null) {
    searchModel.Search.PredicateObject.CreatedStart = modelData[0]
    searchModel.Search.PredicateObject.CreatedEnd = modelData[1]
  } else {
    searchModel.Search.PredicateObject.CreatedStart = null
    searchModel.Search.PredicateObject.CreatedEnd = null
  }
}

const typeOptions = reactive([
  { Id: null, Name: "Tất cả loại phiếu" },
  { Id: 1, Name: "Phiếu thanh toán" },
  { Id: 2, Name: "Phiếu thu tiền" }
])

const statusOptions = reactive([
  { Id: null, Name: "Tất cả trạng thái" },
  { Id: 2, Name: "Chờ duyệt" },
  { Id: 3, Name: "Đã duyệt" },
  { Id: 4, Name: "Hoàn thành" },
  { Id: 8, Name: "Từ chối" }
])

const hasTaxInvoiceOptions = reactive([
  { Id: null, Name: "Tất cả" },
  { Id: true, Name: "Có hóa đơn" },
  { Id: false, Name: "Không có hóa đơn" }
])

const taxInvoiceStatusOptions = reactive([
  { Id: null, Name: "Tất cả trạng thái HĐ" },
  { Id: 1, Name: "Chưa xuất" },
  { Id: 2, Name: "Nháp" },
  { Id: 3, Name: "Đã xuất" }
])

const sortOptions = reactive([
  { Id: 'CreatedTime', Name: "Thời gian tạo (mới nhất)" },
  { Id: 'ApprovedTime', Name: "Thời gian duyệt" },
  { Id: 'CompletedTime', Name: "Thời gian hoàn thành" },
  { Id: 'FinalAmount', Name: "Số tiền (giảm dần)" },
  { Id: 'OrderCount', Name: "Số đơn (giảm dần)" },
  { Id: 'CustomerName', Name: "Tên khách hàng (A-Z)" }
])

const selectedSort = ref('CreatedTime')
const ctrlPager = ref()

// Computed - Count by status
const countByStatus = computed(() => {
  return (status) => {
    return items.filter(item => item.Status === status).length
  }
})

// Computed - Total COD amount by status
const totalCodAmountByStatus = computed(() => {
  return (status) => {
    return items
      .filter(item => item.Status === status)
      .reduce((sum, item) => sum + (item.TotalCodAmount || 0), 0)
  }
})

// Computed - Total Fee amount by status
const totalFeeAmountByStatus = computed(() => {
  return (status) => {
    return items
      .filter(item => item.Status === status)
      .reduce((sum, item) => sum + (item.TotalFeeAmount || 0), 0)
  }
})

// Computed - Total amount by status
const totalAmountByStatus = computed(() => {
  return (status) => {
    return items
      .filter(item => item.Status === status)
      .reduce((sum, item) => sum + (item.FinalAmount || 0), 0)
  }
})

// Computed - Total COD amount (all slips)
const totalCodAmount = computed(() => {
  return items.reduce((sum, item) => sum + (item.TotalCodAmount || 0), 0)
})

// Computed - Total Fee amount (all slips)
const totalFeeAmount = computed(() => {
  return items.reduce((sum, item) => sum + (item.TotalFeeAmount || 0), 0)
})

// Computed - Total amount (all slips)
const totalAmount = computed(() => {
  return items.reduce((sum, item) => sum + (item.FinalAmount || 0), 0)
})

// Watch sort change
watch(selectedSort, (newValue) => {
  searchModel.Sort.Predicate = newValue
  if (newValue === 'CustomerName') {
    searchModel.Sort.Reverse = false
  } else {
    searchModel.Sort.Reverse = true
  }
})

// Methods
const formatCurrency = (amount) => {
  if (amount === null || amount === undefined) return '0 ₫'
  return new Intl.NumberFormat('vi-VN', {
    style: 'currency',
    currency: 'VND'
  }).format(amount)
}

const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('vi-VN', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  })
}

const formatTime = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleTimeString('vi-VN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

const getTypeBadgeClass = (type) => {
  // 1 = Receivable (Thu), 2 = Payable (Chi)
  return type === 1
    ? 'badge badge-lg bg-success-transparent text-success'
    : 'badge badge-lg bg-danger-transparent text-danger'
}

const getStatusBadgeClass = (status) => {
  const classMap = {
    1: 'badge badge-lg bg-secondary', // Draft
    2: 'badge badge-lg bg-warning text-dark', // PendingApproval
    3: 'badge badge-lg bg-info', // Approved
    4: 'badge badge-lg bg-success', // Completed
    8: 'badge badge-lg bg-danger' // Rejected
  }
  return classMap[status] || 'badge badge-lg bg-secondary'
}

const getTaxInvoiceStatusBadgeClass = (status) => {
  const classMap = {
    1: 'badge badge-lg bg-warning-transparent text-warning', // NotIssued - Chưa xuất
    2: 'badge badge-lg bg-secondary-transparent text-secondary', // Draft - Nháp
    3: 'badge badge-lg bg-success-transparent text-success' // Issued - Đã xuất
  }
  return classMap[status] || 'badge badge-lg bg-secondary'
}

const resetSearch = () => {
  searchModel.Search.PredicateObject.Keyword = ''
  searchModel.Search.PredicateObject.Type = null
  searchModel.Search.PredicateObject.Status = null
  searchModel.Search.PredicateObject.CreatedStart = null
  searchModel.Search.PredicateObject.CreatedEnd = null
  searchModel.Search.PredicateObject.HasTaxInvoice = null
  searchModel.Search.PredicateObject.TaxInvoiceStatus = null
  date.value = null
  selectedSort.value = 'CreatedTime'
  searchModel.Sort.Predicate = 'CreatedTime'
  searchModel.Sort.Reverse = true
  searchRefresh()
}

async function searchRefresh() {
  searchModel.Pagination.PageIndex = 1
  ctrlPager.value?.Refresh()
  search()
}

async function search() {
  loading.value = true
  items.splice(0, items.length)

  try {
    const searchResult = await reconciliationService.searchCustomerReconciliationSlips(searchModel)

    // API trả về Items, không phải Data
    const dataItems = searchResult.Items || searchResult.Data || []
    if (dataItems.length > 0) {
      dataItems.forEach(slip => {
        items.push(slip)
      })
    }

    // API trả về TotalRecord, không phải NumberOfRecords
    searchModel.Pagination.Total = searchResult.TotalRecord || searchResult.NumberOfRecords || 0

    // Emit count to parent component
    emit('update-count', searchModel.Pagination.Total)
  } catch (error) {
    console.error('Error loading reconciliation slips:', error)
    toast.error('Có lỗi xảy ra khi tải danh sách phiếu đối soát')
  } finally {
    loading.value = false
  }
}

function PageSizeChanged(pagesize) {
  searchModel.Pagination.PageSize = pagesize
  searchModel.Pagination.PageIndex = 1
  search()
}

function PageIndexChanged(pageIndex) {
  searchModel.Pagination.PageIndex = pageIndex
  search()
}

onMounted(() => {
  search()
})
</script>

<style scoped>
/* Card Styles */
.summary-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.summary-icon {
  font-size: 2rem;
  opacity: 0.8;
}

.summary-amounts {
  min-width: 150px;
}

.border-white-25 {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.bg-primary-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-info-gradient {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.bg-warning-gradient {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.bg-success-gradient {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

/* Table Styles */
.table th {
  border-top: none;
  font-weight: 600;
  color: #495057;
  background-color: #f8f9fa;
  padding: 0.75rem;
  font-size: 0.85rem;
}

.table-hover tbody tr:hover {
  background-color: rgba(102, 126, 234, 0.05);
}

.slip-row {
  transition: background-color 0.15s ease;
}

.slip-code {
  line-height: 1.5;
}

.general-info {
  line-height: 1.5;
  min-width: 180px;
}

.customer-info {
  line-height: 1.5;
}

.financial-info {
  min-width: 150px;
  line-height: 1.4;
}

.time-info {
  line-height: 1.6;
}

/* Badge Styles */
.badge {
  font-weight: 500;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
}

.badge-lg {
  font-size: 0.75rem;
}

.bg-primary-transparent {
  background-color: rgba(102, 126, 234, 0.15);
}

.bg-success-transparent {
  background-color: rgba(40, 167, 69, 0.15);
}

.bg-danger-transparent {
  background-color: rgba(220, 53, 69, 0.15);
}

.bg-warning-transparent {
  background-color: rgba(255, 193, 7, 0.15);
}

.bg-secondary-transparent {
  background-color: rgba(108, 117, 125, 0.15);
}

/* Button Styles */
.btn-action {
  white-space: nowrap;
  min-width: 70px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  transition: all 0.2s ease;
}

.btn-primary-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
}

.btn-primary-gradient:hover {
  background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  color: white;
}

.btn-primary-gradient:disabled {
  opacity: 0.7;
  transform: none;
  box-shadow: none;
}

/* Spinner */
.spinner-border {
  width: 1rem;
  height: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .summary-card .card-body {
    padding: 0.75rem;
  }

  .summary-icon {
    font-size: 1.5rem;
  }

  .btn-action {
    min-width: auto;
    padding: 0.3rem 0.5rem;
  }
}
</style>
