/**
 * Mapping Page Styles
 * WooCommerce to Shopify Sync Plugin
 * 
 * Styles for the field mapping page with enhanced table design
 * and custom fields mapping section.
 */

/* Mapping Page Container */
.w2ssyn-mapping-page {
  padding: var(--w2ssyn-spacing-xl) 0;
}

.w2ssyn-mapping-page__title {
  font-size: var(--w2ssyn-font-size-2xl);
  font-weight: var(--w2ssyn-font-weight-semibold);
  color: var(--w2ssyn-text-primary);
  margin-bottom: var(--w2ssyn-spacing-lg);
}

/* Mapping Button Group */
.w2ssyn-mapping-buttons {
  display: flex;
  gap: var(--w2ssyn-spacing-md);
  margin-bottom: var(--w2ssyn-spacing-xl);
  flex-wrap: wrap;
}

.w2ssyn-mapping-button {
  display: flex;
  align-items: center;
  gap: var(--w2ssyn-spacing-sm);
  padding: var(--w2ssyn-spacing-md) var(--w2ssyn-spacing-lg);
  background: var(--w2ssyn-bg-secondary);
  border: 2px solid var(--w2ssyn-border-color);
  border-radius: var(--w2ssyn-radius-md);
  color: var(--w2ssyn-text-primary);
  font-size: var(--w2ssyn-font-size-base);
  font-weight: var(--w2ssyn-font-weight-medium);
  cursor: pointer;
  transition: all var(--w2ssyn-transition-base);
}

.w2ssyn-mapping-button:hover {
  background: var(--w2ssyn-bg-hover);
  border-color: var(--w2ssyn-primary);
  transform: translateY(-2px);
  box-shadow: var(--w2ssyn-shadow-md);
}

.w2ssyn-mapping-button--active,
.w2ssyn-mapping-button.active {
  background: var(--w2ssyn-primary);
  color: #ffffff;
  border-color: var(--w2ssyn-primary);
}

.w2ssyn-mapping-button__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Field Mapping Section */
.w2ssyn-field-mapping {
  margin-bottom: var(--w2ssyn-spacing-2xl);
}

.w2ssyn-field-mapping__title {
  font-size: 20px;
  font-weight: var(--w2ssyn-font-weight-semibold);
  color: var(--w2ssyn-text-primary);
  margin-bottom: 20px;
}

.w2ssyn-field-mapping__card {
  background: var(--w2ssyn-bg-primary);
  border: 1px solid var(--w2ssyn-border-color);
  border-radius: var(--w2ssyn-radius-lg);
  padding: var(--w2ssyn-spacing-xl);
  box-shadow: var(--w2ssyn-shadow-md);
}

/* Field Mapping Table */
.w2ssyn-field-mapping__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--w2ssyn-spacing-lg);
}

.w2ssyn-field-mapping__table thead {
  background: var(--w2ssyn-primary);
  color: #ffffff;
}

.w2ssyn-field-mapping__table th {
  padding: var(--w2ssyn-spacing-md);
  text-align: left;
  font-weight: var(--w2ssyn-font-weight-semibold);
  font-size: var(--w2ssyn-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.w2ssyn-field-mapping__table tbody tr {
  border-bottom: 1px solid var(--w2ssyn-border-light);
  transition: background-color var(--w2ssyn-transition-fast);
}

.w2ssyn-field-mapping__table tbody tr:hover {
  background-color: var(--w2ssyn-bg-secondary);
}

.w2ssyn-field-mapping__table tbody tr:last-child {
  border-bottom: none;
}

.w2ssyn-field-mapping__table td {
  padding: var(--w2ssyn-spacing-md);
  color: var(--w2ssyn-text-primary);
  vertical-align: middle;
  font-size: var(--w2ssyn-font-size-base);
}

.w2ssyn-field-mapping__table .shopify-field {
  /* color: var(--w2ssyn-shopify-primary); */
  /* font-weight: var(--w2ssyn-font-weight-medium); */
}

.w2ssyn-field-mapping__table select {
  width: 100%;
  min-width: 150px;
  font-size: var(--w2ssyn-font-size-base);
}

/* Table Actions */
.w2ssyn-field-mapping__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--w2ssyn-spacing-md);
  padding-top: var(--w2ssyn-spacing-lg);
  margin-top: var(--w2ssyn-spacing-lg);
  border-top: 1px solid var(--w2ssyn-border-light);
}

/* Custom Fields Section */
.w2ssyn-custom-fields {
  margin-top: var(--w2ssyn-spacing-2xl);
}

.w2ssyn-custom-fields__title {
  font-size: var(--w2ssyn-font-size-xl);
  font-weight: var(--w2ssyn-font-weight-semibold);
  color: var(--w2ssyn-text-primary);
  margin-bottom: var(--w2ssyn-spacing-lg);
}

.w2ssyn-custom-fields__card {
  background: var(--w2ssyn-bg-primary);
  border: 1px solid var(--w2ssyn-border-color);
  border-radius: var(--w2ssyn-radius-lg);
  padding: var(--w2ssyn-spacing-xl);
  box-shadow: var(--w2ssyn-shadow-md);
}

.w2ssyn-custom-fields__description {
  font-size: var(--w2ssyn-font-size-sm);
  color: var(--w2ssyn-text-secondary);
  margin-bottom: var(--w2ssyn-spacing-lg);
  line-height: var(--w2ssyn-line-height-relaxed);
}

/* Custom Fields Table */
.w2ssyn-custom-fields__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--w2ssyn-spacing-lg);
}

