/* TradeFlow v7.14.19 R16 — final mobile Xero invoice-window repair. */

.tf716-xero-modal {
  position: relative;
}

.tf716-contact-search small,
.tf716-native-contact small {
  display: block;
  margin-top: 6px;
  line-height: 1.35;
}

.tf716-contact-results {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  max-height: 320px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #b9d1c5;
  border-radius: 10px;
  background: #fff;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tf716-contact-results[hidden] {
  display: none !important;
}

.tf716-contact-result {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d3e0da;
  border-radius: 9px;
  background: #fff;
  color: #17231e;
  text-align: left;
  white-space: normal;
}

.tf716-contact-result:hover,
.tf716-contact-result:focus-visible,
.tf716-contact-result[aria-selected="true"] {
  border-color: #126b4f;
  outline: none;
  background: #eaf6f0;
}

.tf716-contact-result b,
.tf716-contact-result small {
  display: block;
  overflow-wrap: anywhere;
}

.tf716-contact-result small {
  margin-top: 3px;
  color: #5f6d66;
  font-weight: 500;
}

.tf716-contact-empty,
.tf716-contact-more {
  margin: 0;
  padding: 8px;
  overflow-wrap: anywhere;
}

.tf716-selected-contact {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border-left: 4px solid #126b4f;
  border-radius: 8px;
  background: #eaf6f0;
}

.tf716-selected-contact[hidden] {
  display: none !important;
}

.tf716-selected-contact span,
.tf716-selected-contact small {
  overflow-wrap: anywhere;
}

.tf716-sheet-hint {
  margin: 12px 0 8px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #eef6f2;
  color: #294c3d;
}

.tf715-sheet-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tf715-sheet-preview,
.tf715-csv-sheet {
  table-layout: auto;
}

/* The unfinished-invoice question is a compact confirmation, not another
   full-height phone form. */
.tf713-nested-confirm {
  position: fixed;
  inset: 0;
  z-index: 100450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: 0;
  background: rgba(15, 23, 42, .72);
}

.tf713-nested-confirm > .tf713-modal {
  width: min(520px, 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 36px) !important;
  margin: 0 !important;
  padding: 18px !important;
  overflow: auto !important;
  border-radius: 15px !important;
}

.tf713-nested-confirm > .tf713-modal > header {
  position: static !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
}

@media (max-width: 900px) {
  /* Belt-and-braces protection: Xero previews remain tables even if an older
     cached mobile enhancer applied its generic card class. */
  .tf715-sheet-wrap.tfm-card-wrap {
    overflow: auto !important;
  }

  table.tf715-sheet-preview.tfm-card-table,
  table.tf715-csv-sheet.tfm-card-table {
    display: table !important;
    width: auto !important;
  }

  table.tf715-sheet-preview.tfm-card-table > thead,
  table.tf715-csv-sheet.tfm-card-table > thead {
    display: table-header-group !important;
  }

  table.tf715-sheet-preview.tfm-card-table > tbody,
  table.tf715-csv-sheet.tfm-card-table > tbody {
    display: table-row-group !important;
  }

  table.tf715-sheet-preview.tfm-card-table > tfoot,
  table.tf715-csv-sheet.tfm-card-table > tfoot {
    display: table-footer-group !important;
  }

  table.tf715-sheet-preview.tfm-card-table > thead > tr,
  table.tf715-sheet-preview.tfm-card-table > tbody > tr,
  table.tf715-sheet-preview.tfm-card-table > tfoot > tr,
  table.tf715-csv-sheet.tfm-card-table > thead > tr,
  table.tf715-csv-sheet.tfm-card-table > tbody > tr,
  table.tf715-csv-sheet.tfm-card-table > tfoot > tr {
    display: table-row !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
  }

  table.tf715-sheet-preview.tfm-card-table th,
  table.tf715-sheet-preview.tfm-card-table td,
  table.tf715-csv-sheet.tfm-card-table th,
  table.tf715-csv-sheet.tfm-card-table td {
    display: table-cell !important;
    width: auto !important;
  }

  table.tf715-sheet-preview.tfm-card-table td::before,
  table.tf715-csv-sheet.tfm-card-table td::before {
    content: none !important;
  }
}

@media (max-width: 640px) {
  .tf716-xero-modal > header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start !important;
    gap: 8px !important;
  }

  .tf716-xero-modal > header h2 {
    font-size: 1.4rem;
    line-height: 1.15;
  }

  .tf716-xero-modal > header p {
    font-size: .92rem;
    line-height: 1.35;
  }

  .tf716-xero-modal > header > .btn {
    min-width: 74px;
    padding-inline: 12px;
  }

  .tf715-contact-picker {
    padding: 12px;
  }

  .tf716-native-contact {
    display: none !important;
  }

  .tf716-contact-results {
    grid-column: 1;
    max-height: min(42dvh, 330px);
    padding: 6px;
  }

  .tf716-selected-contact {
    grid-column: 1;
  }

  .tf715-contact-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch !important;
  }

  .tf715-contact-actions .tf713-check,
  .tf715-contact-actions [data-refresh-contacts] {
    grid-column: 1 / -1;
  }

  .tf715-contact-actions .tf713-check {
    display: flex !important;
    align-items: center !important;
    gap: 9px;
  }

  .tf715-contact-actions .tf713-check input {
    flex: 0 0 auto;
    width: 22px !important;
    height: 22px !important;
  }

  .tf715-contact-actions .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  /* The general mobile helper makes submit bars sticky. That is useful for
     short forms, but it covered this long Xero invoice form. Keep these
     decisions at the true end of the form so no fields sit underneath them. */
  #tf714-xero-invoice > .tfm-form-actions {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    margin: 18px 0 0 !important;
    padding: 13px 0 0 !important;
    border-top: 1px solid #dce5df;
    background: #fff !important;
    box-shadow: none !important;
  }

  .tf715-sheet-preview {
    min-width: 1180px;
  }

  .tf715-csv-sheet {
    min-width: 1050px;
  }

  .tf715-sheet-preview th:first-child,
  .tf715-sheet-preview td:first-child,
  .tf715-csv-sheet th:first-child,
  .tf715-csv-sheet td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 #d8e2dc;
  }

  .tf715-sheet-preview thead th:first-child,
  .tf715-csv-sheet thead th:first-child {
    z-index: 3;
    background: #eaf4ef;
  }

  .tf713-nested-confirm {
    padding: 12px;
  }

  .tf713-nested-confirm > .tf713-modal {
    max-height: calc(100dvh - 24px) !important;
    padding: 16px 14px !important;
  }

  .tf713-nested-confirm .tf713-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tf713-nested-confirm .tf713-actions .btn {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .tf715-contact-actions {
    grid-template-columns: 1fr;
  }

  .tf715-contact-actions .tf713-check,
  .tf715-contact-actions [data-refresh-contacts] {
    grid-column: 1;
  }
}