html.sage-booting .preview-pane,
html.sage-booting #previewWrap,
html.sage-booting .preview-scroll,
html.sage-booting .pages {
  visibility: hidden !important;
}

/* Preview refresh spinner (per page) */
.page-wrap.updating {
  position: relative;
}

.page-wrap.updating::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: 2.4rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem;
  z-index: 4;
  box-sizing: border-box;
  border: 3px solid rgba(139, 131, 86, 0.22);
  border-top-color: #8b8356;
  border-radius: 50%;
  animation: sage-spin 0.75s linear infinite;
  pointer-events: none;
}

.page-wrap.updating::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(247, 244, 238, 0.28);
  z-index: 3;
  pointer-events: none;
}

/* Boot spinner centered over preview area */
html.sage-booting body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: calc(50% + min(10vw, 6rem));
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  z-index: 50;
  box-sizing: border-box;
  border: 3px solid rgba(139, 131, 86, 0.22);
  border-top-color: #8b8356;
  border-radius: 50%;
  animation: sage-spin 0.75s linear infinite;
  pointer-events: none;
}

@keyframes sage-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 960px) {
  html.sage-booting body::after {
    left: 50%;
  }
}

html.mobile-preview-mode .panel > .subtitle {
  display: none !important;
}

html.mobile-preview-mode .panel > h1 {
  font-size: 1.2rem;
  margin: 0 0 0.55rem;
}

html.mobile-preview-mode .field-hint {
  display: none !important;
}

/* Hide every text / textarea field (keep checkboxes, file, buttons, selects, ranges). */
html.mobile-preview-mode .field:has(> input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]):not([type="range"])),
html.mobile-preview-mode .field:has(> textarea),
html.mobile-preview-mode .field:has(textarea),
html.mobile-preview-mode .photo-caption,
html.mobile-preview-mode .photo-caption,
html.mobile-preview-mode .estimate-line .amount-field,
html.mobile-preview-mode .estimate-line .note-field,
html.mobile-preview-mode .order-items-table textarea,
html.mobile-preview-mode .order-items-table input:not([type="checkbox"]):not([type="hidden"]):not([type="button"]),
html.mobile-preview-mode .scope-input,
html.mobile-preview-mode textarea.scope-input {
  /* Keep in layout for JS, but visually replace with tap summaries */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Hide sidebar text fields on mobile (edit via preview / sheet). */
html.mobile-preview-mode .field:has(> input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]):not([type="range"])),
html.mobile-preview-mode .field:has(> textarea),
html.mobile-preview-mode .field:has(textarea) {
  display: none !important;
}

/* Keep estimate amount/note fields in the row (sr-only above), not whole-field hide. */
html.mobile-preview-mode .estimate-line .field {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* Sections that are only text inputs — collapse entirely. */
html.mobile-preview-mode .section-card:not(:has(button)):not(:has(.checkbox-field)):not(:has(.tax-toggle)):not(:has(.photo-drop)):not(:has(input[type="checkbox"])):not(:has(.btn)):not(:has(select)):not(:has(input[type="range"])) {
  display: none !important;
}

html.mobile-preview-mode .finding-line input[data-field="text"],
html.mobile-preview-mode .finding-line input[data-field="photo"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.mobile-preview-mode .finding-line {
  position: relative;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
}

html.mobile-preview-mode .finding-line .mobile-line-summary {
  display: block;
  flex: 1;
}

html.mobile-preview-mode .finding-line .photo-wrap {
  display: none;
}

html.mobile-preview-mode .photo-card img {
  max-height: 96px;
}

html.mobile-preview-mode .photo-drop {
  min-height: 72px;
  padding: 0.75rem;
  margin-top: 0.35rem;
}

/* Roof Report mobile order: Add photos → Issues → Photo pages/size */
html.mobile-preview-mode form:has(.photo-drop) {
  display: flex;
  flex-direction: column;
}

html.mobile-preview-mode #photosAddSection {
  order: -3;
  margin-top: 0;
}

html.mobile-preview-mode #findingsSection {
  order: -2;
}

html.mobile-preview-mode #photosOptionsSection {
  order: -1;
}

html.mobile-preview-mode .section-card {
  padding: 0.65rem 0.75rem;
  margin-top: 0.45rem;
}

