/* Product-code orders (ORDER-PRODUCTS-001B). Every rule starts with .op-, except the three that hide the keyword controls while
   the card is in product-code mode (#keyword-order-card.op-products-mode). Colours are the site's own theme variables
   (ui-theme-mode.css defines them for the dark default and for html[data-theme="light"]); each var() keeps the dark value as
   its fallback, for when that file is not loaded. Tables scroll inside their own box, never the page (a 420px phone). */

/* ---- product-code mode: the keyword controls are not drawn (the device row stays: both modes share the printer) ---- */

#keyword-order-card.op-products-mode .keyword-order-main-row,
#keyword-order-card.op-products-mode #keyword-order-runtime-status,
#keyword-order-card.op-products-mode #keyword-order-dirty-status,
#keyword-order-card.op-products-mode #cancel-keyword-changes-btn,
#keyword-order-card.op-products-mode #stop-keyword-order-btn {
  display: none !important;
}

#keyword-order-card.op-products-mode ~ .comment-workspace-card #keyword-status,
#keyword-order-card.op-products-mode ~ .comment-workspace-card #keyword-route-state {
  display: none !important;
}

/* ---- the switch on top of the keyword card ---- */

.op-mode-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px;
  border: 1px solid var(--boba-border, rgba(255, 255, 255, 0.09));
  border-radius: var(--boba-radius-control, 10px);
  background: var(--boba-canvas, #0c1116);
}

