@extends('crm.master')

@section('title', 'Booking Sales')

@php
  $tabBase = request()->except('report_type');
  $dateRanges = [
    'all' => 'All',
    'today' => 'Today',
    'yesterday' => 'Yesterday',
    'last_week' => 'Last week',
    'last_7' => 'Last 7 days',
    'last_month' => 'Last month',
    'last_30' => 'Last 30 days',
    'all_past' => 'All - past',
    'tomorrow' => 'Tomorrow',
    'this_week' => 'This week',
    'this_month' => 'This month',
    'next_7' => 'Next 7 days',
    'next_30' => 'Next 30 days',
    'all_upcoming' => 'All - upcoming',
    'custom' => 'Custom',
  ];
@endphp

@section('content')
<div class="container-xxl flex-grow-1 container-p-y sales-report-page">
  <div class="sales-report-shell">
    <div class="sales-report-hero">
      <div>
        <div class="sales-report-kicker">Reports</div>
        <div class="sales-report-heading-row">
          <h4 class="sales-report-title">
            <i class="ti tabler-chart-line"></i>
            <span>Booking Sales</span>
          </h4>
          <span class="sales-report-count-badge">{{ $reportRows->count() }} rows</span>
        </div>
        <p class="sales-report-subtitle">Clean reporting across bookings, customers, categories, and products.</p>
      </div>

      <a href="{{ route('crm.booking.index') }}" target="_blank" class="sales-report-cta">
        <i class="ti tabler-plus"></i>
        <span>New Booking</span>
      </a>
    </div>

    @include('crm.components.alerts')

    <div class="sales-card sales-card--tabs">
      <div class="sales-tabs">
        @foreach([
          'day' => 'Day',
          'booking' => 'Booking',
          'booking_item' => 'Booking Product',
          'customer' => 'Customer',
          'category' => 'Category',
          'item' => 'Products',
        ] as $key => $label)
          <a class="sales-tab {{ $reportType === $key ? 'sales-tab--active' : '' }}"
             href="{{ route('crm.booking-sales.index', array_merge($tabBase, ['report_type' => $key])) }}">
            {{ $label }}
          </a>
        @endforeach
      </div>
    </div>

    <div class="sales-card sales-card--filters">
      <form method="GET" action="{{ route('crm.booking-sales.index') }}">
        <input type="hidden" name="report_type" value="{{ $reportType }}">

        <div class="sales-filter-grid">
          <div class="sales-filter-field">
            <label class="sales-filter-label">Date Source</label>
            <select name="date_src" class="sales-filter-control" onchange="this.form.submit()">
              <option value="created_at" {{ $dateSrc === 'created_at' ? 'selected' : '' }}>Created</option>
              <option value="start_date" {{ $dateSrc === 'start_date' ? 'selected' : '' }}>Start</option>
              <option value="end_date" {{ $dateSrc === 'end_date' ? 'selected' : '' }}>End</option>
            </select>
          </div>

          <div class="sales-filter-field">
            <label class="sales-filter-label">Date</label>
            <select name="date_range" class="sales-filter-control" onchange="this.form.submit()">
              @foreach($dateRanges as $value => $label)
                <option value="{{ $value }}" {{ $dateRange === $value ? 'selected' : '' }}>{{ $label }}</option>
              @endforeach
            </select>
          </div>

          <div class="sales-filter-field">
            <label class="sales-filter-label">Category</label>
            <select name="category_id" class="sales-filter-control" onchange="this.form.submit()">
              <option value="">All Categories</option>
              @foreach($categories as $category)
                <option value="{{ $category->id }}" {{ (string) $catId === (string) $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
              @endforeach
            </select>
          </div>

          <div class="sales-filter-field">
            <label class="sales-filter-label">Products</label>
            <select name="product_id" class="sales-filter-control" onchange="this.form.submit()">
              <option value="">All Products</option>
              @foreach($products as $product)
                <option value="{{ $product->id }}" {{ (string) $prodId === (string) $product->id ? 'selected' : '' }}>{{ $product->name }}</option>
              @endforeach
            </select>
          </div>

          <div class="sales-filter-field sales-filter-field--search">
            <label class="sales-filter-label">Search</label>
            <input type="text"
                   name="search"
                   value="{{ $search }}"
                   class="sales-filter-control"
                   placeholder="Booking, customer, product...">
          </div>

          <div class="sales-filter-actions">
            <button type="submit" class="sales-btn sales-btn--primary">
              <i class="ti tabler-search"></i>
              <span>Apply</span>
            </button>
            <a href="{{ route('crm.booking-sales.index', ['report_type' => $reportType]) }}" class="sales-btn sales-btn--ghost">
              <i class="ti tabler-x"></i>
            </a>
          </div>
        </div>

        @if($dateRange === 'custom')
          <div class="sales-filter-grid sales-filter-grid--custom">
            <div class="sales-filter-field">
              <label class="sales-filter-label">From</label>
              <input type="date" name="date_from" value="{{ $dateFrom }}" class="sales-filter-control">
            </div>
            <div class="sales-filter-field">
              <label class="sales-filter-label">To</label>
              <input type="date" name="date_to" value="{{ $dateTo }}" class="sales-filter-control">
            </div>
          </div>
        @endif
      </form>
    </div>

    <div class="sales-metrics-grid">
      @foreach([
        ['label' => 'Bookings', 'value' => number_format($summary['bookings']), 'icon' => 'tabler-receipt-2'],
        ['label' => 'Quantity', 'value' => number_format($summary['quantity']), 'icon' => 'tabler-packages'],
        ['label' => 'Gross Sales', 'value' => '$' . number_format($summary['gross'], 2), 'icon' => 'tabler-cash'],
        ['label' => 'Net Sales', 'value' => '$' . number_format($summary['net'], 2), 'icon' => 'tabler-chart-bar'],
        ['label' => 'Taxes', 'value' => '$' . number_format($summary['taxes'], 2), 'icon' => 'tabler-receipt-tax'],
        ['label' => 'Total', 'value' => '$' . number_format($summary['total'], 2), 'icon' => 'tabler-wallet'],
      ] as $metric)
        <div class="sales-metric-card">
          <div class="sales-metric-icon"><i class="ti {{ $metric['icon'] }}"></i></div>
          <div class="sales-metric-label">{{ $metric['label'] }}</div>
          <div class="sales-metric-value">{{ $metric['value'] }}</div>
        </div>
      @endforeach
    </div>

    <div class="sales-card sales-card--table">
      <div class="sales-table-header">
        <div>
          <div class="sales-table-title">
            @switch($reportType)
              @case('day') Sales by Day @break
              @case('booking') Sales by Booking @break
              @case('booking_item') Sales by Booking Product @break
              @case('customer') Sales by Customer @break
              @case('category') Sales by Category @break
              @default Sales by Product
            @endswitch
          </div>
          <div class="sales-table-caption">Smaller type, softer separators, and clearer product-level sales scanning.</div>
        </div>
        <span class="sales-table-chip">{{ $reportRows->count() }} visible</span>
      </div>

      <div class="sales-report-table-wrap">
        <table class="sales-report-table sales-report-table--{{ $reportType }}">
          <thead>
            @if($reportType === 'day')
              <tr>
                <th>Date</th>
                <th class="text-end"><i class="ti tabler-packages"></i> Qty</th>
                <th class="text-end"><i class="ti tabler-ticket"></i> Discounts</th>
                <th class="text-end"><i class="ti tabler-cash"></i> Gross Sales</th>
                <th class="text-end sales-col-emphasis"><i class="ti tabler-chart-bar"></i> Net Sales</th>
                <th class="text-end"><i class="ti tabler-receipt-tax"></i> Taxes</th>
                <th class="text-end sales-col-strong"><i class="ti tabler-wallet"></i> Total</th>
                <th class="text-end">Bookings</th>
              </tr>
            @elseif($reportType === 'booking')
              <tr>
                <th>Booking Code</th>
                <th>Status</th>
                <th>Date</th>
                <th>Customer</th>
                <th class="text-end"><i class="ti tabler-packages"></i> Qty</th>
                <th class="text-end">Discounts</th>
                <th class="text-end">Gross</th>
                <th class="text-end sales-col-emphasis">Net</th>
                <th class="text-end">Taxes</th>
                <th class="text-end sales-col-strong">Total</th>
                <th class="text-end">Paid</th>
                <th class="text-end">Balance</th>
                <th>Start</th>
                <th>End</th>
              </tr>
            @elseif($reportType === 'booking_item')
              <tr>
                <th>Booking Code</th>
                <th>Status</th>
                <th>Product</th>
                <th>SKU</th>
                <th>Date</th>
                <th>Customer</th>
                <th class="text-end"><i class="ti tabler-packages"></i> Qty</th>
                <th class="text-end">Discounts</th>
                <th class="text-end">Gross</th>
                <th class="text-end sales-col-emphasis">Net</th>
                <th class="text-end">Taxes</th>
                <th class="text-end sales-col-strong">Total</th>
                <th>Start</th>
                <th>End</th>
              </tr>
            @elseif($reportType === 'customer')
              <tr>
                <th>Customer</th>
                <th>Email</th>
                <th>Phone</th>
                <th class="text-end"><i class="ti tabler-packages"></i> Qty</th>
                <th class="text-end">Discounts</th>
                <th class="text-end">Gross</th>
                <th class="text-end sales-col-emphasis">Net</th>
                <th class="text-end">Taxes</th>
                <th class="text-end sales-col-strong">Total</th>
                <th class="text-end">Paid</th>
                <th class="text-end">Balance</th>
                <th class="text-end">Bookings</th>
              </tr>
            @elseif($reportType === 'category')
              <tr>
                <th>Category</th>
                <th class="text-end"><i class="ti tabler-packages"></i> Qty</th>
                <th class="text-end">Discounts</th>
                <th class="text-end">Gross</th>
                <th class="text-end sales-col-emphasis">Net</th>
                <th class="text-end">Taxes</th>
                <th class="text-end sales-col-strong">Total</th>
                <th class="text-end">Bookings</th>
              </tr>
            @else
              <tr>
                <th>Product <span class="sales-sort">&uarr;&darr;</span></th>
                <th>SKU <span class="sales-sort">&uarr;&darr;</span></th>
                <th>Category <span class="sales-sort">&uarr;&darr;</span></th>
                <th class="text-end"><i class="ti tabler-packages"></i> Quantity <span class="sales-sort">&uarr;&darr;</span></th>
                <th class="text-end">Discounts <span class="sales-sort">&uarr;&darr;</span></th>
                <th class="text-end">Gross Sales <span class="sales-sort">&uarr;&darr;</span></th>
                <th class="text-end sales-col-emphasis">Net Sales <span class="sales-sort">&uarr;&darr;</span></th>
                <th class="text-end">Taxes <span class="sales-sort">&uarr;&darr;</span></th>
                <th class="text-end sales-col-strong">Total <span class="sales-sort">&uarr;&darr;</span></th>
                <th class="text-end">Bookings <span class="sales-sort">&uarr;&darr;</span></th>
              </tr>
            @endif
          </thead>
          <tbody>
            @forelse($reportRows as $row)
              @if($reportType === 'day')
                <tr>
                  <td data-label="Date">{{ $row->date->format('M j, Y') }}</td>
                  <td data-label="Qty" class="text-end sales-num">{{ number_format($row->quantity) }}</td>
                  <td data-label="Discounts" class="text-end sales-currency">${{ number_format($row->discounts, 2) }}</td>
                  <td data-label="Gross Sales" class="text-end sales-currency">${{ number_format($row->gross_sales, 2) }}</td>
                  <td data-label="Net Sales" class="text-end sales-currency sales-value-emphasis">${{ number_format($row->net_sales, 2) }}</td>
                  <td data-label="Taxes" class="text-end sales-currency">${{ number_format($row->taxes, 2) }}</td>
                  <td data-label="Total" class="text-end sales-currency sales-value-strong">${{ number_format($row->total, 2) }}</td>
                  <td data-label="Bookings" class="text-end sales-num">{{ number_format($row->booking_count) }}</td>
                </tr>
              @elseif($reportType === 'booking')
                <tr>
                  <td data-label="Booking Code"><a class="sales-link" href="{{ route('crm.booking.confirmation', $row->booking_number) }}">{{ $row->booking_number }}</a></td>
                  <td data-label="Status"><span class="sales-status-pill">{{ $row->status_label }}</span></td>
                  <td data-label="Date">{{ $row->date->format('m/d/Y') }}</td>
                  <td data-label="Customer">
                    <div class="sales-cell-primary">{{ $row->customer_name }}</div>
                    <div class="sales-cell-secondary">{{ $row->customer_email }}</div>
                  </td>
                  <td data-label="Qty" class="text-end sales-num">{{ number_format($row->quantity) }}</td>
                  <td data-label="Discounts" class="text-end sales-currency">${{ number_format($row->discounts, 2) }}</td>
                  <td data-label="Gross" class="text-end sales-currency">${{ number_format($row->gross_sales, 2) }}</td>
                  <td data-label="Net" class="text-end sales-currency sales-value-emphasis">${{ number_format($row->net_sales, 2) }}</td>
                  <td data-label="Taxes" class="text-end sales-currency">${{ number_format($row->taxes, 2) }}</td>
                  <td data-label="Total" class="text-end sales-currency sales-value-strong">${{ number_format($row->total, 2) }}</td>
                  <td data-label="Paid" class="text-end sales-currency">${{ number_format($row->paid_total, 2) }}</td>
                  <td data-label="Balance" class="text-end sales-currency">${{ number_format($row->balance, 2) }}</td>
                  <td data-label="Start">{{ $row->start_datetime->format('m/d/Y') }}</td>
                  <td data-label="End">{{ $row->end_datetime->format('m/d/Y') }}</td>
                </tr>
              @elseif($reportType === 'booking_item')
                <tr>
                  <td data-label="Booking Code"><a class="sales-link" href="{{ route('crm.booking.confirmation', $row->booking_number) }}">{{ $row->booking_number }}</a></td>
                  <td data-label="Status"><span class="sales-status-pill">{{ $row->status_label }}</span></td>
                  <td data-label="Product">{{ $row->item_name }}</td>
                  <td data-label="SKU"><span class="sales-cell-secondary">{{ $row->sku ?: '-' }}</span></td>
                  <td data-label="Date">{{ $row->date->format('m/d/Y') }}</td>
                  <td data-label="Customer">{{ $row->customer_name }}</td>
                  <td data-label="Qty" class="text-end sales-num">{{ number_format($row->quantity) }}</td>
                  <td data-label="Discounts" class="text-end sales-currency">${{ number_format($row->discounts, 2) }}</td>
                  <td data-label="Gross" class="text-end sales-currency">${{ number_format($row->gross_sales, 2) }}</td>
                  <td data-label="Net" class="text-end sales-currency sales-value-emphasis">${{ number_format($row->net_sales, 2) }}</td>
                  <td data-label="Taxes" class="text-end sales-currency">${{ number_format($row->taxes, 2) }}</td>
                  <td data-label="Total" class="text-end sales-currency sales-value-strong">${{ number_format($row->total, 2) }}</td>
                  <td data-label="Start">{{ $row->start_datetime->format('m/d/Y') }}</td>
                  <td data-label="End">{{ $row->end_datetime->format('m/d/Y') }}</td>
                </tr>
              @elseif($reportType === 'customer')
                <tr>
                  <td data-label="Customer">{{ $row->customer_name }}</td>
                  <td data-label="Email"><span class="sales-cell-secondary">{{ $row->customer_email }}</span></td>
                  <td data-label="Phone"><span class="sales-cell-secondary">{{ $row->customer_phone ?: '-' }}</span></td>
                  <td data-label="Qty" class="text-end sales-num">{{ number_format($row->quantity) }}</td>
                  <td data-label="Discounts" class="text-end sales-currency">${{ number_format($row->discounts, 2) }}</td>
                  <td data-label="Gross" class="text-end sales-currency">${{ number_format($row->gross_sales, 2) }}</td>
                  <td data-label="Net" class="text-end sales-currency sales-value-emphasis">${{ number_format($row->net_sales, 2) }}</td>
                  <td data-label="Taxes" class="text-end sales-currency">${{ number_format($row->taxes, 2) }}</td>
                  <td data-label="Total" class="text-end sales-currency sales-value-strong">${{ number_format($row->total, 2) }}</td>
                  <td data-label="Paid" class="text-end sales-currency">${{ number_format($row->paid_total, 2) }}</td>
                  <td data-label="Balance" class="text-end sales-currency">${{ number_format($row->balance, 2) }}</td>
                  <td data-label="Bookings" class="text-end sales-num">{{ number_format($row->booking_count) }}</td>
                </tr>
              @elseif($reportType === 'category')
                <tr>
                  <td data-label="Category">{{ $row->category_name }}</td>
                  <td data-label="Qty" class="text-end sales-num">{{ number_format($row->quantity) }}</td>
                  <td data-label="Discounts" class="text-end sales-currency">${{ number_format($row->discounts, 2) }}</td>
                  <td data-label="Gross" class="text-end sales-currency">${{ number_format($row->gross_sales, 2) }}</td>
                  <td data-label="Net" class="text-end sales-currency sales-value-emphasis">${{ number_format($row->net_sales, 2) }}</td>
                  <td data-label="Taxes" class="text-end sales-currency">${{ number_format($row->taxes, 2) }}</td>
                  <td data-label="Total" class="text-end sales-currency sales-value-strong">${{ number_format($row->total, 2) }}</td>
                  <td data-label="Bookings" class="text-end sales-num">{{ number_format($row->booking_count) }}</td>
                </tr>
              @else
                <tr>
                  <td data-label="Product">
                    <div class="sales-product-cell">
                      <span class="sales-product-icon"><i class="ti tabler-box"></i></span>
                      <div>
                        <div class="sales-cell-primary">{{ $row->item_name }}</div>
                        <div class="sales-cell-secondary">Product sales summary</div>
                      </div>
                    </div>
                  </td>
                  <td data-label="SKU"><span class="sales-cell-secondary">{{ $row->sku ?: '-' }}</span></td>
                  <td data-label="Category"><span class="sales-category-chip">{{ $row->category_name ?: 'Uncategorized' }}</span></td>
                  <td data-label="Quantity" class="text-end sales-num">{{ number_format($row->quantity) }}</td>
                  <td data-label="Discounts" class="text-end sales-currency">${{ number_format($row->discounts, 2) }}</td>
                  <td data-label="Gross Sales" class="text-end sales-currency">${{ number_format($row->gross_sales, 2) }}</td>
                  <td data-label="Net Sales" class="text-end sales-currency sales-value-emphasis">${{ number_format($row->net_sales, 2) }}</td>
                  <td data-label="Taxes" class="text-end sales-currency">${{ number_format($row->taxes, 2) }}</td>
                  <td data-label="Total" class="text-end sales-currency sales-value-strong">${{ number_format($row->total, 2) }}</td>
                  <td data-label="Bookings" class="text-end sales-num">{{ number_format($row->booking_count) }}</td>
                </tr>
              @endif
            @empty
              <tr>
                <td colspan="20" class="sales-empty-state">No sales data found for the selected filters.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

@section('head-extra')
<style>
.sales-report-page {
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f9fafb;
}

.sales-report-shell {
  display: grid;
  gap: 18px;
}

.sales-report-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sales-report-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  margin-bottom: 6px;
}

.sales-report-heading-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sales-report-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #111827;
}

