/**
 * tss-bulk-order styles.
 *
 * Self-contained -- does not depend on Automatic.css, Bricks, or any other
 * theme. All values are hardcoded so the form looks consistent regardless of
 * what's on the rest of the page. Prefixed `tbo-` to avoid colliding with
 * site styles, the autocomplete plugin, or page-builder defaults.
 *
 * Color palette (inline, no CSS vars to keep specificity low):
 *   primary:    #2563eb  (CTA blue)
 *   primary-hover #1d4ed8
 *   text:       #1f2937
 *   text-muted: #6b7280
 *   border:     #e5e7eb
 *   border-strong #d1d5db
 *   bg-row-alt: #f9fafb  (zebra stripe)
 *   success:    #16a34a / soft #dcfce7
 *   warning:    #ca8a04 / soft #fef9c3
 *   danger:     #dc2626 / soft #fee2e2
 *   info-bg:    #eff6ff  (locked/selected row state)
 */

.tbo-container {
  font-size: 14px;
  line-height: 1.5;
  color: #1f2937;
}
.tbo-container * { box-sizing: border-box; }

/* Honeypot stays hidden via inline style; this is just a safety net. */
.tbo-honeypot { display: none !important; }

/* -------------------------------------------------------------------- */
/* Table                                                                */
/* -------------------------------------------------------------------- */

.tbo-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}
.tbo-table {
  width: 100%;
  min-width: 880px; /* keep columns from collapsing on narrow screens */
  border-collapse: collapse;
  font-size: 14px;
}
.tbo-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 10px 12px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.tbo-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
.tbo-table tbody tr:nth-child(even) td {
  background: #fcfcfd;
}
.tbo-table tbody tr:hover td {
  background: #f9fafb;
}
.tbo-table tbody tr.tbo-row--selected td,
.tbo-table tbody tr.tbo-row--selected:hover td {
  background: #eff6ff;
}
.tbo-table tbody tr:last-child td { border-bottom: none; }

/* Column-specific alignment */
.tbo-cell--price,
.tbo-cell--total { text-align: right; white-space: nowrap; }
.tbo-cell--stock,
.tbo-cell--actions { text-align: center; }

