 tag
    function parsePre (row, cls) {
      const pre = row.querySelector('pre.' + cls)
      if (!pre) return null
      try {
        return JSON.parse(pre.textContent)
      } catch {
        return null
      }
    }

    function getAttrValue (attr, state) {
      return state[attr]
    }

    function evalVisible (visible, state) {
      if (!visible) return true
      if (visible.if) {
        const cond = visible.if
        if (cond.op === 'eq') {
          return getAttrValue(cond.attribute, state) == cond.value
        }
        if (cond.op === 'in') {
          return (cond.value || []).includes(
            getAttrValue(cond.attribute, state)
          )
        }
        if (cond.op === 'or') {
          return cond.params.some(p => evalVisible({ if: p }, state))
        }
        if (cond.op === 'and') {
          return cond.params.every(p => evalVisible({ if: p }, state))
        }
      }
      return true
    }

    // Helper to parse value to correct type based on  type cell
    function parseValueByType (type, value) {
      if (type === 'integer' || type === 'number') {
        if (value === '' || value === undefined) return undefined
        const n = Number(value)
        return isNaN(n) ? value : n
      }
      if (type === 'boolean') {
        return value === 'true' || value === true
      }
      return value
    }

    const optionRows = Array.from(table.querySelectorAll('tr.row_option'))
    const schemaRows = Array.from(table.querySelectorAll('tr.row_schema'))
    const options = {}
    const objectSchemas = {}

    // First, process all option rows
    optionRows.forEach(row => {
      const id = row.id
      const inputDef = parsePre(row, 'input')
      const visibleDef = parsePre(row, 'visible')
      const code = row.querySelector('code')
      const name = code ? code.textContent.replace(/\u200b/g, '') : id
      options[id] = { row, inputDef, visibleDef, name, value: undefined }
      // If this is an object type, collect its schema rows
      if (inputDef && inputDef.displayType === 'object') {
        objectSchemas[name] = []
        options[id].isObject = true
      }
    })

    // Now, process all schema rows and assign them to their parent object
    schemaRows.forEach(row => {
      const code = row.querySelector('code')
      if (!code) return
      const dotName = code.textContent.replace(/\u200b/g, '')
      const [objectName, propName] = dotName.split('.', 2)
      const tds = row.querySelectorAll('td')
      const valueTd = tds[1]
      valueTd.innerHTML = ''
      // Get type from the type cell (third , index 2)
      let type = ''
      if (tds[2]) {
        type = tds[2].textContent.trim().split(' ')[0].toLowerCase()
      }
      // Use number input for number/integer, text otherwise
      const input = document.createElement('input')
      input.type = type === 'integer' || type === 'number' ? 'number' : 'text'
      input.className = 'Input Input_sm'
      input.style.minWidth = '120px'
      input.addEventListener('input', updateState)
      valueTd.appendChild(input)
      row._objectName = objectName
      row._propName = propName
      row._input = input
      row._type = type
      if (!objectSchemas[objectName]) objectSchemas[objectName] = []
      objectSchemas[objectName].push(row)
    })

    // Insert input fields into the "Value" column (second cell)
    Object.values(options).forEach(opt => {
      if (!opt.inputDef) return
      const tds = opt.row.querySelectorAll('td')
      const valueTd = tds[1]
      valueTd.innerHTML = ''
      let input
      if (opt.inputDef.displayType === 'string array') {
        const wrapper = document.createElement('div')
        wrapper.className = 'array-input-wrapper'
        function addField (val) {
          const div = document.createElement('div')
          div.style.display = 'flex'
          div.style.marginBottom = '2px'
          const inp = document.createElement('input')
          inp.type = 'text'
          inp.className = 'Input Input_sm'
          inp.style.minWidth = '120px'
          inp.value = val || ''
          inp.addEventListener('input', updateState)
          const btn = document.createElement('button')
          btn.type = 'button'
          btn.textContent = '−'
          btn.className = 'Button Button_xs'
          btn.style.marginLeft = '4px'
          btn.onclick = function () {
            wrapper.removeChild(div)
            updateState()
          }
          div.appendChild(inp)
          div.appendChild(btn)
          wrapper.appendChild(div)
        }
        addField()
        const addBtn = document.createElement('button')
        addBtn.type = 'button'
        addBtn.textContent = '+'
        addBtn.className = 'Button Button_xs'
        addBtn.style.marginTop = '2px'
        addBtn.onclick = function () {
          addField()
          updateState()
        }
        valueTd.appendChild(wrapper)
        valueTd.appendChild(addBtn)
        opt.input = wrapper
        opt.isArray = true
      } else if (opt.inputDef && opt.inputDef.displayType === 'object') {
        // No input for the object itself, handled by schema rows
        opt.isObject = true
      } else if (
        opt.inputDef.tag === 'input' &&
        opt.inputDef.type === 'checkbox'
      ) {
        // Boolean as select, default to false
        input = document.createElement('select')
        input.className = 'Select Select_sm'
        input.style.minWidth = '120px'
        ;['false', 'true'].forEach(val => {
          const o = document.createElement('option')
          o.value = val
          o.textContent = val
          input.appendChild(o)
        })
        input.value = 'false'
        input.addEventListener('change', updateState)
        valueTd.appendChild(input)
        opt.input = input
        opt.isBooleanSelect = true
      } else if (opt.inputDef.tag === 'select') {
        input = document.createElement('select')
        input.className = 'Select Select_sm'
        input.style.minWidth = '120px'
        ;(opt.inputDef.options || []).forEach(val => {
          const o = document.createElement('option')
          o.value = val
          o.textContent = val
          input.appendChild(o)
        })
        input.addEventListener('change', updateState)
        valueTd.appendChild(input)
        opt.input = input
      } else if (
        opt.inputDef.type === 'number' ||
        opt.inputDef.type === 'integer'
      ) {
        input = document.createElement('input')
        input.type = 'number'
        input.className = 'Input Input_sm'
        input.style.minWidth = '120px'
        input.addEventListener('input', updateState)
        valueTd.appendChild(input)
        opt.input = input
      } else if (opt.inputDef.type === 'text') {
        input = document.createElement('input')
        input.type = 'text'
        input.className = 'Input Input_sm'
        input.style.minWidth = '120px'
        input.addEventListener('input', updateState)
        valueTd.appendChild(input)
        opt.input = input
      }
    })

    let state = {}
    let userInteracted = false

    // Update state and UI
    function updateState () {
      userInteracted = true
      updateUI()
    }

    function updateUI () {
      // Gather values for normal options
      Object.values(options).forEach(opt => {
        if (!opt.input) return
        if (opt.isArray) {
          const arr = []
          Array.from(opt.input.querySelectorAll('input[type="text"]')).forEach(
            inp => {
              if (inp.value.trim() !== '') arr.push(inp.value.trim())
            }
          )
          opt.value = arr.length ? arr : undefined
        } else if (opt.isBooleanSelect) {
          opt.value = opt.input.value === 'true'
        } else if (opt.input.type === 'checkbox') {
          opt.value = opt.input.checked
        } else if (opt.input.type === 'number') {
          opt.value =
            opt.input.value === '' ? undefined : Number(opt.input.value)
        } else {
          opt.value = opt.input.value
        }
        state[opt.name] = opt.value
      })

      // Gather values for object schemas
      Object.keys(objectSchemas).forEach(objectName => {
        let anyFilled = false
        const obj = {}
        objectSchemas[objectName].forEach(row => {
          const val = row._input.value
          const parsed = parseValueByType(row._type, val)
          if (parsed !== undefined && parsed !== '') {
            obj[row._propName] = parsed
            anyFilled = true
          }
        })
        if (anyFilled) {
          state[objectName] = obj
        } else {
          delete state[objectName]
        }
      })

      // Show/hide rows based on visibility
      Object.values(options).forEach(opt => {
        if (!userInteracted) {
          opt.row.classList.remove('hidden-row')
          // Show all schema rows for objects
          if (opt.isObject && objectSchemas[opt.name]) {
            objectSchemas[opt.name].forEach(row =>
              row.classList.remove('hidden-row')
            )
          }
          return
        }
        if (!opt.visibleDef) {
          opt.row.classList.remove('hidden-row')
          if (opt.isObject && objectSchemas[opt.name]) {
            objectSchemas[opt.name].forEach(row =>
              row.classList.remove('hidden-row')
            )
          }
          return
        }
        const show = evalVisible(opt.visibleDef, state)
        opt.row.classList.toggle('hidden-row', !show)
        // For object, apply same logic to all schema rows
        if (opt.isObject && objectSchemas[opt.name]) {
          objectSchemas[opt.name].forEach(row =>
            row.classList.toggle('hidden-row', !show)
          )
        }
      })

      // Also handle enum rows (row_enum) and list rows (row_list)
      Array.from(table.querySelectorAll('tr.row_enum, tr.row_list')).forEach(
        row => {
          let prev = row.previousElementSibling
          while (prev && !prev.classList.contains('row_option'))
            prev = prev.previousElementSibling
          if (!prev) return
          const opt = options[prev.id]
          if (!opt) return
          row.classList.toggle(
            'hidden-row',
            prev.classList.contains('hidden-row')
          )
        }
      )

      // Update JSON snippet
      updateJsonSnippet()
    }

    // Build JSON snippet
    function updateJsonSnippet () {
      let name = ''
      const header = document.querySelector('#content-head h1')
      if (header) {
        name = header.textContent.trim()
      }
      const optionsObj = {}
      Object.values(options).forEach(opt => {
        if (!opt.row.classList.contains('hidden-row')) {
          if (opt.isObject) {
            if (state[opt.name]) {
              optionsObj[opt.name] = state[opt.name]
            }
          } else if (opt.isObjectArray) {
            const arrOpt = objectArrayOptions[opt.name]
            if (arrOpt && arrOpt.instances) {
              const arr = []
              arrOpt.instances.forEach(rowSet => {
                const obj = {}
                let anyFilled = false
                rowSet.forEach(row => {
                  if (row._input && row._propName) {
                    const val = row._input.value
                    const parsed = parseValueByType(row._type, val)
                    if (parsed !== undefined && parsed !== '') {
                      obj[row._propName] = parsed
                      anyFilled = true
                    }
                  }
                })
                if (anyFilled) arr.push(obj)
              })
              if (arr.length) optionsObj[opt.name] = arr
            }
          } else if (typeof opt.value === 'boolean') {
            optionsObj[opt.name] = opt.value
          } else if (opt.value !== undefined && opt.value !== '') {
            optionsObj[opt.name] = opt.value
          }
        }
      })
      const snippet = {
        name: name,
        options: optionsObj
      }
      const jsonPre = document.getElementById('json-snippet-pre')
      if (jsonPre) {
        jsonPre.textContent = JSON.stringify(snippet, null, 2)
      } else if (jsonDiv) {
        jsonDiv.textContent = JSON.stringify(snippet, null, 2)
      }
    }

    // Add JSON snippet display under the table in a separate div, with copy and reset buttons
    let jsonDiv = document.getElementById('json-snippet-box');
    let copyBtn, resetBtn;
    if (!jsonDiv) {
      jsonDiv = document.createElement('div');
      jsonDiv.id = 'json-snippet-box';
      jsonDiv.style.position = 'relative';
      jsonDiv.style.paddingTop = '2.5em';

      // JSON pretty display
      const jsonPre = document.createElement('pre');
      jsonPre.id = 'json-snippet-pre';
      jsonPre.style.margin = '0';
      jsonPre.style.fontFamily = 'monospace';
      jsonDiv.appendChild(jsonPre);

      // Copy button with icon and classes
      copyBtn = document.createElement('button');
      copyBtn.className = 'Button Button_sm ';
      copyBtn.type = 'button';
      copyBtn.style.position = 'absolute';
      copyBtn.style.top = '8px';
      copyBtn.style.right = '8px';
      copyBtn.style.zIndex = '10';
      copyBtn.innerHTML = ``;
      copyBtn.onclick = function () {
        navigator.clipboard.writeText(jsonPre.textContent);
        copyBtn.classList.add('copied');
        setTimeout(() => {
          copyBtn.classList.remove('copied');
        }, 1200);
      };
      jsonDiv.appendChild(copyBtn);

      // Reset button next to Copy button
      resetBtn = document.createElement('button');
      //resetBtn.textContent = 'Reset';
      resetBtn.innerHTML = ``
      resetBtn.className = 'Button Button_sm';
      resetBtn.type = 'button';
      resetBtn.style.position = 'absolute';
      resetBtn.style.top = '8px';
      resetBtn.style.right = '40px'; // Adjust spacing as needed
      resetBtn.style.zIndex = '10';
      resetBtn.onclick = function () {
        // Reset all option fields
        Object.values(options).forEach(opt => {
          if (!opt.input) return;
          if (opt.isArray) {
            while (opt.input.firstChild)
              opt.input.removeChild(opt.input.firstChild);
            const addField = val => {
              const div = document.createElement('div');
              div.style.display = 'flex';
              div.style.marginBottom = '2px';
              const inp = document.createElement('input');
              inp.type = 'text';
              inp.className = 'Input Input_sm';
              inp.style.minWidth = '120px';
              inp.value = val || '';
              inp.addEventListener('input', updateState);
              const btn = document.createElement('button');
              btn.type = 'button';
              btn.textContent = '−';
              btn.className = 'Button Button_xs';
              btn.style.marginLeft = '4px';
              btn.onclick = function () {
                opt.input.removeChild(div);
                updateState();
              };
              div.appendChild(inp);
              div.appendChild(btn);
              opt.input.appendChild(div);
            };
            addField();
          } else if (opt.isBooleanSelect) {
            opt.input.value = 'false';
          } else if (opt.input.tagName === 'SELECT') {
            opt.input.selectedIndex = 0;
          } else if (opt.input.type === 'text') {
            opt.input.value = '';
          }
          opt.value = undefined;
        });
        // Reset all schema fields
        schemaRows.forEach(row => {
          if (row._input) row._input.value = '';
        });
        userInteracted = false;
        updateUI();
      };
      jsonDiv.appendChild(resetBtn);

      // Insert jsonDiv after the table
      const tableContainer = table.closest('.rdmd-table-inner');
      tableContainer.parentNode.insertBefore(
        jsonDiv,
        tableContainer.nextSibling
      );
    }

    // Initial state: show all fields
    userInteracted = false;
    updateUI();

    // Attach event listeners to all inputs to trigger updateState (which sets userInteracted=true)
    Object.values(options).forEach(opt => {
      if (!opt.input) return;
      if (opt.isArray) {
        opt.input.addEventListener('input', updateState);
        opt.input.addEventListener('change', updateState);
      } else {
        opt.input.addEventListener('input', updateState);
        opt.input.addEventListener('change', updateState);
      }
    });
    // Attach event listeners to all schema inputs
    schemaRows.forEach(row => {
      if (row._input) {
        row._input.addEventListener('input', updateState);
        row._input.addEventListener('change', updateState);
      }
    });

    // --- FLEX WRAP TABLE AND SNIPPET BOX (vanilla JS) ---
    var tableEl = document.querySelector('.rdmd-table');
    var snippetEl = document.getElementById('json-snippet-box');
    if (tableEl && snippetEl) {
      var wrapper = document.createElement('div');
      wrapper.className = 'rdmd-table-flex-wrap';
      tableEl.parentNode.insertBefore(wrapper, tableEl);
      wrapper.appendChild(tableEl);
      wrapper.appendChild(snippetEl);
    }
    // --- END FLEX WRAP ---
  })()
});
*/
//-------------
function updateCSSRules () {
  let styleSheet

  let styleElement = document.querySelector('head style#dynamic-styles')
  if (!styleElement) {
    styleElement = document.createElement('style')
    styleElement.id = 'dynamic-styles'
    document.head.appendChild(styleElement)
  }

  styleSheet = styleElement.sheet

  const newRule =
    '.rm-PlaygroundResponse .APIResponse-action-button { display: none; }'
  styleSheet.insertRule(newRule, styleSheet.cssRules.length)

  // If you want to remove the old rule, we assume you have a method to handle cross-origin issues.
  // Since we can't reliably access cross-origin stylesheets, we won't attempt to remove the rule here.
  // However, you can manage it within your own styles if needed.
}

