<template>
  <div class="order-dashboard">
    <!-- Header Section -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="title-area">
          <div class="title-icon">📦</div>
          <div class="title-text">
            <h1>Order Management</h1>
            <p>Real-time order monitoring and control center</p>
          </div>
        </div>
        <div class="header-actions">
          <button class="action-btn refresh-btn" @click="refreshData">
            <i class="icon">🔄</i>
            <span>Refresh</span>
          </button>
          <button class="action-btn export-btn" @click="exportData">
            <i class="icon">📊</i>
            <span>Export</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Stats Overview -->
    <div class="stats-overview">
      <div class="stat-card" v-for="(stat, index) in statsData" :key="index">
        <div class="stat-icon" :style="{ background: stat.gradient }">
          {{ stat.icon }}
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
          <div class="stat-trend" :class="stat.trend >= 0 ? 'positive' : 'negative'">
            <span class="trend-icon">{{ stat.trend >= 0 ? '↗' : '↘' }}</span>
            <span>{{ Math.abs(stat.trend) }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Filters Section -->
    <div class="filters-section">
      <div class="filter-group">
        <div class="filter-item">
          <label>Date Filter</label>
          <input v-model="dateFilter" type="date" class="filter-input">
        </div>
        <div class="filter-item">
          <label>Restaurant</label>
          <input v-model="restaurantFilter" type="text" class="filter-input" placeholder="Search restaurants...">
        </div>
        <div class="filter-item">
          <label>Status</label>
          <select v-model="statusFilter" class="filter-select">
            <option value="all">All Status</option>
            <option value="pending">Pending</option>
            <option value="accepted">Accepted</option>
            <option value="preparing">Preparing</option>
            <option value="ready">Ready for Pickup</option>
            <option value="picked_up">Picked Up</option>
            <option value="delivered">Delivered</option>
          </select>
        </div>
        <div class="filter-item">
          <button class="clear-filters-btn" @click="clearFilters">
            <i class="icon">🗑️</i>
            Clear
          </button>
        </div>
      </div>
    </div>

    <!-- Loading State -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>Loading orders...</p>
    </div>

    <!-- Main Content -->
    <div v-else class="main-content">
      <!-- Restaurant Cards -->
      <div class="restaurants-container">
        <div v-for="restaurant in filteredRestaurants" :key="restaurant.id" class="restaurant-card">
          <!-- Restaurant Header -->
          <div class="restaurant-header">
            <div class="restaurant-info">
              <div class="restaurant-name">
                <span class="restaurant-icon">🏪</span>
                {{ restaurant.name }}
              </div>
              <div class="restaurant-meta">
                <span class="location">📍 {{ getRestaurantLocation(restaurant.address) }}</span>
                <span class="orders-count">{{ restaurant.orders.length }} orders</span>
              </div>
            </div>
            <div class="restaurant-stats">
              <div class="stat-item">
                <span class="stat-number">{{ getTodayOrders(restaurant) }}</span>
                <span class="stat-text">Today</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">Rs. {{ getTodayRevenue(restaurant) }}</span>
                <span class="stat-text">Revenue</span>
              </div>
            </div>
            <button class="toggle-btn" @click="toggleOrders(restaurant.id)">
              <span class="toggle-icon">{{ expandedRestaurants.includes(restaurant.id) ? '−' : '+' }}</span>
            </button>
          </div>

          <!-- Orders List -->
          <div v-if="expandedRestaurants.includes(restaurant.id)" class="orders-list">
            <div v-for="order in restaurant.orders" :key="order.id" class="order-card">
              <div class="order-header">
                <div class="order-id">
                  <span class="order-number">#{{ order.order_number }}</span>
                  <span class="order-time">{{ formatTime(order.created_at) }}</span>
                </div>
                <div class="order-status">
                  <span class="status-badge" :class="getStatusClass(order.status)">
                    {{ formatStatus(order.status) }}
                  </span>
                </div>
              </div>
              
              <div class="order-details">
                <div class="customer-info">
                  <span class="customer-name">👤 {{ order.customer_name }}</span>
                  <span class="order-amount">💰 Rs. {{ order.total }}</span>
                </div>
                
                <div class="order-actions">
                  <select v-model="order.status" @change="updateOrderStatus(order)" class="status-select">
                    <option value="pending">Pending</option>
                    <option value="accepted">Accepted</option>
                    <option value="preparing">Preparing</option>
                    <option value="ready">Ready</option>
                    <option value="picked_up">Picked Up</option>
                    <option value="delivered">Delivered</option>
                  </select>
                  <button @click="viewOrderDetails(order)" class="view-btn">
                    <i class="icon">👁️</i>
                    View
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Order Details Modal -->
    <div v-if="selectedOrder" class="modal-overlay" @click="closeModal">
      <div class="modal" @click.stop>
        <div class="modal-header">
          <h2>Order #{{ selectedOrder.order_number }}</h2>
          <button @click="closeModal" class="close-btn">×</button>
        </div>
        <div class="modal-body">
          <div class="order-summary">
            <p><strong>Restaurant:</strong> {{ selectedOrder.restaurant_name }}</p>
            <p><strong>Customer:</strong> {{ selectedOrder.customer_name }}</p>
            <p><strong>Phone:</strong> {{ selectedOrder.customer_phone }}</p>
            <p><strong>Address:</strong> {{ selectedOrder.delivery_address }}</p>
            <p><strong>Status:</strong> <span :class="['status-badge', selectedOrder.status]">{{ selectedOrder.status }}</span></p>
          </div>
          
          <div class="order-items" v-if="orderDetails.items">
            <h3>Order Items</h3>
            <div v-for="item in orderDetails.items" :key="item.id" class="item">
              <span class="item-name">{{ item.product_name }}</span>
              <span class="item-qty">x{{ item.quantity }}</span>
              <span class="item-price">Rs. {{ item.total_price }}</span>
            </div>
          </div>

          <div class="order-totals">
            <div class="total-row">
              <span>Subtotal:</span>
              <span>Rs. {{ selectedOrder.subtotal }}</span>
            </div>
            <div class="total-row">
              <span>Delivery Fee:</span>
              <span>Rs. {{ selectedOrder.delivery_fee }}</span>
            </div>
            <div class="total-row">
              <span>Service Charge:</span>
              <span>Rs. {{ selectedOrder.service_charge }}</span>
            </div>
            <div class="total-row">
              <span>Tax:</span>
              <span>Rs. {{ selectedOrder.tax }}</span>
            </div>
            <div class="total-row final">
              <span><strong>Total:</strong></span>
              <span><strong>Rs. {{ selectedOrder.total }}</strong></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import axios from 'axios'

export default {
  name: 'ModernOrderDashboard',
  setup() {
    const restaurants = ref([])
    const loading = ref(true)
    const statusFilter = ref('all')
    const dateFilter = ref('')
    const restaurantFilter = ref('')
    const selectedOrder = ref(null)
    const orderDetails = ref({})
    const expandedRestaurants = ref([])

    const statsData = computed(() => [
      {
        icon: '📦',
        value: totalOrders.value.toLocaleString(),
        label: 'Total Orders',
        trend: 12.5,
        gradient: 'linear-gradient(135deg, #ff6b35 0%, #f7931e 100%)'
      },
      {
        icon: '💰',
        value: `Rs. ${totalRevenue.value}`,
        label: 'Total Revenue',
        trend: 8.2,
        gradient: 'linear-gradient(135deg, #ff8a50 0%, #ff6b35 100%)'
      },
      {
        icon: '🏪',
        value: filteredRestaurants.value.length.toString(),
        label: 'Active Restaurants',
        trend: 3.1,
        gradient: 'linear-gradient(135deg, #ffa366 0%, #ff8a50 100%)'
      },
      {
        icon: '📅',
        value: todayOrdersCount.value.toString(),
        label: "Today's Orders",
        trend: 15.7,
        gradient: 'linear-gradient(135deg, #ffb380 0%, #ffa366 100%)'
      }
    ])

    const refreshData = () => {
      loading.value = true
      loadOrders()
      setTimeout(() => {
        loading.value = false
      }, 1000)
    }

    const exportData = () => {
      console.log('Exporting dashboard data...')
    }

    const clearFilters = () => {
      dateFilter.value = ''
      restaurantFilter.value = ''
      statusFilter.value = 'all'
    }

    const totalOrders = computed(() => {
      return restaurants.value.reduce((total, restaurant) => total + (restaurant.orders?.length || 0), 0)
    })

    const filteredRestaurants = computed(() => {
      let filtered = restaurants.value || []

      if (restaurantFilter.value) {
        filtered = filtered.filter(restaurant => 
          restaurant?.name?.toLowerCase().includes(restaurantFilter.value.toLowerCase())
        )
      }

      return filtered.map(restaurant => ({
        ...restaurant,
        orders: (restaurant.orders || []).filter(order => {
          const statusMatch = statusFilter.value === 'all' || order.status === statusFilter.value
          const dateMatch = !dateFilter.value || 
            new Date(order.created_at).toDateString() === new Date(dateFilter.value).toDateString()
          return statusMatch && dateMatch
        })
      })).filter(restaurant => (restaurant.orders || []).length > 0)
    })

    const loadOrders = async () => {
      try {
        loading.value = true
        const token = localStorage.getItem('token')
        const response = await axios.get('/api/super-admin/orders', {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Accept': 'application/json'
          }
        })
        
        if (response.data.success && response.data.data) {
          restaurants.value = response.data.data
        }
      } catch (error) {
        console.error('Error loading orders:', error)
      } finally {
        loading.value = false
      }
    }

    const updateOrderStatus = async (order) => {
      try {
        const token = localStorage.getItem('token')
        await axios.put(`/api/super-admin/orders/${order.id}/status`, {
          status: order.status
        }, {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Accept': 'application/json'
          }
        })
      } catch (error) {
        console.error('Error updating order status:', error)
      }
    }

    const viewOrderDetails = async (order) => {
      try {
        selectedOrder.value = order
        const token = localStorage.getItem('token')
        const response = await axios.get(`/api/super-admin/orders/${order.id}`, {
          headers: {
            'Authorization': `Bearer ${token}`,
            'Accept': 'application/json'
          }
        })
        if (response.data.success) {
          orderDetails.value = response.data.data.order
        }
      } catch (error) {
        console.error('Error loading order details:', error)
      }
    }

    const closeModal = () => {
      selectedOrder.value = null
      orderDetails.value = {}
    }

    const getTodayOrders = (restaurant) => {
      const today = new Date().toDateString()
      return (restaurant?.orders || []).filter(order => 
        new Date(order.created_at).toDateString() === today
      ).length
    }

    const getTodayRevenue = (restaurant) => {
      const today = new Date().toDateString()
      return (restaurant?.orders || [])
        .filter(order => new Date(order.created_at).toDateString() === today)
        .reduce((sum, order) => sum + parseFloat(order.total || 0), 0)
        .toFixed(2)
    }

    const totalRevenue = computed(() => {
      return (filteredRestaurants.value || []).reduce((total, restaurant) => 
        total + parseFloat(restaurant?.total_revenue || 0), 0
      ).toFixed(2)
    })

    const todayOrdersCount = computed(() => {
      return (filteredRestaurants.value || []).reduce((total, restaurant) => 
        total + getTodayOrders(restaurant), 0
      )
    })

    const toggleOrders = (restaurantId) => {
      const index = expandedRestaurants.value.indexOf(restaurantId)
      if (index > -1) {
        expandedRestaurants.value.splice(index, 1)
      } else {
        expandedRestaurants.value.push(restaurantId)
      }
    }

    const getRestaurantLocation = (address) => {
      if (!address) return 'Unknown'
      const parts = address.split(',')
      return parts[parts.length - 1]?.trim() || 'Unknown'
    }

    const formatTime = (dateString) => {
      return new Date(dateString).toLocaleTimeString('en-US', {
        hour: '2-digit',
        minute: '2-digit'
      })
    }

    const formatStatus = (status) => {
      return status.replace('_', ' ').toUpperCase()
    }

    const getStatusClass = (status) => {
      const statusClasses = {
        pending: 'status-pending',
        accepted: 'status-accepted',
        preparing: 'status-preparing',
        ready: 'status-ready',
        picked_up: 'status-picked',
        delivered: 'status-delivered'
      }
      return statusClasses[status] || 'status-default'
    }

    onMounted(() => {
      loadOrders()
    })

    return {
      restaurants,
      loading,
      statusFilter,
      dateFilter,
      restaurantFilter,
      filteredRestaurants,
      totalOrders,
      totalRevenue,
      todayOrdersCount,
      selectedOrder,
      orderDetails,
      expandedRestaurants,
      statsData,
      updateOrderStatus,
      viewOrderDetails,
      closeModal,
      getTodayOrders,
      getTodayRevenue,
      toggleOrders,
      refreshData,
      exportData,
      clearFilters,
      getRestaurantLocation,
      formatTime,
      formatStatus,
      getStatusClass
    }
  }
}
</script>

