@media (max-width: 900px) {
  .invoice-output-column-control { display: none; }
}

@media (min-width: 901px) {
  /* The invoice action layer gives each form card its own stacking context.
     Lift only the product card while open so later sibling cards cannot cover the popover. */
  #invoiceForm.invoice-reference-layout .invoice-products:has(.invoice-output-column-popover.is-open) {
    z-index: 80 !important;
    overflow: visible !important;
  }

  #invoiceForm.invoice-reference-layout .invoice-output-column-control {
    position: relative;
    z-index: 81;
  }

  #invoiceForm.invoice-reference-layout .invoice-output-column-button {
    min-width: 82px;
    color: var(--store-theme);
    border-color: var(--store-theme-border);
    background: #fff;
  }
  #invoiceForm.invoice-reference-layout .invoice-output-column-button:hover,
  #invoiceForm.invoice-reference-layout .invoice-output-column-button[aria-expanded="true"] {
    border-color: var(--store-theme);
    background: var(--store-theme-faint);
    color: var(--store-theme);
    box-shadow: 0 0 0 3px var(--store-theme-soft);
  }

  #invoiceForm.invoice-reference-layout .invoice-output-column-popover {
    position: absolute;
    z-index: 90;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    width: 320px;
    padding: 14px;
    border: 1px solid var(--store-theme-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--store-theme) 16%, transparent);
  }

  #invoiceForm.invoice-reference-layout .invoice-output-column-popover.is-open { display: block; }
  #invoiceForm.invoice-reference-layout .invoice-output-column-popover header { margin-bottom: 10px; }
  #invoiceForm.invoice-reference-layout .invoice-output-column-popover header b { display: block; color: #17251f; font-size: 15px; }
  #invoiceForm.invoice-reference-layout .invoice-output-column-popover header small { display: block; margin-top: 3px; color: #7a8983; font-size: 12px; }
  #invoiceForm.invoice-reference-layout .invoice-output-column-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
  #invoiceForm.invoice-reference-layout .invoice-output-column-grid label {
    display: flex;
    align-items: center;
    min-height: 34px;
    gap: 8px;
    padding: 0 7px;
    border-radius: 6px;
    color: #33463f;
    font-size: 13px;
    cursor: pointer;
  }
  #invoiceForm.invoice-reference-layout .invoice-output-column-grid label:hover { background: var(--store-theme-faint); }
  #invoiceForm.invoice-reference-layout .invoice-output-column-grid label:has(input:checked) {
    background: var(--store-theme-faint);
    color: var(--store-theme);
    box-shadow: inset 0 0 0 1px var(--store-theme-border);
  }
  #invoiceForm.invoice-reference-layout .invoice-output-column-grid input {
    flex: 0 0 16px;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0;
    accent-color: var(--store-theme);
  }
  #invoiceForm.invoice-reference-layout .invoice-output-column-grid em { margin-left: auto; color: #8b9893; font-size: 11px; font-style: normal; }
  #invoiceForm.invoice-reference-layout .invoice-output-column-popover footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #edf1ef; }
  #invoiceForm.invoice-reference-layout .invoice-output-column-popover footer button { min-width: 76px; height: 32px; padding: 0 10px; border: 1px solid var(--store-theme-border); border-radius: 6px; background: #fff; color: var(--store-theme); font-size: 12px; }
  #invoiceForm.invoice-reference-layout .invoice-output-column-popover footer button:hover {
    border-color: var(--store-theme);
    background: var(--store-theme-faint);
    box-shadow: 0 0 0 2px var(--store-theme-soft);
  }
}

.customer-document-output .sale-doc-table th[data-output-column] { width: auto !important; }
.customer-document-output .sale-doc-table th[data-output-column="sequence"] { width: 4.5% !important; }
.customer-document-output .sale-doc-table th[data-output-column="model"] { width: 12% !important; }
.customer-document-output .sale-doc-table th[data-output-column="processing"] { width: 18% !important; }