/* Kitgenix Custom Tabs for WooCommerce – Product editor panel styles
   Scoped to #kitgenix_custom_tabs_for_woocommerce_tabs and related WC selectors.
   Intentionally self-contained: this CSS loads on the WC product edit screen and should not affect or be affected by other styles on the page.
*/

/* Self-contained design tokens (panel scope) – values match the Kitgenix
   brand kit (Primary Blue #214BFF, Midnight #071B3A, Slate #64748B, 8/12/16
   radius scale) so this panel reads as Kitgenix even though it's isolated
   from kitgenix-admin-ui.css by design. */
#kitgenix_custom_tabs_for_woocommerce_tabs {
  --kitgenix-custom-tabs-for-woocommerce-surface:        #ffffff;
  --kitgenix-custom-tabs-for-woocommerce-surface-alt:    #F5F9FF;
  --kitgenix-custom-tabs-for-woocommerce-border-color:   #E1E7F5;
  --kitgenix-custom-tabs-for-woocommerce-text-color:     #071B3A;
  --kitgenix-custom-tabs-for-woocommerce-text-muted:     #64748B;
  --kitgenix-custom-tabs-for-woocommerce-heading:        #071B3A;
  --kitgenix-custom-tabs-for-woocommerce-brand:          #214BFF;
  --kitgenix-custom-tabs-for-woocommerce-brand-strong:   #0F2C5C;
  --kitgenix-custom-tabs-for-woocommerce-radius:         16px;
  --kitgenix-custom-tabs-for-woocommerce-radius-sm:       12px;
  --kitgenix-custom-tabs-for-woocommerce-radius-xs:       8px;
  --kitgenix-custom-tabs-for-woocommerce-transition:     150ms ease;
  --kitgenix-custom-tabs-for-woocommerce-shadow-sm:      0 2px 8px rgba(7,27,58,.06);
  --kitgenix-custom-tabs-for-woocommerce-focus-ring:     0 0 0 3px rgba(33,75,255,.16);
}

@media (prefers-color-scheme: dark) {
  #kitgenix_custom_tabs_for_woocommerce_tabs {
    --kitgenix-custom-tabs-for-woocommerce-surface:      #0F2242;
    --kitgenix-custom-tabs-for-woocommerce-surface-alt:  #0A1830;
    --kitgenix-custom-tabs-for-woocommerce-border-color: #1E3358;
    --kitgenix-custom-tabs-for-woocommerce-text-color:   #EAF0FB;
    --kitgenix-custom-tabs-for-woocommerce-text-muted:   #93A2C2;
    --kitgenix-custom-tabs-for-woocommerce-heading:      #EAF0FB;
    --kitgenix-custom-tabs-for-woocommerce-brand:        #42B3FF;
    --kitgenix-custom-tabs-for-woocommerce-brand-strong: #6EC6FF;
  }
}

/* ----------------------------------------------------------------
  Panel layout
----------------------------------------------------------------- */
#kitgenix_custom_tabs_for_woocommerce_tabs .options_group {
  padding: 12px;
  box-sizing: border-box;
}

/* Panel header bar (Add Tab / Manage tabs row) */
#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--kitgenix-custom-tabs-for-woocommerce-surface-alt);
  border: 1px solid var(--kitgenix-custom-tabs-for-woocommerce-border-color);
  border-radius: var(--kitgenix-custom-tabs-for-woocommerce-radius-sm);
  margin-bottom: 12px;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-header__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--kitgenix-custom-tabs-for-woocommerce-heading);
  margin: 0;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-header__actions .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-header__actions .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 1;
}

/* Panel body wrapper */
#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-manager {
  background: var(--kitgenix-custom-tabs-for-woocommerce-surface);
  border: 1px solid var(--kitgenix-custom-tabs-for-woocommerce-border-color);
  border-radius: var(--kitgenix-custom-tabs-for-woocommerce-radius-sm);
  padding: 12px;
  margin-top: 12px;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-toolbar__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--kitgenix-custom-tabs-for-woocommerce-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-toolbar__select {
  min-width: 220px;
}

/* Intro / help notice strip */
#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-intro {
  padding: 10px 12px;
  background: var(--kitgenix-custom-tabs-for-woocommerce-surface-alt);
  border: 1px solid var(--kitgenix-custom-tabs-for-woocommerce-border-color);
  border-left: 3px solid var(--kitgenix-custom-tabs-for-woocommerce-brand);
  border-radius: var(--kitgenix-custom-tabs-for-woocommerce-radius-sm);
  margin: 0 0 12px;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-intro__text {
  margin: 0;
  padding: 0;
  color: var(--kitgenix-custom-tabs-for-woocommerce-text-muted);
  font-size: 13px;
  line-height: 1.4;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-intro__text + .kitgenix-custom-tabs-for-woocommerce-panel-intro__text {
  margin-top: 6px;
}

/* ----------------------------------------------------------------
  WooCommerce product data tab icon (left sidebar)
----------------------------------------------------------------- */
#woocommerce-product-data ul.wc-tabs li.kitgenix-custom-tabs-for-woocommerce-product-data-tab a::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 8px 0 0;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url('../images/logos/kitgenix-wordpress-admin-menu-favicon.svg') no-repeat center / contain;
  mask: url('../images/logos/kitgenix-wordpress-admin-menu-favicon.svg') no-repeat center / contain;
}

