body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  background: #f7f8fa;
  color: #1f2937;
}

.site-header {
  background: #0f172a;
  color: #ffffff;
  padding: 1rem 1.5rem;
}

.site-header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header h1 {
  margin: 0;
  font-size: 1.3rem;
}

.scan-form {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.scan-form input[type="text"] {
  width: min(320px, 45vw);
}

.qr-scanner-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 2000;
}

.qr-scanner-modal.is-open {
  display: flex;
}

.qr-scanner-dialog {
  width: min(560px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  padding: 0.8rem;
  display: grid;
  gap: 0.55rem;
}

.qr-scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.qr-scanner-header h3 {
  margin: 0;
}

.qr-scanner-close {
  background: #4b5563;
}

.qr-scanner-help {
  margin: 0;
  color: #4b5563;
  font-size: 0.92rem;
}

.qr-scanner-reader {
  width: 100%;
  min-height: 320px;
  border-radius: 8px;
  overflow: hidden;
  background: #000000;
}

@media (max-width: 640px) {
  .qr-scanner-reader {
    min-height: 260px;
  }
}

.site-header nav {
  margin-top: 0.6rem;
}

.site-header nav a {
  color: #dbeafe;
  margin-right: 1rem;
  text-decoration: none;
}

.content {
  max-width: 960px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

th,
td {
  border: 1px solid #d1d5db;
  padding: 0.55rem;
  text-align: left;
}

th {
  background: #e5e7eb;
}

/* only constrain legacy simple forms */
form.form-narrow {
  max-width: 620px;
}

/* EDITOR FORMS ONLY */
.form-grid,
.item-edit-form,
.lot-edit-form {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 0.55rem 1rem;
  align-items: center;
}

.form-grid label,
.item-edit-form label,
.lot-edit-form label {
  font-weight: 600;
}

.form-grid textarea,
.item-edit-form textarea,
.lot-edit-form textarea {
  min-height: 90px;
  resize: vertical;
}

.full-row {
  grid-column: 1 / -1;
}


.is-hidden {
  display: none !important;
}

.inline-form {
  display: inline;
  max-width: none;
}

.inline-form button {
  padding: 0.3rem 0.45rem;
}

.inline-form .action-sell {
  background: #b91c1c;
}

.link-button {
  background: none;
  color: #1d4ed8;
  border: 0;
  padding: 0;
  text-decoration: underline;
}

.link-button:hover {
  color: #1e40af;
}

.location-scan-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.location-scan-controls input {
  min-width: 180px;
  flex: 1 1 220px;
}

.settings-location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  align-items: center;
}

.location-edit-page {
  max-width: 640px;
  margin: 0 auto;
}

.location-edit-page > .actions {
  margin-top: 0;
}

.location-assign-section {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid #e5e7eb;
  display: grid;
  gap: 0.55rem;
}

.location-assign-section h4 {
  margin: 0;
}

.location-assign-section h5 {
  margin: 0;
}

.location-assign-section > label {
  font-weight: 600;
}

.location-assign-section > button {
  justify-self: start;
}

.location-assign-scan-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.location-assign-scan-form > label,
.location-assign-scan-form .location-scan-controls {
  grid-column: 1;
}

.location-assign-feedback-error {
  color: #b91c1c;
  font-weight: 600;
}

.location-assign-feedback-success {
  color: #166534;
  font-weight: 600;
}

.location-assign-results {
  display: grid;
  gap: 0.55rem;
}

.location-assign-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.location-assign-list {
  display: grid;
  gap: 0.45rem;
}

.location-assign-card {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  background: #ffffff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: flex-start;
}

.location-assign-card.is-current {
  border-color: #86efac;
  background: #f0fdf4;
}

.location-assign-card input[type="checkbox"] {
  margin-top: 0.2rem;
}

.location-assign-card-content {
  display: grid;
  gap: 0.15rem;
}

.location-assign-section .product-picker-control {
  margin-top: 0;
  width: 100%;
}

.location-assign-section .product-picker-trigger {
  width: 100%;
}

.button-secondary {
  background: #4b5563;
}

.actions-row .action-delete {
  background: #b91c1c;
}

.actions-row .action-delete:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
}

.location-products-table th,
.location-products-table td {
  vertical-align: top;
}

.location-move-all-row {
  align-items: center;
}

.location-move-all-row select {
  flex: 1 1 320px;
  min-width: 220px;
}

.row-focus td {
  background: #fff7ed;
}

.pagination-bar {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
}

input,
textarea,
select,
button {
  font: inherit;
  padding: 0.5rem;
}