.w2ssyn-custom-fields__table thead {
  background: var(--w2ssyn-bg-secondary);
}

.w2ssyn-custom-fields__table th {
  padding: var(--w2ssyn-spacing-md);
  text-align: left;
  font-weight: var(--w2ssyn-font-weight-semibold);
  font-size: var(--w2ssyn-font-size-sm);
  color: var(--w2ssyn-text-primary);
  border-bottom: 2px solid var(--w2ssyn-border-color);
}

.w2ssyn-custom-fields__table tbody tr {
  border-bottom: 1px solid var(--w2ssyn-border-light);
}

.w2ssyn-custom-fields__table tbody tr:hover {
  background-color: var(--w2ssyn-bg-secondary);
}

.w2ssyn-custom-fields__table td {
  padding: var(--w2ssyn-spacing-md);
  color: var(--w2ssyn-text-primary);
  vertical-align: middle;
}

.w2ssyn-custom-fields__table input[type="text"] {
  width: 100%;
  min-width: 200px;
}

/* Custom Fields Actions */
.w2ssyn-custom-fields__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w2ssyn-spacing-md);
  padding-top: var(--w2ssyn-spacing-lg);
  margin-top: var(--w2ssyn-spacing-lg);
  border-top: 1px solid var(--w2ssyn-border-light);
}

.w2ssyn-custom-fields__add-button {
  display: inline-flex;
  align-items: center;
  gap: var(--w2ssyn-spacing-xs);
}

/* Enable/Disable Toggle in Custom Fields */
.w2ssyn-custom-field-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--w2ssyn-spacing-sm);
}

/* Legacy Support */
.smack-Mapping-content {
  padding: var(--w2ssyn-spacing-xl) 0;
}

.smack-button-group {
  display: flex;
  gap: var(--w2ssyn-spacing-md);
  margin-bottom: var(--w2ssyn-spacing-xl);
  flex-wrap: wrap;
}

.smack-mapping-button {
  display: flex;
  align-items: center;
  gap: var(--w2ssyn-spacing-sm);
  padding: var(--w2ssyn-spacing-md) var(--w2ssyn-spacing-lg);
  background: var(--w2ssyn-bg-secondary);
  border: 2px solid var(--w2ssyn-border-color);
  border-radius: var(--w2ssyn-radius-md);
  color: var(--w2ssyn-text-primary);
  font-size: var(--w2ssyn-font-size-base);
  font-weight: var(--w2ssyn-font-weight-medium);
  cursor: pointer;
  transition: all var(--w2ssyn-transition-base);
}

.smack-mapping-button:hover {
  background: var(--w2ssyn-bg-hover);
  border-color: var(--w2ssyn-primary);
}

.smack-mapping-button.active {
  background: #2873af;
  color: white;
  border-color: #2873af;
}

.smack-mapping-button .w2ssyn-mapping-button__icon {
  filter: brightness(0);
  /* Black by default */
  transition: filter var(--w2ssyn-transition-base);
}

.smack-mapping-button.active .w2ssyn-mapping-button__icon {
  filter: brightness(0) invert(1);
  /* White when active */
}

.smack-table-container {
  background: var(--w2ssyn-bg-primary);
  border: 1px solid var(--w2ssyn-border-color);
  border-radius: var(--w2ssyn-radius-lg);
  padding: var(--w2ssyn-spacing-xl);
  box-shadow: var(--w2ssyn-shadow-md);
  margin-bottom: var(--w2ssyn-spacing-xl);
  overflow-x: auto;
}

.smack-table-container table {
  width: 100%;
  border-collapse: collapse;
}

.smack-table-container .smack-table-header {
  background: var(--w2ssyn-primary);
  color: #ffffff;
}

.smack-table-container .smack-table-header th {
  padding: var(--w2ssyn-spacing-md);
  text-align: left;
  font-weight: var(--w2ssyn-font-weight-semibold);
  /* font-size: var(--w2ssyn-font-size-sm); */
  font-size: inherit;
  text-transform: uppercase;
}

.smack-table-container tbody tr {
  border-bottom: 1px solid var(--w2ssyn-border-light);
}

.smack-table-container tbody tr:hover {
  background-color: var(--w2ssyn-bg-secondary);
}

.smack-table-container td {
  padding: var(--w2ssyn-spacing-md);
  color: var(--w2ssyn-text-primary);
  font-size: 16px;
}

.smack-table-container select {
  width: 100%;
  min-width: 150px;
  /* padding: var(--w2ssyn-spacing-xs) var(--w2ssyn-spacing-sm); */
  border: 1px solid var(--w2ssyn-border-color);
  border-radius: var(--w2ssyn-radius-sm);
  font-size: 16px;
  text-align: center;
}


.category-pro-badge {
  position: absolute !important;
  top: 0 !important;
  right: -25px !important;
  background: #ff0000 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  z-index: 2;
  opacity: 1;
  /* always bright */
}

/* Responsive Design */
@media (max-width: 767px) {

  .w2ssyn-mapping-buttons,
  .smack-button-group {
    flex-direction: column;
  }

  .w2ssyn-mapping-button,
  .smack-mapping-button {
    width: 100%;
    justify-content: center;
  }

  .smack-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .w2ssyn-field-mapping__table,
  .w2ssyn-custom-fields__table {
    min-width: 600px;
  }

  .w2ssyn-field-mapping__actions,
  .w2ssyn-custom-fields__actions {
    flex-direction: column;
  }

  .w2ssyn-field-mapping__actions .w2ssyn-btn,
  .w2ssyn-custom-fields__actions .w2ssyn-btn {
    width: 100%;
  }
}