button.bom-delete,
button.quant-edit,
button.inv-transfer,
button.inv-cycle,
th.inv_new_loc,
th.inv_new_quan,
button.text-edit,
button.lineitem-delete,
button.lineitem-edit,
button.lineitem-button {
    visibility: hidden;
}

tr.bom-row:hover button.bom-delete,
tr.bom-row:hover button.quant-edit,
tr.inv-row:hover button.inv-transfer,
tr.inv-row:hover button.inv-cycle,
div#shipto>div:hover button.text-edit,
tr.po-row:hover button.lineitem-delete,
tr.po-row:hover button.lineitem-edit,
tr.po-row:hover button.lineitem-button {
    visibility: visible;
}

tr.dragover-up {
    border-top: 3px solid black;
}

tr.dragover-down {
    border-bottom: 3px solid black;
}

button.quant-cancel,
button.quant-save,
button.inv-cancel,
button.inv-save,
td.inv_new_loc>select,
td.inv_new_quan>input,
tr.po-add button,
button.lineitem-cancel,
button.lineitem-save {
    display: none;
}

div#letterhead>img {
    float: left;
    margin-right: 1em;
}

.pre-line {
    white-space: pre-line;
}

.title {
    font-size: 1.25em;
    font-weight: bold;
    display: block;
}

.poheader {
    font-weight: bold;
    color: white;
    background-color: darkblue;
    display: block;
    text-transform: uppercase;
    padding: 0.25em 0.5em;
}

#poheader p {
    line-height: 1;
    font-size: 3em;
    font-weight: bold;
    text-transform: uppercase;
    color: darkblue;
    margin: 0;
    margin-bottom: 0.5em;
    padding: 0;
}

#poheader table {
    margin-top: 0.5em;
    justify-self: right;
    font-size: 1.25em;
}

#poheader td {
    padding: 0 0.5em;
    border: 1px solid black;
}

#poheader button,
#poheader a.btn {
    margin-top: 0.5em;
    margin-left: 0.5em;
    float: right;
    font-size: 1.25em;
}

div#vendor,
div#shipto,
div#terms,
div#lineitems {
    margin-top: 2em;
}

#terms table {
    width: 100%;
}

#terms th,
#lineitems th {
    font-weight: bold;
    color: white;
    background-color: darkblue;
    text-transform: uppercase;
    padding: 0.25em 0.5em;
    border: 2px solid darkblue;
}

#terms td {
    padding: 0.25em 0.5em;
    border: 2px solid darkblue;
}

tr.po-row td {
    border-left: 2px solid darkblue;
    border-right: 2px solid darkblue;
}

#lineitems table.table>:not(:first-child) {
    border-top: none;
}

#lineitems tr:nth-last-child(1 of .po-row)>td {
    border-bottom: 2px solid darkblue;
}

tr.receiving-section:not(:first-child)>td {
    border-top: 2px solid darkblue;
}

#lineitems tr:nth-last-child(1 of .po-row)>td.lineitem-edit-cell {
    border-bottom: none;
}

#lineitems td.lineitem-edit-cell {
    border-top: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
}

/* tr#subtotal {
    border-top: 2px solid darkblue;
} */

#lineitems tr.po-sub td,
#lineitems tr.po-total td {
    box-shadow: none;
}

#lineitems tr.po-sub td:first-of-type,
#lineitems tr.po-total td {
    border: none;
}

#lineitems tr.po-total td:last-of-type,
#lineitems tr.po-total td:nth-last-of-type(2) {
    border-top: double darkblue;
    font-weight: bold;
}

tr.po-add span.select2-container {
    width: 100% !important;
}

/* The finished-goods picker in the work-order action bar (edit_wo.html).
   Select2 writes an inline style="width:…px" measured off the hidden <select>,
   which in the bar's flex row collapses to almost nothing — hence !important,
   same reason as the rule above. The dropdown itself is safe in the sticky bar:
   DAL passes no dropdownParent, so select2 attaches it to <body>, outside the
   .sticky-top stacking context. */
.action-bar span.select2-container {
    width: 16rem !important;
}