$(window).on('pageLoad', function (e, state) {

  /* ----------------------------------------------------
     1. For: /reference/api-summary
        Fix overflow only
     ---------------------------------------------------- */
  if (
    window.location.href ===
    'https://techdocs.akamai.com/property-mgr/reference/api-summary'
  ) {
    var tableInnerElements = document.querySelectorAll('.rdmd-table-inner');

    tableInnerElements.forEach(function (el) {
      el.style.removeProperty('overflow');
      el.style.cssText += 'overflow: unset !important;';
    });
  }

  /* ----------------------------------------------------
     2. For: /reference/validation-errors-copy
        Add word-break + class replacement
     ---------------------------------------------------- */
  if (
    window.location.href ===
    'https://techdocs.akamai.com/property-mgr/reference/validation-errors-copy'
  ) {

    // Add word-break to all tables
    const style = document.createElement("style");
    style.textContent = `
      table, table * {
        word-break: break-word !important;
        white-space: normal !important;
      }
    `;
    document.head.appendChild(style);

    // Replace .sticky-overflow → remove & add .sticky
    document.querySelectorAll('.rdmd-table-inner.sticky-overflow')
      .forEach(function (el) {
        el.classList.remove('sticky-overflow');
        el.classList.add('sticky');
      });
  }

});