<style scoped>
.order-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #fff5f0 0%, #ffe8d6 100%);
  padding: 2rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.dashboard-header {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  border-radius: 24px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 20px 40px rgba(255, 107, 53, 0.3);
  color: white;
}

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

.title-area {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.title-icon {
  font-size: 3rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 1rem;
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.title-text h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
}

.title-text p {
  margin: 0.5rem 0 0 0;
  opacity: 0.9;
  font-size: 1.1rem;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.refresh-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.export-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #ff6b35;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.1);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 107, 53, 0.1);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(255, 107, 53, 0.2);
}

.stat-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.stat-trend.positive {
  color: #10b981;
}

.stat-trend.negative {
  color: #ef4444;
}

.filters-section {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.1);
}

.filter-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  align-items: end;
}

.filter-item label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #374151;
}

.filter-input, .filter-select {
  width: 100%;
  padding: 1rem;
  border: 2px solid #f3f4f6;
  border-radius: 12px;
  background: #f9fafb;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.filter-input:focus, .filter-select:focus {
  outline: none;
  border-color: #ff6b35;
  background: white;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.clear-filters-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: #f3f4f6;
  color: #6b7280;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.clear-filters-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

.loading-container {
  text-align: center;
  padding: 4rem;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.1);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f4f6;
  border-top: 4px solid #ff6b35;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.main-content {
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.1);
  overflow: hidden;
}

