fix : disabled BOX for 1st 5 labels

btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.css

@@ -604,3 +604,26 @@ button.ready-to-print {
   min-width: 60px;
   font-weight: bold;
 }
+/* BOX Button Styling */
+.btn.three {
+  background-color: #165d9b; /* Bootstrap secondary */
+  color: #fff;
+  /* border: 1px solid transparent; */
+}
+
+/* Hover Style */
+.btn.three:hover:not(:disabled) {
+  background-color: #5a6268; /* Darker secondary on hover */
+  border-color: #545b62;
+  cursor: pointer;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
+}
+
+/* Disabled Style */
+.btn.three:disabled {
+  background-color: #d6d6d6;
+  color: #888;
+  cursor: not-allowed;
+  border-color: #ccc;
+  opacity: 0.7;
+}

btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html

@@ -9,7 +9,14 @@
       <div class="d-flex flex-wrap justify-content-center gap-2 first">
         <button class="btn btn-dark one" (click)="openCalculator()">CALC</button>
         <button class="btn btn-dark two" (click)="erase()">ERASE</button>
-        <button class="btn btn-secondary three" (click)="toggleBoxMode()">BOX</button>
+<button
+  class="btn btn-secondary three"
+  (click)="toggleBoxMode()"
+  [disabled]="isBoxToggleDisabled"
+>
+  BOX
+</button>
+
         <!-- ✅ FIELD Button -->
         <button class="btn btn-field" [disabled]="!canUseField()" (click)="openFieldModal()">FIELD</button>
       </div>

btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts

@@ -109,6 +109,9 @@ export class TouchPadMenuComponent implements OnInit {
            (this.selectedNumbers.length > 0 || this.selectedNumbers.includes('F')) &&
            this.padValue.length === 0;
   }
+  get isBoxToggleDisabled(): boolean {
+  return this.selectedLabel !== null && this.allowedFieldLabels.includes(this.selectedLabel);
+}
 
   private chunk<T>(array: T[], size: number): T[][] {
     return Array.from({ length: Math.ceil(array.length / size) }, (_, i) =>