/* =============================================================================
   rfq‐style.css
   ============================================================================= */

/* ───────────────────────────────────────────────────────────────────────────
   1) Keep the two‐column RFQ form layout (unchanged)
   ─────────────────────────────────────────────────────────────────────────── */
.rfq-form-container {
  padding: 20px;
}
:root {
  /* force the global content‐width to 900px */
  --wp--style--global--content-size: 900px;
}
.rfq-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.rfq-form-column { }
.rfq-section {
  margin-bottom: 20px;
}
.rfq-field {
  margin-bottom: 12px;
}
.rfq-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.rfq-field input[type="text"],
.rfq-field input[type="number"],
.rfq-field textarea,
.rfq-field select {
  width: 100%;
  max-width: 120px
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.edit-price-to-client {
  width:           110px   !important;}

.rfq-table-wrapper {
  width:           800px   !important;}




/* ---------------------------------------------------------------------------------
   2) Force the “master” #single_rfq_table to be fixed‐layout and a known width
      → DataTables will clone this same width into its scrollHead & scrollBody
   --------------------------------------------------------------------------------- */
#single_rfq_table {
  width:           1400px   !important; /* “total” table width; adjust as needed */
  table-layout:    fixed    !important;
  border-collapse: collapse;
  display:         table; /* ensures <th> and <td> align perfectly */
}
#single_rfq_table th,
#single_rfq_table td {
  padding:       6px 8px;
  border:        1px solid #ddd;
  text-align:    left;
  word-wrap:     break-word;
  box-sizing:    border-box;
  display:       table-cell !important;
}

/* ---------------------------------------------------------------------------------
   3) Allow only the scrollBody to scroll horizontally; pin the header at the top
   --------------------------------------------------------------------------------- */


#single_rfq_table_wrapper .dataTables_scroll {
  overflow: visible !important;
}
#single_rfq_table_wrapper .dataTables_scrollBody {
  overflow-x: auto   !important;
  overflow-y: auto   !important;
  max-height: none   !important;
}
#single_rfq_table_wrapper .dataTables_scrollHead {
  position: sticky       !important;
  top:      0            !important;
  z-index:  30           !important;
  background: #ffffff    !important;
}

/* ---------------------------------------------------------------------------------
   4) Force the cloned header & body tables to match exactly the “master” width
   --------------------------------------------------------------------------------- */
#single_rfq_table_wrapper .dataTables_scrollHeadInner table,
#single_rfq_table_wrapper .dataTables_scrollBody table {
  width:        1400px   !important;
  table-layout: fixed    !important;
}

/* ---------------------------------------------------------------------------------
   5) Strip out any inline widths DataTables might have injected
   --------------------------------------------------------------------------------- */
#single_rfq_table th[style],
#single_rfq_table td[style],
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th[style],
#single_rfq_table_wrapper .dataTables_scrollBody table td[style] {
  width:     auto    !important;
  max-width: none    !important;
}

/* ---------------------------------------------------------------------------------
   6) Style the <th> cells inside the pinned header
   --------------------------------------------------------------------------------- */
#single_rfq_table_wrapper .dataTables_scrollHeadInner table thead th {
  padding:       6px 8px         !important;
  border-bottom: 1px solid #ddd  !important;
  text-align:    left            !important;
  background:    #ffffff         !important;
  box-sizing:    border-box;
  display:       table-cell !important;
}

/* ---------------------------------------------------------------------------------
   7) Cap the “Quantity” input so it never overflows
   --------------------------------------------------------------------------------- */
#single_rfq_table td input.edit-quantity {
  max-width: 80px  !important;
  width:     100%  !important;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------------
   8) Light‐red background for any row marked “highlight-red”
   --------------------------------------------------------------------------------- */
.highlight-red {
  background-color: #ffe6e6;
}
#single_rfq_table tbody tr.highlight-red td {
  background-color: #ffe6e6;
}

/* =============================================================================
   9) FORCE EQUAL WIDTHS FOR SPECIFIC COLUMNS (header + body)
   =============================================================================
   → EACH block below must repeat the same width for:
      a)  #single_rfq_table th:nth-child(N)
      b)  #single_rfq_table td:nth-child(N)
      c)  #single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(N)
      d)  #single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(N)
   -------------------------------------------------------------------------------- */

/* Column 1 (“Select ‟checkbox”) – you can override if needed. By default it flexes. */
#single_rfq_table th:nth-child(1),
#single_rfq_table td:nth-child(1),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(1),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(1) {
  width:     60px  !important;
  max-width: 60px  !important;
}

/* Column 2 (“RFQ Client ID”) */
#single_rfq_table th:nth-child(2),
#single_rfq_table td:nth-child(2),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(2),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(2) {
  width:     60px !important;
  max-width: 60px !important;
}

/* Column 3 (“Client Name”) – allow wide text */
#single_rfq_table th:nth-child(3),
#single_rfq_table td:nth-child(3),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(3),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(3) {
  width:     100px !important;
  max-width: 100px !important;
}

