@extends('admin.layouts.app')

@section('page-title', 'Order Details')

@section('content')
{{-- FULL-WIDTH FLUID CONTAINER --}}
<div class="container-fluid p-0">
  <div class="px-lg-4 px-3 py-4">

    {{-- MAIN CARD --}}
    <div class="card shadow-sm rounded-3 border-0">
      <div class="card-body p-lg-4 p-3">

        {{-- HEADER SECTION --}}
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start gap-3 mb-4">
          <div class="flex-grow-1">
            <h1 class="h2 fw-bold mb-1">Order Details</h1>
            @php
                $status = strtolower($order->status ?? '');
            @endphp
            <p class="text-muted mb-0">Detailed view of this shipment order</p>
          </div>

          <div class="d-flex flex-wrap gap-2 align-items-start">
            {{-- ADD ITEM BUTTON --}}
            @can('order.create')
                @if($status === 'pending')
                    <button class="btn btn-add-item" data-bs-toggle="modal" data-bs-target="#addItemModal">
                        <i class="fas fa-plus-circle me-1 me-lg-2"></i>
                        <span class="d-none d-lg-inline">Add New Item</span>
                        <span class="d-lg-none">Add</span>
                    </button>
                @endif
            @endcan

            <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-icon">
                <i class="fas fa-times"></i>
            </a>
          </div>
        </div>

        {{-- ACTION BUTTONS --}}
        <div class="d-flex flex-wrap gap-2 mb-4">
            @if($status === 'pending')
                <button class="btn btn-edit-order" 
                        onclick="document.getElementById('editOrderForm').style.display='block'">
                    <i class="fas fa-edit me-1 me-lg-2"></i>
                    <span>Edit Order</span>
                </button>

                <form action="{{ route('admin.orders.destroy', $order->id) }}" 
                      method="POST"
                      onsubmit="return confirm('Delete this entire order?')">
                    @csrf
                    @method('DELETE')
                    <button class="btn btn-delete-order">
                        <i class="fas fa-trash-alt me-1 me-lg-2"></i>
                        <span>Delete Order</span>
                    </button>
                </form>
            @endif
        </div>

        {{-- EDIT ORDER FORM (Hidden by default) --}}
        <div id="editOrderForm" class="p-3 bg-light rounded mb-4 shadow-sm" style="display:none;">
          <h5 class="fw-bold mb-3">Edit Order</h5>
          <form action="{{ route('admin.orders.updateItem', $order->id) }}" method="POST">
            @csrf
            <div class="row g-3">
              <div class="col-12 col-md-4">
                <label class="form-label">Mark No</label>
                <input type="text" name="mark_no" value="{{ $order->mark_no }}" class="form-control custom-input">
              </div>
              <div class="col-12 col-md-4">
                <label class="form-label">Origin</label>
                <input type="text" name="origin" value="{{ $order->origin }}" class="form-control custom-input">
              </div>
              <div class="col-12 col-md-4">
                <label class="form-label">Destination</label>
                <input type="text" name="destination" value="{{ $order->destination }}" class="form-control custom-input">
              </div>
            </div>
            <div class="d-flex flex-wrap gap-2 mt-3">
              <button class="btn btn-save-changes">
                <i class="fas fa-save me-2"></i>Save Changes
              </button>
              <button type="button"
                      class="btn btn-cancel"
                      onclick="document.getElementById('editOrderForm').style.display='none'">
                <i class="fas fa-times me-2"></i>Cancel
              </button>
            </div>
          </form>
        </div>

        <hr class="my-4">

        {{-- CUSTOMER INFO --}}
        <div class="row g-4 mb-4">
          <div class="col-12 col-lg-8">
            <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center gap-3">
              <div class="flex-shrink-0">
                <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center"
                     style="width: 4rem; height: 4rem; font-size: 1.5rem;">
                  {{ strtoupper(substr($user->customer_name ?? 'U', 0, 1)) }}
                </div>
              </div>
              <div class="flex-grow-1">
                <h5 class="mb-1">{{ $user->customer_name ?? 'Unknown Customer' }}</h5>
                <p class="mb-1">{{ $user->company_name ?? 'N/A' }}</p>
                <p class="mb-1 text-muted">{{ $user->email ?? '' }}</p>
                <p class="mb-0 text-muted">{{ $user->mobile_no ?? '' }}</p>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-4">
            <div class="text-lg-end">
              <p class="mb-1">{{ $user->address ?? '' }}</p>
              <small class="text-muted">{{ $user->pincode ?? '' }}</small>
            </div>
          </div>
        </div>

        {{-- ORDER SUMMARY --}}
        <div class="row g-0 mb-4">
          <div class="col-6 col-md-3 border-end py-3">
            <div class="text-center">
              <p class="fw-semibold mb-1">Order ID</p>
              <h6 class="text-primary fw-bold">{{ $order->order_id }}</h6>
            </div>
          </div>
          <div class="col-6 col-md-3 border-end py-3">
            <div class="text-center">
              <p class="fw-semibold mb-1">Mark No</p>
              <h6>{{ $order->mark_no }}</h6>
            </div>
          </div>
          <div class="col-6 col-md-3 border-end py-3">
            <div class="text-center">
              <p class="fw-semibold mb-1">Total Items</p>
              <h6>{{ $order->items->count() }}</h6>
            </div>
          </div>
          <div class="col-6 col-md-3 py-3">
            <div class="text-center">
              <p class="fw-semibold mb-1">Status</p>
              <span class="badge bg-warning text-dark">{{ ucfirst($order->status) }}</span>
            </div>
          </div>
        </div>

        {{-- ORIGIN / DESTINATION --}}
        <div class="row mb-4">
          <div class="col-12 col-md-6 mb-3 mb-md-0">
            <div class="text-center">
              <p class="mb-1 fw-semibold text-muted">Origin</p>
              <h6>{{ $order->origin }}</h6>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="text-center">
              <p class="mb-1 fw-semibold text-muted">Destination</p>
              <h6>{{ $order->destination }}</h6>
            </div>
          </div>
        </div>

        {{-- ITEMS TABLE --}}
        <div class="table-responsive-lg">
          <div class="table-responsive">
            <table class="table table-bordered align-middle text-center mb-0">
              <thead class="table-light position-sticky top-0">
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Description</th>
                  <th scope="col">CTN</th>
                  <th scope="col">QTY</th>
                  <th scope="col">TTL/QTY</th>
                  <th scope="col">Unit</th>
                  <th scope="col">Price</th>
                  <th scope="col">Total Amount</th>
                  <th scope="col">CBM</th>
                  <th scope="col">TTL CBM</th>
                  <th scope="col">KG</th>
                  <th scope="col">TTL KG</th>
                  <th scope="col">Shop No</th>
                  <th scope="col">Actions</th>
                </tr>
              </thead>
              <tbody>
                @foreach($order->items as $index => $item)
                <tr>
                  <td>{{ $index + 1 }}</td>
                  <td class="text-start">{{ $item->description }}</td>
                  <td>{{ $item->ctn }}</td>
                  <td>{{ $item->qty }}</td>
                  <td>{{ $item->ttl_qty }}</td>
                  <td>{{ $item->unit }}</td>
                  <td>{{ number_format($item->price, 2) }}</td>
                  <td>{{ number_format($item->ttl_amount, 2) }}</td>
                  <td>{{ $item->cbm }}</td>
                  <td>{{ $item->ttl_cbm }}</td>
                  <td>{{ $item->kg }}</td>
                  <td>{{ $item->ttl_kg }}</td>
                  <td>{{ $item->shop_no }}</td>
                  <td>
                    <div class="d-flex flex-wrap gap-1 justify-content-center">
                      @if($status === 'pending')
                        @can('order.edit')
                        <button type="button" 
                                class="btn btn-sm btn-edit-item" 
                                data-bs-toggle="modal" 
                                data-bs-target="#editItemModal{{ $item->id }}">
                            <i class="fas fa-edit"></i>
                        </button>
                        @endcan
                        
                        @can('order.delete')
                        <form action="{{ route('admin.orders.deleteItem', $item->id) }}" 
                              method="POST" 
                              onsubmit="return confirm('Delete this item?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-delete-item">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                        @endcan
                      @endif
                    </div>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>

        {{-- TOTALS --}}
        <div class="row text-center mt-4 pt-3 border-top">
          <div class="col-6 col-md-3 mb-3">
            <h6 class="fw-bold text-primary mb-1">{{ $order->ctn }}</h6>
            <small class="text-muted">Total CTN</small>
          </div>
          <div class="col-6 col-md-3 mb-3">
            <h6 class="fw-bold text-primary mb-1">{{ $order->qty }}</h6>
            <small class="text-muted">Total QTY</small>
          </div>
          <div class="col-6 col-md-3 mb-3">
            <h6 class="fw-bold text-success mb-1">{{ $order->ttl_kg }}</h6>
            <small class="text-muted">Total KG</small>
          </div>
          <div class="col-6 col-md-3 mb-3">
            <h6 class="fw-bold text-danger mb-1">₹{{ number_format($order->ttl_amount, 2) }}</h6>
            <small class="text-muted">Total Amount</small>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

