/**
 * Product Create / Edit — product-specific responsive rules.
 * Requires a parent .pos-form-page (see pos-form-responsive.css).
 *
 * Keeps table row structure for variable pricing JS (closest('tr')).
 * Compact stacked pricing with symmetric Exc/Inc flex pairs.
 */

/* ---------- Single-product pricing ---------- */
@media (max-width: 767px) {
  .pos-form-page .product-pricing-single.pos-form-pricing .table-responsive {
    border: 0;
    overflow: visible;
    margin: 0;
  }

  .pos-form-page .product-pricing-single table.add-product-price-table {
    display: block;
    width: 100%;
    border: 0;
    margin: 0;
  }

  .pos-form-page .product-pricing-single table.add-product-price-table > thead,
  .pos-form-page .product-pricing-single table.add-product-price-table > tbody {
    display: block;
    width: 100%;
  }

  .pos-form-page .product-pricing-single table.add-product-price-table > tbody > tr:first-child,
  .pos-form-page .product-pricing-single table.add-product-price-table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .pos-form-page .product-pricing-single table.add-product-price-table > tbody > tr:not(:first-child) {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--pos-form-pad, 8px);
    border: 1px solid var(--pos-form-border, #e2e8f0);
    border-radius: var(--pos-form-radius, 8px);
    background: #fff;
  }

  .pos-form-page .product-pricing-single table.add-product-price-table > tbody > tr:not(:first-child) > td {
    display: block;
    width: 100% !important;
    border: 0 !important;
    padding: 4px 0 !important;
  }

  .pos-form-page .product-pricing-single table.add-product-price-table > tbody > tr:not(:first-child) > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--pos-form-muted, #64748b);
    margin-bottom: 3px;
  }

  /* Symmetric Exc/Inc pair — equal flex halves (first pricing cell) */
  .pos-form-page .product-pricing-single table.add-product-price-table > tbody > tr:not(:first-child) > td:first-child {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
  }

  .pos-form-page .product-pricing-single table.add-product-price-table > tbody > tr:not(:first-child) > td:first-child[data-label]::before {
    flex: 1 1 100%;
  }

  .pos-form-page .product-pricing-single table.add-product-price-table td .col-sm-6 {
    float: none;
    flex: 1 1 calc(50% - 3px);
    width: calc(50% - 3px);
    max-width: calc(50% - 3px);
    padding: 0;
    margin: 0;
    min-width: 0;
    box-sizing: border-box;
  }

  .pos-form-page .product-pricing-single table.add-product-price-table td .col-sm-6 label {
    display: block;
    font-size: 11px;
    margin-bottom: 2px;
  }

  .pos-form-page .product-pricing-single table.add-product-price-table td br {
    display: none;
  }

  .pos-form-page .product-pricing-single.col-sm-12,
  .pos-form-page .col-sm-12.product-pricing-single {
    padding-left: 0;
    padding-right: 0;
    margin-top: 4px;
  }

  .pos-form-page .product-pricing-single.col-sm-12 > br {
    display: none;
  }
}

/* Narrow phones: stack Exc/Inc (too tight side-by-side) */
@media (max-width: 359px) {
  .pos-form-page .product-pricing-single table.add-product-price-table > tbody > tr:not(:first-child) > td:first-child {
    display: block !important;
  }

  .pos-form-page .product-pricing-single table.add-product-price-table td .col-sm-6 {
    flex: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 4px;
  }
}

