/* Number inputs stay numeric, but browser steppers are intentionally hidden. */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Small, local loading affordance for HTMX-enhanced read-only regions. */
.pp-partial-loading {
  align-items: center;
  color: var(--color-base-500, #6b7280);
  display: flex;
  font-size: .78rem;
  gap: .4rem;
  justify-content: flex-end;
  min-height: 1.25rem;
  padding: 0 .25rem .35rem;
}

.pp-partial-loading > span {
  animation: pp-partial-spin .7s linear infinite;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  height: .8rem;
  width: .8rem;
}

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

/* Unfold turns every changelist row into a card below its lg breakpoint.
   Operational lists remain denser and easier to compare as scrollable tables. */
@media (max-width: 1023px) {
  /* Mobile browser chrome changes the visible height while scrolling. Unfold's
     100vh sidebar can then extend below the usable viewport and trap its last
     navigation items. Give the drawer a dynamic viewport and one scroll area. */
  #nav-sidebar {
    bottom: auto;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  #nav-sidebar-inner {
    height: 100%;
    min-height: 0;
  }

  #nav-sidebar-apps {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  @supports (height: 100dvh) {
    #nav-sidebar {
      height: 100dvh;
      max-height: 100dvh;
    }
  }

  #pp-changelist-region #result_list {
    display: table;
    min-width: 720px;
  }

  #pp-changelist-region #result_list > thead {
    display: table-header-group;
  }

  #pp-changelist-region #result_list > thead > tr,
  #pp-changelist-region #result_list > tbody > tr.data-row {
    display: table-row;
  }

  #pp-changelist-region #result_list > tbody {
    display: table-row-group;
  }

  #pp-changelist-region #result_list > thead > tr > th,
  #pp-changelist-region #result_list > tbody > tr.data-row > th,
  #pp-changelist-region #result_list > tbody > tr.data-row > td {
    display: table-cell;
    white-space: nowrap;
  }

  #pp-changelist-region #result_list > tbody > tr.data-row > th::before,
  #pp-changelist-region #result_list > tbody > tr.data-row > td::before {
    content: none;
    display: none;
  }

  #pp-changelist-region #result_list > tbody > tr.data-row {
    border: 0;
    margin-bottom: 0;
  }

  /* Sales starts with three utility columns. Keep them content-sized so the
     customer and product information is visible sooner on narrow screens. */
  body.app-inventory.model-sale.change-list
  #result_list .action-checkbox-column,
  body.app-inventory.model-sale.change-list
  #result_list .action-checkbox {
    max-width: 2.75rem;
    min-width: 2.75rem;
    padding-left: .5rem;
    padding-right: .25rem;
    width: 2.75rem;
  }

  body.app-inventory.model-sale.change-list
  #result_list .action-checkbox-column label > span {
    display: none !important;
  }

  body.app-inventory.model-sale.change-list
  #result_list .column-id,
  body.app-inventory.model-sale.change-list
  #result_list .field-id {
    max-width: 4.25rem;
    min-width: 4.25rem;
    padding-left: .35rem;
    padding-right: .35rem;
    width: 4.25rem;
  }

  body.app-inventory.model-sale.change-list
  #result_list .column-date,
  body.app-inventory.model-sale.change-list
  #result_list .field-date {
    max-width: 8rem;
    min-width: 8rem;
    padding-left: .5rem;
    padding-right: .5rem;
    width: 8rem;
  }

  body.app-inventory.model-sale.change-list
  #result_list :is(.column-id, .column-date) .sortremove,
  body.app-inventory.model-sale.change-list
  #result_list :is(.column-id, .column-date) .sortpriority {
    display: none;
  }

  body.app-inventory.model-sale.change-list
  #result_list :is(.column-id, .column-date) .sortoptions {
    margin-left: .25rem;
  }

  body.app-inventory.model-sale.change-list
  #result_list :is(.column-id, .column-date) .material-symbols-outlined {
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-partial-loading > span { animation: none; }
}