@tailwind components;
@tailwind utilities;

/*
 * Product edit (WooCommerce) swatches panel
 *
 * Goal: align with Woo's native admin layout primitives on the product editor.
 * Keep styles strictly scoped to our panel.
 */
#b3wvs_swatches_panel {
  padding: 12px 0;
  box-sizing: border-box;
  width: 100%;
}

/* Color picker when portaled to body */
body > .wp-picker-holder {
  z-index: 100100 !important;
}

/* Ensure metaboxes container fills width */
#b3wvs_swatches_panel .wc-metaboxes {
  width: 100%;
}

/* Attribute accordion metabox - fill width like WooCommerce variations */
#b3wvs_swatches_panel .wc-metabox {
  width: 100%;
  margin: 0 0 9px;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  background: #fff;
}

#b3wvs_swatches_panel .wc-metabox:last-child {
  margin-bottom: 0;
}

/* Metabox header - full width, clickable area */
#b3wvs_swatches_panel .wc-metabox > h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  background: #f6f7f7;
  border-bottom: 1px solid #c3c4c7;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

#b3wvs_swatches_panel .wc-metabox.closed > h3 {
  border-bottom: none;
}

#b3wvs_swatches_panel .wc-metabox > h3:hover {
  background: #f0f0f1;
}

#b3wvs_swatches_panel .wc-metabox > h3 .attribute-label {
  flex: 1;
}

/* Allow overflow for color pickers but clip during accordion animations */
#b3wvs_swatches_panel .options_group,
#b3wvs_swatches_panel .wc-metaboxes {
  overflow: visible !important;
}

/* Metabox content must clip during slide animations to prevent overlap */
#b3wvs_swatches_panel .wc-metabox-content,
#b3wvs_swatches_panel .b3-wvs-attribute-metabox-content {
  overflow: hidden;
}

/* When metabox is open and animation complete, allow overflow for color pickers */
#b3wvs_swatches_panel .wc-metabox.open .wc-metabox-content,
#b3wvs_swatches_panel .wc-metabox.open .b3-wvs-attribute-metabox-content {
  overflow: visible;
}

#b3wvs_swatches_panel * {
  box-sizing: border-box;
}

/*
 * WooCommerce's product data panels apply generic label/input floats.
 * Our panel uses flexbox, so we must neutralize floats/forced widths
 * to prevent labels overlapping fields.
 */
#b3wvs_swatches_panel .b3-wvs-row label {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
}

#b3wvs_swatches_panel .b3-wvs-row input,
#b3wvs_swatches_panel .b3-wvs-row select,
#b3wvs_swatches_panel .b3-wvs-row textarea {
  float: none !important;
  width: auto;
  max-width: 100%;
}

/* Custom handlediv arrow for swatches accordions - avoids WordPress postbox handlers */
#b3wvs_swatches_panel .b3-wvs-handlediv {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
}

#b3wvs_swatches_panel .b3-wvs-handlediv::before {
  content: "\f142"; /* dashicons-arrow-up */
  display: inline-block;
  font: normal 20px/27px dashicons;
  speak: never;
  color: #787c82;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#b3wvs_swatches_panel .wc-metabox.closed .b3-wvs-handlediv::before {
  content: "\f140"; /* dashicons-arrow-down */
}

#b3wvs_swatches_panel .b3-wvs-handlediv:hover::before {
  color: #1d2327;
}

/* Metabox content spacing (Woo provides most styling) */
#b3wvs_swatches_panel .b3-wvs-attribute-metabox-content {
  padding: 10px 12px;
}

.b3-wvs-order-hint {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px dashed #c3c4c7;
  border-radius: 6px;
  background: #f6f7f7;
  color: #50575e;
  font-size: 12px;
}

.b3-wvs-order-hint-title {
  font-weight: 600;
  color: #1d2327;
  font-size: 12px;
}

.b3-wvs-order-hint-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.b3-wvs-order-hint-arrow {
  font-weight: 700;
}

.b3-wvs-order-hint-diagram {
  display: flex;
  align-items: center;
  gap: 6px;
}

.b3-wvs-order-hint-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #c3c4c7;
  font-size: 11px;
  font-weight: 600;
  color: #1d2327;
}

/* Row Layout: Woo-like fixed label column + flexible fields */
.b3-wvs-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 8px;
  border-bottom: 1px solid #e5e5e5;
}

.b3-wvs-row:last-child {
  border-bottom: none;
}

.b3-wvs-row:hover {
  background-color: #fafafa;
}

/* Column 1: Term info (fixed width label column) */
.b3-wvs-col-term {
  flex: 0 0 240px;
  max-width: 240px;
  min-width: 0;
}

.b3-wvs-term-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.b3-wvs-global-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #b6d4fe;
  background: #e7f3ff;
  color: #0a4b78;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.b3-wvs-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  background: #fff;
  color: #50575e;
  cursor: grab;
  user-select: none;
}

.b3-wvs-drag-handle:hover {
  background: #f6f7f7;
}

.b3-wvs-drag-handle:active {
  cursor: grabbing;
}

.b3-wvs-row-placeholder {
  height: 64px;
  border: 2px dashed #c3c4c7;
  background: #f6f7f7;
  margin: 6px 0;
}

/* Column 2: Fields (flexible, wraps groups like Woo fields) */
.b3-wvs-col-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-start;
}

/* Options live inline with fields (no separate 3rd column) */
.b3-wvs-col-options {
  display: flex;
  align-items: center;
  padding-top: 0;
  margin-top: 20px;
}