/* ---------- Variable products ---------- */
@media (max-width: 767px) {
  .pos-form-page #product_variation_form_part.table-responsive,
  .pos-form-page .table-responsive:has(#product_variation_form_part) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
  }

  .pos-form-page table#product_variation_form_part {
    margin-bottom: 0;
  }

  .pos-form-page table#product_variation_form_part > thead {
    display: none;
  }

  .pos-form-page table#product_variation_form_part > tbody > tr.variation_row {
    display: block;
    margin-bottom: 8px;
    padding: var(--pos-form-pad, 8px);
    border: 1px solid var(--pos-form-border, #e2e8f0);
    border-radius: var(--pos-form-radius, 8px);
    background: #fff;
  }

  .pos-form-page table#product_variation_form_part > tbody > tr.variation_row > td {
    display: block;
    width: 100% !important;
    border: 0 !important;
    padding: 4px 0 !important;
  }

  .pos-form-page table.variation_value_table {
    display: block;
    width: 100%;
    border: 0;
    margin: 0;
  }

  .pos-form-page table.variation_value_table > thead {
    display: none;
  }

  .pos-form-page table.variation_value_table > tbody {
    display: block;
    width: 100%;
  }

  .pos-form-page table.variation_value_table > tbody > tr {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding: 8px;
    border: 1px solid #eef2f7;
    border-radius: 6px;
    background: #f8fafc;
  }

  .pos-form-page table.variation_value_table > tbody > tr > td {
    display: block;
    width: 100% !important;
    border: 0 !important;
    padding: 3px 0 !important;
    text-align: left !important;
  }

  .pos-form-page table.variation_value_table > tbody > tr > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--pos-form-muted, #64748b);
    margin-bottom: 2px;
  }

  /* Symmetric Exc/Inc purchase pair (3rd cell = purchase prices) */
  .pos-form-page table.variation_value_table > tbody > tr > td:nth-child(3) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
  }

  .pos-form-page table.variation_value_table > tbody > tr > td:nth-child(3)[data-label]::before {
    flex: 1 1 100%;
  }

  .pos-form-page table.variation_value_table .width-50.f-left {
    float: none;
    flex: 1 1 calc(50% - 3px);
    width: calc(50% - 3px);
    max-width: calc(50% - 3px);
    margin: 0;
    min-width: 0;
  }

  .pos-form-page table.variation_value_table .input-group {
    margin-bottom: 0;
  }

  .pos-form-page .variation-image-cell .variation-upload-btn {
    min-height: 36px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
  }

  .pos-form-page .variation-image-preview {
    max-width: 100%;
    overflow-x: auto;
  }

  .pos-form-page #add_variation {
    min-height: 32px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .pos-form-page .option-div-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 6px;
  }

  .pos-form-page .option-div-group .col-sm-4,
  .pos-form-page .option-div-group .col-md-12 {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    float: none;
  }

  .pos-form-page .option-div-group .form-group {
    margin-bottom: 0;
  }
}

@media (max-width: 359px) {
  .pos-form-page table.variation_value_table > tbody > tr > td:nth-child(3) {
    display: block !important;
  }

  .pos-form-page table.variation_value_table .width-50.f-left {
    flex: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 4px;
  }
}

/* ---------- Combo ---------- */
@media (max-width: 767px) {
  .pos-form-page table.combo_product_table {
    display: block;
    width: 100%;
    border: 0;
    margin: 0;
  }

  .pos-form-page table.combo_product_table > thead {
    display: none;
  }

  .pos-form-page table.combo_product_table > tbody,
  .pos-form-page table.combo_product_table > tfoot {
    display: block;
    width: 100%;
  }

  .pos-form-page table.combo_product_table > tbody > tr {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding: 8px;
    border: 1px solid var(--pos-form-border, #e2e8f0);
    border-radius: 6px;
    background: #fff;
  }

  .pos-form-page table.combo_product_table > tbody > tr > td {
    display: block;
    width: 100% !important;
    border: 0 !important;
    padding: 3px 0 !important;
    text-align: left !important;
  }

  .pos-form-page table.combo_product_table > tbody > tr > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--pos-form-muted, #64748b);
    margin-bottom: 2px;
  }

  .pos-form-page table.combo_product_table input.quantity {
    width: 100% !important;
    max-width: 100%;
  }

  .pos-form-page table.combo_product_table > tfoot > tr {
    display: block;
    padding: 4px 0;
  }

  .pos-form-page table.combo_product_table > tfoot > tr > td {
    display: block;
    width: 100% !important;
    border: 0 !important;
    text-align: left !important;
    padding: 2px 0 !important;
  }

  .pos-form-page #search_product {
    min-height: var(--pos-form-input-h, 40px);
    font-size: 16px;
  }

  .pos-form-page .col-sm-8.col-sm-offset-2 {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------- Media / description ---------- */
@media (max-width: 767px) {
  .pos-form-page .product-description-label,
  .pos-form-page .image-label {
    width: auto;
    float: none;
  }

  .pos-form-page .img-thumbnail {
    max-width: 100%;
    height: auto;
    margin-bottom: 4px;
  }

  .pos-form-page .file-preview-image {
    max-width: 100% !important;
    height: auto !important;
  }

  .pos-form-page .mb-5 {
    margin-bottom: 8px !important;
  }
}

/* ---------- Desktop: leave tables as-is ---------- */
@media (min-width: 768px) {
  .pos-form-page .product-pricing-single table.add-product-price-table > tbody > tr:first-child {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}