/* KpfDocumentCommon — shared admin preview chrome for invoices / estimates / DN / PO
   Complements kpf-invoice-document (public HTML). No border-radius changes. */

/* Preview action toolbar — one flex row (covers .pull-right._buttons AND nested .pull-right) */
body.app.admin.kodex-crm-admin .pull-right._buttons,
body.app.admin.kodex-crm-admin div.pull-right._buttons,
body.app.admin.kodex-crm-admin ._buttons.pull-right,
body.app.admin.kodex-crm-admin ._buttons > .pull-right,
body.app.admin.kodex-crm-admin #invoice ._buttons .pull-right,
body.app.admin.kodex-crm-admin #estimate ._buttons .pull-right,
body.app.admin.kodex-crm-admin #credit_note ._buttons .pull-right,
body.app.admin.kodex-crm-admin #proposal ._buttons .pull-right {
  float: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: auto;
  max-width: 100%;
  margin: 0 !important;
}

body.app.admin.kodex-crm-admin ._buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  max-width: 100%;
}

body.app.admin.kodex-crm-admin ._buttons .btn,
body.app.admin.kodex-crm-admin ._buttons .btn-group,
body.app.admin.kodex-crm-admin ._buttons .pull-right,
body.app.admin.kodex-crm-admin ._buttons .pull-left,
body.app.admin.kodex-crm-admin ._buttons > a,
body.app.admin.kodex-crm-admin ._buttons > button,
body.app.admin.kodex-crm-admin ._buttons > span,
body.app.admin.kodex-crm-admin ._buttons .pull-right > a,
body.app.admin.kodex-crm-admin ._buttons .pull-right > button,
body.app.admin.kodex-crm-admin ._buttons .pull-right > .btn-group,
body.app.admin.kodex-crm-admin ._buttons .pull-right > span {
  float: none !important;
  margin: 0 !important;
  vertical-align: middle;
}