/* Content Styling */
.b3-wvs-term-info {
  padding-top: 4px;
}

.b3-wvs-term-name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #1d2327;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b3-wvs-term-slug {
  display: block;
  font-size: 11px;
  color: #646970;
  margin-top: 4px;
  background: #e0e0e0;
  padding: 2px 6px;
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b3-wvs-global-note {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid #2271b1;
  border-radius: 4px;
  background: #f6f7f7;
  color: #50575e;
  font-size: 11px;
  line-height: 1.4;
}

/* Field groups within the fields column */
.b3-wvs-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.b3-wvs-field-group label,
.b3-wvs-col-term label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #646970;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

/* Controls: flex row with wrapping */
.b3-wvs-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.b3-wvs-controls > * {
  min-width: 0; /* Critical for flex shrinking */
}

/* Type selector */
.b3-wvs-swatch-type {
  flex: 0 1 180px;
  height: 36px;
  line-height: 1.5;
  padding: 0 10px;
}

/* Label text input */
.b3-wvs-field-group input[type="text"] {
  flex: 1 1 240px;
  height: 36px;
  line-height: 1.5;
  padding: 0 10px;
  min-width: 0;
}

/* Add color button */
.b3-wvs-toggle-color {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}

/* Type selector always visible */
.b3-wvs-col-type {
  display: block;
}

/* Hide other columns by default */
.b3-wvs-row .b3-wvs-col-label,
.b3-wvs-row .b3-wvs-col-color {
  display: none;
}

/* Show based on type via JS-driven classes */
.b3-wvs-row.type-button .b3-wvs-col-label,
.b3-wvs-row.type-button.color-enabled .b3-wvs-col-color,
.b3-wvs-row.type-color .b3-wvs-col-color {
  display: block;
}

.b3-wvs-row-global.type-button .b3-wvs-col-color,
.b3-wvs-row-global.type-color .b3-wvs-col-color {
  display: block;
}

/* "Hide Text" option is not used in the product swatches panel */
.b3-wvs-col-options {
  display: none;
}

/* Color Picker Overrides */
.b3-wvs-color-control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  height: auto;
  flex-wrap: wrap;
  position: relative; /* Ensure proper stacking context for picker */
}

.b3-wvs-color-control > * {
  min-width: 0; /* Allow flex children to shrink */
}

.b3-wvs-color-control .wp-picker-container {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
}

/* The colored preview button */
.b3-wvs-color-control .wp-color-result {
  margin: 0 6px 0 0 !important;
  height: 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  vertical-align: top;
}

.b3-wvs-color-control .wp-color-result-text {
  display: none !important;
}

.b3-wvs-color-control .wp-picker-input-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.b3-wvs-color-control .wp-color-picker {
  flex: 0 1 80px;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 5px !important;
  min-width: 60px;
}

/* Hide the extra "Select Color" button */
.b3-wvs-color-control .wp-picker-input-wrap .button.button-small {
  display: none !important;
}

/* Ensure Clear button is visible but small */
.b3-wvs-color-control .wp-picker-clear {
  margin-left: 0 !important;
  height: 34px !important;
  line-height: 32px !important;
  padding: 0 10px !important;
  min-width: auto !important;
}

.b3-wvs-eyedropper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #8c8f94;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: #50575e;
  margin: 0;
  flex-shrink: 0;
}

.b3-wvs-eyedropper:hover {
  border-color: #2271b1;
  color: #2271b1;
}

.b3-wvs-eyedropper .dashicons {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/* Fix Iris Color Picker Layout - default styles before portal */
.b3-wvs-color-control .wp-picker-holder {
  z-index: 100100;
  margin: 0;
}

/* Close button for color picker */
.b3-wvs-picker-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: #fff;
  border-radius: 3px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #646970;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.b3-wvs-picker-close:hover {
  background: #f0f0f1;
  color: #d63638;
}

.b3-wvs-color-control .iris-picker {
  box-sizing: content-box !important;
}

.b3-wvs-color-control .iris-picker * {
  box-sizing: content-box !important;
}

/* Responsive: Collapse to 2 columns */
@media (max-width: 900px) {
  .b3-wvs-row {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "term fields"
      "actions actions";
  }

  .b3-wvs-col-term {
    grid-area: term;
  }

  .b3-wvs-col-fields {
    grid-area: fields;
  }

  .b3-wvs-col-options {
    grid-area: actions;
    padding-top: 0;
    justify-content: flex-start;
  }
}

/* Responsive: Collapse to 1 column */
@media (max-width: 600px) {
  .b3-wvs-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "term"
      "fields"
      "actions";
  }

  .b3-wvs-col-term {
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 4px;
  }

  .b3-wvs-term-header {
    justify-content: space-between;
  }

  .b3-wvs-col-options {
    justify-content: flex-start;
  }

  /* Allow controls to wrap */
  .b3-wvs-controls {
    flex-wrap: wrap;
  }

  /* Type selector takes full width on very small screens */
  .b3-wvs-swatch-type {
    flex: 1 1 100%;
  }
}

/* Loading state for panel refresh */
#b3wvs_swatches_panel.b3-wvs-panel-loading {
  position: relative;
  pointer-events: none;
}

#b3wvs_swatches_panel.b3-wvs-panel-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 3px solid #f0f0f1;
  border-top-color: #2271b1;
  border-radius: 50%;
  animation: b3-wvs-spin 0.8s linear infinite;
  z-index: 10;
}

@keyframes b3-wvs-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}