html.mobile-preview-mode .section-card > h2 {
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}

html.mobile-preview-mode .grid-2 {
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

html.mobile-preview-mode .resizer {
  display: none !important;
}

html.mobile-preview-mode .total-due {
  margin-top: 0.45rem;
  font-size: 0.95rem;
}

html.mobile-preview-mode .estimate-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.35rem;
  border-bottom: 1px solid #e5dfd2;
  position: relative;
  cursor: pointer;
}

html.mobile-preview-mode .estimate-line .line-index {
  font-size: 0.85rem;
  font-weight: 700;
  color: #666;
  flex: 0 0 auto;
}

.mobile-line-summary,
.mobile-row-summary {
  display: none;
}

html.mobile-preview-mode .estimate-line .mobile-line-summary {
  display: block;
  flex: 1 1 auto;
  font-size: 0.92rem;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 1.3;
}

html.mobile-preview-mode .estimate-line .mobile-line-summary small {
  display: block;
  font-weight: 600;
  color: #666;
  margin-top: 0.15rem;
}

html.mobile-preview-mode .scope-row,
html.mobile-preview-mode .order-items-table tr {
  position: relative;
}

/* Hide stacked Description / Qty / Cash labels — show live summary instead */
html.mobile-preview-mode .order-items-table thead {
  display: none !important;
}

html.mobile-preview-mode .order-items-table,
html.mobile-preview-mode .order-items-table tbody {
  display: block !important;
  width: 100% !important;
}

html.mobile-preview-mode .order-items-table tr {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.5rem;
  background: #fff;
  border: 1.5px solid #c9c2b4;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
}

html.mobile-preview-mode .order-items-table td {
  display: none !important;
  padding: 0 !important;
  width: auto !important;
}

html.mobile-preview-mode .order-items-table td[data-label]::before,
html.mobile-preview-mode .order-items-table .col-actions::before {
  content: none !important;
  display: none !important;
}

html.mobile-preview-mode .order-items-table td.col-mobile-summary {
  display: block !important;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  width: auto !important;
}

html.mobile-preview-mode .mobile-row-summary {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #2a2a2a;
  padding: 0.15rem 0;
  line-height: 1.35;
  word-break: break-word;
}

html.mobile-preview-mode .mobile-row-summary small {
  display: block;
  font-weight: 600;
  color: #666;
  margin-top: 0.2rem;
}

html.mobile-preview-mode .order-items-table td.col-actions,
html.mobile-preview-mode .order-items-table td:has(button) {
  display: block !important;
  margin-left: auto;
  flex: 0 0 auto;
  width: auto !important;
  text-align: right;
  padding: 0 !important;
}

html.mobile-preview-mode .order-items-table tr::before {
  content: none !important;
}

html.mobile-preview-mode .order-items-table tr:has(.order-row-label) {
  display: none !important;
}

/* Desktop / non-mobile: keep summary cell out of the table layout */
.order-items-table td.col-mobile-summary {
  display: none;
}

html.mobile-preview-mode .app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-height: 100vh;
}

/* Back sits in document flow — fixed Back was covering title/actions */
html.mobile-preview-mode .back-link,
html.mobile-preview-mode a.back-link {
  position: static !important;
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 0.4rem;
  z-index: auto;
  box-shadow: none;
  min-height: 40px;
  padding: 0.4rem 0.75rem;
  font-size: 0.92rem;
  background: #c62828 !important;
  border-color: #9b1c1c !important;
  color: #fff !important;
}

html.mobile-preview-mode .panel:has(#backLink:not([hidden])),
html.mobile-preview-mode .panel:has(.back-link) {
  padding-top: 0.75rem !important;
}

html.mobile-preview-mode .panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  overflow: visible;
  padding-bottom: 0.35rem;
}

html.mobile-preview-mode .panel > h1 {
  order: 0;
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}

html.mobile-preview-mode .panel > form {
  order: 1;
}

/* Top sidebar actions hidden — use bottom bar under PDF instead */
html.mobile-preview-mode .actions-panel {
  display: none !important;
}