{{-- EDIT ITEM MODALS --}}
@foreach($order->items as $item)
<div class="modal fade zoom-modal" id="editItemModal{{ $item->id }}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content custom-modal">
      <div class="modal-header modal-gradient-header">
        <h5 class="modal-title text-white">
          <i class="fas fa-edit me-2"></i>Edit Item
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form action="{{ route('admin.orders.updateItem', $item->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-12 col-md-6">
              <label class="form-label">Description</label>
              <input type="text" name="description" 
                    value="{{ $item->description }}" 
                    class="form-control custom-input" required>
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">CTN</label>
              <input type="number" name="ctn" 
                    value="{{ $item->ctn }}" 
                    class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">QTY</label>
              <input type="number" name="qty" 
                    value="{{ $item->qty }}" 
                    class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">TTL QTY</label>
              <input type="number" name="ttl_qty" 
                    value="{{ $item->ttl_qty }}" 
                    class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">Unit</label>
              <input type="text" name="unit" 
                    value="{{ $item->unit }}" 
                    class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">Price</label>
              <input type="number" name="price" 
                    value="{{ $item->price }}" 
                    class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">Total Amount</label>
              <input type="number" name="ttl_amount" 
                    value="{{ $item->ttl_amount }}" 
                    class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">CBM</label>
              <input type="number" name="cbm" 
                    value="{{ $item->cbm }}" 
                    class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">TTL CBM</label>
              <input type="number" name="ttl_cbm" 
                    value="{{ $item->ttl_cbm }}" 
                    class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">KG</label>
              <input type="number" name="kg" 
                    value="{{ $item->kg }}" 
                    class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">TTL KG</label>
              <input type="number" name="ttl_kg" 
                    value="{{ $item->ttl_kg }}" 
                    class="form-control custom-input">
            </div>
            <div class="col-12 col-md-3">
              <label class="form-label">Shop No</label>
              <input type="text" name="shop_no" 
                    value="{{ $item->shop_no }}" 
                    class="form-control custom-input">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-modal-cancel" data-bs-dismiss="modal">
            <i class="fas fa-times me-2"></i>Cancel
          </button>
          <button type="submit" class="btn btn-modal-save">
            <i class="fas fa-save me-2"></i>Save Changes
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endforeach

