/* driver-form-compact-plate-20260912a: approved compact plate row; based on driver-form-compact-20260909a: approved phone spacing preview. */
#tripForm .project-picker-row {padding-top:6px!important;padding-bottom:6px!important;}
#tripForm .field {row-gap:4px!important;}
#tripForm .panel-body {padding-top:8px!important;padding-bottom:8px!important;}
#tripForm .panel-body>.grid,#tripForm .panel-body>.field,#tripForm .trip-time-grid {margin-bottom:6px!important;row-gap:6px!important;}
#tripForm .trip-time-card {padding-top:4px!important;padding-bottom:4px!important;row-gap:4px!important;}
#tripForm .fee-total-box {padding-top:6px!important;padding-bottom:6px!important;}
#tripForm .invoice-info-card summary {padding-top:6px!important;padding-bottom:6px!important;}
#footer {margin-top:12px!important;}


/* plate-compact-20260912a: province is one character; plate body is capped for seven characters. */
#tripForm .plate-row {
  grid-template-columns: clamp(50px, 14vw, 64px) minmax(150px, 238px) !important;
  justify-content: start !important;
  gap: 8px !important;
}
#tripForm #plateProvince {
  min-width: 0 !important;
  width: 100% !important;
  padding-left: 10px !important;
  padding-right: 22px !important;
  text-align: center !important;
}
#tripForm #plateRest {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 238px !important;
}
@media (max-width: 380px) {
  #tripForm .plate-row {
    grid-template-columns: 52px minmax(140px, 1fr) !important;
  }
  #tripForm #plateRest {
    max-width: 210px !important;
  }
}


/* plate-model-row-20260912a: keep plate number and vehicle model on one phone row. */
#tripForm .plate-model-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(98px, 0.58fr) !important;
  align-items: start !important;
  column-gap: 8px !important;
  row-gap: 6px !important;
}
#tripForm .plate-model-row .field {
  min-width: 0 !important;
}
#tripForm .plate-model-row .plate-row {
  grid-template-columns: 52px minmax(104px, 1fr) !important;
  gap: 6px !important;
}
#tripForm .plate-model-row #plateProvince {
  padding-left: 8px !important;
  padding-right: 18px !important;
}
#tripForm .plate-model-row #plateRest {
  max-width: none !important;
}
#tripForm .plate-model-row #vehicleType,
#tripForm .plate-model-row #vehicleTypeOther {
  width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 360px) {
  #tripForm .plate-model-row {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 0.52fr) !important;
    column-gap: 6px !important;
  }
  #tripForm .plate-model-row .plate-row {
    grid-template-columns: 48px minmax(96px, 1fr) !important;
  }
}


/* plate-width-fix-20260912b: show the one-character province clearly and cap the 7-character plate input. */
#tripForm .plate-model-row {
  grid-template-columns: minmax(214px, 0.64fr) minmax(118px, 0.36fr) !important;
  column-gap: 8px !important;
}
#tripForm .plate-model-row .plate-row {
  grid-template-columns: 68px 140px !important;
  justify-content: start !important;
  gap: 6px !important;
}
#tripForm .plate-model-row #plateProvince {
  width: 68px !important;
  min-width: 68px !important;
  padding-left: 12px !important;
  padding-right: 20px !important;
  text-align: center !important;
}
#tripForm .plate-model-row #plateRest {
  width: 140px !important;
  max-width: 140px !important;
  min-width: 0 !important;
}
@media (max-width: 360px) {
  #tripForm .plate-model-row {
    grid-template-columns: minmax(194px, 0.66fr) minmax(102px, 0.34fr) !important;
    column-gap: 6px !important;
  }
  #tripForm .plate-model-row .plate-row {
    grid-template-columns: 64px 124px !important;
    gap: 6px !important;
  }
  #tripForm .plate-model-row #plateProvince {
    width: 64px !important;
    min-width: 64px !important;
    padding-left: 10px !important;
    padding-right: 18px !important;
  }
  #tripForm .plate-model-row #plateRest {
    width: 124px !important;
    max-width: 124px !important;
  }
}


