/**
 * Bootstrap 3 → 5 compatibility layer.
 *
 * The app migrates to Bootstrap 5 page by page; this file keeps the ~190
 * unmigrated views rendering correctly in the meantime by re-implementing the
 * BS3 class names they use on top of BS5 variables. Delete rules here as the
 * corresponding pages get properly migrated.
 */

/* ---------------------------------------------------------------- panels */
.panel {
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.panel-heading {
    padding: 10px 15px;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: calc(var(--bs-border-radius, .375rem) - 1px) calc(var(--bs-border-radius, .375rem) - 1px) 0 0;
}
.panel-body { padding: 15px; }
.panel-footer {
    padding: 10px 15px;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.panel-title { margin: 0; font-size: 16px; }
.panel-default > .panel-heading { color: var(--bs-body-color, #333); }
.panel-primary > .panel-heading { color: #fff; background-color: var(--bs-primary, #0d6efd); }
.panel-danger > .panel-heading  { color: #58151c; background-color: #f8d7da; }
.panel-warning > .panel-heading { color: #664d03; background-color: #fff3cd; }
.panel-success > .panel-heading { color: #0a3622; background-color: #d1e7dd; }
.panel-info > .panel-heading    { color: #055160; background-color: #cff4fc; }

/* ----------------------------------------------------------------- wells */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
}
.well h4 { font-size: 16px; font-weight: 600; }

/* --------------------------------------------------------------- buttons */
.btn-default {
    --bs-btn-color: #333;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #ccc;
    --bs-btn-hover-color: #333;
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-hover-border-color: #adadad;
    --bs-btn-active-bg: #e6e6e6;
    --bs-btn-active-border-color: #adadad;
    --bs-btn-active-color: #333;
    --bs-btn-disabled-color: #333;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #ccc;
}
.btn-xs {
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .3rem;
    --bs-btn-font-size: .75rem;
    --bs-btn-border-radius: .25rem;
}

/* BS3 sizing aliases */
.btn-sm, .input-sm { border-radius: .25rem; }
.input-sm { padding: .25rem .5rem; font-size: .875rem; }

/* ---------------------------------------------------------------- labels */
.label {
    display: inline-block;
    padding: .3em .6em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-default { background-color: #777; }
.label-primary { background-color: var(--bs-primary, #0d6efd); }
.label-success { background-color: var(--bs-success, #198754); }
.label-info    { background-color: var(--bs-info, #0dcaf0); color: #000; }
.label-warning { background-color: var(--bs-warning, #ffc107); color: #000; }
.label-danger  { background-color: var(--bs-danger, #dc3545); }

/* badge (BS3 gray pill inside nav/buttons) */
.badge { background-color: #777; }
.nav-tabs .badge { vertical-align: middle; }

/* ---------------------------------------------------------------- tables */
.table-condensed > :not(caption) > * > * { padding: .25rem .5rem; }
.table > tbody > tr.success > td { background-color: #d1e7dd; }
.table > tbody > tr.danger > td  { background-color: #f8d7da; }
.table > tbody > tr.warning > td { background-color: #fff3cd; }
.table > tbody > tr.info > td    { background-color: #cff4fc; }
.table > tbody > tr.active > td  { background-color: var(--bs-tertiary-bg, #f8f9fa); }
tr.held > td { background-color: #e2d9f3 !important; }

/* --------------------------------------------------------------- helpers */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }
.text-right { text-align: right !important; }
.text-left  { text-align: left !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }
.caret {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* BS3 responsive visibility utilities (used across many views) */
@media (max-width: 767.98px) {
    .hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-sm { display: none !important; }
}
.visible-xs, .visible-sm { display: none !important; }
@media (max-width: 767.98px) {
    .visible-xs { display: block !important; }
    tr.visible-xs { display: table-row !important; }
    td.visible-xs, th.visible-xs { display: table-cell !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .visible-sm { display: block !important; }
    tr.visible-sm { display: table-row !important; }
    td.visible-sm, th.visible-sm { display: table-cell !important; }
}
/* combined helper rows used like: class="hidden visible-sm visible-xs" */
@media (max-width: 991.98px) {
    tr.hidden.visible-sm.visible-xs, tr.hidden.visible-xs.visible-sm { display: table-row !important; }
    .hidden.visible-sm.visible-xs, .hidden.visible-xs.visible-sm { display: block !important; }
}
@media (max-width: 991.98px) {
    tr.visible.hidden-sm.hidden-xs { display: none !important; }
}

/* --------------------------------------------------------------- forms */
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
.form-horizontal .control-label { text-align: right; }
.control-label { margin-bottom: .25rem; font-weight: 600; }
.help-block { display: block; margin-top: 5px; color: var(--bs-secondary-color, #6c757d); font-size: .875em; }
.form-group { margin-bottom: 1rem; }
.checkbox, .radio { margin-top: .5rem; margin-bottom: .5rem; }
.checkbox label, .radio label { font-weight: 400; }
.input-group-addon {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
}

/* ------------------------------------------------------------------ tabs */
/* Legacy panes use "tab-pane fade in active" (BS3). BS5 fade needs .show,
   which old markup never sets — force initial active panes visible; BS5 JS
   adds .show on subsequent switches. */
.tab-content > .tab-pane.fade.active { opacity: 1; }

/* --------------------------------------------------- form-inline / block */
/* BS3 .form-inline flowed its .form-groups horizontally; BS5 dropped the
   class, so e.g. the ship autocorrect buttons stacked as full rows. */
.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.form-inline .form-group { display: flex; align-items: center; gap: 4px; margin-bottom: 0; }
/* BS3 .btn-block (BS5 dropped it) — e.g. the ship form's "SW" button. */
.btn-block { display: block; width: 100%; }

/* ------------------------------------------------------------ grid (xs) */
/* BS3 col-xs-* = always-horizontal columns; BS5 dropped them, so the divs
   fell back to full width (e.g. the ship form's "SW" button became a huge
   floating bar on mobile). Recreate them as plain col-N equivalents. */
.col-xs-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }
.col-xs-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

/* ---------------------------------------------------------------- modal */
/* BS3 markup: .modal .close button in header. The button sits BEFORE the
   title in legacy markup — in BS5's flex header that pushed the title to the
   right; order:9 keeps the title left and the × right regardless of DOM order. */
.modal-header .close {
    background: none;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    opacity: .5;
    margin: -.5rem -.5rem -.5rem auto;
    padding: .5rem;
    order: 9;
}
.modal-header .close:hover { opacity: .8; }
/* BS3 dialog width feel */
@media (min-width: 992px) {
    .modal-dialog.modal-lg-compat { max-width: 900px; }
}

/* ----------------------------------------------------------- dropdowns */
.dropdown-menu-right { right: 0; left: auto; }
.dropdown-menu > li > a {
    display: block;
    padding: .25rem 1rem;
    clear: both;
    color: var(--bs-body-color, #212529);
    text-decoration: none;
    white-space: nowrap;
}
.dropdown-menu > li > a:hover { background-color: var(--bs-tertiary-bg, #f8f9fa); }
.dropdown-menu .divider { height: 0; margin: .5rem 0; overflow: hidden; border-top: 1px solid var(--bs-border-color, #dee2e6); }

/* -------------------------------------------------- orders bulk actions */
/* Keep the Ship-Multiple/Miller/Manifest bar reachable while scrolling the
   order list on phones. */
@media (max-width: 991.98px) {
    .orders-bulk-actions {
        position: sticky;
        top: 56px;
        z-index: 100;
        background: var(--bs-body-bg, #fff);
        padding: 6px 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
        margin-left: 0;
        margin-right: 0;
    }
}

/* Wide tables scroll inside their own container instead of stretching the page. */
div.dt-container { overflow-x: auto; }
@media (max-width: 991.98px) {
    .container-fluid > table, .container-fluid table.data-table { display: block; overflow-x: auto; }
    /* clip, not hidden: overflow-x:hidden on body breaks position:sticky
       descendants (ship nav row). */
    body { overflow-x: clip; }
}

/* ------------------------------------------------------------ mobile UX */
/* NOTE: the earlier blanket 42px min-height on buttons/inputs made the whole
   mobile UI oversized (user feedback) — density now lives in theme.css's
   mobile block; only primary ship-nav buttons keep extra padding there. */
@media (max-width: 767.98px) {
    input[type="checkbox"], input[type="radio"] { transform: scale(1.2); margin: 4px; }
    body { padding-left: 0; padding-right: 0; }
}