button.bom-delete,
button.quant-edit,
button.inv-transfer,
button.inv-cycle,
th.inv_new_loc,
th.inv_new_quan,
button.row-edit,
button.lineitem-delete,
button.lineitem-edit,
button.lineitem-button {
    visibility: hidden;
}

/* :focus-within alongside every :hover -- visibility:hidden also drops a
   button from the tab order, so hover-only reveals were unreachable from the
   keyboard (tabbing into the row's inputs now reveals its buttons). */
tr.bom-row:hover button.bom-delete,
tr.bom-row:focus-within button.bom-delete,
tr.bom-row:hover button.quant-edit,
tr.bom-row:focus-within button.quant-edit,
tr.inv-row:hover button.inv-transfer,
tr.inv-row:focus-within button.inv-transfer,
tr.inv-row:hover button.inv-cycle,
tr.inv-row:focus-within button.inv-cycle,
[data-edit-group]:hover button.row-edit,
[data-edit-group]:focus-within button.row-edit,
tr.po-row:hover button.lineitem-delete,
tr.po-row:focus-within button.lineitem-delete,
tr.po-row:hover button.lineitem-edit,
tr.po-row:focus-within button.lineitem-edit,
tr.po-row:hover button.lineitem-button,
tr.po-row:focus-within 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;
}

/* The row buttons live in the page margin beside the table, not in a column
   of their own: a 49px button column pushed the line tables past a 1280px
   viewport. Zero-width cell + absolutely positioned strip, the same trick the
   inline Ship To / terms editors use (span.inline-actions). */
#lineitems td.lineitem-edit-cell {
    position: relative;
    width: 0;
    padding: 0;
}

#lineitems .lineitem-actions {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 2;
}

/* Let entry fields shrink to their column instead of forcing it to their
   intrinsic width (208px text inputs, a 320px Select2). */
#lineitems td > input:not([type="checkbox"]):not([type="hidden"]) {
    width: 100%;
    min-width: 3.5rem;
}

#lineitems td > input[type="date"] {
    min-width: 8.5rem;
}

#lineitems td .select2-container {
    width: 100% !important;
    min-width: 8rem;
}

/* 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;
}

textarea.po-input {
    field-sizing: content;
}

/* Inline field editors (Ship To, and the PO terms row). The buttons are
   lifted OUT of the layout flow and pinned to the field's right edge, so the
   field itself runs the full width of its column and lines up with the
   read-only PO page and the line-items table. Sitting them beside the field
   is what used to hold this content short of the right margin.

   Visibility is driven by the `editing` class alone -- added by main.js on
   click, and rendered by the server when a save fails validation -- so there
   is one source of truth rather than inline styles racing these rules. */
[data-edit-group] {
    position: relative;
}

span.inline-actions {
    position: absolute;
    /* Beside the field, not on it: left:100% puts the strip just past the
       group's right edge, in the page margin, so it never covers content. */
    left: 100%;
    margin-left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.25rem;
    z-index: 2;
}

/* The address row's field is multi-line and grows, so its buttons anchor to
   the top rather than drifting to the middle of a tall box. */
span.inline-actions-top {
    top: 0.25rem;
    transform: none;
}

button.row-cancel,
button.row-save {
    display: none;
}

[data-edit-group].editing button.row-edit {
    display: none;
}

[data-edit-group].editing button.row-cancel,
[data-edit-group].editing button.row-save {
    display: inline-flex;
}

/* The terms buttons hang off #terms itself, below the table's last row. */
#terms > span.inline-actions {
    top: auto;
    bottom: 0.25rem;
    transform: none;
    /* #terms is a Bootstrap .row child, so it carries half a gutter of padding,
       and left:100% resolves against the PADDING box -- half a gutter right of
       the table's real edge. Ship To's group has no such padding, so without
       this correction the two strips sit in different columns. */
    margin-left: calc(0.5rem - var(--bs-gutter-x, 1.5rem) / 2);
}

/* Reserve the strip's column inside the container rather than letting it hang
   into the page margin. That margin is a function of the viewport and the
   container's breakpoint, and collapses to ~30-40px just above the 1200px and
   1400px breakpoints -- not enough for two buttons, so the save button would be
   clipped off the page. Every block on the page loses the same width, so they
   all stay flush with each other, which is the whole point. */
.po-edit-gutter {
    padding-right: 5.5rem;
}

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);
}

/* In-app help pages. */
.help-nav { position: sticky; top: 7rem; }
.help-toc a { text-decoration: none; }
.help-body { max-width: 52rem; line-height: 1.6; }
.help-body h2 { margin-top: 2.5rem; padding-top: 0.5rem; border-top: 1px solid var(--bs-border-color); }
.help-body h3 { margin-top: 1.75rem; }
/* Headings are anchor targets under a sticky navbar + action bar. */
.help-body :is(h2, h3) { scroll-margin-top: 7rem; }
.help-body img.help-shot { max-width: 100%; height: auto; border: 1px solid var(--bs-border-color); border-radius: 0.375rem; box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08); margin: 0.5rem 0 1rem; }
.help-body table { width: 100%; margin-bottom: 1rem; }
.help-body th, .help-body td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--bs-border-color); vertical-align: top; }
.help-body .admonition { border-left: 4px solid var(--bs-info); background: var(--bs-light); padding: 0.75rem 1rem; margin: 1rem 0; border-radius: 0.25rem; }
.help-body .admonition.warning { border-left-color: var(--bs-warning); }
.help-body .admonition-title { font-weight: 600; margin-bottom: 0.25rem; }
.help-body .admonition p:last-child { margin-bottom: 0; }