/* trip-time-inline-20260912a: place each trip date, hour, and minute on one row on normal phone widths. */
#tripForm .trip-time-card {
  display: grid !important;
  grid-template-columns: auto minmax(128px, 1fr) 58px 58px !important;
  align-items: center !important;
  column-gap: 6px !important;
  row-gap: 4px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
#tripForm .trip-time-card .trip-time-heading-row,
#tripForm .trip-time-card .trip-time-selects {
  display: contents !important;
}
#tripForm .trip-time-card label {
  white-space: nowrap !important;
  min-width: 0 !important;
  font-size: clamp(16px, 4.4vw, 20px) !important;
}
#tripForm .trip-time-card .trip-time-date,
#tripForm .trip-time-card .trip-time-selects select {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: clamp(16px, 4.5vw, 19px) !important;
}
#tripForm .trip-time-card .trip-time-date {
  text-align: center !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#tripForm .trip-time-card .trip-time-selects select {
  text-align: center !important;
  padding-left: 6px !important;
  padding-right: 18px !important;
}
@media (max-width: 360px) {
  #tripForm .trip-time-card {
    grid-template-columns: auto minmax(116px, 1fr) 52px 52px !important;
    column-gap: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #tripForm .trip-time-card .trip-time-date,
  #tripForm .trip-time-card .trip-time-selects select {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }
}


/* trip-time-inline-fit-20260912b: widen the date while keeping date/hour/minute on one row. */
#tripForm .trip-time-card {
  grid-template-columns: 76px minmax(148px, 1fr) 52px 52px !important;
  column-gap: 5px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#tripForm .trip-time-card label {
  font-size: clamp(15px, 4.1vw, 18px) !important;
  letter-spacing: -0.04em !important;
}
#tripForm .trip-time-card .trip-time-date {
  height: 46px !important;
  min-height: 46px !important;
  font-size: clamp(15px, 4.2vw, 17px) !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
#tripForm .trip-time-card .trip-time-selects select {
  height: 46px !important;
  min-height: 46px !important;
  font-size: clamp(16px, 4.4vw, 18px) !important;
  padding-left: 4px !important;
  padding-right: 14px !important;
}
@media (max-width: 360px) {
  #tripForm .trip-time-card {
    grid-template-columns: 70px minmax(132px, 1fr) 48px 48px !important;
    column-gap: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  #tripForm .trip-time-card label {
    font-size: 14px !important;
  }
  #tripForm .trip-time-card .trip-time-date,
  #tripForm .trip-time-card .trip-time-selects select {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }
}


/* trip-time-ios-fit-20260912c: compact slash date display and complete two-digit hour/minute selects. */
#tripForm .trip-time-card {
  grid-template-columns: 76px minmax(126px, 1fr) 58px 58px !important;
  column-gap: 4px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  overflow: hidden !important;
}
#tripForm .trip-time-date-shell {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 46px !important;
}
#tripForm .trip-time-date-shell .trip-time-date {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  opacity: 0.01 !important;
  color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
}
#tripForm .trip-time-date-display {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--field-line) !important;
  border-radius: 12px !important;
  background: var(--field-bg) !important;
  color: var(--ink) !important;
  font-size: clamp(15px, 4.1vw, 17px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}
#tripForm .trip-time-date-display.is-placeholder {
  color: var(--field-placeholder) !important;
}
#tripForm .trip-time-card .trip-time-selects select {
  width: 58px !important;
  min-width: 58px !important;
  height: 46px !important;
  min-height: 46px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  padding-left: 6px !important;
  padding-right: 12px !important;
  text-align: center !important;
}
@media (max-width: 360px) {
  #tripForm .trip-time-card {
    grid-template-columns: 70px minmax(112px, 1fr) 54px 54px !important;
    column-gap: 3px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  #tripForm .trip-time-card label {
    font-size: 14px !important;
    letter-spacing: -0.06em !important;
  }
  #tripForm .trip-time-date-shell,
  #tripForm .trip-time-date-shell .trip-time-date,
  #tripForm .trip-time-date-display,
  #tripForm .trip-time-card .trip-time-selects select {
    height: 44px !important;
    min-height: 44px !important;
  }
  #tripForm .trip-time-date-display {
    font-size: 14px !important;
  }
  #tripForm .trip-time-card .trip-time-selects select {
    width: 54px !important;
    min-width: 54px !important;
    font-size: 16px !important;
  }
}


