/* Shared data and controls, with layouts tuned for each screen size. */
.orders-table th:nth-child(1), .orders-table td:nth-child(1) { width: 34%; }
.orders-table th:nth-child(2), .orders-table td:nth-child(2) { width: 22%; }
.orders-table th:nth-child(3), .orders-table td:nth-child(3) { width: 18%; }
.orders-table th:nth-child(4), .orders-table td:nth-child(4) { width: 26%; }
.orders-table td { overflow-wrap: anywhere; }
.order-number-copy { cursor: pointer; }
.form-grid > label { min-width: 0; }
#orderSmartHint:empty, #customerSmartHint:empty, #financeSmartHint:empty,
#sizeNotationHint:empty { display: none; }
.usage-details { color: var(--muted); font-size: 13px; line-height: 1.6; }
.usage-details summary { cursor: pointer; padding: 8px 0; }
.usage-details p { margin: 8px 0; }

/* Keep the order form aligned independently of other module grids. */
#orderForm { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.order-form-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.order-form-section legend { padding: 0 8px; font-size: 15px; font-weight: 600; }
.order-form-section label { min-width: 0; align-content: start; line-height: 1.5; }
.order-form-section input:not([type="hidden"]), .order-form-section select {
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;
}
.order-form-section .order-field-wide,
.order-form-section .customer-price-row,
.order-form-section .order-missing-customer { grid-column: 1 / -1; }
.order-form-section .customer-price-row { grid-template-columns: minmax(0, 1fr) auto; }
.order-form-section .sub { margin: 0; }
#orderForm .order-form-actions { grid-column: 1 / -1; margin: 0; }
#orderDate {
  -webkit-appearance: none;
  appearance: none;
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  text-align: left;
}
#orderDate::-webkit-date-and-time-value { min-width: 0; min-height: 1.5em; text-align: left; }
#orderDate::-webkit-datetime-edit { min-width: 0; padding: 0; }

@media (min-width: 768px) and (max-width: 1366px) {
  .orders-layout { grid-template-columns: minmax(0, 1fr); }
  .orders-layout > .side-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  .orders-layout > .side-menu .side-btn { text-align: center; }
  .ai-order-recognizer { grid-template-columns: minmax(0, 1fr) auto; }
  .ai-order-recognizer > div:first-child { grid-column: 1 / -1; }
  .ai-order-recognizer input[type="file"] { min-width: 0; }
}