/* Select2 pickers sized to match Bootstrap 5 form controls.

   Keyed on .select2-bs5, which sim_app/widgets.py:select2_attrs() puts on the
   container via data-container-css-class. That attribute is also what stops
   DAL's `containerCssClass: ':all:'` copying Bootstrap's .form-select onto the
   container — which used to draw a second chevron over select2's own arrow and
   offset the text inside an oversized box.

   These have to out-specify select2.css rather than out-order it: main.css is in
   <head>, but {{ form.media }} is emitted in the page *body* on some templates
   (_list_toolbar.html, part.html), so select2.css can always land later. Chaining
   .select2-bs5 onto the container gives 0,3,0 against select2's 0,2,0, and scopes
   the sizing to pickers that opted in. Do not "simplify" these selectors.

   --bs-* resolve from :root; the literal fallbacks cover the print/PDF templates,
   which don't load Bootstrap. */
.select2-container--default.select2-bs5 .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    background-color: var(--bs-body-bg, #fff);
}

.select2-container--default.select2-bs5 .select2-selection--single .select2-selection__rendered {
    /* Height minus the two borders, so the text centres. */
    line-height: calc(1.5em + 0.75rem);
    padding-left: 0.75rem;
    /* Room for the arrow. */
    padding-right: 2.25rem;
    color: var(--bs-body-color, #212529);
}

.select2-container--default.select2-bs5 .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem);
    right: 0.25rem;
}

/* Compact variant, matching .form-select-sm — table rows and filter panels. */
.select2-container--default.select2-bs5-sm .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px);
    border-radius: var(--bs-border-radius-sm, 0.25rem);
    font-size: 0.875rem;
}

.select2-container--default.select2-bs5-sm .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 0.5rem);
    padding-left: 0.5rem;
    padding-right: 1.75rem;
}

.select2-container--default.select2-bs5-sm .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.5rem);
}

/* Invalid state. Bootstrap paints the error border via .form-select.is-invalid on
   the <select>, which select2 hides — and since we deliberately stopped copying
   classes onto the container, that border no longer reaches anything visible. The
   container is inserted immediately after the <select> ($container.insertAfter in
   select2.full.js), so an adjacent-sibling selector recovers it without JS. */
select.is-invalid + .select2-container--default.select2-bs5 .select2-selection--single {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

select.is-invalid + .select2-container--default.select2-bs5.select2-container--open .select2-selection--single,
select.is-invalid + .select2-container--default.select2-bs5 .select2-selection--single:focus {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Focus ring, matching Bootstrap's — select2 puts :focus on the inner element. */
.select2-container--default.select2-bs5 .select2-selection--single:focus,
.select2-container--default.select2-bs5.select2-container--open .select2-selection--single {
    border-color: var(--bs-primary-border-subtle, #86b7fe);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* tr.po-row>td.lineitem-edit-cell { */
/* position: relative; */
/* border-color: transparent; */
/* padding: 0;
    width: 0; */
/* } */

/* td.lineitem-edit-cell::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2.5em;
    height: 100%;
} */

/* button.lineitem-edit {
    position: absolute;
    top: 0.25em;
    left: 0.5em;
    z-index: 10;
} */

input.po-input {
    width: 100%;
}

input.integer-field {
    width: 5em;
}

i.pre-icon {
    left: -1.5em;
    top: 0.25em;
}

#shipto textarea {
    field-sizing: content;
    ;
}

button.text-cancel,
button.text-save {
    display: none;
}

img.part-image {
    width: 640px;
    max-width: 100%;
}

/* django-tables2 sort indicators: a faint up/down on every sortable header,
   a solid arrow showing direction on the active column. (asc/desc rules follow
   the base rule so they win at equal specificity.) */
th.orderable>a {
    text-decoration: none;
    white-space: nowrap;
}

th.orderable>a::after {
    content: "\2195";
    /* ↕ sortable, inactive */
    margin-left: 0.4em;
    font-size: 0.8em;
    opacity: 0.3;
}

th.asc>a::after {
    content: "\25B2";
    /* ▲ ascending */
    opacity: 1;
}

th.desc>a::after {
    content: "\25BC";
    /* ▼ descending */
    opacity: 1;
}

/* Price-break expand caret: point right when collapsed, down when open. */
button.caret-toggle .bi-caret-right-fill {
    /* inline-block is required — transform is ignored on inline elements. */
    display: inline-block;
    transition: transform 0.15s ease-in-out;
}

button.caret-toggle:not(.collapsed) .bi-caret-right-fill {
    transform: rotate(90deg);
}