/* trip-time-placeholder-20260912d: show hour/minute placeholders and remove native arrows so two digits fit. */
#tripForm .trip-time-card {
  grid-template-columns: 76px minmax(118px, 1fr) 56px 56px !important;
  column-gap: 4px !important;
}
#tripForm .trip-time-card .trip-time-selects select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  width: 56px !important;
  min-width: 56px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center !important;
  text-align-last: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
#tripForm .trip-time-card .trip-time-selects select.is-placeholder {
  color: var(--field-placeholder) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
@media (max-width: 360px) {
  #tripForm .trip-time-card {
    grid-template-columns: 70px minmax(108px, 1fr) 52px 52px !important;
  }
  #tripForm .trip-time-card .trip-time-selects select {
    width: 52px !important;
    min-width: 52px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 16px !important;
  }
  #tripForm .trip-time-card .trip-time-selects select.is-placeholder {
    font-size: 13px !important;
  }
}


/* other-fee-inline-20260912a: keep amount, note, upload and add on one compact row. */
#tripForm .other-fee-row {
  grid-template-columns: minmax(42px, 1fr) minmax(0, 3fr) 74px 34px !important;
  gap: 6px !important;
  align-items: center !important;
}
#tripForm .other-fee-row strong {
  display: none !important;
}
#tripForm .other-fee-row > input[id^="otherFee"][inputmode="decimal"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}
#tripForm .other-fee-row > input[id^="otherFeeNote"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}
#tripForm .other-fee-row .file-picker-label {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 74px !important;
  justify-self: end !important;
}
#tripForm .other-fee-row .add-row-btn,
#tripForm .other-fee-row .add-row-spacer {
  grid-column: 4 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}
#tripForm .other-fee-row .fee-photo-preview {
  grid-column: 1 / -1 !important;
}
@media (max-width: 360px) {
  #tripForm .other-fee-row {
    grid-template-columns: minmax(38px, 1fr) minmax(0, 3fr) 68px 32px !important;
    gap: 4px !important;
  }
  #tripForm .other-fee-row .file-picker-label {
    width: 68px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* other-fee-inline-readable-20260912b: keep amount readable while note remains the wider field. */
#tripForm .other-fee-row {
  grid-template-columns: 66px minmax(0, 1fr) 74px 34px !important;
}
#tripForm .other-fee-row > input[id^="otherFee"][inputmode="decimal"] {
  padding-left: 6px !important;
  padding-right: 6px !important;
  text-align: center !important;
  font-size: 16px !important;
}
#tripForm .other-fee-row > input[id^="otherFee"][inputmode="decimal"]::placeholder {
  font-size: 15px !important;
}
#tripForm .other-fee-row > input[id^="otherFeeNote"] {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
@media (max-width: 360px) {
  #tripForm .other-fee-row {
    grid-template-columns: 60px minmax(0, 1fr) 68px 32px !important;
  }
  #tripForm .other-fee-row > input[id^="otherFee"][inputmode="decimal"] {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 15px !important;
  }
  #tripForm .other-fee-row > input[id^="otherFee"][inputmode="decimal"]::placeholder {
    font-size: 14px !important;
  }
}

/* other-fee-inline-readable-20260912c: widen amount field and trim note field. */
#tripForm .other-fee-row {
  grid-template-columns: 78px minmax(0, 1fr) 74px 34px !important;
}
@media (max-width: 360px) {
  #tripForm .other-fee-row {
    grid-template-columns: 70px minmax(0, 1fr) 68px 32px !important;
  }
}

/* driver-mileage-total-side-repair-20260913a: restore time/fee baseline and keep mileage compact on phone H5. */
#tripForm .metric-odometer-grid {
  align-items: center !important;
}

#tripForm .metric-odometer-grid #startMileage,
#tripForm .metric-odometer-grid #endMileage,
#tripForm .metric-odometer-grid #totalMileage {
  box-sizing: border-box !important;
}