.sales-report-title i {
  color: #2563eb;
  font-size: 24px;
}

.sales-report-subtitle {
  margin: 8px 0 0;
  font-size: 13px;
  color: #6b7280;
}

.sales-report-count-badge,
.sales-table-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 700;
}

.sales-report-cta,
.sales-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all .16s ease;
}

.sales-report-cta,
.sales-btn--primary {
  background: #2563eb;
  color: #fff;
  border: 1px solid #2563eb;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .18);
}

.sales-report-cta:hover,
.sales-btn--primary:hover {
  color: #fff;
  transform: translateY(-1px);
}

.sales-btn--ghost {
  background: #fff;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

.sales-btn--ghost:hover {
  color: #111827;
  border-color: #d1d5db;
}

.sales-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.sales-card--tabs {
  padding: 8px;
}

.sales-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sales-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  color: #6b7280;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all .16s ease;
}

.sales-tab:hover {
  color: #111827;
  background: #f3f4f6;
}

.sales-tab--active {
  color: #1d4ed8;
  background: #eff6ff;
}

.sales-card--filters {
  padding: 16px;
}

.sales-filter-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sales-filter-grid--custom {
  margin-top: 14px;
  grid-template-columns: repeat(2, minmax(0, 180px));
}

.sales-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sales-filter-field--search {
  grid-column: span 1;
}