{{-- ADD ITEM MODAL --}}
<div class="modal fade zoom-modal" id="addItemModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content custom-modal">
      <div class="modal-header modal-gradient-header">
        <h5 class="modal-title text-white">
          <i class="fas fa-cube me-2"></i>Add Item To Order
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form id="addItemForm" action="{{ route('admin.orders.addItem', $order->id) }}" method="POST">
        @csrf
        <div class="modal-body">
          {{-- DELETED ITEMS --}}
          @php
              $deletedItems = \App\Models\OrderItem::onlyTrashed()
                  ->where('order_id', $order->id)
                  ->get();
          @endphp
          
          @if($deletedItems->count() > 0)
          <div class="mb-4">
            <h5 class="section-title mb-3">Deleted Items (Use / Restore)</h5>
            <div class="table-responsive">
              <table class="table table-bordered align-middle text-center">
                <thead class="table-light">
                  <tr>
                    <th>#</th>
                    <th>Description</th>
                    <th>CTN</th>
                    <th>QTY</th>
                    <th>TTL QTY</th>
                    <th>Unit</th>
                    <th>Price</th>
                    <th>TTL Amount</th>
                    <th>CBM</th>
                    <th>TTL CBM</th>
                    <th>KG</th>
                    <th>TTL KG</th>
                    <th>Shop No</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($deletedItems as $key => $deleted)
                  <tr>
                    <td>{{ $key + 1 }}</td>
                    <td class="text-start">{{ $deleted->description }}</td>
                    <td>{{ $deleted->ctn }}</td>
                    <td>{{ $deleted->qty }}</td>
                    <td>{{ $deleted->ttl_qty }}</td>
                    <td>{{ $deleted->unit }}</td>
                    <td>{{ number_format($deleted->price, 2) }}</td>
                    <td>{{ number_format($deleted->ttl_amount, 2) }}</td>
                    <td>{{ $deleted->cbm }}</td>
                    <td>{{ $deleted->ttl_cbm }}</td>
                    <td>{{ $deleted->kg }}</td>
                    <td>{{ $deleted->ttl_kg }}</td>
                    <td>{{ $deleted->shop_no }}</td>
                    <td>
                      <div class="d-flex flex-wrap gap-2 justify-content-center">
                        <button type="button" 
                                class="btn btn-sm btn-use-item"
                                onclick="fillFormFromDeleted({{ json_encode($deleted) }})">
                            <i class="fas fa-redo me-1"></i>Use
                        </button>
                        <button type="button"
                                class="btn btn-sm btn-restore-item"
                                data-id="{{ $deleted->id }}"
                                data-url="{{ route('admin.orders.restoreItem', $deleted->id) }}">
                            <i class="fas fa-history me-1"></i>Restore
                        </button>
                      </div>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
          @endif

          {{-- ADD FORM --}}
          <h5 class="section-title mb-3">Add New Item</h5>
          <div class="row g-3">
            <div class="col-12 col-md-6">
              <label class="form-label">Description</label>
              <input type="text" name="description" class="form-control custom-input" required>
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">CTN</label>
              <input type="number" name="ctn" class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">QTY</label>
              <input type="number" name="qty" class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">TTL QTY</label>
              <input type="number" name="ttl_qty" class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">Unit</label>
              <input type="text" name="unit" class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">Price</label>
              <input type="number" name="price" class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">Total Amount</label>
              <input type="number" name="ttl_amount" class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">CBM</label>
              <input type="number" name="cbm" class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">TTL CBM</label>
              <input type="number" name="ttl_cbm" class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">KG</label>
              <input type="number" name="kg" class="form-control custom-input">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">TTL KG</label>
              <input type="number" name="ttl_kg" class="form-control custom-input">
            </div>
            <div class="col-12 col-md-3">
              <label class="form-label">Shop No</label>
              <input type="text" name="shop_no" class="form-control custom-input">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-modal-cancel" data-bs-dismiss="modal">
            <i class="fas fa-times me-2"></i>Cancel
          </button>
          <button type="submit" class="btn btn-modal-add">
            <i class="fas fa-plus-circle me-2"></i>Add Item
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const token = '{{ csrf_token() }}';

    document.querySelectorAll('.btn-restore-item').forEach(function (btn) {
        btn.addEventListener('click', function () {
            if (!confirm('Restore this item?')) return;

            const url = this.dataset.url;
            const row = this.closest('tr');

            fetch(url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': token,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({})
            })
            .then(response => {
                if (!response.ok) throw new Error('Restore failed');
                return response.json().catch(() => ({}));
            })
            .then(() => {
                row.remove();
                location.reload();
            })
            .catch(() => {
                alert('Could not restore item. Please try again.');
            });
        });
    });

    // Handle modal on different zoom levels
    function adjustModalForZoom() {
        const zoomLevel = window.devicePixelRatio || 1;
        const modals = document.querySelectorAll('.zoom-modal');
        
        modals.forEach(modal => {
            const modalDialog = modal.querySelector('.modal-dialog');
            if (modalDialog) {
                if (zoomLevel > 1.5) {
                    modalDialog.classList.add('high-zoom');
                    modalDialog.classList.remove('normal-zoom');
                } else if (zoomLevel < 0.9) {
                    modalDialog.classList.add('low-zoom');
                    modalDialog.classList.remove('normal-zoom');
                } else {
                    modalDialog.classList.add('normal-zoom');
                    modalDialog.classList.remove('high-zoom', 'low-zoom');
                }
            }
        });
    }

    // Check zoom level on load and resize
    adjustModalForZoom();
    window.addEventListener('resize', adjustModalForZoom);
});