@media (max-width: 860px) {
  #tripForm .metric-odometer-grid {
    display: grid !important;
    grid-template-columns: minmax(118px, auto) minmax(92px, 132px) minmax(76px, 82px) !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    align-items: center !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(1),
  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(2) {
    display: contents !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(1) label,
  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(2) label {
    align-self: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(1) input,
  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(2) input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 7px 10px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(3) label {
    justify-self: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(3) input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 7px 8px !important;
    text-align: center !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
}

/* driver-fee-three-inline-20260913a: put parking fee, toll fee, and meal on one compact phone row. */
#tripForm .metric-fee-grid {
  align-items: start !important;
}

#tripForm .metric-fee-grid .compact-inline-metric-field {
  min-width: 0 !important;
}

#tripForm .metric-fee-grid .compact-inline-metric-field label {
  margin: 0 !important;
  white-space: nowrap !important;
}

#tripForm .metric-fee-grid #parkingFee,
#tripForm .metric-fee-grid #tollFee,
#tripForm .metric-fee-grid #mealCount {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  box-sizing: border-box !important;
}

#tripForm .metric-fee-grid #mealCount {
  text-align: center !important;
  padding-left: 10px !important;
  padding-right: 22px !important;
}

#tripForm .metric-fee-grid #mealCountHint {
  display: none !important;
}

@media (max-width: 860px) {
  #tripForm .metric-fee-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(56px, 17vw, 66px) !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    align-items: start !important;
  }

  #tripForm .metric-fee-grid .compact-inline-metric-field {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  #tripForm .metric-fee-grid .compact-inline-metric-field label {
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.15 !important;
  }

  #tripForm .metric-fee-grid .compact-inline-metric-field:nth-child(3) label {
    justify-self: center !important;
  }
}

@media (max-width: 360px) {
  #tripForm .metric-fee-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 54px !important;
    column-gap: 6px !important;
  }
}

/* driver-fee-mileage-unified-20260913a: unify trip-form control height and align total mileage with end mileage. */
#tripForm {
  --driver-trip-control-height: 42px;
}

#tripForm input:not([type="file"]):not([type="checkbox"]),
#tripForm select,
#tripForm textarea,
#tripForm .calendar-input,
#tripForm .file-picker-label,
#tripForm .add-row-btn {
  min-height: var(--driver-trip-control-height) !important;
  height: var(--driver-trip-control-height) !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  box-sizing: border-box !important;
}

#tripForm textarea {
  resize: vertical;
}

#tripForm #endMileage::placeholder {
  color: transparent !important;
}

#tripForm #parkingFee,
#tripForm #tollFee {
  text-align: left !important;
}

@media (max-width: 860px) {
  #tripForm .metric-odometer-grid {
    grid-template-columns: minmax(112px, auto) minmax(92px, 132px) minmax(76px, 82px) !important;
    grid-template-areas:
      "startLabel startInput totalLabel"
      "endLabel endInput totalInput" !important;
    align-items: center !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(1),
  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(2),
  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(3) {
    display: contents !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(1) label {
    grid-area: startLabel !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(1) input {
    grid-area: startInput !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(2) label {
    grid-area: endLabel !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(2) input {
    grid-area: endInput !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(3) label {
    grid-area: totalLabel !important;
    justify-self: center !important;
    align-self: center !important;
    font-size: clamp(15px, 4vw, 18px) !important;
  }

  #tripForm .metric-odometer-grid .compact-inline-metric-field:nth-child(3) input {
    grid-area: totalInput !important;
    align-self: center !important;
  }

  #tripForm .metric-odometer-grid #startMileage,
  #tripForm .metric-odometer-grid #endMileage,
  #tripForm .metric-odometer-grid #totalMileage,
  #tripForm .metric-fee-grid #parkingFee,
  #tripForm .metric-fee-grid #tollFee,
  #tripForm .metric-fee-grid #mealCount {
    min-height: var(--driver-trip-control-height) !important;
    height: var(--driver-trip-control-height) !important;
  }
}

/* driver-meal-all-vehicles-20260914a: meal count remains selectable for every vehicle type. */
#tripForm .meal-count-disabled label.required::after {
  display: inline !important;
}