.orders-page {
  max-width: 1440px;
  min-width: 0;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  gap: 16px;
}

.orders-hero,
.section-heading,
.purchase-heading,
.detail-toolbar,
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.orders-hero h1,
.orders-card h2,
.order-detail h3,
.order-detail h4 {
  margin: 0;
}

.orders-hero p:not(.eyebrow),
.section-heading p {
  margin: 4px 0 0;
}

.orders-card,
.order-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.orders-card {
  padding: 18px;
  min-width: 0;
}

.orders-banner {
  border: 1px solid #e8b44c;
  border-radius: 8px;
  padding: 12px 16px;
  background: #fff8e7;
}

.orders-filters {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) repeat(5, minmax(130px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.filter-chip {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #f1f2f3;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.sort-header[aria-pressed="true"]::after {
  content: attr(data-direction);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-subdued);
}

.field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--text-subdued);
  font-size: 12px;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  color: var(--text);
  font: inherit;
  font-weight: 400;
}

.field textarea {
  resize: vertical;
  min-height: 70px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 8px 10px;
}

input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="number"] {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 7px 10px;
}

.orders-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 0 -18px;
}

.orders-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
}

.orders-table th,
.orders-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.orders-table th {
  color: var(--text-subdued);
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.order-row {
  cursor: pointer;
}

.order-row:hover,
.order-row.is-open {
  background: #f6faf8;
}

.order-toggle {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--info);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.status-pill,
.quantity-pill,
.shared-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef0f1;
  font-size: 12px;
  white-space: nowrap;
}

