/* Lavender Lotus Studio 9.2.2 — pricing table, proposal scrolling, and refresh control hotfix */

/* Keep the normal compact pricing table on desktop and laptop screens.
   Pricing cards are reserved for phones and narrow tablets only. */
@media (min-width: 721px) {
  .pricing-desktop-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .pricing-mobile-list,
  .pricing-show-more {
    display: none !important;
  }
  .pricing-desktop-table .data-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
  .pricing-desktop-table .pricing-table {
    display: table !important;
    width: 100% !important;
    min-width: 1080px !important;
    table-layout: auto !important;
  }
  .pricing-desktop-table .pricing-table th,
  .pricing-desktop-table .pricing-table td {
    white-space: nowrap !important;
  }
  .pricing-desktop-table .pricing-table th:first-child,
  .pricing-desktop-table .pricing-table td:first-child {
    min-width: 260px !important;
    white-space: normal !important;
  }
  .pricing-desktop-table .pricing-table .table-primary span {
    white-space: normal !important;
    line-height: 1.35 !important;
  }
}

/* Proposal and contract dialogs must always have a real scrollable middle area.
   Header and Save/Cancel controls remain visible. */
.modal.proposal-creation-modal,
.modal.modal-contract-packet {
  width: min(1120px, calc(100vw - 24px)) !important;
  height: min(900px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow: hidden !important;
  resize: none !important;
}

.modal.proposal-creation-modal > form,
.modal.modal-contract-packet > form {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.modal.proposal-creation-modal .modal-header,
.modal.modal-contract-packet .modal-header,
.modal.proposal-creation-modal .modal-footer,
.modal.modal-contract-packet .modal-footer {
  position: relative !important;
  z-index: 2 !important;
  flex: none !important;
}

.modal.proposal-creation-modal .modal-body,
.modal.modal-contract-packet .modal-body {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable both-edges !important;
  touch-action: pan-y !important;
}

.modal.proposal-creation-modal .modal-body::-webkit-scrollbar,
.modal.modal-contract-packet .modal-body::-webkit-scrollbar {
  width: 12px;
}
.modal.proposal-creation-modal .modal-body::-webkit-scrollbar-track,
.modal.modal-contract-packet .modal-body::-webkit-scrollbar-track {
  background: #f4efec;
  border-left: 1px solid rgba(92, 65, 78, .08);
}
.modal.proposal-creation-modal .modal-body::-webkit-scrollbar-thumb,
.modal.modal-contract-packet .modal-body::-webkit-scrollbar-thumb {
  background: #a98a99;
  border: 3px solid #f4efec;
  border-radius: 999px;
}

/* The tax editor and all form grids must shrink inside the dialog instead of
   creating a hidden sideways page. */
.proposal-creation-modal .proposal-creation-grid,
.proposal-creation-modal .tax-editor,
.proposal-creation-modal .tax-editor-grid,
.modal-contract-packet .contract-form-grid,
.modal-contract-packet .contract-form-grid > *,
.proposal-creation-modal .proposal-creation-grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
.proposal-creation-modal input,
.proposal-creation-modal select,
.proposal-creation-modal textarea,
.modal-contract-packet input,
.modal-contract-packet select,
.modal-contract-packet textarea {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Clear in-app refresh control so the owner never has to hunt for the browser icon. */
.studio-refresh-button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(87, 61, 73, .13) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.78) !important;
  color: #4b3540 !important;
  box-shadow: 0 8px 22px rgba(55, 37, 46, .05) !important;
  cursor: pointer !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}
.studio-refresh-button:hover { background: #fff !important; transform: translateY(-1px); }
.studio-refresh-button:focus-visible { outline: 3px solid rgba(124, 86, 104, .24); outline-offset: 2px; }
.studio-refresh-button.is-refreshing { animation: studioRefreshSpin .65s linear infinite; }
@keyframes studioRefreshSpin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .modal.proposal-creation-modal,
  .modal.modal-contract-packet {
    width: calc(100vw - 10px) !important;
    height: calc(100dvh - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    border-radius: 18px !important;
  }
  .modal.proposal-creation-modal .modal-body,
  .modal.modal-contract-packet .modal-body {
    padding-left: 14px !important;
    padding-right: 10px !important;
  }
  .studio-refresh-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
}