/* Custom dropdowns (js/dropdown.js): square, site-styled; a search box on long lists */
.dd-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; opacity: 0; pointer-events: none; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; height: 38px; min-height: 0; padding: 0 8px 0 12px; border: 1px solid var(--field-line, #CFDAE4); border-radius: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.2; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.dd-btn:hover { border-color: var(--hover-line); }
.dd-btn:focus-visible, .dd-btn.open { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--ring); }
.dd-btn:disabled { background: var(--canvas); color: var(--slate); cursor: not-allowed; }
.dd-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-placeholder .dd-text { color: var(--slate); }
.dd-chev { flex: none; font-size: 20px; color: var(--slate); transition: transform .15s; }
.dd-btn.open .dd-chev { transform: rotate(180deg); color: var(--link); }

/* Contexts */
.top-select .dd-btn { width: auto; min-width: 150px; max-width: 230px; height: 32px; font-size: 13px; font-weight: 600; color: var(--head); }
.tbl-tools .dd-btn, .rp-opt .dd-btn { width: auto; min-width: 150px; max-width: 260px; height: 36px; }
.tbl .dd-btn { height: 34px; }
.dd-btn.le-in { display: flex; height: 36px; padding: 0 4px 0 9px; border-color: transparent; background: transparent; }
.dd-btn.le-in:hover { background: var(--canvas); border-color: var(--line); }
.dd-btn.le-in:focus-visible, .dd-btn.le-in.open { background: var(--surface); border-color: var(--blue); }
.dd-btn.le-in .dd-chev { font-size: 18px; }
.le-acct .dd-btn { width: auto; height: 28px; font-size: 12px; padding: 0 2px 0 6px; border-color: transparent; background: transparent; }
.le-acct .dd-btn:hover { background: var(--canvas); border-color: var(--line); }
@media (max-width: 900px) { .top-select .dd-btn { min-width: 0; max-width: 150px; } }

/* Popup */
.dd-pop { position: fixed; z-index: 450; display: none; flex-direction: column; max-height: 360px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(var(--shadow-rgb), .16); }
.dd-pop.open { display: flex; }
.dd-search { display: none; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); color: var(--slate); }
.dd-pop.has-search .dd-search { display: flex; }
.dd-search .ms { font-size: 19px; }
.dd-search input { flex: 1; min-width: 0; height: 32px; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink); }
.dd-list { overflow-y: auto; padding: 4px 0; overscroll-behavior: contain; }
.dd-group { padding: 10px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.dd-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 14px; color: var(--ink); cursor: pointer; }
.dd-opt span:first-child { min-width: 0; overflow-wrap: anywhere; }
.dd-opt.active { background: var(--sky-bg); }
.dd-opt.selected { font-weight: 600; color: var(--head); }
.dd-opt .ms { flex: none; font-size: 18px; color: var(--link); }
.dd-opt.disabled { color: var(--faint-3); cursor: default; }
.dd-empty { padding: 12px; font-size: 13.5px; color: var(--slate); }

.le-menu { max-height: 360px; padding: 4px 0; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(var(--shadow-rgb), .16); overscroll-behavior: contain; }
.le-menu-group { padding: 10px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.le-menu-item { padding: 8px 12px; font-size: 14px; }
.le-menu-item:hover, .le-menu-item.active { background: var(--sky-bg); }
.le-menu-item.selected .le-menu-name { font-weight: 600; color: var(--head); }
.le-menu-item > .ms { flex: none; font-size: 18px; color: var(--link); margin-left: -4px; }
.le-menu-empty { padding: 12px; font-size: 13.5px; }

/* Custom lists (line items): name with a small detail line, price on the right, "add custom line" row */
.dd-pop.dd-wide { max-height: 420px; }
.dd-opt.dd-rich { align-items: center; }
.dd-name { display: block; min-width: 0; flex: 1 1 auto; }
.dd-name small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--slate); }
.dd-right { flex: none; font-weight: 600; color: var(--head); font-variant-numeric: tabular-nums; }
.dd-custom { justify-content: flex-start; color: var(--link); font-weight: 600; border-top: 1px solid var(--line-soft); }
.dd-custom .ms { font-size: 18px; }

/* Line editor fields: always outlined, like the other form fields */
.le-in { border-color: var(--field-line); background: var(--surface); }
.le-in:hover { border-color: var(--hover-line); background: var(--surface); }
.dd-btn.le-in { border-color: var(--field-line); background: var(--surface); }
.dd-btn.le-in:hover { border-color: var(--hover-line); background: var(--surface); }
.le-item-btn { height: 36px; }
.le-item-btn .dd-text { font-weight: 500; }
.le-item-btn.dd-placeholder .dd-text { font-weight: 400; }

