/* ============================================================
   PCS Admin Bridge
   Re-skins native / legacy WordPress admin markup used across the
   "PC Designer" screens with the Printcart B2B Store design tokens.
   Tokens (--pcs-*) come from b2bstore/admin/css/pcs-admin.css.
   Everything is scoped to body.pcs-admin-skin so nothing leaks to
   WP core screens or other plugins.
   ============================================================ */

/* ---- Content shell ---------------------------------------- */
body.pcs-admin-skin #wpbody-content {
  font-family: var(--pcs-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  color: var(--pcs-text, #1d2327);
}
body.pcs-admin-skin #wpbody-content .wrap { margin: 10px 20px 0 2px; }

/* Headings inside PC Designer screens */
body.pcs-admin-skin #wpbody-content h1,
body.pcs-admin-skin #wpbody-content h2,
body.pcs-admin-skin #wpbody-content h3 {
  color: var(--pcs-text, #1d2327);
  font-weight: 600;
}
/* Do not restyle the gradient header's own H1 */
body.pcs-admin-skin .pcs-page-head h1 { color: #fff; }

/* Links — exclude ALL button variants (incl. anchors marked only
   .button-primary/.btn-primary/.nbutton-primary without .button), otherwise
   their label/icon get painted brand-blue on a brand-blue fill = invisible. */
body.pcs-admin-skin #wpbody-content a:not(.button):not(.button-primary):not(.btn-primary):not(.nbutton-primary):not(.pcs-btn):not(.pcs-tab):not(.nav-tab) {
  color: var(--pcs-primary, #3b4fd8);
}
body.pcs-admin-skin #wpbody-content a:not(.button):not(.button-primary):not(.btn-primary):not(.nbutton-primary):not(.pcs-btn):not(.pcs-tab):not(.nav-tab):hover {
  color: var(--pcs-primary-hover, #3242c4);
}

/* ============================================================
   Buttons — native + legacy variants -> pcs button look
   Excludes media / color-picker / thickbox helper buttons.
   ============================================================ */
body.pcs-admin-skin .button,
body.pcs-admin-skin .button-secondary,
body.pcs-admin-skin input[type="submit"].button,
body.pcs-admin-skin .nbutton-primary,
body.pcs-admin-skin .btn-primary,
body.pcs-admin-skin .button-primary {
  border-radius: var(--pcs-radius-sm, 8px);
  border: 1px solid var(--pcs-border, #c3c4c7);
  height: auto;
  min-height: 30px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: none;
  transition: all .12s ease;
  vertical-align: middle;
}
/* Use background-color (not the `background` shorthand) so buttons that carry
   a background-image icon keep it. */
body.pcs-admin-skin .button:hover,
body.pcs-admin-skin .button-secondary:hover {
  background-color: var(--pcs-bg-soft, #f6f7f7);
  border-color: var(--pcs-text-soft, #50575e);
  color: var(--pcs-primary, #3b4fd8);
}

/* Primary variants share the brand fill */
body.pcs-admin-skin .button-primary,
body.pcs-admin-skin .nbutton-primary,
body.pcs-admin-skin .btn-primary,
body.pcs-admin-skin input[type="submit"].button-primary,
body.pcs-admin-skin button.button-primary {
  background-color: var(--pcs-primary, #3b4fd8);
  border-color: var(--pcs-primary, #3b4fd8);
  color: #fff;
  text-shadow: none;
}
body.pcs-admin-skin .button-primary:hover,
body.pcs-admin-skin .nbutton-primary:hover,
body.pcs-admin-skin .btn-primary:hover,
body.pcs-admin-skin button.button-primary:hover {
  background-color: var(--pcs-primary-hover, #3242c4);
  border-color: var(--pcs-primary-hover, #3242c4);
  color: #fff;
}
body.pcs-admin-skin .button:focus,
body.pcs-admin-skin .button-primary:focus {
  box-shadow: 0 0 0 1px var(--pcs-primary, #3b4fd8);
  outline: none;
}
/* Destructive / delete affordances */
body.pcs-admin-skin .nbdesigner-delete,
body.pcs-admin-skin .button.pcs-danger {
  background: var(--pcs-bg, #fff);
  border-color: var(--pcs-error, #d63638);
  color: var(--pcs-error, #d63638);
}
body.pcs-admin-skin .nbdesigner-delete:hover {
  background: var(--pcs-error, #d63638);
  border-color: var(--pcs-error, #d63638);
  color: #fff;
}

/* ============================================================
   Cards / boxes  ( .postbox, .nbd-* section wrappers )
   ============================================================ */
body.pcs-admin-skin #wpbody-content .postbox,
body.pcs-admin-skin .nbd-tool-section,
body.pcs-admin-skin .nbd-enhance__column,
body.pcs-admin-skin .system-info > div:not(.pcs-page-head) {
  background: var(--pcs-bg, #fff);
  border: 1px solid var(--pcs-border-light, #dcdcde);
  border-radius: var(--pcs-radius-lg, 16px);
  box-shadow: var(--pcs-shadow-md, 0 2px 4px rgba(0,0,0,.08));
  padding: 20px 22px;
  margin: 0 0 18px;
}
body.pcs-admin-skin #wpbody-content .postbox > .postbox-header { border: 0; box-shadow: none; }
body.pcs-admin-skin #wpbody-content .postbox .hndle { font-size: 15px; font-weight: 600; padding: 0 0 10px; }

/* ============================================================
   Form table (settings-style rows)
   ============================================================ */
body.pcs-admin-skin .form-table { border-collapse: separate; }
body.pcs-admin-skin .form-table > tbody > tr > th,
body.pcs-admin-skin .form-table th.titledesc {
  color: var(--pcs-text, #1d2327);
  font-weight: 600;
  font-size: 13px;
  padding: 14px 10px 14px 0;
}
body.pcs-admin-skin .form-table > tbody > tr > td { padding: 12px 10px; }
body.pcs-admin-skin .form-table .description,
body.pcs-admin-skin #wpbody-content .description,
body.pcs-admin-skin #wpbody-content small {
  color: var(--pcs-text-mute, #8c8f94);
  font-style: normal;
}

/* Inputs (exclude color-picker + jquery-ui + codemirror widgets).
   NOTE: also cover inputs with NO type attribute (default = text) and the
   remaining text-like types, otherwise fields like <input class="date_to">
   fall through and render inconsistently next to their siblings. */
body.pcs-admin-skin input[type="text"]:not(.wp-color-picker),
body.pcs-admin-skin input:not([type]):not(.wp-color-picker),
body.pcs-admin-skin input[type="search"],
body.pcs-admin-skin input[type="email"],
body.pcs-admin-skin input[type="url"],
body.pcs-admin-skin input[type="tel"],
body.pcs-admin-skin input[type="number"],
body.pcs-admin-skin input[type="password"],
body.pcs-admin-skin input[type="date"],
body.pcs-admin-skin input[type="datetime-local"],
body.pcs-admin-skin input[type="time"],
body.pcs-admin-skin input[type="month"],
body.pcs-admin-skin input[type="week"],
body.pcs-admin-skin .regular-text,
body.pcs-admin-skin textarea:not(.CodeMirror textarea),
body.pcs-admin-skin select {
  border: 1px solid var(--pcs-border, #c3c4c7);
  border-radius: var(--pcs-radius-sm, 8px);
  padding: 6px 10px;
  min-height: 34px;
  line-height: 1.4;
  /* Standardized inner (inset) shadow on every form field */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
  color: var(--pcs-text, #1d2327);
  background-color: var(--pcs-bg, #fff);
  transition: border-color .12s ease, box-shadow .12s ease;
}
body.pcs-admin-skin textarea:not(.CodeMirror textarea) {
  min-height: 72px;
  padding: 8px 10px;
}
body.pcs-admin-skin input::placeholder,
body.pcs-admin-skin textarea::placeholder { color: var(--pcs-text-mute, #8c8f94); opacity: 1; }
body.pcs-admin-skin input[type="text"]:not(.wp-color-picker):focus,
body.pcs-admin-skin input:not([type]):not(.wp-color-picker):focus,
body.pcs-admin-skin input[type="search"]:focus,
body.pcs-admin-skin input[type="email"]:focus,
body.pcs-admin-skin input[type="url"]:focus,
body.pcs-admin-skin input[type="tel"]:focus,
body.pcs-admin-skin input[type="number"]:focus,
body.pcs-admin-skin input[type="password"]:focus,
body.pcs-admin-skin input[type="date"]:focus,
body.pcs-admin-skin input[type="datetime-local"]:focus,
body.pcs-admin-skin input[type="time"]:focus,
body.pcs-admin-skin input[type="month"]:focus,
body.pcs-admin-skin input[type="week"]:focus,
body.pcs-admin-skin .regular-text:focus,
body.pcs-admin-skin textarea:focus,
body.pcs-admin-skin select:focus {
  border-color: var(--pcs-primary, #3b4fd8);
  /* keep the inset depth, add a soft brand focus ring */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 3px rgba(59, 79, 216, .15);
  outline: none;
}
body.pcs-admin-skin input[disabled],
body.pcs-admin-skin select[disabled],
body.pcs-admin-skin textarea[disabled] {
  background-color: var(--pcs-bg-soft, #f6f7f7);
  color: var(--pcs-text-mute, #8c8f94);
  box-shadow: none;
}
/* Enhanced widgets own their internal inputs — never box them like a form
   field (select2 / wc-enhanced-select search, jQuery-UI autocomplete/datepicker,
   media, thickbox). Higher specificity (element + class) so it wins over the
   input[type=...] rules above. */
body.pcs-admin-skin input.select2-search__field,
body.pcs-admin-skin .select2-container input,
body.pcs-admin-skin .select2-selection input,
body.pcs-admin-skin .wc-enhanced-select input,
body.pcs-admin-skin .ui-autocomplete-input,
body.pcs-admin-skin span.ui-datepicker input,
body.pcs-admin-skin .ui-dialog input.select2-search__field {
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
  line-height: normal;
}
/* pcs-* form components: unify the inner shadow with native fields */
body.pcs-admin-skin .pcs-input,
body.pcs-admin-skin .pcs-select,
body.pcs-admin-skin .pcs-textarea,
body.pcs-admin-skin .pcs-filter-input,
body.pcs-admin-skin .pcs-filter-select {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
}
/* Field hint caption under a label (used across standardized forms) */
body.pcs-admin-skin .pcs-field-hint,
body.pcs-admin-skin .pcs-label-hint {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  color: var(--pcs-text-mute, #8c8f94);
  line-height: 1.45;
}
body.pcs-admin-skin p.submit { padding: 8px 0 0; }

/* ============================================================
   Tables ( .widefat / .striped )  ->  pcs-table look
   ============================================================ */
body.pcs-admin-skin #wpbody-content table.widefat {
  border: 1px solid var(--pcs-border-light, #dcdcde);
  border-radius: var(--pcs-radius-lg, 16px);
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--pcs-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
body.pcs-admin-skin #wpbody-content table.widefat thead th,
body.pcs-admin-skin #wpbody-content table.widefat tfoot th {
  background: var(--pcs-bg-soft, #f6f7f7);
  color: var(--pcs-text-soft, #50575e);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 11px;
  border-bottom: 1px solid var(--pcs-border-light, #dcdcde);
}
body.pcs-admin-skin #wpbody-content table.widefat td,
body.pcs-admin-skin #wpbody-content table.widefat th { padding: 11px 14px; }
body.pcs-admin-skin #wpbody-content table.widefat.striped > tbody > tr:nth-child(odd),
body.pcs-admin-skin #wpbody-content table.widefat > tbody > tr.alternate { background: var(--pcs-bg-soft, #f6f7f7); }
body.pcs-admin-skin #wpbody-content table.widefat tbody tr:hover { background: var(--pcs-primary-soft, #eef0fc); }
body.pcs-admin-skin #wpbody-content table.widefat .good  { color: var(--pcs-success, #00a32a); }
body.pcs-admin-skin #wpbody-content table.widefat .bad   { color: var(--pcs-error, #d63638); }

/* ============================================================
   Status / helper chips reused from legacy markup
   ============================================================ */
body.pcs-admin-skin .nbd-title-page {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
body.pcs-admin-skin .nbd-header-with-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ============================================================
   Native WP tabs -> pcs tab look (.nav-tab-wrapper)
   ============================================================ */
body.pcs-admin-skin .nav-tab-wrapper {
  border-bottom: 1px solid var(--pcs-border-light, #dcdcde);
  gap: 4px;
  display: flex;
  flex-wrap: wrap;
}
body.pcs-admin-skin .nav-tab {
  border: 0;
  background: transparent;
  color: var(--pcs-text-soft, #50575e);
  font-weight: 500;
  border-radius: var(--pcs-radius-sm, 8px) var(--pcs-radius-sm, 8px) 0 0;
  margin: 0;
  padding: 10px 16px;
}
body.pcs-admin-skin .nav-tab:hover { background: var(--pcs-bg-soft, #f6f7f7); color: var(--pcs-primary, #3b4fd8); }
body.pcs-admin-skin .nav-tab-active,
body.pcs-admin-skin .nav-tab-active:focus {
  background: transparent;
  color: var(--pcs-primary, #3b4fd8);
  border-bottom: 2px solid var(--pcs-primary, #3b4fd8);
}

/* ============================================================
   Notices inside PC Designer wrap keep WP semantics but softer
   ============================================================ */
body.pcs-admin-skin #wpbody-content .notice,
body.pcs-admin-skin #wpbody-content .nbd-notice {
  border-radius: var(--pcs-radius-md, 8px);
}

/* ============================================================
   Page header — standardized icon tile + heading + CTA
   (rendered by pcs_render_page_head(); scoped so the B2B store's
    own headers are untouched.)
   ============================================================ */
body.pcs-admin-skin .pcs-page-head {
  align-items: center;
  padding: 22px 28px;
  border-radius: var(--pcs-radius-md, 8px);
  box-shadow: var(--pcs-shadow-lg, 0 4px 12px rgba(0,0,0,.08)), inset 0 1px 0 rgba(255,255,255,.1);
}
body.pcs-admin-skin .pcs-page-title-block {
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}
body.pcs-admin-skin .pcs-page-heading { min-width: 0; }
body.pcs-admin-skin .pcs-page-head h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
}
body.pcs-admin-skin .pcs-page-head .pcs-page-sub {
  margin-top: 4px;
  flex-basis: auto;
  font-size: 13px;
  max-width: 720px;
}

/* Polished icon tile — larger, frosted, on the gradient header */
body.pcs-admin-skin .pcs-page-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--pcs-radius-md, 8px);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 12px rgba(15, 23, 42, .18);
  backdrop-filter: blur(6px);
}
body.pcs-admin-skin .pcs-page-icon .dashicons {
  color: #fff;
  font-size: 28px;
  width: 28px;
  height: 28px;
  line-height: 28px;
}
@media (max-width: 600px) {
  body.pcs-admin-skin .pcs-page-title-block { flex-wrap: wrap; }
  body.pcs-admin-skin .pcs-page-icon { width: 44px; height: 44px; border-radius: 12px; }
  body.pcs-admin-skin .pcs-page-icon .dashicons { font-size: 24px; width: 24px; height: 24px; line-height: 24px; }
  body.pcs-admin-skin .pcs-page-head h1 { font-size: 20px; }
}

/* Any WP button dropped into the header actions inherits the gold CTA look */
body.pcs-admin-skin .pcs-page-actions .button,
body.pcs-admin-skin .pcs-page-actions .button-primary {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  color: #78350f;
  border: 1px solid #f59e0b;
  font-weight: 700;
  min-height: 36px;
  padding: 0 18px;
  box-shadow: var(--pcs-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
body.pcs-admin-skin .pcs-page-actions .button:hover,
body.pcs-admin-skin .pcs-page-actions .button-primary:hover {
  background: linear-gradient(180deg, #f59e0b, #d97706);
  color: #78350f;
}

/* ============================================================
   Buttons / CTA — standardized sizing & primary intent
   ============================================================ */
/* Give every pcs button a comfortable, consistent hit area */
body.pcs-admin-skin .pcs-btn { min-height: 32px; }
body.pcs-admin-skin .pcs-btn .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
}
/* Buttons sitting in a toolbar/filter row align nicely */
body.pcs-admin-skin .pcs-filter-row .button,
body.pcs-admin-skin .pcs-filter-row .pcs-btn { vertical-align: middle; }

/* ============================================================
   Pagination — pcs component + native WP .tablenav-pages
   ============================================================ */
/* pcs pagination polish (slightly larger, brand-aware) */
body.pcs-admin-skin .pcs-pagination { gap: 6px; }
body.pcs-admin-skin .pcs-page-btn {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

/* Re-skin native WP list-table pagination to match pcs-page-btn */
body.pcs-admin-skin .tablenav-pages { margin: 8px 0; display: inline-flex; align-items: center; gap: 6px; float: none; }
body.pcs-admin-skin .tablenav-pages .displaying-num {
  color: var(--pcs-text-mute, #8c8f94);
  font-size: 12px;
  margin-right: 6px;
}
body.pcs-admin-skin .tablenav-pages .pagination-links { display: inline-flex; align-items: center; gap: 6px; }
body.pcs-admin-skin .tablenav-pages a.page-numbers,
body.pcs-admin-skin .tablenav-pages span.page-numbers,
body.pcs-admin-skin .tablenav-pages a.tablenav-pages-navspan,
body.pcs-admin-skin .tablenav-pages .button,
body.pcs-admin-skin .tablenav-pages .paging-input {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--pcs-border, #c3c4c7);
  border-radius: var(--pcs-radius-sm, 8px);
  background: var(--pcs-bg, #fff);
  color: var(--pcs-text-soft, #50575e);
  box-shadow: none;
  line-height: 1;
  font-size: 13px;
}
body.pcs-admin-skin .tablenav-pages a.page-numbers:hover,
body.pcs-admin-skin .tablenav-pages .button:hover {
  background: var(--pcs-primary-soft, #eef0fc);
  border-color: var(--pcs-primary, #3b4fd8);
  color: var(--pcs-primary, #3b4fd8);
}
body.pcs-admin-skin .tablenav-pages span.page-numbers.current,
body.pcs-admin-skin .tablenav-pages .page-numbers.current {
  background: var(--pcs-primary, #3b4fd8);
  border-color: var(--pcs-primary, #3b4fd8);
  color: #fff;
}
body.pcs-admin-skin .tablenav-pages .tablenav-pages-navspan.button.disabled,
body.pcs-admin-skin .tablenav-pages a.page-numbers.dots {
  opacity: .5;
  background: transparent;
  border-color: transparent;
}
body.pcs-admin-skin .tablenav-pages .paging-input .current-page {
  height: 28px;
  border-radius: var(--pcs-radius-sm, 8px);
  border: 1px solid var(--pcs-border, #c3c4c7);
}

/* ============================================================
   Notices — standardize every WP notice variant to the pcs look
   (.notice, .notice-*, .update-nag, .updated, .error, is-dismissible)
   Soft tinted background + colored left rail + rounded card.
   ============================================================ */
body.pcs-admin-skin #wpbody-content .notice,
body.pcs-admin-skin #wpbody-content .update-nag,
body.pcs-admin-skin #wpbody-content div.updated,
body.pcs-admin-skin #wpbody-content div.error,
body.pcs-admin-skin .pcs-wrap .notice {
  position: relative;
  border: 1px solid var(--pcs-border-light, #dcdcde);
  border-left: 4px solid var(--pcs-text-mute, #8c8f94);
  border-radius: var(--pcs-radius-md, 8px);
  background: var(--pcs-bg, #fff);
  box-shadow: var(--pcs-shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  padding: 12px 16px;
  margin: 14px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pcs-text, #1d2327);
}
body.pcs-admin-skin #wpbody-content .notice p,
body.pcs-admin-skin #wpbody-content .update-nag p,
body.pcs-admin-skin #wpbody-content div.updated p,
body.pcs-admin-skin #wpbody-content div.error p { margin: .35em 0; padding: 0; }

/* Type accents — rail colour + faint tinted fill */
body.pcs-admin-skin #wpbody-content .notice-success,
body.pcs-admin-skin #wpbody-content div.updated {
  border-left-color: var(--pcs-success, #00a32a);
  background: var(--pcs-success-soft, #d5e8d6);
}
body.pcs-admin-skin #wpbody-content .notice-warning,
body.pcs-admin-skin #wpbody-content .update-nag {
  border-left-color: var(--pcs-warning, #dba617);
  background: var(--pcs-warning-soft, #fcf9e8);
}
body.pcs-admin-skin #wpbody-content .notice-error,
body.pcs-admin-skin #wpbody-content div.error {
  border-left-color: var(--pcs-error, #d63638);
  background: var(--pcs-error-soft, #fcf0f1);
}
body.pcs-admin-skin #wpbody-content .notice-info {
  border-left-color: var(--pcs-primary, #3b4fd8);
  background: var(--pcs-primary-soft, #eef0fc);
}
/* Links inside notices stay on-brand and legible */
body.pcs-admin-skin #wpbody-content .notice a,
body.pcs-admin-skin #wpbody-content .update-nag a {
  color: var(--pcs-primary, #3b4fd8);
  font-weight: 600;
}
/* Dismiss button keeps working, just aligned */
body.pcs-admin-skin #wpbody-content .notice.is-dismissible { padding-right: 38px; }

/* pcs-notice component links + icon room (for hand-authored notices) */
body.pcs-admin-skin .pcs-notice .dashicons { flex-shrink: 0; margin-top: 1px; }
body.pcs-admin-skin .pcs-notice[data-type="warning"] .dashicons { color: var(--pcs-warning, #dba617); }
body.pcs-admin-skin .pcs-notice[data-type="error"] .dashicons   { color: var(--pcs-error, #d63638); }
body.pcs-admin-skin .pcs-notice[data-type="success"] .dashicons { color: var(--pcs-success, #00a32a); }
body.pcs-admin-skin .pcs-notice[data-type="info"] .dashicons    { color: var(--pcs-primary, #3b4fd8); }

/* ============================================================
   Filters / bulk-action bars — native WP .tablenav .actions
   ("Select an action" + Apply) and pcs-filter-row.
   ============================================================ */
body.pcs-admin-skin .tablenav.top,
body.pcs-admin-skin .tablenav.bottom {
  height: auto;
  margin: 8px 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
body.pcs-admin-skin .tablenav .actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}
/* the bulk-action <select> matches every other field (inner shadow etc.) */
body.pcs-admin-skin .tablenav .actions select,
body.pcs-admin-skin .pcs-filter-row select {
  min-height: 34px;
  min-width: 160px;
  border: 1px solid var(--pcs-border, #c3c4c7);
  border-radius: var(--pcs-radius-sm, 8px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
  background-color: var(--pcs-bg, #fff);
  padding: 0 28px 0 10px;
}
/* the Apply / Filter action button reads as a clear secondary CTA */
body.pcs-admin-skin .tablenav .actions .button.action,
body.pcs-admin-skin .tablenav .actions #doaction,
body.pcs-admin-skin .tablenav .actions #doaction2,
body.pcs-admin-skin .tablenav .actions input[type="submit"] {
  min-height: 34px;
  background: var(--pcs-bg, #fff);
  color: var(--pcs-primary, #3b4fd8);
  border: 1px solid var(--pcs-primary, #3b4fd8);
  border-radius: var(--pcs-radius-sm, 8px);
  font-weight: 600;
}
body.pcs-admin-skin .tablenav .actions .button.action:hover,
body.pcs-admin-skin .tablenav .actions #doaction:hover {
  background: var(--pcs-primary-soft, #eef0fc);
  color: var(--pcs-primary-hover, #3242c4);
}

/* Shared standardized filter/toolbar row (hand-authored screens) */
body.pcs-admin-skin .pcs-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--pcs-bg, #fff);
  border: 1px solid var(--pcs-border-light, #dcdcde);
  border-radius: var(--pcs-radius-lg, 16px);
  box-shadow: var(--pcs-shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
  margin-bottom: 14px;
}
body.pcs-admin-skin .pcs-filter-row .pcs-filter-input { min-width: 200px; flex: 1 1 220px; max-width: 360px; }

/* ============================================================
   select2 / wc-product-search  ->  pcs token skin
   Re-skins the WooCommerce enhanced-select control (single +
   multiple) so its box, chips and dropdown match the pcs design
   system instead of the stock grey 4px look. Scoped to our admin.
   ============================================================ */
/* --- outer box (single + multiple) --- */
body.pcs-admin-skin .select2-container--default .select2-selection--single,
body.pcs-admin-skin .select2-container--default .select2-selection--multiple {
  min-height: 38px;
  background: var(--pcs-bg, #fff);
  border: 1px solid var(--pcs-border-light, #dcdcde);
  border-radius: var(--pcs-radius-sm, 8px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.pcs-admin-skin .select2-container--default .select2-selection--single { padding: 4px 4px; }
body.pcs-admin-skin .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px;
  color: var(--pcs-text, #1d2327);
}
body.pcs-admin-skin .select2-container--default .select2-selection--multiple {
  padding: 3px 6px;
}
/* Lay the chips + inline search out with flex-wrap instead of the stock
   float layout, so the search field never collapses onto its own line as a
   tiny box — it flexes to fill the remaining width of the current row. */
body.pcs-admin-skin .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  width: 100%;
  padding: 0;
}
body.pcs-admin-skin .select2-container--default .select2-selection--multiple .select2-selection__rendered > li {
  margin: 0;                /* drop stock 5px li offsets; gap handles spacing */
}
body.pcs-admin-skin .select2-container--default .select2-selection--multiple .select2-search--inline {
  float: none;
  flex: 1 1 140px;
  min-width: 140px;
}
/* focus / open ring */
body.pcs-admin-skin .select2-container--default.select2-container--focus .select2-selection--multiple,
body.pcs-admin-skin .select2-container--default.select2-container--open .select2-selection--multiple,
body.pcs-admin-skin .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--pcs-primary, #3b4fd8);
  box-shadow: 0 0 0 3px var(--pcs-primary-soft, #eef0fc);
  outline: 0;
}
/* placeholder text */
body.pcs-admin-skin .select2-container--default .select2-selection__placeholder {
  color: var(--pcs-text-mute, #8c8f94);
}
/* --- chips (multiple choices) -> soft pills in brand tint --- */
body.pcs-admin-skin .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  float: none;
  margin: 2px 0;
  padding: 3px 10px;
  background: var(--pcs-primary-soft, #eef0fc);
  color: var(--pcs-primary, #3b4fd8);
  border: 1px solid transparent;
  border-radius: var(--pcs-radius-full, 9999px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
body.pcs-admin-skin .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  order: 2;               /* push the × to the trailing edge */
  margin: 0 -2px 0 2px;
  color: var(--pcs-primary, #3b4fd8);
  opacity: .65;
  font-weight: 700;
  transition: opacity .15s ease, color .15s ease;
}
body.pcs-admin-skin .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--pcs-error, #d63638);
  opacity: 1;
  background: transparent;
}
/* --- inline search field: strip any inherited box/border/appearance and let
   it grow to fill its flex track (overrides select2's inline width style). --- */
body.pcs-admin-skin .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  width: 100% !important;
  min-width: 120px;
  margin: 0;
  padding: 4px 2px;
  min-height: 0;
  height: auto;
  line-height: 24px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  color: var(--pcs-text, #1d2327);
}
body.pcs-admin-skin .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
  color: var(--pcs-text-mute, #8c8f94);
}
/* --- dropdown panel --- */
body.pcs-admin-skin .select2-container--default .select2-dropdown,
body.pcs-admin-skin .select2-dropdown {
  border-color: var(--pcs-primary, #3b4fd8);
  border-radius: var(--pcs-radius-sm, 8px);
  box-shadow: var(--pcs-shadow-lg, 0 4px 12px rgba(0, 0, 0, .08));
  overflow: hidden;
}
body.pcs-admin-skin .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--pcs-border-light, #dcdcde);
  border-radius: var(--pcs-radius-sm, 8px);
  padding: 6px 8px;
}
body.pcs-admin-skin .select2-container--default .select2-results__option {
  padding: 8px 10px;
  color: var(--pcs-text, #1d2327);
}
body.pcs-admin-skin .select2-container--default .select2-results__option--highlighted[aria-selected],
body.pcs-admin-skin .select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--pcs-primary, #3b4fd8);
  color: #fff;
}
body.pcs-admin-skin .select2-container--default .select2-results__option[aria-selected="true"],
body.pcs-admin-skin .select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--pcs-primary-soft, #eef0fc);
  color: var(--pcs-primary, #3b4fd8);
}

/* ============================================================
   "Apply for" panel  (options edit screen, #product_catdiv)
   Segmented Products/Categories toggle + tidy field labels.
   ============================================================ */
body.pcs-admin-skin #product_catdiv .nbo-apply-head { padding-bottom: 6px; }
/* segmented control */
body.pcs-admin-skin .nbo-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--pcs-bg-soft, #f6f7f7);
  border: 1px solid var(--pcs-border-light, #dcdcde);
  border-radius: var(--pcs-radius-full, 9999px);
}
body.pcs-admin-skin .nbo-seg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 16px;
  border-radius: var(--pcs-radius-full, 9999px);
  font-size: 13px;
  font-weight: 600;
  color: var(--pcs-text-soft, #50575e);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
body.pcs-admin-skin .nbo-seg-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }
/* keep the native radio accessible/clickable but visually hidden */
body.pcs-admin-skin .nbo-seg-btn input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
body.pcs-admin-skin .nbo-seg-btn:hover { color: var(--pcs-primary, #3b4fd8); }
body.pcs-admin-skin .nbo-seg-btn:has(input:checked) {
  background: var(--pcs-primary, #3b4fd8);
  color: #fff;
  box-shadow: var(--pcs-shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
}
/* keyboard focus ring on the segment */
body.pcs-admin-skin .nbo-seg-btn:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--pcs-primary-soft, #eef0fc);
}
/* field label + hint inside the panels */
body.pcs-admin-skin .nbo-field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pcs-text, #1d2327);
}
body.pcs-admin-skin .nbo-field-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--pcs-text-mute, #8c8f94);
  line-height: 1.5;
}
/* category checkbox list -> token card */
body.pcs-admin-skin .nbo-cat-list {
  margin: 0;
  padding: 10px 12px;
  max-height: 300px;
  overflow: auto;
  background: var(--pcs-bg, #fff);
  border: 1px solid var(--pcs-border-light, #dcdcde);
  border-radius: var(--pcs-radius-sm, 8px);
}
body.pcs-admin-skin .nbo-cat-list li { margin: 2px 0; }
body.pcs-admin-skin .nbo-cat-list label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 6px;
}
body.pcs-admin-skin .nbo-cat-list label:hover { background: var(--pcs-bg-soft, #f6f7f7); }