.op-mode-button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--boba-radius-control, 10px);
  background: transparent;
  color: var(--boba-text-secondary, #c9c7c1);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.op-mode-button[aria-pressed="true"] {
  background: var(--boba-selected, #1d2a33);
  border-color: var(--boba-border-strong, rgba(255, 255, 255, 0.16));
  color: var(--boba-text, #f3f0e9);
}

.op-mode-button:focus-visible {
  outline: 2px solid var(--boba-brand, #d9a441);
  outline-offset: 2px;
}

/* ---- the product panel inside the keyword card ---- */

.op-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.op-panel[hidden] {
  display: none;
}

.op-panel-head,
.op-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.op-panel-head h3,
.op-page-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--boba-text, #f3f0e9);
}

.op-link {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--boba-brand, #d9a441);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.op-hint,
.op-help {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--boba-text-secondary, #c9c7c1);
  overflow-wrap: anywhere;
}

.op-warn {
  color: var(--boba-warning, #e7b04a);
}

.op-empty {
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  color: var(--boba-text-tertiary, #9a9790);
}

.op-status {
  margin: 0;
  font-size: 13px;
  color: var(--boba-text, #f3f0e9);
  overflow-wrap: anywhere;
}

.op-notice {
  margin: 0;
  font-size: 13px;
  color: var(--boba-text-secondary, #c9c7c1);
  overflow-wrap: anywhere;
}

.op-notice:empty {
  display: none;
}

.op-notice-error {
  color: var(--boba-danger, #ed746e) !important;
}

/* ---- tables (they scroll inside their own box) ---- */

.op-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--boba-border, rgba(255, 255, 255, 0.09));
  border-radius: var(--boba-radius-panel, 12px);
}

.op-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--boba-text, #f3f0e9);
}

.op-table th,
.op-table td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--boba-border, rgba(255, 255, 255, 0.09));
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.op-table th {
  color: var(--boba-text-secondary, #c9c7c1);
  font-weight: 600;
}

.op-table tr:last-child td {
  border-bottom: 0;
}

.op-name {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 6em;
}

.op-closed .op-code,
.op-closed .op-name {
  color: var(--boba-text-tertiary, #9a9790);
}

.op-soldout {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--boba-danger-soft, rgba(237, 116, 110, 0.16));
  color: var(--boba-danger, #ed746e);
  font-weight: 600;
}

.op-row-actions {
  white-space: nowrap;
}

.op-row-actions button {
  margin-right: 4px;
}

.op-danger {
  color: var(--boba-danger, #ed746e) !important;
}

/* The open control is a sliding switch (the same as the customer-number switch): 44 by 24 pixels, the knob moves right when on.
   The site styles every input, so the rules here carry !important where the site's own input rules would win. */
.op-open {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 44px !important;
  height: 24px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--boba-border-strong, rgba(255, 255, 255, 0.16)) !important;
  border-radius: 12px !important;
  background: var(--boba-control, #0a1015) !important;
  cursor: pointer;
  vertical-align: middle;
}

.op-open::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--boba-text-secondary, #c9c7c1);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.op-open:checked {
  background: var(--boba-success, #59cb8c) !important;
  border-color: var(--boba-success, #59cb8c) !important;
}

.op-open:checked::before {
  transform: translateX(20px);
  background: var(--boba-surface, #131920);
}

.op-open:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.op-open:focus-visible,
.op-mode-button:focus-visible,
.op-page-actions button:focus-visible,
.op-actions button:focus-visible,
.op-row-actions button:focus-visible {
  outline: 2px solid var(--boba-brand, #d4a650);
  outline-offset: 2px;
}

/* The 新增商品 and 儲存 buttons are the primary button of this card. The site's light theme paints the text of every
   primary button with the page surface colour (a near-white), on a light brand colour, so the text is not readable.
   These two rules name the colours outright (dark text on the brand colour, in both themes), and they are more specific
   than the site's rules. */
.op-products-card .primary-btn,
.op-panel .primary-btn,
html[data-theme="light"] .op-products-card .primary-btn,
html[data-theme="light"] .op-panel .primary-btn {
  color: #17120a !important;
  -webkit-text-fill-color: #17120a !important;
  background: var(--boba-brand, #d4a650) !important;
  background-image: none !important;
  border-color: var(--boba-brand, #d4a650) !important;
}

.op-products-card .primary-btn:disabled,
.op-panel .primary-btn:disabled {
  opacity: 0.5;
}

/* ---- settings and actions ---- */

.op-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.op-field {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--boba-text-secondary, #c9c7c1);
}

.op-field select,
.op-field input,
.op-import-text {
  min-height: var(--boba-control-height, 36px);
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--boba-border-strong, rgba(255, 255, 255, 0.16));
  border-radius: var(--boba-radius-control, 10px);
  background: var(--boba-control, #111820);
  color: var(--boba-text, #f3f0e9);
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
}

/* The site styles every input: the checkboxes here keep their native size, and only take the brand colour. */
.op-check input[type="checkbox"],
.op-settings input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--boba-brand, #d9a441);
  background: none;
  border: 0;
  cursor: pointer;
}

.op-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--boba-text-secondary, #c9c7c1);
}

.op-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.op-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- the recent refusals ---- */

.op-rejections h4 {
  margin: 4px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--boba-text, #f3f0e9);
}

.op-rejections ul {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 12.5px;
  color: var(--boba-text-secondary, #c9c7c1);
}

.op-rejections li {
  overflow-wrap: anywhere;
  margin: 2px 0;
}

/* ---- the products page card ---- */

.op-products-card {
  box-sizing: border-box;
  width: 100%;
  max-width: min(980px, 100%);
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--boba-border, rgba(255, 255, 255, 0.09));
  border-radius: var(--boba-radius-card, 14px);
  background: var(--boba-surface, #131920);
  color: var(--boba-text, #f3f0e9);
  display: grid;
  gap: 10px;
  min-width: 0;
}

.op-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.op-page-body {
  min-width: 0;
  display: grid;
  gap: 10px;
}

/* The table's slot is a grid item: without min-width 0 it grows to the table's width, and the table box stops scrolling. */
.op-table-slot {
  min-width: 0;
}

.op-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.op-form {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--boba-border, rgba(255, 255, 255, 0.09));
  border-radius: var(--boba-radius-panel, 12px);
  background: var(--boba-surface-raised, #18222b);
}

.op-form[hidden] {
  display: none;
}

.op-form-error {
  margin: 0;
  font-size: 13px;
  color: var(--boba-danger, #ed746e);
  overflow-wrap: anywhere;
}

.op-form-error:empty {
  display: none;
}

.op-code-locked {
  color: var(--boba-warning, #e7b04a);
}

.op-code-locked[hidden] {
  display: none;
}

.op-import {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.op-import-text {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.op-import-result {
  font-size: 13px;
  color: var(--boba-text, #f3f0e9);
  overflow-wrap: anywhere;
}

.op-import-result:empty {
  display: none;
}

.op-import-errors {
  margin: 6px 0 0;
  padding: 0 0 0 18px;
  font-size: 12.5px;
  color: var(--boba-danger, #ed746e);
}

.op-import-errors li {
  overflow-wrap: anywhere;
}

/* ---- narrow screens: the card and its controls take the width, and the table scrolls inside itself ---- */

@media (max-width: 520px) {
  .op-mode-switch,
  .op-mode-button {
    width: 100%;
  }

  .op-products-card {
    padding: 10px;
  }

  .op-actions button,
  .op-page-actions button {
    flex: 1 1 auto;
  }
}

/* ---- light theme: the variables carry the colours; these two only adjust what is not a variable ---- */

html[data-theme="light"] .op-mode-button[aria-pressed="true"] {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .op-soldout {
  background: rgba(190, 46, 42, 0.1);
}

/* ---- linked store products (STORE-LIVE-004) ---- */

.op-store {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.op-store-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-width: 0;
}

.op-store-head h4 {
  margin: 0;
  font-size: 13px;
  color: var(--boba-text, #f3f0e9);
}

.op-store-head .op-link,
.op-store-hint .op-link {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.op-badge {
  display: block;
  box-sizing: border-box;
  max-width: 22em;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.5;
  color: #f4d491;
  -webkit-text-fill-color: currentColor;
  background: #332714;
}

.op-store .op-warn {
  color: #e7b04a;
  -webkit-text-fill-color: currentColor;
}

html[data-theme="light"] .op-badge {
  color: #694008;
  background: #fff0ce;
}

html[data-theme="light"] .op-store .op-warn {
  color: #805009;
}