function fillFormFromDeleted(item) {
    let form = document.getElementById('addItemForm');
    form.querySelector('input[name="description"]').value = item.description;
    form.querySelector('input[name="ctn"]').value = item.ctn;
    form.querySelector('input[name="qty"]').value = item.qty;
    form.querySelector('input[name="ttl_qty"]').value = item.ttl_qty;
    form.querySelector('input[name="unit"]').value = item.unit;
    form.querySelector('input[name="price"]').value = item.price;
    form.querySelector('input[name="ttl_amount"]').value = item.ttl_amount;
    form.querySelector('input[name="cbm"]').value = item.cbm;
    form.querySelector('input[name="ttl_cbm"]').value = item.ttl_cbm;
    form.querySelector('input[name="kg"]').value = item.kg;
    form.querySelector('input[name="ttl_kg"]').value = item.ttl_kg;
    form.querySelector('input[name="shop_no"]').value = item.shop_no;
    
    // Scroll to add form section
    const sectionTitle = document.querySelector('.section-title');
    if (sectionTitle) {
        sectionTitle.scrollIntoView({ 
            behavior: 'smooth', 
            block: 'nearest' 
        });
    }
}
</script>

<style>
/* ZOOM-SAFE BASE UNITS */
:root {
  --space-unit: 0.25rem; /* 4px base */
  --btn-padding-y: 0.75rem;
  --btn-padding-x: 1.5rem;
  --modal-max-width: min(90vw, 1200px);
  --modal-padding: clamp(1rem, 2vw, 1.5rem);
}