body.app.admin.kodex-crm-admin ._buttons .btn,
body.app.admin.kodex-crm-admin ._buttons .btn-group > .btn {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12.5px !important;
  line-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

body.app.admin.kodex-crm-admin ._buttons .btn.btn-with-tooltip,
body.app.admin.kodex-crm-admin ._buttons a.btn.btn-default.btn-with-tooltip {
  width: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
}

/* Module convert wrappers (DN / PO) — unwrap into toolbar */
body.app.admin.kodex-crm-admin ._buttons .estimate_to_delivery_note,
body.app.admin.kodex-crm-admin ._buttons .estimate_to_purchase_order,
body.app.admin.kodex-crm-admin ._buttons .invoice_to_delivery_note,
body.app.admin.kodex-crm-admin ._buttons .invoice_to_purchase_order,
body.app.admin.kodex-crm-admin ._buttons .purchase_order_to_delivery_note,
body.app.admin.kodex-crm-admin ._buttons [class*='_to_delivery_note'],
body.app.admin.kodex-crm-admin ._buttons [class*='_to_purchase_order'] {
  display: contents;
  float: none !important;
  margin: 0 !important;
}

body.app.admin.kodex-crm-admin .row.mtop20:has(._buttons),
body.app.admin.kodex-crm-admin .row.mtop10:has(._buttons) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.app.admin.kodex-crm-admin .row.mtop20:has(._buttons) > [class*='col-'],
body.app.admin.kodex-crm-admin .row.mtop10:has(._buttons) > [class*='col-'] {
  width: auto !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 0 1 auto;
  max-width: 100%;
}

body.app.admin.kodex-crm-admin .row.mtop20:has(._buttons) > [class*='col-']:last-child,
body.app.admin.kodex-crm-admin .row.mtop10:has(._buttons) > [class*='col-']:last-child,
body.app.admin.kodex-crm-admin .row.mtop20:has(._buttons) > ._buttons,
body.app.admin.kodex-crm-admin .row.mtop10:has(._buttons) > ._buttons {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* Preview document panels */
body.app.admin.kodex-crm-admin #estimate-preview,
body.app.admin.kodex-crm-admin #invoice-preview,
body.app.admin.kodex-crm-admin #delivery_note-preview,
body.app.admin.kodex-crm-admin #purchase_order-preview,
body.app.admin.kodex-crm-admin #credit_note-preview,
body.app.admin.kodex-crm-admin .estimate-html-wrapper,
body.app.admin.kodex-crm-admin .invoice-html-wrapper,
body.app.admin.kodex-crm-admin .delivery_note-html-wrapper,
body.app.admin.kodex-crm-admin .purchase_order-html-wrapper {
  --kpf-doc-ink: var(--kodex-text-primary, #14141a);
  --kpf-doc-muted: var(--kodex-text-muted, #6e7180);
  --kpf-doc-line: var(--kodex-border-default, #d3d6e0);
  container-type: inline-size;
  container-name: kpf-doc-preview;
  background: var(--kpf-surface, #fff);
  border: 1px solid var(--kpf-border, #d3d6e0);
  box-shadow: var(--kpf-shadow-panel, none);
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
  min-width: 0;
  padding: clamp(12px, 2.2cqi, 18px);
}

body.app.admin.kodex-crm-admin #estimate-preview > .row,
body.app.admin.kodex-crm-admin #invoice-preview > .row,
body.app.admin.kodex-crm-admin #delivery_note-preview > .row,
body.app.admin.kodex-crm-admin #purchase_order-preview > .row,
body.app.admin.kodex-crm-admin #credit_note-preview > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
}

body.app.admin.kodex-crm-admin #estimate-preview .table-responsive,
body.app.admin.kodex-crm-admin #invoice-preview .table-responsive,
body.app.admin.kodex-crm-admin #delivery_note-preview .table-responsive,
body.app.admin.kodex-crm-admin #purchase_order-preview .table-responsive,
body.app.admin.kodex-crm-admin #credit_note-preview .table-responsive {
  border: 1px solid var(--kpf-border, #e4e6ec);
  background: var(--kpf-surface-muted, #f7f7f7);
  padding: 8px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Line items + totals — readable in split-view (~480–640px) */
body.app.admin.kodex-crm-admin #invoice-preview table.items,
body.app.admin.kodex-crm-admin #estimate-preview table.items,
body.app.admin.kodex-crm-admin #delivery_note-preview table.items,
body.app.admin.kodex-crm-admin #purchase_order-preview table.items,
body.app.admin.kodex-crm-admin #credit_note-preview table.items,
body.app.admin.kodex-crm-admin #invoice-preview .table.items,
body.app.admin.kodex-crm-admin #estimate-preview .table.items {
  width: 100% !important;
  max-width: 100%;
  margin-bottom: 0 !important;
  table-layout: auto;
}

body.app.admin.kodex-crm-admin #invoice-preview table.items thead th,
body.app.admin.kodex-crm-admin #estimate-preview table.items thead th,
body.app.admin.kodex-crm-admin #delivery_note-preview table.items thead th,
body.app.admin.kodex-crm-admin #purchase_order-preview table.items thead th,
body.app.admin.kodex-crm-admin #credit_note-preview table.items thead th {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--kpf-doc-muted, #6e7180) !important;
  background: color-mix(in srgb, #f4f5f7 85%, #fff) !important;
  border-color: var(--kpf-doc-line, #d3d6e0) !important;
  padding: 8px 10px !important;
  white-space: nowrap;
  vertical-align: bottom !important;
}

body.app.admin.kodex-crm-admin #invoice-preview table.items tbody td,
body.app.admin.kodex-crm-admin #estimate-preview table.items tbody td,
body.app.admin.kodex-crm-admin #delivery_note-preview table.items tbody td,
body.app.admin.kodex-crm-admin #purchase_order-preview table.items tbody td,
body.app.admin.kodex-crm-admin #credit_note-preview table.items tbody td {
  font-size: 13px !important;
  color: var(--kpf-doc-ink, #14141a) !important;
  border-color: var(--kpf-doc-line, #e4e6ec) !important;
  padding: 10px !important;
  vertical-align: top !important;
}

body.app.admin.kodex-crm-admin #invoice-preview table.items tbody td.description,
body.app.admin.kodex-crm-admin #estimate-preview table.items tbody td.description,
body.app.admin.kodex-crm-admin #invoice-preview table.items .description,
body.app.admin.kodex-crm-admin #estimate-preview table.items .description {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 120px;
}

body.app.admin.kodex-crm-admin #invoice-preview table.text-right,
body.app.admin.kodex-crm-admin #estimate-preview table.text-right,
body.app.admin.kodex-crm-admin #delivery_note-preview table.text-right,
body.app.admin.kodex-crm-admin #purchase_order-preview table.text-right,
body.app.admin.kodex-crm-admin #credit_note-preview table.text-right {
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-bottom: 0;
}

body.app.admin.kodex-crm-admin #invoice-preview table.text-right td,
body.app.admin.kodex-crm-admin #estimate-preview table.text-right td,
body.app.admin.kodex-crm-admin #delivery_note-preview table.text-right td,
body.app.admin.kodex-crm-admin #purchase_order-preview table.text-right td {
  padding: 6px 0 !important;
  border-top: 0 !important;
  font-size: 13px !important;
}

/* Narrow preview column (invoice split view / tablet) */
@container kpf-doc-preview (max-width: 640px) {
  #invoice-preview > .row,
  #estimate-preview > .row,
  #delivery_note-preview > .row,
  #purchase_order-preview > .row,
  #credit_note-preview > .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  #invoice-preview > .row > [class*='col-'],
  #estimate-preview > .row > [class*='col-'],
  #delivery_note-preview > .row > [class*='col-'],
  #purchase_order-preview > .row > [class*='col-'],
  #credit_note-preview > .row > [class*='col-'] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #invoice-preview .table-responsive,
  #estimate-preview .table-responsive,
  #delivery_note-preview .table-responsive,
  #purchase_order-preview .table-responsive,
  #credit_note-preview .table-responsive {
    padding: 6px !important;
    border-radius: 0;
  }

  #invoice-preview table.items,
  #estimate-preview table.items,
  #delivery_note-preview table.items,
  #purchase_order-preview table.items,
  #credit_note-preview table.items {
    min-width: 420px;
  }

  #invoice-preview table.items thead th,
  #estimate-preview table.items thead th,
  #delivery_note-preview table.items thead th,
  #purchase_order-preview table.items thead th,
  #credit_note-preview table.items thead th {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }

  #invoice-preview table.items tbody td,
  #estimate-preview table.items tbody td,
  #delivery_note-preview table.items tbody td,
  #purchase_order-preview table.items tbody td,
  #credit_note-preview table.items tbody td {
    font-size: 12px !important;
    padding: 8px !important;
  }

  #invoice-preview table.text-right,
  #estimate-preview table.text-right,
  #delivery_note-preview table.text-right,
  #purchase_order-preview table.text-right,
  #credit_note-preview table.text-right {
    max-width: 100%;
    margin-left: 0;
  }
}

@container kpf-doc-preview (max-width: 420px) {
  #invoice-preview table.items,
  #estimate-preview table.items,
  #delivery_note-preview table.items,
  #purchase_order-preview table.items,
  #credit_note-preview table.items {
    min-width: 360px;
  }

  /* Stack numeric columns denser: keep description wrapping */
  #invoice-preview table.items tbody td:not(.description),
  #estimate-preview table.items tbody td:not(.description) {
    white-space: nowrap;
  }
}