select {
  padding: 0.3rem 0.4rem;
  font-size: 0.95rem;
  line-height: 1.2;
}

button {
  width: fit-content;
  background: #0f172a;
  color: #ffffff;
  border: 0;
  cursor: pointer;
}

.error {
  color: #b91c1c;
  font-weight: 600;
}

.actions a {
  margin-right: 1rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.4rem 1rem;
}

.detail-grid dt {
  font-weight: 700;
}

.detail-grid dd {
  margin: 0;
}

.status-banner {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0 1rem 0;
  border-radius: 8px;
  border: 1px solid transparent;
}

fieldset {
  grid-column: 1 / -1;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.8rem 1rem 1rem 1rem;
  margin-top: 0.6rem;
  background: #ffffff;
}

legend {
  font-weight: 700;
  padding: 0 0.35rem;
  color: #111827;
}

.status-available {
  background: #dcfce7;
  border-color: #16a34a;
  color: #14532d;
}

.status-owned-unavailable {
  background: #fef9c3;
  border-color: #ca8a04;
  color: #713f12;
}

.status-not-owned {
  background: #e5e7eb;
  border-color: #6b7280;
  color: #111827;
}

.archive-toggle {
  margin: 0.4rem 0 0.8rem 0;
}

.archived-section-title {
  margin-top: 1.2rem;
}

.archived-section td {
  background: #f9fafb;
}

.archived-note {
  color: #6b7280;
  font-size: 0.9rem;
}

.shipment-summary {
  font-size: 0.95rem;
  color: #374151;
}

.po-open td {
  background: #fff7ed;
}

.po-receive-link {
  font-weight: 700;
}

.lot-action-form {
  display: grid;
  gap: 0.35rem;
  max-width: 360px;
}

.lot-action-form input[type="number"] {
  width: 80px;
}

.lot-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.lot-action-buttons button {
  padding: 0.3rem 0.45rem;
}

.lot-location-form {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.35rem;
  max-width: 260px;
}

.support-note {
  margin-top: 1rem;
  color: #374151;
  font-size: 0.95rem;
}

.lot-location-form select,
.lot-location-form input {
  padding: 0.35rem;
}

.lot-location-form button {
  padding: 0.35rem 0.45rem;
}

/* responsive filter toolbar */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: flex-end;
  margin: 0.8rem 0 1rem 0;
  max-width: none;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 160px;
}

.filter-field.date {
  min-width: 150px;
}

.toolbar button {
  height: fit-content;
  margin-left: auto;
}

.toolbar input,
.toolbar select {
  width: 100%;
}

.toolbar-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: end;
  gap: 0.5rem;
  width: 100%;
}

.toolbar-search label {
  grid-column: 1 / -1;
  font-weight: 600;
}

.toolbar-search-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 0.5rem;
  align-items: end;
}

.toolbar-search-controls > * {
  min-width: 0;
}

.toolbar-search-controls input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.toolbar-search-controls button {
  margin-left: 0;
}

.po-receive-form {
  max-width: none;
}

.po-receive-form table {
  margin-top: 0.5rem;
}

.po-lines-table,
.po-detail-lines-table,
.po-receive-lines-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.po-lines-table thead,
.po-detail-lines-table thead,
.po-receive-lines-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.po-lines-table tbody,
.po-detail-lines-table tbody,
.po-receive-lines-table tbody {
  display: block;
  width: 100%;
}

.po-lines-table tr,
.po-detail-lines-table tr,
.po-receive-lines-table tr {
  display: block;
  margin: 0 0 0.55rem 0;
  padding: 0.35rem 0.65rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
}

.po-lines-table td,
.po-detail-lines-table td,
.po-receive-lines-table td {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  width: 100%;
  padding: 0.22rem 0;
  border: 0;
  vertical-align: top;
}

.po-lines-table td::before,
.po-detail-lines-table td::before,
.po-receive-lines-table td::before {
  content: attr(data-label);
  font-weight: 600;
  color: #4b5563;
}

.po-lines-table .po-col-product,
.po-lines-table .po-col-qty,
.po-lines-table .po-col-line-total,
.po-lines-table .po-col-unit-price,
.po-lines-table .po-col-url,
.po-lines-table .po-col-actions {
  width: auto;
  white-space: normal;
}

.po-lines-table input.po-input-number {
  width: 7ch;
  min-width: 7ch;
  max-width: 9ch;
  padding: 0.2rem 0.3rem;
  box-sizing: border-box;
}

