/* ==========================================================
   Receipt Detail
   ========================================================== */

/* ===========================
  Receipt sheet — mobile polish
  =========================== */

#sheetReceiptDetail .rcptActionRow{
  display:flex;
  justify-content:center;
  align-items:stretch;
  flex-wrap:nowrap;
}

/* Fallback spacing for iOS/Safari when flex-gap misbehaves */
#sheetReceiptDetail .rcptActionRow .btn + .btn{
  margin-left:10px;
}

/* Keep the pair visually centered instead of full-bleed */
@media (max-width: 720px){
  #sheetReceiptDetail .rcptActionRow{
    max-width: 520px;
    margin-left:auto;
    margin-right:auto;
  }

  /* Prevent buttons from "touching" or wrapping weirdly */
  #sheetReceiptDetail .rcptActionRow .btn{
    min-width:0;
    flex: 1 1 0;
    white-space: normal;
    text-align:center;
  }
}

/* Receipt fields: consistent vertical rhythm, stack 2-col rows on mobile */
#sheetReceiptDetail .rcptFieldsCard label.small{
  display:block;
  margin: 0 0 6px 0;
}

/* Receipt inputs — match Route & Load Metryx controls */
#sheetReceiptDetail .rcptFieldsCard .input{
  width:100%;
  font-size: 15px;
  padding: 10px 12px;
  border-color: var(--border-strong);
  border-radius: var(--r-md) !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}

body.light #sheetReceiptDetail .rcptFieldsCard .input{
  box-shadow: 0 14px 30px rgba(15,23,42,0.10);
}

#sheetReceiptDetail .rcptFieldsCard .input:focus,
#sheetReceiptDetail .rcptFieldsCard .input:focus-visible{
  outline: none !important;
  border-color: rgba(15,23,42,0.35) !important;
  box-shadow: 0 0 0 3px rgba(15,23,42,0.10) !important;
}

#sheetReceiptDetail .rcptFieldsCard > .small.muted{
  margin-bottom: 12px !important;
}

#sheetReceiptDetail .rcptFieldsCard .row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

@media (max-width: 720px){
  #sheetReceiptDetail .rcptFieldsCard .row{
    flex-direction:column;
    gap:10px;
  }

  #sheetReceiptDetail .rcptFieldsCard .row > div{
    width:100%;
  }

  #sheetReceiptDetail .rcptFieldsCard .row > div + div{
    margin-top: 10px;
  }

  #sheetReceiptDetail #rcptFuelFields,
  #sheetReceiptDetail #rcptMaintFields{
    margin-top: 12px !important;
  }

  #sheetReceiptDetail .rcptFieldsCard input.input,
  #sheetReceiptDetail .rcptFieldsCard select.input,
  #sheetReceiptDetail .rcptFieldsCard textarea.input{
    font-size: 16px;
    padding: 12px 14px;
  }
}