WIP

frontend/styles.css

@@ -673,6 +673,18 @@ footer {
     overflow-y: auto;
 }
 
+#receiveDeliveryModal.show {
+    align-items: flex-start;
+    overflow-y: auto;
+    padding: 24px 0;
+}
+
+#receiveDeliveryModal .modal-content {
+    width: min(1280px, 96vw) !important;
+    max-width: min(1280px, 96vw) !important;
+    max-height: calc(100vh - 48px) !important;
+}
+
 #dispenseModal.show {
     align-items: flex-start;
     overflow-y: auto;
@@ -877,6 +889,103 @@ footer {
     color: #1f2937;
 }
 
+.delivery-lines {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin: 8px 0 16px;
+}
+
+.delivery-line {
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 14px;
+    background: #f9fbfd;
+    overflow-x: hidden;
+}
+
+.receive-delivery-modal-content {
+    width: min(1320px, 98vw);
+    max-width: 1320px;
+    max-height: 88vh;
+    overflow-y: auto;
+}
+
+.delivery-line-grid {
+    display: grid;
+    grid-template-columns: 1.9fr 1.8fr 0.9fr 1.4fr 1.2fr 1.3fr auto;
+    gap: 12px;
+    align-items: end;
+}
+
+.delivery-line-grid > * {
+    min-width: 0;
+}
+
+.delivery-line-grid .form-group {
+    margin-bottom: 0;
+}
+
+.delivery-line-grid label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 600;
+    font-size: 0.88em;
+}
+
+.delivery-line-grid input,
+.delivery-line-grid select {
+    width: 100%;
+    min-height: 40px;
+    padding: 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+}
+
+.delivery-toolbar {
+    display: flex;
+    gap: 10px;
+    margin: 6px 0 10px;
+    flex-wrap: wrap;
+}
+
+.delivery-remove-btn {
+    align-self: end;
+    white-space: nowrap;
+}
+
+@media (max-width: 1200px) {
+    .receive-delivery-modal-content {
+        width: min(1120px, 97vw);
+        max-width: 1120px;
+    }
+
+    .delivery-line-grid {
+        grid-template-columns: 1.7fr 1.4fr 0.95fr 1.2fr 1.1fr 1.15fr;
+    }
+
+    .delivery-remove-btn {
+        grid-column: 1 / -1;
+        justify-self: end;
+    }
+}
+
+@media (max-width: 980px) {
+    #receiveDeliveryModal .modal-content {
+        width: 94vw !important;
+        max-width: 94vw !important;
+    }
+
+    .delivery-line-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .delivery-remove-btn {
+        grid-column: 1 / -1;
+        justify-self: end;
+    }
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
     main {
@@ -935,6 +1044,14 @@ footer {
         min-width: 0;
     }
 
+    .delivery-line-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .delivery-toolbar {
+        flex-direction: column;
+    }
+
     .drug-details {
         grid-template-columns: 1fr;
     }