/* Column 4 (“Product Name”) */
#single_rfq_table th:nth-child(4),
#single_rfq_table td:nth-child(4),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(4),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(4) {
  width:     100px !important;
  max-width: 100px !important;
}

/* Column 5 (“Quantity”) */
#single_rfq_table th:nth-child(5),
#single_rfq_table td:nth-child(5),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(5),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(5) {
  width:     80px  !important;
  max-width: 80px  !important;
}

/* Column 6 (“Suppliers”) */
#single_rfq_table th:nth-child(6),
#single_rfq_table td:nth-child(6),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(6),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(6) {
  width:     80px !important;
  max-width: 80px !important;
}

/* Column 7 (“Valid Quotes”) → 120px */
#single_rfq_table th:nth-child(7),
#single_rfq_table td:nth-child(7),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(7),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(7) {
  width:     80px !important;
  max-width: 80px !important;
}

/* Column 8 (“Target Price Bf VAT”) */
#single_rfq_table th:nth-child(8),
#single_rfq_table td:nth-child(8),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(8),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(8) {
  width:     120px !important;
  max-width: 120px !important;
}

/* Column 9 (“Currency”) → 120px */
#single_rfq_table th:nth-child(9),
#single_rfq_table td:nth-child(9),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(9),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(9) {
  width:     100px !important;
  max-width: 100px !important;
}

/* Column 10 (“Paid %”) → 60px */
#single_rfq_table th:nth-child(10),
#single_rfq_table td:nth-child(10),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(10),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(10) {
  width:     120px  !important;
  max-width: 120px  !important;
}

/* Column 11 (“Price to Client Bf VAT”) → 200px */
#single_rfq_table th:nth-child(11),
#single_rfq_table td:nth-child(11),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(11),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(11) {
  width:     80px !important;
  max-width: 80px !important;
}

/* Column 12 (“Notes”) → 300px */
#single_rfq_table th:nth-child(12),
#single_rfq_table td:nth-child(12),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(12),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(12) {
  width:     200px !important;
  max-width: 200px !important;
}

/* Column 13 (“Status”) */
#single_rfq_table th:nth-child(13),
#single_rfq_table td:nth-child(13),
#single_rfq_table_wrapper .dataTables_scrollHeadInner table th:nth-child(13),
#single_rfq_table_wrapper .dataTables_scrollBody table td:nth-child(13) {
  width:     120px !important;
  max-width: 120px !important;
}

/* =============================================================================
   Adjust “input” widths inside the table cells
   ============================================================================= */

/* Price to Client (column 11) → 120px */
#single_rfq_table td:nth-child(11) input.edit-price-to-client {
  max-width: 120px  !important;
  width:     100%  !important;
  box-sizing: border-box;
}

/* Target Price (column 8) → 120px */
#single_rfq_table td:nth-child(8) input.edit-target-price {
  width:     120px !important;
  max-width: 120px !important;
  box-sizing: border-box;
}

/* Notes (column 12) → 200px */
#single_rfq_table td:nth-child(12) input.edit-notes {
  width:     200px !important;
  max-width: 200px !important;
  box-sizing: border-box;
}

/* override both the “dataTables_wrapper” and the “.dataTables_scroll” element */
#single_rfq_table_wrapper,
#single_rfq_table_wrapper .dataTables_scroll {
  width: 1000px !important;
  max-width: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   FORCE DataTables’ cloned header (<div.dataTables_scrollHead>) to stick
   ─────────────────────────────────────────────────────────────────────────── */

/* 1) Let the outer “dataTables_scroll” container allow its header to escape:
   – without this, position:sticky on .dataTables_scrollHead will be clipped. */
#single_rfq_table_wrapper .dataTables_scroll {
  overflow: visible !important;
}

/* 2) Only the BODY should scroll; the header must stay pinned. */
#single_rfq_table_wrapper .dataTables_scrollBody {
  overflow-y: auto   !important; /* vertical scrolling if you capped height */
  overflow-x: auto   !important; /* horizontal scrolling */
}

/* 3) Finally, pin the cloned header at top of its container (the viewport). */
#single_rfq_table_wrapper .dataTables_scrollHead {
  position:   sticky   !important;
  top:        0         !important;
  z-index:    30        !important;
  background: #ffffff   !important;
}

/* 4) Ensure the inner <thead> cells stay in “table‐cell” mode when pinned */
#single_rfq_table_wrapper .dataTables_scrollHeadInner table thead th {
  display:       table-cell !important;
  box-sizing:    border-box  !important;
  padding:       6px 8px     !important;
  border-bottom: 1px solid #ddd !important;
  background:    #ffffff     !important;
  text-align:    left        !important;
}

.rfq-table-section{
    margin-left: 5px !important;
    padding: 0!important;
}

/* =============================================================================
   End of rfq‐style.css
   ============================================================================= */