.po-lines-table .po-col-line-total input.po-input-number,
.po-lines-table .po-col-unit-price input.po-input-number {
  width: 10ch;
  min-width: 10ch;
  max-width: 12ch;
}

.po-lines-table input.po-input-url {
  width: 100%;
  max-width: 38ch;
  padding: 0.25rem 0.35rem;
  box-sizing: border-box;
}

.po-lines-table .product-picker-trigger,
.po-lines-table .remove-po-line,
.po-lines-table select {
  padding: 0.22rem 0.35rem;
}

.po-receive-lines-table input.po-receive-qty-input {
  width: 7ch;
  min-width: 7ch;
  max-width: 9ch;
  padding: 0.2rem 0.3rem;
  box-sizing: border-box;
}

.po-line-logistics-form {
  display: grid;
  gap: 0.35rem;
  max-width: 320px;
}

.po-line-logistics-form label {
  display: grid;
  gap: 0.2rem;
  font-weight: 600;
}

.po-line-logistics-form input {
  width: 100%;
  box-sizing: border-box;
}

.po-line-logistics-form button {
  justify-self: start;
  margin-top: 0.1rem;
}

.muted {
  color: #6b7280;
  font-size: 0.9rem;
}

.activity-tag {
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.activity-stock {
  background: #dbeafe;
  color: #1e3a8a;
}

.activity-item {
  background: #dcfce7;
  color: #14532d;
}

.panel {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin: 0 0 1rem 0;
}

.panel h3 {
  margin-top: 0;
}

.panel--query {
  padding-top: 0.9rem;
}

.panel-acquire h3 {
  margin-bottom: 0.4rem;
}

.panel-acquire button {
  margin-top: 0.6rem;
}

.product-summary {
  margin: 0 0 1rem 0;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.summary-strip-item {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
}

.summary-strip-item dt {
  margin: 0 0 0.2rem 0;
  text-align: center;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.summary-strip-item dd {
  margin: 0;
  text-align: center;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

.product-description {
  margin: 0 0 1rem 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  white-space: pre-wrap;
}

.form-tabs h3 {
  margin-bottom: 0.55rem;
}

.form-tab-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-tab-label {
  display: inline-block;
  margin: 0 0.3rem 0.7rem 0;
  padding: 0.38rem 0.68rem;
  border: 1px solid #9ca3af;
  border-radius: 7px;
  background: #f3f4f6;
  color: #1f2937;
  font-weight: 600;
  cursor: pointer;
}

#inventory-tab-copy:checked + .form-tab-label,
#inventory-tab-stock-lot:checked + .form-tab-label,
#po-detail-tab-lines:checked + .form-tab-label,
#po-detail-tab-receive:checked + .form-tab-label,
#item-edit-tab-general:checked + .form-tab-label,
#item-edit-tab-testing:checked + .form-tab-label {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.form-tab-panels .tab-panel {
  display: none;
}

#inventory-tab-copy:checked ~ .form-tab-panels .tab-panel-copy {
  display: block;
}

#inventory-tab-stock-lot:checked ~ .form-tab-panels .tab-panel-stock-lot {
  display: block;
}

#po-detail-tab-lines:checked ~ .form-tab-panels .tab-panel-po-lines {
  display: block;
}

#po-detail-tab-receive:checked ~ .form-tab-panels .tab-panel-po-receive {
  display: block;
}

#item-edit-tab-general:checked ~ .form-tab-panels .tab-panel-item-edit-general {
  display: block;
}

#item-edit-tab-testing:checked ~ .form-tab-panels .tab-panel-item-edit-testing {
  display: block;
}

.form-tab-panels .form-grid.grid-narrow {
  max-width: 100%;
}

.qsl-compact-row {
  display: grid;
  grid-template-columns:
    minmax(100px, 1fr)
    minmax(100px, 1fr)
    minmax(130px, 1fr)
    minmax(150px, 1fr);
  gap: 0.55rem 0.8rem;
  align-items: end;
}

.qsl-compact-field {
  display: grid;
  gap: 0.3rem;
}

.qsl-compact-field label {
  font-weight: 600;
}

.qsl-compact-field input {
  width: 100%;
  box-sizing: border-box;
}

.item-edit-form,
.lot-edit-form {
  max-width: 560px;
}

.item-edit-form input,
.item-edit-form select,
.item-edit-form textarea,
.lot-edit-form input,
.lot-edit-form select,
.lot-edit-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.item-edit-form > *,
.lot-edit-form > * {
  min-width: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  row-gap: 0.6rem;
  column-gap: 1rem;
  align-items: start;
}

/* structured form used inside cards/panels */
.form-grid.panel-grid {
  gap: 0.5rem 1rem;
}