/* Download / Message / Reset sit below the PDF preview */
html.mobile-preview-mode .actions-float {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  order: 3;
  z-index: 5;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.65rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border: none;
  border-top: 1px solid #d9d3c6;
  border-radius: 0;
  background: #f7f4ee;
  box-shadow: none;
  backdrop-filter: none;
  min-width: 0;
}

html.mobile-preview-mode .actions-float .btn {
  min-height: 46px;
  padding: 0.55rem 0.65rem;
  font-size: 0.92rem;
  border-radius: 10px;
}

html.mobile-preview-mode .actions-float .btn-primary {
  grid-column: 1 / -1;
}

html.mobile-preview-mode .actions-float .status {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  text-align: center;
}

html.mobile-preview-mode .preview-wrap {
  position: relative;
  flex: 1 1 auto;
  height: auto;
  min-height: 55vh;
  border-top: 1px solid #d9d3c6;
  display: flex;
  flex-direction: column;
  padding-top: 0;
}

/* Zoom bar sits above the PDF — never floats over it */
html.mobile-preview-mode .zoom-floating {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: 2;
  order: 0;
  align-self: center;
  margin: 0.35rem auto 0.15rem;
  padding: 0.25rem;
  width: fit-content;
  max-width: calc(100% - 1rem);
  box-shadow: none;
  border-radius: 10px;
}

html.mobile-preview-mode .zoom-btn {
  min-width: 2.1rem;
  height: 2.1rem;
  font-size: 1rem;
  border-radius: 8px;
}

html.mobile-preview-mode .zoom-btn.zoom-fit {
  min-width: 2.6rem;
  font-size: 0.8rem;
}

/* Label looked like a second "Fit" button */
html.mobile-preview-mode .zoom-label {
  display: none !important;
}

html.mobile-preview-mode .preview-hint-mobile {
  display: none !important;
}

html.mobile-preview-mode .preview-viewport {
  order: 2;
  flex: 1 1 auto;
  padding: 0.35rem 0.5rem 1rem;
}

html.mobile-preview-mode .page-label {
  display: none !important;
}

html.mobile-preview-mode .mobile-edit-backdrop {
  display: none;
}

html.mobile-preview-mode .mobile-edit-backdrop.open {
  display: flex;
}

.mobile-edit-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 500;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  padding: 0.75rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.mobile-edit-backdrop.open {
  display: flex;
}

.mobile-edit-sheet {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 16px;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.22);
  max-height: min(70vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-edit-sheet h3 {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  color: #3f3b28;
  text-align: center;
}

.mobile-edit-sheet .mobile-edit-field-label {
  display: block;
  margin: 0.55rem 0 0.3rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: #6b643f;
  text-align: left;
}

.mobile-edit-sheet .mobile-edit-field-label[hidden] {
  display: none !important;
}

.mobile-edit-sheet .mobile-edit-amount-row {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
}

.mobile-edit-sheet .mobile-edit-amount-row[hidden] {
  display: none !important;
}

.mobile-edit-sheet .mobile-edit-sign {
  flex: 0 0 52px;
  border: 1.5px solid #c9c2b4;
  border-radius: 10px;
  background: #f3efe6;
  color: #222;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  min-height: 48px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.mobile-edit-sheet .mobile-edit-sign[hidden] {
  display: none !important;
}

.mobile-edit-sheet .mobile-edit-amount-row .mobile-edit-input {
  flex: 1 1 auto;
  min-width: 0;
}

.mobile-edit-sheet .mobile-edit-input,
.mobile-edit-sheet .mobile-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #c9c2b4;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  font: inherit;
  font-size: 1.05rem;
  min-height: 48px;
  background: #faf8f3;
}

.mobile-edit-sheet .mobile-edit-input[hidden] {
  display: none !important;
}

.mobile-edit-sheet .mobile-edit-textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.45;
  white-space: pre-wrap;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.95rem;
}

.mobile-edit-sheet .mobile-edit-actions {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.mobile-edit-sheet .mobile-edit-actions button {
  flex: 1;
  border: none;
  border-radius: 12px;
  min-height: 48px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.mobile-edit-sheet .mobile-edit-done {
  background: #8b8356;
  color: #fff;
}

.mobile-edit-sheet .mobile-edit-cancel {
  background: #f3efe6;
  color: #222;
}

.preview-hint-mobile {
  display: none;
}