fix(data-entry): Fix layout overlap and dropdown styling in receipt form

- Use CSS Grid with fixed columns (140px/120px/200px) to prevent TOTAL/CARD/MOD PLATA overlap
- Move MOD PLATA to end of row to avoid overlapping other fields
- Add borderless dropdown styling matching AutoComplete look
- Remove showClear (X button) from MOD PLATA dropdown
- Align dropdown height (44px) with text inputs for consistent vertical alignment
- Add non-scoped CSS for PrimeVue dropdown overrides (per CSS rules)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/modules/data-entry/views/receipts/ReceiptCreateView.vue

@@ -293,7 +293,7 @@
                     optionValue="value"
                     placeholder="Tip"
                     :disabled="isReadOnly"
-                    class="dropdown-compact"
+                    class="dropdown-compact dropdown-borderless"
                   />
                 </div>
                 <div class="form-field">
@@ -328,7 +328,7 @@
                     placeholder="Tip"
                     :disabled="isReadOnly"
                     @change="directionAutoDetected = false"
-                    class="dropdown-compact"
+                    class="dropdown-compact dropdown-borderless"
                   />
                 </div>
               </div>
@@ -340,7 +340,7 @@
 
             <!-- SECTION: VALORI (compact inline layout) -->
             <div class="form-group values-section">
-              <!-- Row 1: TOTAL + Mod Plata + Payment details -->
+              <!-- Row 1: TOTAL + Payment methods (CARD/NUMERAR) + Mod Plata (at END to avoid overlap) -->
               <div class="values-row-inline">
                 <div class="value-item value-item-total">
                   <label>TOTAL *</label>
@@ -351,22 +351,10 @@
                     required
                     :disabled="isReadOnly"
                     class="input-compact"
+                    :pt="{ root: { style: 'width: 130px' } }"
                   />
                 </div>
-                <div class="value-item value-item-payment">
+                <!-- Payment methods from OCR (CARD, NUMERAR) - BEFORE Mod Plata -->
-                  <label>Mod Plata</label>
-                  <Dropdown
-                    v-model="form.payment_mode"
-                    :options="paymentModeOptions"
-                    optionLabel="label"
-                    optionValue="value"
-                    placeholder="Selecteaza"
-                    showClear
-                    :disabled="isReadOnly"
-                    class="dropdown-payment"
-                  />
-                </div>
-                <!-- Payment methods from OCR (CARD, NUMERAR) - editable -->
                 <div class="value-item payment-method-item" v-for="(pm, idx) in form.payment_methods" :key="pm.method">
                   <label>{{ pm.method }}</label>
                   <InputNumber
@@ -379,6 +367,19 @@
                     class="input-payment-method"
                   />
                 </div>
+                <!-- Mod Plata at END - can't overlap anything after it -->
+                <div class="value-item value-item-payment">
+                  <label>Mod Plata</label>
+                  <Dropdown
+                    v-model="form.payment_mode"
+                    :options="paymentModeOptions"
+                    optionLabel="label"
+                    optionValue="value"
+                    placeholder="Selecteaza"
+                    :disabled="isReadOnly"
+                    class="dropdown-payment dropdown-borderless"
+                  />
+                </div>
               </div>
 
               <!-- Row 2: TVA entries inline (only if present) -->
@@ -414,6 +415,7 @@
                     placeholder="Selecteaza tip cheltuiala"
                     required
                     :disabled="isReadOnly"
+                    class="dropdown-borderless"
                   />
                 </div>
               </div>
@@ -2404,12 +2406,11 @@ const submitForReview = async () => {
   padding: 0.5rem 0.75rem;
 }
 
-/* CSS Grid layout for precise column control - PREVENTS OVERLAP */
+/* CSS Grid layout with FIXED columns to prevent overlap */
 .values-row-inline {
   display: grid;
-  grid-template-columns: 150px 200px auto;
+  grid-template-columns: 140px 120px 200px;  /* TOTAL | CARD | MOD PLATA - fixed widths */
-  column-gap: 3rem;
+  column-gap: 2rem;  /* 32px gap between columns */
-  row-gap: 0.5rem;
   align-items: start;
 }
 
@@ -2417,15 +2418,26 @@ const submitForReview = async () => {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
+  max-width: 100%;  /* Prevent overflow */
+  overflow: hidden;
 }
 
-/* Explicit widths for inputs */
+/* TOTAL - first column */
 .value-item-total {
-  width: 150px;
+  width: 140px;
+  max-width: 140px;
 }
 
+/* Payment methods (CARD, NUMERAR) - middle columns */
+.payment-method-item {
+  width: 120px;
+  max-width: 120px;
+}
+
+/* MOD PLATA - last column */
 .value-item-payment {
   width: 200px;
+  max-width: 200px;
 }
 
 .value-item label {
@@ -2435,26 +2447,44 @@ const submitForReview = async () => {
   text-transform: uppercase;
 }
 
+/* Force InputNumber to respect container width */
 .input-compact {
-  width: 130px;
+  width: 100% !important;
+  max-width: 130px !important;
+}
+
+:deep(.value-item-total .p-inputnumber) {
+  width: 100% !important;
+  max-width: 130px !important;
+}
+
+:deep(.value-item-total .p-inputnumber-input) {
+  width: 100% !important;
+}
+
+:deep(.payment-method-item .p-inputnumber) {
+  width: 100% !important;
+  max-width: 110px !important;
+}
+
+:deep(.payment-method-item .p-inputnumber-input) {
+  width: 100% !important;
 }
 
 .dropdown-payment {
-  width: 180px;  /* Fixed width to prevent overlap */
+  width: 100% !important;
+  max-width: 190px !important;
 }
 
 :deep(.dropdown-payment) {
-  width: 180px !important;
+  width: 100% !important;
+  max-width: 190px !important;
 }
 
 :deep(.dropdown-payment .p-dropdown) {
   width: 100% !important;
 }
 
-.payment-method-item {
-  padding-left: 0.5rem;
-}
-
 .payment-method-value {
   display: inline-block;
   font-size: 0.95rem;
@@ -2951,3 +2981,32 @@ const submitForReview = async () => {
   color: #f57c00;
 }
 </style>
+
+<!-- Non-scoped styles for PrimeVue overrides (per CSS rules - no :deep()) -->
+<style>
+/* Borderless dropdown - matches InputText height (44px) */
+.dropdown-borderless.p-dropdown {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  min-height: 44px !important;
+  height: 44px !important;
+  padding: 0 !important;
+}
+
+.dropdown-borderless.p-dropdown:hover,
+.dropdown-borderless.p-dropdown.p-focus {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.dropdown-borderless .p-dropdown-label {
+  padding: 0.6rem 0.75rem !important;
+  line-height: 1.4 !important;
+}
+
+.dropdown-borderless .p-dropdown-trigger {
+  background: transparent !important;
+  width: 2.5rem !important;
+}
+</style>