/* Rich-text description box */
.rte { border: 1px solid var(--field-line); background: var(--surface); }
.rte:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--ring); }
.rte-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.rte-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid transparent; background: transparent; color: var(--head); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.rte-btn:hover { background: var(--surface); border-color: var(--line); }
.rte-btn.on { background: var(--sky-bg); border-color: var(--accent-line); color: var(--link); }
.rte-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }
.rte-btn .ms { font-size: 19px; }
.rte-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--line); }
.rte-tbl { display: none; }
.rte.in-table .rte-tbl { display: inline-flex; }
.rte-body { min-height: 72px; max-height: 480px; padding: 10px 12px; overflow: auto; resize: vertical; font-size: 13.5px; line-height: 1.5; color: var(--ink); outline: none; }
.rte-body:empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; }
.rte-body p, .rich p, .rich div { margin: 0 0 6px; }
.rte-body p:last-child, .rich p:last-child { margin-bottom: 0; }
.rte-body ul, .rte-body ol, .rich ul, .rich ol { margin: 0 0 6px; padding-left: 22px; }
.rte-body table, .rich table { border-collapse: collapse; margin: 4px 0 8px; min-width: 50%; }
.rte-body td, .rte-body th, .rich td, .rich th { border: 1px solid var(--line); padding: 4px 8px; min-width: 48px; vertical-align: top; text-align: left; }
.rte-body th, .rich th { background: var(--canvas); font-weight: 600; }
.le-notes .rte { margin-top: 2px; }

/* Table size picker */
.rte-grid { position: fixed; z-index: 460; display: none; padding: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(var(--shadow-rgb), .16); }
.rte-grid.open { display: block; }
.rte-grid-cells { display: grid; grid-template-columns: repeat(8, 20px); gap: 3px; }
.rte-grid-cells button { width: 20px; height: 20px; padding: 0; border: 1px solid var(--field-line); background: var(--surface); cursor: pointer; }
.rte-grid-cells button.on { background: var(--sky-bg); border-color: var(--sky); }
.rte-grid-size { margin-top: 6px; font-size: 12px; color: var(--slate); text-align: center; }

/* Rich descriptions on printed documents */
.pdoc .rich table { font-size: 8pt; margin: 3px 0 4px; }
.pdoc .rich td, .pdoc .rich th { border-color: var(--phair); padding: 2px 6px; }
.pdoc .rich ul, .pdoc .rich ol { padding-left: 16px; margin: 2px 0; }
.pdoc .rich p { margin: 0 0 3px; }

/* Line number fields: no spinner arrows, so the whole box shows the value (fixed discounts, prices) */
.le-in[type=number] { -moz-appearance: textfield; appearance: textfield; }
.le-in[type=number]::-webkit-outer-spin-button, .le-in[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.le-disc { gap: 4px; }
.le-disc .le-in { min-width: 72px; padding-left: 6px; padding-right: 6px; }

/* Each line item in its own box: fields, description and actions together, with a gap between lines */
.le-table { border-collapse: separate; border-spacing: 0; }
.le-table thead th { border-bottom: 0; padding-bottom: 8px; }
.le-table tbody.le-block td { background: var(--surface); }
.le-table tbody.le-block tr:first-child td { border-top: 1px solid var(--line); }
.le-table tbody.le-block tr:last-child td { border-bottom: 1px solid var(--line); }
.le-table tbody.le-block td:first-child { border-left: 1px solid var(--line); padding-left: 12px; }
.le-table tbody.le-block td:last-child { border-right: 1px solid var(--line); padding-right: 12px; }
.le-table tbody.le-block + tbody.le-block tr:first-child td { border-top: 1px solid var(--line); }
.le-table tbody.le-gap td { height: 10px; padding: 0; border: 0; background: none; }
.le-table tbody.le-block tr.le-actions td { padding-bottom: 8px; }
@container (max-width: 820px) {
  .le-table tbody.le-block { border: 1px solid var(--line); padding: 0 12px; background: var(--surface); }
  .le-table tbody.le-block td, .le-table tbody.le-block td:first-child, .le-table tbody.le-block td:last-child,
  .le-table tbody.le-block tr:first-child td, .le-table tbody.le-block tr:last-child td { border: 0; padding-left: 0; padding-right: 0; }
  .le-table tbody.le-block + tbody.le-block { border-top: 1px solid var(--line); }
  .le-table tbody.le-gap { display: block; height: 10px; }
  .le-table tbody.le-gap tr, .le-table tbody.le-gap td { display: none; }
}
.le-table thead th:first-child { padding-left: 13px; }
.le-table thead th:last-child { padding-right: 13px; }
.le-add { border-top: 0; padding-top: 4px; }

/* An "add new" option (e.g. + New industry) */
.dd-opt.dd-new { color: var(--link); font-weight: 600; }