/* Let us position children inside the header */
.ui-header { position: relative; }

/* Target your barcode image (moved into header by JS) */
.ui-header .wo-barcode,
.ui-header img[src*="O4W_MOBILE_GET_BARCODE"] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;        /* tune as needed */
  max-width: 45%;
  object-fit: contain;
}

/* Keep centered title from overlapping the barcode */
.ui-header .ui-title { margin-right: 200px; }  /* adjust to your barcode width */

@media (max-width: 480px) {
  .ui-header .wo-barcode { height: 22px; }
  .ui-header .ui-title { margin-right: 140px; }
}

#M06_BARCODE_PLACEHOLDER {
    display: flex;
    align-items: center;   /* Vertical center */
    height: 100%;          /* Make it fill the parent height */
}

/* Start Work */
ion-button#M06_btn_start_work[disabled]      { --background:#e9ecef; --color:#2f2f2f; filter:grayscale(1); cursor:not-allowed; }
ion-button#M06_btn_start_work:not([disabled]){ --background:#3880ff; --color:#ffffff; filter:none;       cursor:pointer; }

/* Finish My Work */
ion-button#M06_btn_finish_work[disabled]      { --background:#e9ecef; --color:#2f2f2f; filter:grayscale(1); cursor:not-allowed; }
ion-button#M06_btn_finish_work:not([disabled]){ --background:#10dc60; --color:#ffffff; filter:none;       cursor:pointer; }

/* Transfer Trade */
ion-button#M06_btn_trade_transfer[disabled]      { --background:#e9ecef; --color:#2f2f2f; filter:grayscale(1); cursor:not-allowed; }
ion-button#M06_btn_trade_transfer:not([disabled]){ --background:#ffce00; --color:#000000; filter:none;       cursor:pointer; }

/* Update Work Order */
ion-button#M06_btn_update_wo[disabled]      { --background:#e9ecef; --color:#2f2f2f; filter:grayscale(1); cursor:not-allowed; }
ion-button#M06_btn_update_wo:not([disabled]){ --background:#7048e8; --color:#ffffff; filter:none;       cursor:pointer; }