.restaurants-container {
  padding: 2rem;
}

.restaurant-card {
  border: 2px solid #f3f4f6;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.restaurant-card:hover {
  border-color: #ff6b35;
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.15);
}

.restaurant-header {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.restaurant-info {
  flex: 1;
}

.restaurant-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.restaurant-meta {
  display: flex;
  gap: 2rem;
  opacity: 0.9;
}

.restaurant-stats {
  display: flex;
  gap: 2rem;
  margin-right: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
}

.stat-text {
  font-size: 0.875rem;
  opacity: 0.9;
}

.toggle-btn {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 700;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.toggle-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.orders-list {
  padding: 1.5rem;
  background: #fafafa;
}

.order-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

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

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.order-number {
  font-weight: 700;
  color: #1f2937;
  font-size: 1.1rem;
}

.order-time {
  color: #6b7280;
  font-size: 0.875rem;
  margin-left: 1rem;
}

.status-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-pending { background: #fef3c7; color: #d97706; }
.status-accepted { background: #dbeafe; color: #2563eb; }
.status-preparing { background: #fde68a; color: #d97706; }
.status-ready { background: #d1fae5; color: #059669; }
.status-picked { background: #e0e7ff; color: #5b21b6; }
.status-delivered { background: #dcfce7; color: #16a34a; }

.order-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customer-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.customer-name {
  font-weight: 600;
  color: #374151;
}

.order-amount {
  font-weight: 700;
  color: #ff6b35;
  font-size: 1.1rem;
}

.order-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.status-select {
  padding: 0.75rem 1rem;
  border: 2px solid #f3f4f6;
  border-radius: 8px;
  background: white;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
}

.view-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #ff6b35;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-btn:hover {
  background: #f7931e;
  transform: translateY(-1px);
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.modal {
  background: white;
  border-radius: 20px;
  max-width: 700px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  padding: 2rem;
  border-radius: 20px 20px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
}

.close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.modal-body {
  padding: 2rem;
}

.order-summary p {
  margin: 1rem 0;
  color: #4b5563;
  line-height: 1.6;
  font-size: 1rem;
}

.order-items {
  margin: 2rem 0;
}

.order-items h3 {
  margin: 0 0 1.5rem 0;
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 700;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.item:last-child {
  border-bottom: none;
}

.item-name {
  flex: 1;
  color: #1f2937;
  font-weight: 600;
}

.item-qty {
  color: #6b7280;
  margin: 0 1.5rem;
  font-weight: 500;
}

.item-price {
  font-weight: 700;
  color: #ff6b35;
  font-size: 1.1rem;
}

.order-totals {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid #f3f4f6;
}

.total-row {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
  color: #4b5563;
  font-size: 1rem;
}

.total-row.final {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 2px solid #ff6b35;
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .order-dashboard {
    padding: 1rem;
  }
  
  .header-content {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
  
  .title-area {
    flex-direction: column;
    gap: 1rem;
  }
  
  .filter-group {
    grid-template-columns: 1fr;
  }
  
  .restaurant-header {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }
  
  .restaurant-stats {
    margin-right: 0;
  }
  
  .order-details {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .order-actions {
    width: 100%;
    justify-content: space-between;
  }
}
</style>