/* ----------------------------------------------------------------
  Panel table / tab list table
----------------------------------------------------------------- */
#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-table {
  margin-top: 10px;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-table table.widefat {
  border-radius: var(--kitgenix-custom-tabs-for-woocommerce-radius-sm);
  overflow: hidden;
  font-size: 13px;
  border-collapse: collapse;
  width: 100%;
}

/* Override: product panel is narrow – remove min-width set in admin.css */
#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-table-wrap table {
  min-width: 0;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-table table.widefat th,
#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-panel-table table.widefat td {
  vertical-align: middle;
  padding: 8px 10px;
}

/* Actions column – allow wrapping in narrow panel */
#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-actions {
  white-space: normal;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-actions .button {
  margin: 0 6px 6px 0;
}

/* ----------------------------------------------------------------
  Tab editor area (Quill)
----------------------------------------------------------------- */
#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-quill-editor {
  width: 100%;
  min-height: 140px;
  border: 1px solid var(--kitgenix-custom-tabs-for-woocommerce-border-color);
  border-radius: var(--kitgenix-custom-tabs-for-woocommerce-radius-xs);
  box-sizing: border-box;
  transition: border-color var(--kitgenix-custom-tabs-for-woocommerce-transition);
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-quill-editor:focus {
  outline: none;
  border-color: var(--kitgenix-custom-tabs-for-woocommerce-brand);
  box-shadow: var(--kitgenix-custom-tabs-for-woocommerce-focus-ring);
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-content-field label {
  float: none;
  width: auto;
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--kitgenix-custom-tabs-for-woocommerce-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-content-field .kitgenix-custom-tabs-for-woocommerce-quill,
#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-content-field .ql-toolbar,
#kitgenix_custom_tabs_for_woocommerce_tabs .kitgenix-custom-tabs-for-woocommerce-content-field .ql-container {
  max-width: none;
}

/* ----------------------------------------------------------------
  Modal – neutralise WC product panel CSS interference
----------------------------------------------------------------- */

/* Force correct text colour inside our modal regardless of WC styles */
#kitgenix-custom-tabs-for-woocommerce-modal .kitgenix-modal-dialog {
  color: var(--kitgenix-text-color, #071B3A) !important;
  -webkit-text-fill-color: currentColor;
}

#kitgenix-custom-tabs-for-woocommerce-modal .kitgenix-modal-dialog :is(
  label, p, span, a, h1, h2, h3, h4, li, div, td, th
) {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* Force field label display (WC product CSS hides/floats labels) */
#kitgenix-custom-tabs-for-woocommerce-modal .kitgenix-custom-tabs-for-woocommerce-field {
  display: grid !important;
}

#kitgenix-custom-tabs-for-woocommerce-modal .kitgenix-custom-tabs-for-woocommerce-field label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  float: none !important;
  width: auto !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

/* Undo WooCommerce float-based input positioning */
#kitgenix-custom-tabs-for-woocommerce-modal .kitgenix-custom-tabs-for-woocommerce-field :is(input, textarea, select) {
  float: none !important;
  margin-left: 0 !important;
  max-width: 100%;
}

/* ----------------------------------------------------------------
  Accessibility
----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #kitgenix_custom_tabs_for_woocommerce_tabs *,
  #kitgenix-custom-tabs-for-woocommerce-modal * {
    transition: none !important;
  }
}

/* ----------------------------------------------------------------
  Focus states & primary button – brand blue, matching every other
  Kitgenix admin surface (see kitgenix-admin-ui.css button-primary).
----------------------------------------------------------------- */

#kitgenix_custom_tabs_for_woocommerce_tabs :is(input[type="text"], input[type="url"], input[type="number"], select, textarea):focus,
#kitgenix_custom_tabs_for_woocommerce_tabs :is(input[type="text"], input[type="url"], input[type="number"], select, textarea):focus-visible {
  border-color: var(--kitgenix-custom-tabs-for-woocommerce-brand);
  box-shadow: var(--kitgenix-custom-tabs-for-woocommerce-focus-ring);
  outline: 2px solid transparent;
}

#kitgenix_custom_tabs_for_woocommerce_tabs :is(.button.button-primary, button.button-primary, a.button.button-primary) {
  border-color: var(--kitgenix-custom-tabs-for-woocommerce-brand);
  background: var(--kitgenix-custom-tabs-for-woocommerce-brand);
  color: #ffffff;
}

#kitgenix_custom_tabs_for_woocommerce_tabs :is(.button.button-primary, button.button-primary, a.button.button-primary):hover,
#kitgenix_custom_tabs_for_woocommerce_tabs :is(.button.button-primary, button.button-primary, a.button.button-primary):focus-visible {
  border-color: var(--kitgenix-custom-tabs-for-woocommerce-brand-strong);
  background: var(--kitgenix-custom-tabs-for-woocommerce-brand-strong);
  color: #ffffff;
}