.sales-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
}

.sales-filter-control {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  font-size: 13px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .02);
}

.sales-filter-control:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .10);
}

.sales-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.sales-metrics-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sales-metric-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.sales-metric-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #2563eb;
  font-size: 16px;
  margin-bottom: 10px;
}

.sales-metric-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
}

.sales-metric-value {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.sales-card--table {
  overflow: hidden;
}

.sales-table-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #eef2f7;
}

.sales-table-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.sales-table-caption {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

.sales-report-table-wrap {
  overflow-x: auto;
}

.sales-report-table {
  width: 100%;
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.sales-report-table thead th {
  padding: 13px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #fbfcfe;
  color: #374151;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.sales-report-table thead th i {
  margin-right: 4px;
  color: #9ca3af;
  font-size: 12px;
}

.sales-report-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #111827;
  font-size: 11.5px;
  vertical-align: middle;
  transition: background-color .16s ease, color .16s ease;
}

.sales-report-table tbody tr:nth-child(even) {
  background: #fcfcfd;
}

.sales-report-table tbody tr:hover {
  background: #f8fbff;
}

.sales-report-table--item tbody tr:hover td,
.sales-report-table--booking_item tbody tr:hover td {
  background: rgba(248, 251, 255, .55);
}

.sales-report-table tbody tr:last-child td {
  border-bottom: 0;
}

.sales-col-emphasis,
.sales-value-emphasis {
  color: #1f2937;
  font-weight: 700;
}

.sales-col-strong,
.sales-value-strong {
  color: #0f172a;
  font-weight: 800;
}

.sales-sort {
  margin-left: 4px;
  color: #cbd5e1;
  font-size: 9px;
  font-weight: 700;
}

.sales-num,
.sales-currency {
  font-variant-numeric: tabular-nums;
}

.sales-currency {
  letter-spacing: .01em;
  white-space: nowrap;
}

.sales-link {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.sales-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.sales-cell-primary {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

.sales-cell-secondary {
  font-size: 11px;
  color: #6b7280;
}

.sales-product-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.sales-product-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f3f4f6;
  color: #2563eb;
  font-size: 14px;
}

.sales-category-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  color: #6b7280;
  font-size: 10px;
  font-weight: 700;
}

.sales-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 11px;
  font-weight: 700;
}