/* ZOOM-FRIENDLY MODAL SYSTEM */
.zoom-modal .modal-dialog {
  max-width: var(--modal-max-width);
  margin: 1rem auto;
  transition: all 0.3s ease;
}

/* Different zoom level adjustments */
.zoom-modal .modal-dialog.normal-zoom {
  max-width: min(95vw, 1200px);
}

.zoom-modal .modal-dialog.high-zoom {
  max-width: 98vw;
  margin: 0.5rem auto;
}

.zoom-modal .modal-dialog.low-zoom {
  max-width: min(85vw, 1100px);
}

.modal-dialog-scrollable {
  max-height: calc(100vh - 2rem);
}

@media (max-height: 600px) {
  .modal-dialog-scrollable {
    max-height: calc(100vh - 1rem);
  }
}

/* MODAL CONTENT SCALING */
.custom-modal {
  border-radius: clamp(0.5rem, 2vw, 1rem);
  border: none;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-gradient-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
  padding: clamp(1rem, 3vh, 1.5rem);
}

.modal-body {
  padding: var(--modal-padding);
  max-height: 70vh;
  overflow-y: auto;
}

.modal-footer {
  padding: var(--modal-padding);
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
  gap: 0.75rem;
}

/* FORM ELEMENTS FOR ZOOM */
.custom-input {
  border: 2px solid #e9ecef;
  border-radius: clamp(0.375rem, 1vw, 0.5rem);
  padding: clamp(0.625rem, 1.5vh, 0.75rem) clamp(0.75rem, 1.5vw, 1rem);
  font-size: clamp(0.875rem, 2vw, 1rem);
  width: 100%;
  transition: all 0.3s ease;
  min-height: 2.75rem;
}