.status-supplier-cancelled { background: #fff0ed; color: #8e1f0a; }
.status-needs-review { background: #fff0ed; color: #8e1f0a; }
.status-needs-purchasing { background: #fff3d6; color: #6f4e00; }
.status-purchased { background: #e7f1ff; color: #174ea6; }
.status-partially-shipped { background: #eee9ff; color: #4d2e91; }
.status-shipped { background: #e3f1df; color: #0c5132; }
.status-pending { background: #fff3d6; color: #6f4e00; }
.status-processing { background: #e7f1ff; color: #174ea6; }
.status-fulfilled { background: #e3f1df; color: #0c5132; }
.status-cancelled { color: #6d7175; }

.money-incomplete {
  display: block;
  margin-top: 2px;
  color: #8e1f0a;
  font-size: 11px;
  font-weight: 600;
}

.summary-list {
  max-width: 90px;
}

.summary-list a,
.order-notes-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-notes-summary {
  max-width: 180px;
}

.detail-row td {
  padding: 0 12px 18px;
  background: #f8f9fa;
}

.order-detail {
  margin-top: 10px;
  padding: 18px;
  display: grid;
  gap: 18px;
}

.detail-grid,
.editor-grid,
.allocation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.detail-stat {
  padding: 10px;
  border-radius: 7px;
  background: #f6f6f7;
}

.detail-stat span,
.detail-stat strong {
  display: block;
}

.detail-stat span {
  color: var(--text-subdued);
  font-size: 11px;
  text-transform: uppercase;
}

.detail-section {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.line-card,
.purchase-card,
.review-card,
.fulfillment-card,
.allocation-card,
.search-result {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.line-card,
.purchase-card,
.review-card,
.fulfillment-card {
  display: grid;
  gap: 10px;
}

.fulfillment-list {
  display: grid;
  gap: 10px;
}

.fulfillment-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.fulfillment-meta,
.fulfillment-error,
.fulfillment-action,
.fulfillment-updated {
  margin: 0;
}

.fulfillment-meta,
.fulfillment-links,
.fulfillment-action,
.fulfillment-updated {
  color: var(--text-subdued);
  font-size: 12px;
}

.fulfillment-error {
  color: var(--critical);
  font-size: 12px;
}

.fulfillment-links {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.line-header,
.allocation-header,
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.line-title,
.allocation-title {
  font-weight: 650;
}

.line-meta,
.purchase-meta,
.allocation-meta,
.history-meta {
  color: var(--text-subdued);
  font-size: 12px;
}

.editor-grid .field-wide,
.allocation-grid .field-wide {
  grid-column: span 2;
}

.form-feedback {
  min-height: 20px;
  color: var(--text-subdued);
  font-size: 12px;
}

.form-feedback.is-error,
.orders-feedback.is-error {
  color: var(--critical);
}

.form-feedback.is-ok,
.orders-feedback.is-ok {
  color: var(--success);
}

.orders-feedback {
  min-height: 22px;
}

.allocation-list,
.purchase-list,
.line-list,
.review-list,
.history-list,
.search-results {
  display: grid;
  gap: 10px;
}

.allocation-grid {
  grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(90px, 1fr));
  align-items: end;
}

.allocation-card.is-selected {
  border-color: #70b49f;
  background: #f4fbf8;
}

.checkbox-label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--text);
  font-size: 13px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-danger {
  color: #8e1f0a;
  border-color: #e1a392;
  background: #fff;
}

.btn[disabled],
button[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.history-list {
  margin: 0;
  padding-left: 20px;
}

.pagination {
  justify-content: flex-end;
  margin-top: 14px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1000px) {
  .orders-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-search { grid-column: span 2; }
}

@media (max-width: 720px) {
  .topbar-inner,
  .orders-hero,
  .section-heading,
  .detail-toolbar,
  .purchase-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-inner,
  .brand-nav { align-items: flex-start; }
  .brand-nav { flex-direction: column; }
  .primary-nav { flex-wrap: wrap; }
  .key-form { width: 100%; flex-wrap: wrap; }
  .key-form input { width: min(100%, 240px); }
  .orders-page { padding: 14px; }
  .orders-card { padding: 14px; }
  .orders-filters,
  .detail-grid,
  .editor-grid,
  .allocation-grid { grid-template-columns: 1fr; }
  .field-search,
  .editor-grid .field-wide,
  .allocation-grid .field-wide { grid-column: auto; }
  .orders-table-wrap { overflow: visible; margin: 0; }
  .orders-table,
  .orders-table tbody,
  .orders-table tr,
  .orders-table td { display: block; min-width: 0; }
  .orders-table { width: 100%; min-width: 0; }
  .orders-table thead { display: none; }
  .order-row { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; padding: 8px; }
  .order-row td { border: 0; display: grid; grid-template-columns: 88px 1fr; gap: 8px; padding: 5px; }
  .order-row td::before { content: attr(data-label); color: var(--text-subdued); font-size: 11px; text-transform: uppercase; }
  .detail-row { margin: -10px 0 12px; }
  .detail-row td { padding: 0; }
  .order-detail { border-radius: 0 0 8px 8px; padding: 14px; }
  .pagination { justify-content: space-between; }
}

/* Keep the editor independent of table redraws so drafts survive closing it. */
.order-dialog {
  inset: 0 0 0 auto;
  width: min(620px, 100%);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: -18px 0 44px rgba(32, 34, 35, .2);
}
.order-dialog::backdrop { background: rgba(32, 34, 35, .46); }
body:has(.order-dialog[open]) { overflow: hidden; }
.order-dialog-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.order-dialog-header h2 { margin: 0; font-size: 20px; }
.order-dialog-close {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
}
#order-dialog-feedback { padding: 0 20px; }
#order-dialog-feedback:empty { display: none; }
.order-dialog .order-detail { margin: 0; padding: 20px; border: 0; border-radius: 0; box-shadow: none; }
.order-dialog .detail-grid,
.order-dialog .editor-grid,
.order-dialog .allocation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-dialog .form-actions { grid-column: 1 / -1; flex-wrap: wrap; }
.order-dialog .line-header,
.order-dialog .purchase-heading { flex-wrap: wrap; }
.order-dialog .line-title,
.order-dialog .allocation-title,
.order-dialog .line-meta { overflow-wrap: anywhere; }
.summary-list a { display: block; padding: 2px 0; }
.order-toggle:focus-visible,
.order-dialog-close:focus-visible { outline: 2px solid var(--info); outline-offset: 4px; }
@media (max-width: 480px) {
  .order-dialog .editor-grid,
  .order-dialog .allocation-grid { grid-template-columns: 1fr; }
  .order-dialog .field-wide { grid-column: auto; }
  .order-dialog .order-detail { padding: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .order-dialog[open] { animation: order-slide-in 180ms ease-out; }
  @keyframes order-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
}

.order-dialog { width: min(460px, 100%); }
.simple-order-form,
.simple-purchase-fields { display: grid; gap: 14px; }
.simple-order-form .field { font-size: 13px; }
.simple-order-form input,
.simple-order-form textarea { font-size: 14px; }
.simple-order-form textarea { min-height: 76px; }
.simple-supplier-label { margin: 4px 0 0; font-weight: 600; }
.simple-order-actions { display: grid; gap: 8px; padding-top: 4px; }
.simple-order-actions .form-feedback:empty { display: none; }
.simple-order-actions .btn-primary { width: 100%; }

.simple-order-form [hidden] { display: none !important; }

.order-views { display: flex; gap: 6px; margin-bottom: 12px; }
.order-views [aria-pressed="true"] { background: #e3f1df; color: #0c5132; border-color: #008060; }