/* ---------- Owner tools (#/claim/<storeId> once approved, renderOwnerTools in js/catalogue-owner.js) and
   My catalogue (#/catalogue/<storeId>, js/catalogue-mine.js). Prefix ow-. Owner tools reuses the Settings rows (sh-). ---------- */

.ow-head { display: flex; flex-direction: column; gap: 6px; }
.ow-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; }
.ow-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); }

/* Owner tools */
.ow-tools .sh-row-value { font-size: 14px; }
.ow-row-add { color: var(--brand-text); font-weight: 600; }
.ow-form { display: flex; flex-direction: column; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ow-form[hidden] { display: none; }
.ow-form-actions { display: flex; gap: 8px; }
.ow-tools .ct-editor { margin: 0; border-radius: var(--radius-lg); }

/* Themed fields wherever these two pages still use the older suggest-field markup (the add, bulk, price and contact forms):
   number, tel, email, url and search inputs had no dark-mode style there and showed as white boxes. */
:is(.ow-wrap, .ow-tools) .suggest-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), .ow-search {
  width: 100%; min-width: 0; min-height: 48px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 16px;
}
:is(.ow-wrap, .ow-tools) .suggest-field textarea { padding: 12px 14px; min-height: 80px; }
:is(.ow-wrap, .ow-tools) .suggest-field :is(input, select, textarea):focus, .ow-search:focus {
  outline: 0; border-color: var(--focus-ring); box-shadow: 0 0 0 2px var(--focus-ring);
}

/* My catalogue */
.ow-wrap { container-type: inline-size; container-name: ow; }
.ow-screen.suggest-screen { max-width: 820px; margin: 0 auto; padding: 16px 16px 40px; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; }
.ow-back { align-self: flex-start; margin-bottom: 0; }
.ow-toolbar { display: flex; flex-direction: column; gap: 10px; }
.ow-toolbar-actions { display: flex; gap: 8px; }
.ow-toolbar-actions .btn { flex: 1 1 0; min-height: 44px; }
#catPanel:empty { display: none; }
#catPanel .suggest-form { margin: 0 !important; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }

.ow-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ow-group-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.ow-count { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }

.ow-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ow-item { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ow-item + .ow-item { border-top: 1px solid var(--border); }
.ow-item[hidden] { display: none; }
.ow-item-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ow-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ow-item-name { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ow-brand { font-weight: 400; color: var(--text-muted); }
.ow-item-variant { font-size: 14px; color: var(--text-muted); overflow-wrap: anywhere; }
.ow-out { color: var(--danger-text); font-weight: 600; }
.ow-item-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.ow-item-price .price { font-size: 16px; font-weight: 700; white-space: nowrap; }
.ow-item-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ow-tag { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.ow-item-date { margin: 0; font-size: 12px; color: var(--text-muted); }
.ow-item-out .ow-item-name, .ow-item-out .price { opacity: 0.65; }
.ow-item-actions { display: flex; flex-wrap: wrap; gap: 0; margin-left: -6px; }
.ow-act {
  min-height: 40px; padding: 0 6px; border: none; border-radius: var(--radius-sm); background: none;
  color: var(--brand-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ow-act:hover { background: var(--surface-2); }
.ow-act-quiet { color: var(--text-muted); font-weight: 500; margin-left: auto; }
@container ow (min-width: 600px) { .ow-act { font-size: 14px; padding: 0 8px; } .ow-act-quiet { margin-left: 0; } }
.ow-item [data-cat-edit]:not([hidden]) { padding-top: 4px; }

@container ow (min-width: 600px) {
  .ow-toolbar { flex-direction: row; align-items: center; }
  .ow-search { flex: 1; }
  .ow-toolbar-actions .btn { flex: none; }
}