@media (max-width: 767px) {
  .app-shell {
    padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
      calc(100px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .card { padding: 14px; border-radius: 16px; }
  .panel, .form-grid, .login-grid { min-width: 0; }
  .login-grid, .order-grid, .settings-form-grid, .ai-order-recognizer { grid-template-columns: minmax(0, 1fr); }
  .form-grid.compact { max-width: none; }
  .span-2 { grid-column: auto; }
  .order-form-section { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 14px; }
  .order-form-section .customer-price-row { grid-template-columns: minmax(0, 1fr); }
  .order-form-section .customer-price-row .btn { width: 100%; }
  input, select, textarea { min-width: 0; max-width: 100%; font-size: 16px; }
  /* Safari's native date editor otherwise contributes an intrinsic field width. */
  input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-inline-size: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    text-align: left;
  }
  input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    min-height: 1.5em;
    text-align: left;
  }
  input[type="date"]::-webkit-datetime-edit {
    min-width: 0;
    padding: 0;
  }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: 44px; }
  .btn { min-height: 44px; }
  .topbar { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .topbar > div { min-width: 0; max-width: 100%; }
  .topbar > div:last-child { width: 100%; justify-content: flex-start; }
  .topbar > div:last-child .btn { width: auto; }
  .orders-layout > .side-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 6px; gap: 6px;
  }
  .orders-layout > .side-menu .side-btn { text-align: center; padding: 10px 6px; }
  .orders-list-head { gap: 12px; }
  .orders-list-head .sub { margin-top: 6px; font-size: 12px; line-height: 1.7; }
  #orderStatusFilters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  #orderStatusFilters .btn { width: 100%; padding: 8px 2px; font-size: 12px; }

  /* Each order becomes a card; no sideways scrolling is needed. */
  .orders-table-wrap { overflow: visible; max-height: none; border-radius: 0; }
  .orders-table { display: block; min-width: 0; width: 100%; table-layout: auto; }
  .orders-table thead { display: none; }
  .orders-table tbody { display: grid; gap: 12px; }
  .orders-table .order-preview-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
    margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--card-strong); animation: none; transform: none;
    user-select: none; -webkit-touch-callout: none;
  }
  .orders-table .order-preview-row:hover { transform: none; }
  .orders-table .order-preview-row td {
    display: block; width: auto; min-width: 0; padding: 0; border: 0; line-height: 1.5;
  }
  .orders-table .order-sequence { grid-column: 1 / -1; grid-row: 1; font-size: 12px; }
  .orders-table .order-sequence::before { content: "序號 "; }
  .orders-table .order-number-copy { grid-column: 1; grid-row: 2; font-size: 15px; }
  .orders-table .order-number-copy .sub { margin: 4px 0 0; font-size: 13px; font-weight: 400; }
  .orders-table .order-preview-status { grid-column: 2; grid-row: 2; align-self: start; }
  .orders-table .order-preview-date { grid-column: 1; grid-row: 3; align-self: center; font-size: 13px; }
  .orders-table .order-preview-date::before {
    content: "交貨日期"; display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px;
  }
  .orders-table .order-row-actions { grid-column: 2; grid-row: 3; min-width: 0; align-self: end; }
  .orders-table .order-action-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .orders-table .order-row-actions .btn { width: auto; min-height: 44px; padding: 8px 10px; font-size: 13px; }
  .orders-table .orders-empty-row { display: block; }
  .orders-table .orders-empty-row td { display: block; width: 100%; padding: 24px 12px; }

  /* Wide reports scroll inside their own panel, keeping the page in place. */
  .table-wrap:not(.orders-table-wrap) { max-width: 100%; overscroll-behavior-x: contain; }
  .table-wrap:not(.orders-table-wrap) > table { min-width: 580px; }
  .table-actions { flex-wrap: wrap; }
  .table-actions .btn { width: auto; }
  .data-pager { align-items: center; }
  .data-pager .btn { width: auto; flex: 1; }
  .data-pager .sync-detail { width: 100%; order: -1; text-align: center; }
  .dashboard-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { min-width: 0; overflow-wrap: anywhere; }
  .sq-ai { right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); }
  .sq-ai-toggle { padding: 12px 16px; min-height: 44px; }
  .sq-ai-panel { max-width: calc(100vw - 24px); max-height: calc(100dvh - 110px - env(safe-area-inset-bottom)); }
}

@media (min-width: 768px) {
  .orders-table-wrap { max-height: 720px; }
  .orders-layout > .side-menu .btn { min-height: 44px; }
  .orders-list-head .sub { line-height: 1.6; font-size: 12px; }
}

.is-order-dragging, .is-order-dragging * { cursor: grabbing !important; }
.is-order-dragging { user-select: none; -webkit-user-select: none; }
.orders-table .order-preview-row.is-drag-placeholder {
  background: rgba(245, 158, 11, .07);
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  box-shadow: none;
  transform: none;
  animation: none;
}
.orders-table .is-drag-placeholder > td { visibility: hidden; }
.order-drag-preview {
  position: fixed;
  z-index: 1600;
  pointer-events: none;
  will-change: transform;
}
.order-drag-preview * { pointer-events: none !important; }
.order-drag-preview .orders-table {
  margin: 0;
  background: var(--card-strong);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
  transform: scale(1);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.order-drag-preview.is-lifted .orders-table { transform: scale(.94); }
.order-drag-preview .orders-table .order-preview-row.is-dragging {
  opacity: 1;
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  transform: none;
  animation: none;
}
.order-drag-preview.is-dropping { transition: transform 180ms ease-out; }
.order-drag-preview.is-dropping .orders-table { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .order-drag-preview, .order-drag-preview .orders-table { transition: none; }
}