.sales-empty-state {
  padding: 44px 16px !important;
  text-align: center;
  font-size: 13px !important;
  color: #6b7280 !important;
}

@media (max-width: 1199.98px) {
  .sales-filter-grid,
  .sales-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .sales-report-title {
    font-size: 22px;
  }

  .sales-card--filters,
  .sales-table-header {
    padding: 14px;
  }

  .sales-filter-grid,
  .sales-metrics-grid,
  .sales-filter-grid--custom {
    grid-template-columns: 1fr;
  }

  .sales-filter-actions {
    align-items: stretch;
  }

  .sales-report-table {
    min-width: 100%;
  }

  .sales-report-table thead {
    display: none;
  }

  .sales-report-table tbody {
    display: grid;
    gap: 12px;
    padding: 12px;
  }

  .sales-report-table tbody tr {
    display: block;
    background: #fff !important;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
    overflow: hidden;
  }

  .sales-report-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    text-align: right !important;
    border-bottom: 1px solid #f3f4f6;
  }

  .sales-report-table tbody td:last-child {
    border-bottom: 0;
  }

  .sales-report-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    text-align: left;
    color: #6b7280;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .sales-report-table--item tbody td:nth-child(2),
  .sales-report-table--item tbody td:nth-child(3) {
    display: none;
  }

  .sales-product-cell {
    min-width: 0;
    align-items: flex-start;
  }

  .sales-product-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 8px;
    font-size: 12px;
  }

  .sales-report-table--booking tbody td:nth-child(13),
  .sales-report-table--booking tbody td:nth-child(14) {
    display: none;
  }

  .sales-report-table--booking_item tbody td:nth-child(4),
  .sales-report-table--booking_item tbody td:nth-child(13),
  .sales-report-table--booking_item tbody td:nth-child(14) {
    display: none;
  }
}
</style>
@endsection