.tbo-cell--sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  color: #4b5563;
  white-space: nowrap;
}
.tbo-cell--title { max-width: 280px; }
.tbo-cell--title .tbo-title-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
}
.tbo-cell--total { font-weight: 600; color: #1f2937; }
.tbo-placeholder { color: #d1d5db; }

/* -------------------------------------------------------------------- */
/* Inputs                                                               */
/* -------------------------------------------------------------------- */

.tbo-input,
.tbo-qty {
  font: inherit;
  color: #1f2937;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.tbo-input:focus,
.tbo-qty:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.tbo-input::placeholder { color: #9ca3af; }

.tbo-qty {
  width: 84px;
  text-align: center;
  padding: 6px 8px;
}
.tbo-qty:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Locked/selected search input -- green left accent only, no fill tint.
   The selected row is already tinted blue via .tbo-row--selected, so the
   input itself stays white to read as "confirmed but still editable". */
.tbo-input--locked {
  border-left: 3px solid #16a34a;
  background: #fff;
  color: #1f2937;
}
.tbo-input--locked:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* Validation states */
.tbo-qty.is-error {
  border-color: #dc2626;
  background: #fef2f2;
}
.tbo-qty.is-warning {
  border-color: #ca8a04;
  background: #fefce8;
}
.tbo-qty-msg {
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.3;
}
.tbo-qty-msg--error   { color: #b91c1c; }
.tbo-qty-msg--warning { color: #854d0e; }

/* -------------------------------------------------------------------- */
/* Stock pills                                                          */
/* -------------------------------------------------------------------- */

.tbo-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.6;
}
.tbo-pill--success { background: #dcfce7; color: #15803d; }
.tbo-pill--danger  { background: #fee2e2; color: #b91c1c; }
.tbo-pill--warning { background: #fef9c3; color: #854d0e; }

.tbo-price-each { color: #15803d; font-weight: 600; }

/* -------------------------------------------------------------------- */
/* Buttons                                                              */
/* -------------------------------------------------------------------- */

.tbo-btn {
  font: inherit;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  background: transparent;
  color: #1f2937;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.tbo-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}
.tbo-btn:disabled { cursor: not-allowed; opacity: .6; }

/* Primary CTA */
/* Primary CTA -- brand navy. Hover/active darken the same hue rather than
   shifting toward another blue, so the button reads as one consistent
   color across states. */
.tbo-btn-primary {
  background: #163158;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
}
.tbo-btn-primary:hover:not(:disabled)  { background: #0f223d; }
.tbo-btn-primary:active:not(:disabled) { background: #0a1729; }
.tbo-btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(22, 49, 88, 0.35);
}

/* Ghost/secondary -- transparent with border */
.tbo-btn-ghost {
  border-color: #d1d5db;
  color: #374151;
  background: #fff;
}
.tbo-btn-ghost:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* Subtle text-only -- for tertiary actions like Save Draft */
.tbo-btn-subtle {
  color: #4b5563;
  padding: 6px 10px;
  font-size: 13px;
}
.tbo-btn-subtle:hover:not(:disabled) {
  background: #f3f4f6;
  color: #1f2937;
}

/* Tiny destructive (row remove) */
/* Remove-row -- bare × icon, no border, no hover fill. Color shifts on
   hover for affordance but the button stays visually weightless so it
   doesn't compete with the rest of the row. */
.tbo-btn-remove {
  font-size: 18px;
  line-height: 1;
  padding: 0 6px;
  color: #9ca3af;
  background: transparent;
  border: none;
  border-radius: 0;
}
.tbo-btn-remove:hover:not(:disabled) {
  color: #b91c1c;
  background: transparent;
}
.tbo-btn-remove:focus-visible {
  /* Tighter focus ring -- the default 3px ring looks oversized on a
     borderless icon button. */
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
  border-radius: 4px;
}

/* -------------------------------------------------------------------- */
/* Toolbar (between table and submit)                                   */
/* -------------------------------------------------------------------- */

.tbo-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  flex-wrap: wrap;
}
.tbo-toolbar__draft {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tbo-save-status {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
  min-height: 1em;
}

/* -------------------------------------------------------------------- */
/* Submit area                                                          */
/* -------------------------------------------------------------------- */

.tbo-submit-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}
.tbo-messages { flex: 1; min-width: 240px; }
.tbo-messages p { margin: 0; }

.tbo-message--error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 10px 12px;
  border-radius: 6px;
}
.tbo-message--info {
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 10px 12px;
  border-radius: 6px;
}
.tbo-message--success {
  color: #14532d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 14px 16px;
  border-radius: 6px;
}
.tbo-message--success ul { margin: 8px 0 0 18px; padding: 0; }
.tbo-message--success li { margin: 2px 0; }
.tbo-message--success a {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
}
.tbo-message--success a:hover { background: #1d4ed8; }

/* -------------------------------------------------------------------- */
/* Search results dropdown                                              */
/* -------------------------------------------------------------------- */

.tbo-search-cell { position: relative; min-width: 220px; }
/* Search results dropdown.
 *
 * Uses position:fixed (set when --open is added) so it can break out of
 * the .tbo-table-wrap overflow:auto clipping context. JS sets top/left/width
 * inline when opening based on the input's getBoundingClientRect(). Without
 * this, dropdowns on near-bottom rows get clipped by the table wrapper. */
.tbo-results {
  display: none;
  position: fixed;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 380px;
  overflow-y: auto;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.tbo-results--open { display: block; }
.tbo-results__empty {
  padding: 12px;
  color: #6b7280;
  font-style: italic;
  font-size: 13px;
}
.tbo-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background-color .12s;
}
.tbo-result:last-child { border-bottom: none; }
.tbo-result:hover,
.tbo-result.is-active {
  background: #eff6ff;
}
.tbo-result__img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #f3f4f6;
  background: #fff;
}
.tbo-result__text { flex: 1; min-width: 0; }
.tbo-result__title {
  display: block;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tbo-result__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  flex-wrap: wrap;
}
.tbo-result__sku {
  background: #f3f4f6;
  color: #4b5563;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.tbo-result__price { color: #15803d; font-weight: 600; }

/* -------------------------------------------------------------------- */
/* Responsive                                                           */
/* -------------------------------------------------------------------- */

@media (max-width: 640px) {
  .tbo-toolbar { flex-direction: column; align-items: stretch; }
  .tbo-toolbar__draft { justify-content: flex-end; }
  .tbo-submit-bar { flex-direction: column-reverse; align-items: stretch; }
  .tbo-btn-primary { width: 100%; }
}