.custom-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
  transform: translateY(-0.0625rem);
}

/* LABELS FOR ZOOM */
.form-label {
  font-size: clamp(0.875rem, 1.8vw, 1rem);
  font-weight: 500;
  margin-bottom: 0.375rem;
  display: block;
}

/* GRID SYSTEM FOR ZOOM */
.row.g-3 {
  --bs-gutter-x: clamp(0.75rem, 2vw, 1rem);
  --bs-gutter-y: clamp(0.75rem, 2vw, 1rem);
}

/* TABLE IN MODAL FOR ZOOM */
.modal-body .table-responsive {
  max-height: 30vh;
  overflow-y: auto;
}

.modal-body .table {
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  min-width: 800px;
}

.modal-body .table th,
.modal-body .table td {
  padding: clamp(0.5rem, 1vw, 0.75rem) clamp(0.375rem, 1vw, 0.5rem);
  white-space: nowrap;
}

/* BUTTONS FOR ZOOM */
.btn {
  padding: clamp(0.625rem, 1.5vh, 0.75rem) clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(0.875rem, 2vw, 1rem);
  border-radius: clamp(0.375rem, 1vw, 0.5rem);
  min-height: clamp(2.5rem, 6vh, 3rem);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-sm {
  padding: clamp(0.375rem, 1vh, 0.5rem) clamp(0.75rem, 1.5vw, 1rem);
  min-height: clamp(2rem, 4vh, 2.5rem);
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
}

/* COLOR CODED BUTTONS */

/* 1. EDIT BUTTONS (Blue Theme) */
.btn-edit-order,
.btn-edit-item,
.btn-modal-save {
  background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
  border: none;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 0.25rem 1rem rgba(71, 118, 230, 0.3);
}

.btn-edit-order:hover,
.btn-edit-item:hover,
.btn-modal-save:hover {
  background: linear-gradient(135deg, #3a64d4 0%, #7d47d8 100%);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.5rem rgba(71, 118, 230, 0.4);
  color: white;
}

/* 2. DELETE BUTTONS (Red Theme) */
.btn-delete-order,
.btn-delete-item {
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
  border: none;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 0.25rem 1rem rgba(255, 65, 108, 0.3);
}

.btn-delete-order:hover,
.btn-delete-item:hover {
  background: linear-gradient(135deg, #e63956 0%, #e63a21 100%);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.5rem rgba(255, 65, 108, 0.4);
  color: white;
}

/* 3. CANCEL BUTTONS (Gray Theme) */
.btn-cancel,
.btn-modal-cancel {
  background: linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%);
  border: 2px solid #dee2e6;
  color: #495057;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-cancel:hover,
.btn-modal-cancel:hover {
  background: linear-gradient(135deg, #7d8b9a 0%, #dde2e6 100%);
  border-color: #adb5bd;
  transform: translateY(-0.125rem);
  color: #212529;
}

/* 4. ADD/SAVE BUTTONS (Green Theme) */
.btn-add-item,
.btn-save-changes,
.btn-modal-add {
  background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
  border: none;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 0.25rem 1rem rgba(0, 176, 155, 0.3);
}

.btn-add-item:hover,
.btn-save-changes:hover,
.btn-modal-add:hover {
  background: linear-gradient(135deg, #009e8a 0%, #85b936 100%);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 176, 155, 0.4);
  color: white;
}

/* 5. USE BUTTON (Teal Theme) */
.btn-use-item {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 0.125rem 0.5rem rgba(79, 172, 254, 0.3);
}

.btn-use-item:hover {
  background: linear-gradient(135deg, #3a9bfc 0%, #00d9e6 100%);
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.25rem 0.75rem rgba(79, 172, 254, 0.4);
  color: white;
}

/* 6. RESTORE BUTTON (Orange Theme) */
.btn-restore-item {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
  border: none;
  color: #212529;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 0.125rem 0.5rem rgba(247, 151, 30, 0.3);
}

.btn-restore-item:hover {
  background: linear-gradient(135deg, #e6891b 0%, #e6bf00 100%);
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.25rem 0.75rem rgba(247, 151, 30, 0.4);
  color: #212529;
}

.btn-icon {
  width: clamp(2.5rem, 5vw, 3rem);
  height: clamp(2.5rem, 5vw, 3rem);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RESPONSIVE BUTTON TEXT */
.btn span {
  display: inline;
}

@media (max-width: 992px) {
  .btn span:not(.d-none) {
    font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  }
}

/* FLUID CONTAINERS */
.container-fluid {
  max-width: 100vw;
  overflow-x: hidden;
}

/* RESPONSIVE PADDING */
.px-lg-4 { padding-left: clamp(1rem, 3vw, 2rem); padding-right: clamp(1rem, 3vw, 2rem); }
.py-4 { padding-top: clamp(1rem, 3vh, 2rem); padding-bottom: clamp(1rem, 3vh, 2rem); }

/* MAIN TABLE ZOOM SAFETY */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  min-width: 1200px;
  font-size: clamp(0.875rem, 1.5vw, 1rem);
}

.table thead th {
  position: sticky;
  top: 0;
  background: #667eea !important;
  color: white;
  z-index: 10;
  white-space: nowrap;
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.5rem, 1vw, 0.75rem);
}

.table tbody td {
  padding: clamp(0.5rem, 1vw, 0.75rem);
  vertical-align: middle;
}

/* Ensure table cells don't collapse */
.table td, .table th {
  min-width: 5rem;
}

/* ACTION BUTTONS IN TABLE */
.table td:last-child {
  min-width: 8rem;
}

/* SUMMARY GRID */
.row.g-0 > [class*="col-"] {
  padding: clamp(0.75rem, 2vw, 1rem);
}

/* BADGE SCALING */
.badge {
  font-size: clamp(0.75rem, 1.5vw, 0.875em);
  padding: clamp(0.375rem, 1vw, 0.5em) clamp(0.75rem, 1.5vw, 1em);
  border-radius: clamp(0.375rem, 1vw, 0.5rem);
}

/* CARD SPACING */
.card-body {
  padding: clamp(1rem, 3vw, 2rem);
}

/* FLEXIBLE LAYOUTS */
.d-flex {
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
}

/* ZOOM-PROOF ANIMATIONS */
@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(0, 176, 155, 0.7); }
  70% { box-shadow: 0 0 0 0.625rem rgba(0, 176, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 176, 155, 0); }
}

.btn-add-item {
  animation: pulse-glow 2s infinite;
}

/* TEXT WRAPPING */
.text-start {
  word-break: break-word;
  min-width: 12rem;
}

/* RESPONSIVE TYPOGRAPHY */
h1, .h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

h5 {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
}

h6 {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* UTILITY CLASSES FOR ZOOM */
.flex-wrap {
  flex-wrap: wrap;
}

.gap-1 { gap: clamp(0.125rem, 0.5vw, 0.25rem); }
.gap-2 { gap: clamp(0.25rem, 1vw, 0.5rem); }
.gap-3 { gap: clamp(0.5rem, 2vw, 1rem); }

/* HIGH ZOOM (150%) ADJUSTMENTS */
@media (max-width: 576px) {
  .table-responsive {
    font-size: 0.75rem;
  }
  
  .btn {
    padding: 0.5rem 0.875rem;
  }
  
  .modal-dialog {
    margin: 0.25rem;
  }
  
  /* Stack buttons on mobile */
  .modal-footer .btn {
    flex: 1;
    min-width: 100px;
  }
}

/* VERY HIGH ZOOM ADJUSTMENTS */
@media (min-resolution: 150dpi) {
  .custom-input {
    font-size: 1.125rem;
    padding: 0.875rem 1.125rem;
  }
  
  .form-label {
    font-size: 1.125rem;
  }
  
  .btn {
    font-size: 1.125rem;
    padding: 0.875rem 1.75rem;
  }
}

/* LOW ZOOM (80%) ADJUSTMENTS */
@media (max-width: 768px) and (min-resolution: 96dpi) {
  .modal-dialog {
    max-width: 95vw;
  }
  
  .modal-body {
    padding: 1rem;
  }
}

/* LARGE SCREEN OPTIMIZATION */
@media (min-width: 1920px) {
  .container-fluid {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .modal-xl {
    max-width: 1400px;
  }
}

/* BUTTON ICONS */
.btn i {
  font-size: 0.875em;
}

.btn-sm i {
  font-size: 0.75em;
}

/* MODAL SCROLLBAR STYLING */
.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* ACTION BUTTONS SPACING */
.btn-use-item,
.btn-restore-item {
  white-space: nowrap;
  padding: clamp(0.25rem, 0.75vw, 0.35rem) clamp(0.5rem, 1vw, 0.75rem);
  min-height: clamp(1.75rem, 4vh, 2.25rem);
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
}

/* Prevent wrapping inside action cell */
.table td:last-child {
  white-space: nowrap;
}

/* Ensure enough space for both buttons */
.table th:last-child,
.table td:last-child {
  min-width: 9rem;
}

/* ZOOM-LEVEL INDICATOR (for debugging) */
.zoom-level-indicator {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 9999;
  display: none; /* Hidden by default */
}

/* SECTION TITLES IN MODAL */
.section-title {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  color: #2c3e50;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #667eea;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

/* RESPONSIVE MODAL FOOTER */
@media (max-width: 768px) {
  .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }
  
  .modal-footer .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .modal-footer .btn:last-child {
    margin-bottom: 0;
  }
}

/* ZOOM-ADAPTIVE MODAL MAX HEIGHT */
@media (max-height: 500px) {
  .modal-dialog {
    max-height: 95vh;
  }
  
  .modal-body {
    max-height: 60vh;
  }
}

/* PRINT STYLES */
@media print {
  .modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
  }
  
  .modal-dialog {
    max-width: 100%;
    margin: 0;
  }
  
  .modal-content {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}
/* 🔒 FORCE USE + RESTORE IN ONE SINGLE ROW */

/* Stop wrapping in Actions column */
.table td:last-child {
  white-space: nowrap;
}

/* Override flex-wrap only for Use/Restore container */
.table td:last-child .d-flex {
  flex-wrap: nowrap !important;
}

/* Compact + inline buttons */
.btn-use-item,
.btn-restore-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  padding: 0.35rem 0.65rem;
  min-height: 2.2rem;
  font-size: 0.85rem;
}

/* Ensure column never collapses */
.table th:last-child,
.table td:last-child {
  min-width: 9rem;
}

</style>

@endsection