.form-grid.grid-narrow {
  max-width: 560px;
}

.form-grid.grid-wide {
  max-width: 640px;
}

.form-grid .actions-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.form-grid .checkbox-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel .form-grid textarea {
  min-height: 70px;
}

/* transaction screens */
form > .actions {
  margin-top: 0.8rem;
}

/* inline editor inside tables */
.inline-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.inline-row input,
.inline-row select {
  padding: 0.25rem 0.35rem;
  font-size: 0.95rem;
}

.inline-row button {
  padding: 0.25rem 0.45rem;
}

.query-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.45rem 1rem;
  align-items: center;
}

/* allow shrinking inside grid */
.query-grid > * {
  min-width: 0;
}

.query-grid label {
  font-weight: 600;
}

.query-grid input,
.query-grid select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.query-grid input[type="date"] {
  min-width: 0;
}

.query-grid .actions-row {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
}

.product-picker-control {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.35rem;
}

.product-picker-native-hidden {
  display: none;
}

.product-picker-trigger {
  padding: 0.4rem 0.6rem;
}

.product-picker-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

.product-picker-modal.is-open {
  display: flex;
}

.product-picker-dialog {
  width: min(920px, 100%);
  max-height: 88vh;
  overflow: hidden;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(180px, 1fr);
  gap: 0.7rem;
  padding: 0.9rem;
}

.product-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.product-picker-header h3 {
  margin: 0;
}

.product-picker-close {
  background: #4b5563;
}

.product-picker-search-grid {
  display: grid;
  grid-template-columns: 1fr auto 220px 220px;
  gap: 0.5rem;
}

.product-picker-scan {
  background: #1f2937;
}

.product-picker-count {
  margin: 0;
  color: #4b5563;
  font-size: 0.9rem;
}

.product-picker-actions {
  display: flex;
  justify-content: flex-end;
}

.product-picker-create-toggle {
  background: #1f2937;
}

.product-picker-create-panel {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.6rem;
  background: #f8fafc;
}

.product-picker-create-form {
  display: grid;
  gap: 0.45rem;
}

.product-picker-create-form textarea {
  min-height: 70px;
  resize: vertical;
}

.product-picker-create-error {
  margin: 0;
  color: #b91c1c;
  font-size: 0.9rem;
}

.product-picker-create-buttons {
  display: flex;
  gap: 0.45rem;
}

.product-picker-create-cancel {
  background: #6b7280;
}

.product-picker-results {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  max-height: 56vh;
  overflow: auto;
  padding: 0.35rem;
  background: #f9fafb;
}

.product-picker-result {
  width: 100%;
  text-align: left;
  background: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  margin-bottom: 0.35rem;
  display: block;
}

.product-picker-result:hover {
  background: #eff6ff;
}

.product-picker-result-title {
  display: block;
  font-weight: 700;
}

.product-picker-result-meta {
  display: block;
  margin-top: 0.2rem;
  color: #4b5563;
  font-size: 0.85rem;
}

.product-picker-empty,
.product-picker-limit-note {
  margin: 0.4rem;
  color: #4b5563;
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .toolbar-search-controls {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .toolbar-search-controls a {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .product-picker-search-grid {
    grid-template-columns: 1fr;
  }

  .summary-strip {
    grid-template-columns: 1fr 1fr;
  }

  .form-tab-label {
    margin-bottom: 0.45rem;
  }

  .qsl-compact-row {
    grid-template-columns: 1fr;
  }

  .item-edit-form,
  .lot-edit-form {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
  }

  .item-edit-form > label,
  .lot-edit-form > label,
  .item-edit-form > input,
  .item-edit-form > select,
  .item-edit-form > textarea,
  .lot-edit-form > input,
  .lot-edit-form > select,
  .lot-edit-form > textarea,
  .item-edit-form > .full-row,
  .lot-edit-form > .full-row {
    grid-column: 1;
  }

  .location-assign-columns {
    grid-template-columns: 1fr;
  }

  .location-assign-section > button,
  .location-assign-section .actions-row > button {
    width: 100%;
  }

  .location-move-all-row {
    flex-direction: column;
    align-items: stretch;
  }

  .location-move-all-row select,
  .location-move-all-row button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .summary-strip {
    grid-template-columns: 1fr;
  }
}

.panel--constrained {
  max-width: 640px;
}

.form-grid > label {
  grid-column: 1;
}

.form-grid > input,
.form-grid > select,
.form-grid > textarea {
  grid-column: 2;
}

.form-grid > * {
  min-width: 0;
}