/* Preview tabs (proposal / estimate / invoice right panel)
   Disable Perfex float+scroller chrome; wrap as a dense pill strip. */
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top,
html body.app.admin.kodex-crm-admin #wrapper .content .horizontal-scrollable-tabs.preview-tabs-top,
html body.app.admin.kodex-crm-admin #wrapper .content.kpf-sys-content .horizontal-scrollable-tabs.preview-tabs-top,
html body.app.admin.kodex-crm-admin #wrapper .content #proposal .preview-tabs-top,
html body.app.admin.kodex-crm-admin #wrapper .content #estimate .preview-tabs-top,
html body.app.admin.kodex-crm-admin #wrapper .content #invoice .preview-tabs-top,
html body.app.admin.kodex-crm-admin #wrapper .content .small-table-right-col .preview-tabs-top {
  position: relative !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}

html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top > .scroller,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top > .scroller.arrow-left,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top > .scroller.arrow-right,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top > .arrow-left,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top > .arrow-right {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  float: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  right: auto !important;
}

html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top > .horizontal-tabs {
  display: block !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  overflow-x: visible !important;
}

html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .horizontal-tabs .nav-tabs-horizontal {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  gap: 4px !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  white-space: normal !important;
  scroll-snap-type: none !important;
  border: 1px solid var(--kodex-border-default, #d3d6e0) !important;
  border-radius: 6px !important;
  background: var(--kodex-bg-canvas, #f4f5f8) !important;
  box-sizing: border-box !important;
}

html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs > li,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li {
  float: none !important;
  flex: 0 0 auto !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  scroll-snap-align: unset !important;
  scroll-snap-stop: normal !important;
}

html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs > li > a,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 7px 11px !important;
  height: auto !important;
  min-height: 32px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  color: var(--kodex-text-primary, #14141a) !important;
  background: transparent !important;
  text-decoration: none !important;
}

html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs > li > a:hover,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li > a:hover,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs > li > a:focus,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li > a:focus {
  color: #001d3a !important;
  background: color-mix(in srgb, #001bff 8%, #fff) !important;
  text-decoration: none !important;
}

/* Active tab on cobalt — white label (light + dark) */
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs > li.active > a,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs > li.active > a:hover,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs > li.active > a:focus,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li.active > a,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li.active > a:hover,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li.active > a:focus,
html body.app.admin.kodex-crm-admin #wrapper .content #proposal .preview-tabs-top .nav-tabs-horizontal > li.active > a,
html body.app.admin.kodex-crm-admin #wrapper .content #estimate .preview-tabs-top .nav-tabs-horizontal > li.active > a,
html body.app.admin.kodex-crm-admin #wrapper .content #invoice .preview-tabs-top .nav-tabs-horizontal > li.active > a {
  color: #ffffff !important;
  background: var(--kodex-action-primary, #001bff) !important;
  border-color: var(--kodex-action-primary, #001bff) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs > li.active > a .badge,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li.active > a .badge {
  color: #001bff !important;
  background: #ffffff !important;
}

html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs > li.tab-separator > a,
html body.app.admin.kodex-crm-admin #wrapper .content .preview-tabs-top .nav-tabs-horizontal > li.tab-separator > a {
  border-left: 0 !important;
}

/* Ensure invoice / proposal / estimate host / right column can shrink */
body.app.admin.kodex-crm-admin #invoice,
body.app.admin.kodex-crm-admin #proposal,
body.app.admin.kodex-crm-admin #estimate,
body.app.admin.kodex-crm-admin #credit_note,
body.app.admin.kodex-crm-admin .small-table-right-col,
body.app.admin.kodex-crm-admin .small-table-right-col #invoice,
body.app.admin.kodex-crm-admin .small-table-right-col #proposal,
body.app.admin.kodex-crm-admin .small-table-right-col #estimate,
body.app.admin.kodex-crm-admin .small-table-right-col #credit_note,
body.app.admin.kodex-crm-admin #invoice > .col-md-12,
body.app.admin.kodex-crm-admin #proposal > .col-md-12 {
  min-width: 0 !important;
  max-width: 100%;
}

body.app.admin.kodex-crm-admin #invoice .panel_s,
body.app.admin.kodex-crm-admin #invoice .panel-body,
body.app.admin.kodex-crm-admin #invoice .tab-content,
body.app.admin.kodex-crm-admin #invoice #tab_invoice,
body.app.admin.kodex-crm-admin #proposal .panel_s,
body.app.admin.kodex-crm-admin #proposal .panel-body,
body.app.admin.kodex-crm-admin #proposal .tab-content,
body.app.admin.kodex-crm-admin #estimate .panel_s,
body.app.admin.kodex-crm-admin #estimate .panel-body,
body.app.admin.kodex-crm-admin #estimate .tab-content {
  min-width: 0;
  max-width: 100%;
}

body.app.admin.kodex-crm-admin #invoice .panel-body,
body.app.admin.kodex-crm-admin #proposal .panel-body,
body.app.admin.kodex-crm-admin #estimate .panel-body {
  overflow: visible !important;
}

/* Tabs strip must not be clipped by panel chrome */
html body.app.admin.kodex-crm-admin #wrapper .content #proposal > .panel_s,
html body.app.admin.kodex-crm-admin #wrapper .content #estimate > .panel_s,
html body.app.admin.kodex-crm-admin #wrapper .content #invoice > .panel_s,
html body.app.admin.kodex-crm-admin #wrapper .content .small-table-right-col .panel_s:has(> .panel-body > .preview-tabs-top) {
  overflow: visible !important;
}

@media (max-width: 991px) {
  body.app.admin.kodex-crm-admin .pull-right._buttons,
  body.app.admin.kodex-crm-admin div.pull-right._buttons,
  body.app.admin.kodex-crm-admin ._buttons > .pull-right,
  body.app.admin.kodex-crm-admin #invoice ._buttons .pull-right {
    justify-content: flex-start !important;
  }

  body.app.admin.kodex-crm-admin ._buttons {
    justify-content: flex-start !important;
  }
}