update index

assets/css/custom.css

@@ -205,16 +205,27 @@ body {
 /* POS Styles */
 .pos-container {
     display: flex;
+    align-items: stretch;
     height: calc(100vh - 120px);
     gap: 20px;
+    min-height: 0;
 }
 .pos-products {
-    flex: 1;
+    flex: 1 1 auto;
+    min-width: 0;
     overflow-y: auto;
     padding-right: 10px;
 }
+[dir="rtl"] .pos-products {
+    padding-right: 0;
+    padding-left: 10px;
+}
 .pos-cart {
+    flex: 0 0 400px;
     width: 400px;
+    min-width: 320px;
+    max-width: 400px;
+    min-height: 0;
     background: var(--surface);
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0,0,0,0.05);
@@ -222,6 +233,31 @@ body {
     flex-direction: column;
     height: 100%;
 }
+.pos-toolbar,
+.pos-cart-header,
+.pos-cart-actions {
+    gap: 0.75rem;
+}
+.pos-toolbar {
+    align-items: center;
+}
+.pos-toolbar .input-group {
+    min-width: 0;
+}
+.pos-cart-header {
+    flex-wrap: wrap;
+}
+.pos-cart-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+.pos-cart-actions .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+}
 .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
@@ -257,6 +293,7 @@ body {
 }
 .cart-items {
     flex: 1;
+    min-height: 0;
     overflow-y: auto;
     padding: 20px;
 }
@@ -296,6 +333,69 @@ body {
     background: var(--bg);
 }
 
+@media (max-width: 1199.98px) {
+    .pos-container {
+        gap: 16px;
+    }
+
+    .pos-cart {
+        flex-basis: 340px;
+        width: 340px;
+        min-width: 300px;
+        max-width: 340px;
+    }
+
+    .product-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 12px;
+    }
+
+    .product-card {
+        padding: 12px;
+    }
+}
+
+@media (max-width: 991.98px) {
+    .pos-toolbar {
+        flex-wrap: wrap;
+    }
+
+    .pos-toolbar .input-group {
+        flex: 1 1 220px;
+    }
+
+    .pos-toolbar .btn {
+        margin-inline-start: auto;
+    }
+
+    .pos-cart-actions {
+        width: 100%;
+        justify-content: flex-start;
+    }
+}
+
+@media (max-width: 899.98px) {
+    .pos-cart {
+        flex-basis: 300px;
+        width: 300px;
+        min-width: 280px;
+        max-width: 300px;
+    }
+
+    .product-grid {
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 10px;
+    }
+
+    .pos-cart-action-text {
+        display: none;
+    }
+
+    .pos-cart-actions .btn i {
+        margin: 0 !important;
+    }
+}
+
 [dir="rtl"] .nav-link i {
     margin-right: 0;
     margin-left: 8px;

index.php

@@ -5790,12 +5790,17 @@ runtime_debug_mark('page:rendering', ['page' => (string)$page]);
                 margin-right: 0 !important;
                 margin-left: 0 !important;
             }
+        }
+
+        @media (max-width: 767.98px) {
             .pos-container {
                 flex-direction: column !important;
                 height: auto !important;
             }
             .pos-cart {
                 width: 100% !important;
+                max-width: none !important;
+                min-width: 0 !important;
                 height: auto !important;
                 position: sticky;
                 bottom: 0;
@@ -5803,7 +5808,7 @@ runtime_debug_mark('page:rendering', ['page' => (string)$page]);
             }
             .pos-products {
                 height: auto !important;
-                max-height: 500px;
+                max-height: 56vh;
             }
         }
         
@@ -7817,7 +7822,7 @@ runtime_debug_mark('page:rendering', ['page' => (string)$page]);
     ?>
     <div class="pos-container">
         <div class="pos-products">
-            <div class="bg-white p-3 rounded mb-3 shadow-sm d-flex gap-2">
+            <div class="bg-white p-3 rounded mb-3 shadow-sm d-flex gap-2 pos-toolbar">
                 <div class="input-group flex-grow-1">
                     <span class="input-group-text bg-transparent border-end-0"><i class="bi bi-search"></i></span>
                     <input type="text" id="productSearch" class="form-control border-start-0" placeholder="<?= $lang === 'ar' ? 'ابحث عن المنتجات بالاسم أو رمز الصنف...' : 'Search products by name or SKU...' ?>" data-en="Search products..." data-ar="بحث عن منتجات...">
@@ -7864,12 +7869,12 @@ runtime_debug_mark('page:rendering', ['page' => (string)$page]);
         </div>
         
         <div class="pos-cart">
-            <div class="p-3 border-bottom d-flex justify-content-between align-items-center">
+            <div class="p-3 border-bottom d-flex justify-content-between align-items-center pos-cart-header">
                 <h6 class="m-0 fw-bold"><i class="bi bi-cart3 me-2"></i><?= $lang === 'ar' ? 'السلة' : 'Cart' ?></h6>
-                <div class="d-flex gap-2">
+                <div class="d-flex gap-2 pos-cart-actions">
-                    <button class="btn btn-sm btn-outline-info" onclick="window.open('customer-display.php?v=<?= time() ?>', 'CustomerDisplay', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=' + screen.availWidth + ',height=' + screen.availHeight + ',left=0,top=0')" title="<?= $lang === 'ar' ? 'شاشة العميل' : 'Customer Display' ?>"><i class="bi bi-display me-1"></i> <?= $lang === 'ar' ? 'شاشة العميل' : 'Customer Screen' ?></button>
+                    <button class="btn btn-sm btn-outline-info" onclick="window.open('customer-display.php?v=<?= time() ?>', 'CustomerDisplay', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=' + screen.availWidth + ',height=' + screen.availHeight + ',left=0,top=0')" title="<?= $lang === 'ar' ? 'شاشة العميل' : 'Customer Display' ?>"><i class="bi bi-display me-1"></i><span class="pos-cart-action-text"><?= $lang === 'ar' ? 'شاشة العميل' : 'Customer Screen' ?></span></button>
                     <?php if ($active_session): ?>
-                    <button class="btn btn-sm btn-outline-dark" data-bs-toggle="modal" data-bs-target="#closeRegisterModal" title="<?= $lang === 'ar' ? 'إغلاق الخزينة' : 'Close Register' ?>"><i class="bi bi-x-circle me-1"></i><span data-en="Close" data-ar="إغلاق"><?= $lang === 'ar' ? 'إغلاق' : 'Close' ?></span></button>
+                    <button class="btn btn-sm btn-outline-dark" data-bs-toggle="modal" data-bs-target="#closeRegisterModal" title="<?= $lang === 'ar' ? 'إغلاق الخزينة' : 'Close Register' ?>"><i class="bi bi-x-circle me-1"></i><span class="pos-cart-action-text" data-en="Close" data-ar="إغلاق"><?= $lang === 'ar' ? 'إغلاق' : 'Close' ?></span></button>
                     <?php endif; ?>
                     <button class="btn btn-sm btn-outline-warning" onclick="cart.openHeldCartsModal()" title="<?= $lang === 'ar' ? 'الطلبات المعلقة' : 'Held List' ?>"><i class="bi bi-list-task"></i></button>
                     <button class="btn btn-sm btn-outline-secondary" onclick="cart.hold()" title="<?= $lang === 'ar' ? 'تعليق الطلب' : 'Hold Cart' ?>"><i class="bi bi-pause-circle"></i></button>