blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    unicode-bidi: isolate;
}

.text-primary-boost {
    color: #007bff !important;
}

.bg-primary-boost {
    background-color: #007bff !important;
}

/* Utilidades tipo Bootstrap para naranja (usa --bs-orange del tema: #f1734f) */
:root,
[data-bs-theme=light] {
    --bs-orange-rgb: 241, 115, 79;
    --bs-orange-text-emphasis: #6b3018;
    --bs-orange-bg-subtle: #fdece7;
    --bs-orange-border-subtle: #f5c9bc;
}

[data-bs-theme=dark] {
    --bs-orange-text-emphasis: #f5a88c;
    --bs-orange-bg-subtle: #4a2518;
    --bs-orange-border-subtle: #6d3825;
}

.text-orange {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-orange-rgb), var(--bs-text-opacity)) !important;
}

.bg-orange {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-orange-rgb), var(--bs-bg-opacity)) !important;
}

.border-orange {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-orange-rgb), var(--bs-border-opacity)) !important;
}

.text-bg-orange {
    color: #fff !important;
    background-color: rgba(var(--bs-orange-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-orange-subtle {
    background-color: var(--bs-orange-bg-subtle) !important;
}

.border-orange-subtle {
    border-color: var(--bs-orange-border-subtle) !important;
}

.link-orange {
    color: rgba(var(--bs-orange-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: rgba(var(--bs-orange-rgb), var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: rgba(var(--bs-orange-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

.link-orange:hover,
.link-orange:focus {
    color: rgba(205, 88, 58, var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: rgba(205, 88, 58, var(--bs-link-underline-opacity, 1)) !important;
    text-decoration-color: rgba(205, 88, 58, var(--bs-link-underline-opacity, 1)) !important;
}

.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-orange);
    --bs-btn-border-color: var(--bs-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e05a36;
    --bs-btn-hover-border-color: #d95432;
    --bs-btn-focus-shadow-rgb: 241, 115, 79;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d95432;
    --bs-btn-active-border-color: #cd4f2f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-orange);
    --bs-btn-disabled-border-color: var(--bs-orange);
}

.btn-outline-orange {
    --bs-btn-color: var(--bs-orange);
    --bs-btn-border-color: var(--bs-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-orange);
    --bs-btn-hover-border-color: var(--bs-orange);
    --bs-btn-focus-shadow-rgb: 241, 115, 79;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-orange);
    --bs-btn-active-border-color: var(--bs-orange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-orange);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-orange);
    --bs-gradient: none;
}

.alert-orange {
    --bs-alert-color: var(--bs-orange-text-emphasis);
    --bs-alert-bg: var(--bs-orange-bg-subtle);
    --bs-alert-border-color: var(--bs-orange-border-subtle);
    --bs-alert-link-color: var(--bs-orange-text-emphasis);
}

.bg-image {
    height: 100vh;
    background-size: cover;
    background-position: center;
}

    .bg-image.authentication-bg {
        background-image: url("../images/authentication-bg.jpg");
    }

    .bg-image.password-bg {
        background-image: url("../images/password-bg.png");
    }

    .bg-image .bg-overlay {
        background-color: #292626;
    }


@media (max-width: 991px) {
    .bg-image {
        display: none;
    }
}

.auth-form-group-custom .auti-custom-input-icon {
    color: #37447A;
}

.noti-icon {
    position: relative;
}

    .noti-icon .noti-dot {
        background-color: #ff3d60;
    }

a.noti-icon .gr-resp {
    position: absolute;
    display: inline-block;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    top: -4px;
    right: -2px
}

.dtFilterBtn.noti-icon .noti-dot {
    background-color: #ff3d60 !important;
    height: 8px;
    width: 8px;
    top: 10px;
    right: 10px;
}

.dtFilterBtn.noti-icon i {
    font-size: 1.125rem;
    color: #000;
}

.form-control:disabled {
    background-color: #e9ecef;
}

.btn-primary.logiaide {
    --bs-btn-color: #fff;
    --bs-btn-bg: #7FB343;
    --bs-btn-border-color: #7FB343;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #37447A;
    --bs-btn-hover-border-color: #6B74AF;
    --bs-btn-focus-shadow-rgb: 111, 123, 217;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6B74AF;
    --bs-btn-active-border-color: #ECEEFF;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #7FB343;
    --bs-btn-disabled-border-color: #7FB343;
}

.form-check-input:checked {
    background-color: #37447A;
    border-color: #37447A;
}

.form-check-input.inbond:checked {
    background-color: #ff3d60;
    border-color: #ff3d60;
}

div.dt-buttons {
    margin: 0 10px;
}

    div.dt-buttons:first-child {
        margin-left: 0;
    }

div.dt-button-collection {
    z-index: 2002;
}

div.dt-button-background {
    background: rgba(0, 0, 0, 0.7);
    background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 2001;
}

table[data-parsley-custom-vali].parsley-error,
table[data-parsley-custom-vali].parsley-error > thead,
.form-control.parsley-error + .select2-container .select2-selection,
.input-group.parsley-error .input-group-text,
.input-group.parsley-error input,
.dropzone.parsley-error,
.dropzone.parsley-error-damaged,
.dropzone.parsley-error-perishable,
.dropzone.parsley-error-additionalInfo,
.dropzone.parsley-error-partnumber {
    border-color: #dc3545 !important;
}

    .form-control.parsley-error ~ .invalid-feedback,
    .dt-container:has(table[data-parsley-custom-vali].parsley-error) ~ .invalid-feedback,
    .input-group.parsley-error ~ .invalid-feedback,
    .dropzone.parsley-error ~ .invalid-feedback,
    .damaged .dropzone.parsley-error-damaged ~ .damaged > .invalid-feedback,
    .perishable .dropzone.parsley-error-perishable ~ .perishable > .invalid-feedback,
    .partnotindb .dropzone.parsley-error-partnumber ~ .partnumber > .invalid-feedback,
    .partnotimages .dropzone.parsley-error-partnumber ~ .partnumber > .invalid-feedback,
    .partdescdiscrepancy .dropzone.parsley-error-partnumber ~ .partnumber > .invalid-feedback,
    .additionalInfo .dropzone.parsley-error-additionalInfo ~ .additionalInfo > .invalid-feedback {
        display: block !important;
    }

    .form-control.is-invalid + .select2-container .select2-selection .select2-selection__rendered,
    .form-control.parsley-error + .select2-container .select2-selection .select2-selection__rendered {
        color: #dc3545;
    }

.warning-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #FFBF00 !important;
}

@media (max-width: 767.98px) {
    .dt-container > div > div {
        text-align: center;
    }

    div.dt-buttons {
        display: inline;
    }
}

.log-panel {
    height: 360px; /* ajustar según necesidad */
    background: linear-gradient(180deg, #fbfdf9, #f7faf6); /* tenue */
    border: 1px solid #e6eedf;
    border-radius: .375rem;
    padding: .5rem;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
    font-size: .9rem;
    line-height: 1.5;
    color: #102316;
}

.log-entry {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    padding: .15rem .35rem;
    border-radius: .25rem;
    word-break: break-word;
}

    .log-entry + .log-entry {
        margin-top: .125rem;
    }

    .log-entry .icon {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        margin-top: 2px;
    }

.log-success {
    background: rgba(34,140,74,0.06);
}

    .log-success i {
        color: #228c4a;
    }

.log-info {
    background: rgba(13,110,253,0.04);
}

    .log-info i {
        color: #0d6efd;
    }

.log-warning {
    background: rgba(255,193,7,0.06);
}

    .log-warning i {
        color: #e0a800;
    }

.log-orange {
    background: rgba(var(--bs-orange-rgb), 0.08);
}

    .log-orange i {
        color: var(--bs-orange);
    }

.log-error {
    background: rgba(220,53,69,0.06);
}

    .log-error i {
        color: #dc3545;
    }

.log-muted {
    background: transparent;
}

.log-time {
    color: #50605a;
    font-size: .78rem;
    margin-right: .4rem;
    flex: 0 0 90px;
}

.log-controls {
    margin-bottom: 8px;
    display: flex;
    gap: .5rem;
    align-items: center;
}

    .log-controls .small-muted {
        color: #6b7b74;
        font-size: .85rem;
        margin-left: auto;
    }

#btnCopyGR {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #555;
    transition: all 0.2s;
}

    #btnCopyGR:hover {
        background: white;
        border-color: rgba(0, 0, 0, 0.2);
    }
/*Dropzone*/
.dropzone.dz-compact {
    min-height: 134px;
    padding: 15px 10px 0 10px;
}

    .dropzone.dz-compact .dz-message {
        margin: 0;
    }

        .dropzone.dz-compact .dz-message i {
            font-size: 24px;
        }

    .dropzone.dz-compact .dz-preview {
        margin: 0px 8px;
    }

        .dropzone.dz-compact .dz-preview .dz-details {
            font-size: 12px;
            padding-bottom: 0;
        }

            .dropzone.dz-compact .dz-preview .dz-details .dz-size {
                font-size: 12px;
            }

        .dropzone.dz-compact .dz-preview .dz-image {
            width: 80px;
            height: 80px;
        }

            .dropzone.dz-compact .dz-preview .dz-image > img[data-dz-thumbnail] {
                height: 75px;
            }

.damaged .dz-image-preview a[data-dz-damage],
.perishable .dz-image-preview a[data-dz-perishable],
.dz-partnum .dz-image-preview a[data-dz-partnum],
.dz-partnum .dz-image-preview.partnum a[data-dz-partnum-select] {
    display: inline-block;
}

.dz-image-preview a[data-dz-damage],
.dz-image-preview a[data-dz-perishable],
.dz-image-preview a[data-dz-partnum],
.dz-partnum .dz-image-preview.partnum a[data-dz-partnum],
.dz-image-preview a[data-dz-partnum-select] {
    display: none;
}

.dz-image-preview a[data-dz-preview],
.dz-image-preview a[data-dz-remove],
.dz-image-preview a[data-dz-damage],
.dz-image-preview a[data-dz-perishable],
.dz-image-preview a[data-dz-partnum],
.dz-image-preview.partnum a[data-dz-partnum-select] {
    font-size: 18px !important;
    cursor: pointer !important;
    margin: 0 1px;
}
/*Wizard*/
/*.card.inbond {
    border-color: #ff3d60;
}*/
.twitter-bs-wizard .twitter-bs-wizard-nav .step-number {
    border: 2px solid #37447A;
    color: #37447A;
}

.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link.active .step-number {
    background-color: #7FB343;
    border-color: #7FB343;
}

.twitter-bs-wizard .twitter-bs-wizard-pager-link li a {
    background-color: #7FB343;
}

.twitter-bs-wizard .twitter-bs-wizard-pager-link li.disabled a {
    background-color: #a4cc77;
}

#EntryIndicator .badge, #InspectionIndicator .badge, #LoadIndicator .badge {
    display: none;
    padding-bottom: .7em;
    padding-top: .7em;
}

/* Entry Create: framed status strip so it never clips and wraps cleanly. */
.entry-indicators {
    min-height: 38px;
    padding: .35rem 0;
    border-top: 1px dashed var(--bs-border-color);
    border-bottom: 1px dashed var(--bs-border-color);
}

/* Inline switch wrapper (replaces repeated inline styles on .form-check.form-switch). */
.switch-inline {
    display: inline-block;
    padding-left: unset;
}

.preentry:not(.correspondence):not(.icpo):not(.rma):not(.sample) #EntryIndicator .badge-preentry,
.bulkover #EntryIndicator .badge-bulkover,
.bulkshort #EntryIndicator .badge-bulkshort,
.cbp #EntryIndicator .badge-cbp,
.correspondence #EntryIndicator .badge-correspondence,
.damaged #EntryIndicator .badge-damaged,
.hazmat #EntryIndicator .badge-hazmat,
.hold #EntryIndicator .badge-hold,
.hot #EntryIndicator .badge-hot,
.icepack #EntryIndicator .badge-icepack,
.icpo #EntryIndicator .badge-icpo,
.inbond #EntryIndicator .badge-inbond,
.inbondwexcel #EntryIndicator .badge-excel,
.missinginvoice:not(.correspondence):not(.icpo):not(.rma):not(.sample) #EntryIndicator .badge-missinginvoice,
.missingmsds.hazmat #EntryIndicator .badge-missingmsds,
.missingpo:not(.correspondence):not(.icpo):not(.rma):not(.sample) #EntryIndicator .badge-missingpo,
.mro #EntryIndicator .badge-mro,
.perishable #EntryIndicator .badge-perishable,
.refrigerated #EntryIndicator .badge-refrigerated,
.rma #EntryIndicator .badge-rma,
.sample #EntryIndicator .badge-sample,
.sapearly #EntryIndicator .badge-sapearly,
.unknown #EntryIndicator .badge-unknown,
.pomismatch:not(.correspondence):not(.icpo):not(.rma):not(.sample) #EntryIndicator .badge-pomismatch,
.pospecial #EntryIndicator .badge-pospecial,
.porule #EntryIndicator .badge-porule,
.pounauthd #EntryIndicator .badge-pounauthd,
.preentry:not(.rma):not(.sample) #InspectionIndicator .badge-preentry,
.correspondence #InspectionIndicator .badge-correspondence,
.hazmat #InspectionIndicator .badge-hazmat,
.icpo #InspectionIndicator .badge-icpo,
.mro #InspectionIndicator .badge-mro,
.rma #InspectionIndicator .badge-rma,
.sample #InspectionIndicator .badge-sample,
.dbpnextra:not(.rma):not(.sample) #InspectionIndicator .badge-dbpnextra,
.dbpnlinediscrepancy:not(.rma):not(.sample) #InspectionIndicator .badge-dbpnlinediscrepancy,
.dbpnlineempty:not(.rma):not(.sample) #InspectionIndicator .badge-dbpnlineempty,
.partearly:not(.rma):not(.sample) #InspectionIndicator .badge-partearly,
.partmisscoo:not(.rma):not(.sample) #InspectionIndicator .badge-partmisscoo,
.partmissfrmx #InspectionIndicator .badge-partmissfrmx,
.partmissschdb #InspectionIndicator .badge-partmissschdb,
.partmultiline #InspectionIndicator .badge-partmultiline,
.partnotindb #InspectionIndicator .badge-partnotindb,
.porule #InspectionIndicator .badge-porule,
.dbpnoverqty:not(.rma):not(.sample) #InspectionIndicator .badge-dbpnoverqty,
.dbpnuomdiscrepancy:not(.rma):not(.sample) #InspectionIndicator .badge-dbpnuomdiscrepancy,
.partdescdiscrepancy #InspectionIndicator .badge-partdescdiscrepancy,
.partqtyrecdiscrepancy #InspectionIndicator .badge-partqtyrecdiscrepancy,
.specialpo #InspectionIndicator .badge-pospecial,
.porule #InspectionIndicator .badge-porule,
.dbpnnap #InspectionIndicator .badge-dbpnnap,
.dummypart #InspectionIndicator .badge-dummypart,
.parttocomments #InspectionIndicator .badge-parttocomments,
.correspondence #LoadIndicator .badge-correspondence,
.hazmat #LoadIndicator .badge-hazmat,
.icepack #LoadIndicator .badge-icepack,
.icpo #LoadIndicator .badge-icpo,
.inbond #LoadIndicator .badge-inbond,
.mro #LoadIndicator .badge-mro,
.bol #LoadIndicator .badge-bol,
.northbound #LoadIndicator .badge-northbound,
.palletized #LoadIndicator .badge-palletized,
.perishable #LoadIndicator .badge-perishable,
.rma #LoadIndicator .badge-rma,
.reference #LoadIndicator .badge-reference,
.msd #LoadIndicator .badge-msd,
.sto #LoadIndicator .badge-sto,
.doda #LoadIndicator .badge-doda,
.sed #LoadIndicator .badge-sed,
.porte #LoadIndicator .badge-porte,
.carrier #LoadIndicator .badge-carrier,
.inbond3pl #InspectionIndicator .badge-inbond3pl {
    display: inline-block !important;
}
/* IB -> I3PL re-capture (EntryFlags.IsInbond3PL): the GR was already fulfilled, so PO/EDI
   (group A) issues are NOT created during the physical re-capture. Hide their indicators so
   they don't confuse the operator. Catalog (Desc/MX/SchedB/CoO), Qty-vs-Docs and PRE-ENTRY
   stay visible (those issues are still raised). #inspectionCard id raises specificity over the
   show rules above. */
#inspectionCard.inbond3pl #InspectionIndicator .badge-dbpnextra,
#inspectionCard.inbond3pl #InspectionIndicator .badge-dbpnlineempty,
#inspectionCard.inbond3pl #InspectionIndicator .badge-dbpnlinediscrepancy,
#inspectionCard.inbond3pl #InspectionIndicator .badge-partearly,
#inspectionCard.inbond3pl #InspectionIndicator .badge-dbpnoverqty,
#inspectionCard.inbond3pl #InspectionIndicator .badge-dbpnuomdiscrepancy {
    display: none !important;
}
/*.inbond .twitter-bs-wizard-nav .step-number {
    border: 2px solid #ff3d60;
    color: #ff3d60;
}*/
/*.inbond .twitter-bs-wizard-nav .nav-link.active .step-number {
    background-color: #ff3d60;
    border-color: #ff3d60;
}*/
table.table.dataTable tr.table-success td {
    --bs-table-color: #000;
    --bs-table-bg: #d2f1e8 !important;
    --bs-table-border-color: #bdd9d1 !important;
    --bs-table-striped-bg: #c8e5dc !important;
    --bs-table-striped-color: #000 !important;
    --bs-table-active-bg: #bdd9d1 !important;
    --bs-table-active-color: #000 !important;
    --bs-table-hover-bg: #c2dfd7 !important;
    --bs-table-hover-color: #000 !important;
    color: var(--bs-table-color) !important;
    border-color: var(--bs-table-border-color) !important;
}

.table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    background-color: transparent;
    border: none;
    color: #7FB343;
    content: "\f055";
    font-family: 'Font Awesome 5 Free';
    font-size: 16px;
    font-weight: 900;
    vertical-align: middle;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {
    border: none;
    color: #d33333;
    content: '\f056'
}

.dataTable.dt-responsive > tbody > tr.dt-hasChild + tr.child > td.child > ul.dtr-details {
    width: 100%;
}

div.dt-processing {
    position: center;
    top: 10px;
    left: 100px;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 2px;
    z-index: 10;
}

    div.dt-processing > div:last-child {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80px;
        height: 15px;
    }

        div.dt-processing > div:last-child > div {
            background: #7FB343 !important;
        }

.dt-status .badge {
    margin-right: 5px;
}

.iconStatus {
    margin-right: 5px;
}

table.table .tr-inbond td {
    color: #ff3d60 !important;
}

table.table .tr-inbond + tr[data-dt-row] td {
    color: #ff3d60 !important;
}

.dtActions .dropdown-menu > .dropdown-item > i {
    text-align: center;
    width: 24px;
}

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: absolute !important;
    }
}

@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    background-color: #FFF;
}
/*Select2*/
.input-group .select2 {
    width: auto;
}

.input-group .select2-container--default .select2-selection--single,
.input-group .select2-container--default .select2-selection--multiple {
    border-radius: 4px 0px 0px 4px;
}

.input-group > .select2-container--bootstrap {
    width: auto;
    flex: 1 1 auto;
}

.select2 {
    width: 100%;
}

.select2-container .select2-selection--single {
    min-height: 41px;
}

.select2 .select2-selection.is-valid {
    border-color: #1cbb8c !important;
}

.select2 .select2-selection.is-invalid {
    border-color: #dc3545 !important;
}

.select2 .select2-selection.is-warning,
input.is-warning {
    border-color: #ffc107 !important;
}

.select2-results__option[aria-selected=true] {
    display: none;
}

.select2-container--default .select2-selection--single {
    padding-right: 30px !important;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.font-size-12 {
    font-size: 12px !important;
}

.font-size-32 {
    font-size: 32px !important
}

#trackingVisual .card .card-header {
    height: 45px;
}

#trackingVisual .card .card-body {
    height: 115px;
}

#trackingVisual.notLast .card .card-body {
    height: auto;
}

#trackingVisual label {
    width: 100%;
}

#trackingVisual .card-input-element {
    display: none;
}

    #trackingVisual .card-input-element:checked + .card {
        -webkit-transition: border .3s;
        -o-transition: border .3s;
        transition: border .3s;
    }

    #trackingVisual .card-input-element + .card .card-header::after {
        content: '\f0c8';
        color: #FFF;
        float: right;
        font-family: 'Font Awesome 5 Free';
        font-size: 18px;
    }

    #trackingVisual .card-input-element.reject + .card .card-header::after {
        color: #ff3d60;
    }

    #trackingVisual .card-input-element.hot + .card .card-header::after {
        color: #fcb92c;
    }

    #trackingVisual .card-input-element:checked + .card .card-header::after {
        content: '\f14a';
        color: #FFF;
        float: right;
        font-family: 'Font Awesome 5 Free';
        font-size: 18px;
        -webkit-animation-name: fadeInCheckbox;
        animation-name: fadeInCheckbox;
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
        -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    #trackingVisual .card-input-element.reject:checked + .card .card-header::after {
        color: #ff3d60;
    }

    #trackingVisual .card-input-element.hot:checked + .card .card-header::after {
        color: #fcb92c;
    }

    #trackingVisual .card-input-element + .card .card-header h5 {
        display: inline-block;
    }

#trackingVisual .card-input {
    margin: 0;
    padding: 0px;
}

    #trackingVisual .card-input:hover {
        cursor: pointer;
    }

#tblTrackingNums .badge {
    margin-left: 10px;
}

    #tblTrackingNums .badge:first-child {
        margin-left: 0;
    }

@-webkit-keyframes fadeInCheckbox {
    from {
        opacity: 0;
        -webkit-transform: rotateZ(-20deg);
    }

    to {
        opacity: 1;
        -webkit-transform: rotateZ(0deg);
    }
}

@keyframes fadeInCheckbox {
    from {
        opacity: 0;
        transform: rotateZ(-20deg);
    }

    to {
        opacity: 1;
        transform: rotateZ(0deg);
    }
}

.nav-tabs-custom.logiaide {
    border-bottom: 1px solid #7FB442;
}

    .nav-tabs-custom.logiaide:has(.nav-link.danger-tab.active) {
        border-bottom: 1px solid #c82333;
    }

    .nav-tabs-custom.logiaide .nav-item .nav-link:first-child {
        margin-left: 25px;
    }

    .nav-tabs-custom.logiaide .nav-item .nav-link.active {
        color: #FFFFFF !important;
        background-color: #7FB442 !important;
        border: 1px solid #7FB442;
        border-bottom: none;
        font-weight: bolder;
    }

    .nav-tabs-custom.logiaide .nav-item .nav-link.is-invalid.active {
        color: darkred !important;
    }

    .nav-tabs-custom.logiaide .nav-item .nav-link.is-invalid {
        color: red !important;
    }

    .nav-tabs-custom.logiaide .nav-item .nav-link::after {
        background: none;
    }

    .nav-tabs-custom.logiaide .nav-item .nav-link {
        color: gray;
    }

        .nav-tabs-custom.logiaide .nav-item .nav-link.bordered {
            background-color: white;
            border: 1px solid #7FB442;
            color: #7FB442;
            font-weight: bold;
        }

        .nav-tabs-custom.logiaide .nav-item .nav-link.danger-tab {
            color: #c82333 !important;
            font-weight: bolder;
        }

            .nav-tabs-custom.logiaide .nav-item .nav-link.danger-tab.active {
                color: #c82333 !important;
                border-color: #c82333;
            }
/*Logiaide*/
.logiaide-color-blue {
    color: #37447A !important;
}

.logiaide-color-green {
    color: #7FB442 !important;
}

.logiaide .form-control:focus {
    border-color: #7FB343;
    box-shadow: #7FB343 !important;
}

.logiaide #page-topbar {
    background-color: #37447A;
}

.logiaide.vertical-collpsed .navbar-brand-box {
    padding: 0;
}

.logiaide #vertical-menu-btn,
.logiaide #page-header-user-dropdown,
.logiaide #page-header-notifications-dropdown,
.logiaide #page-header-notifications-dropdown i {
    color: #FFF;
}

    .logiaide #page-header-user-dropdown.show,
    .logiaide #page-header-notifications-dropdown.show,
    .logiaide #page-header-notifications-dropdown.show i {
        color: #212529;
    }

.navbar-header .dropdown .show.header-item {
    background-color: #FFF;
}

.logiaide .menu-title {
    color: #7FB343;
    font-weight: bold;
    opacity: 1;
}

.logiaide #sidebar-menu ul li a {
    color: #37447A !important;
}

.logiaide #sidebar-menu .mm-active .active {
    color: #7FB343 !important;
    font-weight: bold;
}

.logiaide #sidebar-menu ul li a.active,
.logiaide #sidebar-menu .mm-active > a {
    color: #7FB343 !important;
    font-weight: 700;
}

.logiaide #sidebar-menu ul li a i {
    color: #37447A !important;
}

.logiaide #sidebar-menu ul li a.active i,
.logiaide #sidebar-menu ul li a.mm-active i {
    color: #7FB343 !important;
    font-weight: 700;
    opacity: 1;
}

.logiaide .modal-header {
    background-color: #253566;
}

    .logiaide .modal-header .modal-title {
        color: #ECEEFF;
    }

.logiaide .accordion-header {
    border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

    .logiaide .accordion-header .accordion-button {
        font-size: 20px;
        font-weight: bold;
        /*text-decoration: underline;*/
        width: 80%;
    }

        .logiaide .accordion-header .accordion-button::after {
            background: none;
            content: none;
            height: 0;
            margin-left: 0;
            width: 0;
        }

        .logiaide .accordion-header .accordion-button::before {
            -ms-flex-negative: 0;
            flex-shrink: 0;
            width: var(--bs-accordion-btn-icon-width);
            height: var(--bs-accordion-btn-icon-width);
            margin-right: 25px;
            content: "";
            background-image: var(--bs-accordion-btn-icon);
            background-repeat: no-repeat;
            background-size: var(--bs-accordion-btn-icon-width);
            -webkit-transition: var(--bs-accordion-btn-icon-transition);
            transition: var(--bs-accordion-btn-icon-transition);
        }

        .logiaide .accordion-header .accordion-button:focus {
            border-color: transparent;
            box-shadow: none;
        }

        .logiaide .accordion-header .accordion-button:not(.collapsed) {
            background-color: transparent;
        }

            .logiaide .accordion-header .accordion-button:not(.collapsed)::before {
                background-image: var(--bs-accordion-btn-active-icon);
                -webkit-transform: var(--bs-accordion-btn-icon-transform);
                transform: var(--bs-accordion-btn-icon-transform);
            }

    .logiaide .accordion-header .accordion-button-action {
        margin: 10px 15px 0 0;
    }

.logiaide .accordion-body .list-group .list-group-item {
    font-size: 18px;
}

.logiaide .page-link {
    color: #37447A;
}

.logiaide .active > .page-link, .page-link.active {
    background-color: #7FB343;
    border-color: #7FB343;
    color: #FFF;
}

.receipt-title h2, .receipt-title h3 {
    display: inline-block;
}

#signature-pad {
    max-width: 300px;
    margin: 0 auto;
}

.signature-pad--header .signHere {
    border-style: none none dotted none;
    border-width: 1px;
}

.signature-pad--body {
    background: left bottom no-repeat url(../images/times-solid.png);
    border: 2px solid;
    border-style: none none dashed none;
    height: 150px;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.signature-pad--footer {
    color: #C3C3C3;
    text-align: center;
    font-size: 1.2em;
    margin-top: 8px;
}

#inspection-menu {
    height: 100px;
    position: fixed;
    right: 0;
    width: 50px;
}

    #inspection-menu button {
        background-color: #37447A;
        border-radius: 15px 0 0 15px;
        cursor: pointer;
        font-size: 20px;
        height: 70px;
        margin-bottom: 15px;
        padding: 20px 15px;
        width: 50px;
    }

        #inspection-menu button:hover i {
            color: #7FB343;
        }

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: rgba(127, 179, 67, .5);
}

table.table.dataTable.table-hover > tbody > tr.selected:hover > * {
    /*box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.975);*/
    box-shadow: inset 0 0 0 9999px rgba(127, 179, 67, .5);
}

.table-hover.dtfc-scrolling-start.dtfc-scrolling-left tbody tr:hover td:nth-child(1),
.table-hover.dtfc-scrolling-end.dtfc-scrolling-right tbody tr:hover td:last-child,
.table-hover.dtfc-scrolling-start.dtfc-scrolling-left tbody tr:hover th:nth-child(1) {
    background-color: rgba(127, 179, 67, 1) !important;
}

.badge.bg-logiaide {
    background-color: #7FB343 !important;
}

body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.danger-tooltip {
    --bs-tooltip-bg: var(--bs-danger);
    --bs-tooltip-color: var(--bs-white) !important;
}

.info-tooltip {
    --bs-tooltip-bg: var(--bs-info);
    --bs-tooltip-color: var(--bs-white) !important;
}

.primary-tooltip {
    --bs-tooltip-bg: #007bff;
    --bs-tooltip-color: var(--bs-white) !important;
}

.success-tooltip {
    text-align: left;
    --bs-tooltip-bg: var(--bs-success);
    --bs-tooltip-color: var(--bs-white) !important;
}

.warning-tooltip {
    --bs-tooltip-bg: var(--bs-warning);
    --bs-tooltip-color: var(--bs-white) !important;
}

.warning-tooltip-dark {
    --bs-tooltip-bg: var(--bs-warning);
    --bs-tooltip-color: var(--bs-dark) !important;
}

.orange-tooltip {
    --bs-tooltip-bg: var(--bs-orange);
    --bs-tooltip-color: var(--bs-white) !important;
}

.custom-tooltip-width {
    --bs-tooltip-max-width: 400px;
    max-width: none !important;
}

.select2-container .select2-search--inline:first-child {
    float: none;
}

    .select2-container .select2-search--inline:first-child .select2-search__field {
        width: 100% !important;
    }

@media (width >= 1536px) {
    .switches-controls .fw-bold {
        margin-left: 78px;
    }
}

/*.dtfc-fixed-end .dropdown-menu {
    z-index: 1050 !important;*/ /* Asegúrate de que el z-index sea mayor que el del contenido de la tabla */
/*}
.dropdown-menu {
    position: absolute;
    z-index: 1050 !important;*/ /* Aseguramos que esté por encima */
/*}*/

.custom-dt-colvis-active::after {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    right: 1em;
    display: inline-block;
    content: "✓";
    color: inherit;
}

.custom-colvis-item:hover {
    background-color: #F8F9FA;
}

.report-item {
    --bs-dropdown-item-padding-x: 5px;
}

    .report-item span {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        width: 100%;
    }

        .report-item span .report-name {
            width: 70%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block !important;
        }
/*! Letter Icons v1.1 — MIT License
   Works with Bootstrap text-* utilities (text-secondary, text-opacity-50, etc.).
   Usage:
     <i class="uxi uxi-p text-secondary text-opacity-50" aria-label="P"></i>
*/
li.mm-active > a.mm-active > i.logo-sap {
    filter: invert(64%) sepia(16%) saturate(1504%) hue-rotate(46deg) brightness(98%) contrast(85%);
}

.logo-sap {
    background-image: url('../fonts/sap-logo.svg');
    background-size: contain; /* Asegura que el logo completo sea visible dentro del div */
    background-repeat: no-repeat;
    background-position: center; /* Centra el logo si el div es más grande */
    width: 25px; /* Define el ancho deseado */
    height: 25px; /* Define el alto deseado */
    filter: invert(25%) sepia(6%) saturate(5165%) hue-rotate(191deg) brightness(97%) contrast(89%);
}

/* GR indicator: mismo SVG vía <img> (tamaño explícito; Url desde #hSapLogoUrl en la vista) */
.logo-sap-img {
    width: 31px;
    height: 31px;
    max-width: 31px;
    max-height: 31px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    filter: invert(25%) sepia(6%) saturate(5165%) hue-rotate(191deg) brightness(97%) contrast(89%);
}

/* Misma lectura visual que .text-secondary.text-opacity-50 (tema: --bs-secondary #74788d) */
.logo-sap-img--secondary {
    opacity: 0.5;
    filter: invert(49%) sepia(9%) saturate(748%) hue-rotate(194deg) brightness(93%) contrast(86%);
}

/* Success = color exacto del tema (--bs-success); span + máscara (ver generateGRIndicator en Bundles.Index.js) */
.logo-sap-img.logo-sap-img--success {
    filter: none;
    background-color: var(--bs-success);
    background-image: none;
    -webkit-mask-image: url('../fonts/sap-logo.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../fonts/sap-logo.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.logo-sap-img--warning {
    filter: invert(72%) sepia(99%) saturate(1352%) hue-rotate(1deg) brightness(102%) contrast(102%);
}

.logo-sap-img--danger {
    filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.logo-sap-img--orange {
    filter: invert(58%) sepia(66%) saturate(2876%) hue-rotate(346deg) brightness(102%) contrast(101%);
}

.logo-sap-img--black {
    filter: none;
}

.uxi {
    --size: 1em; /* base font size of the letter */
    --bg: #111827; /* background color (badge) */
    /* IMPORTANT: Let the letter color follow the element's current text color
     unless --fg is explicitly provided */
    --fg:;
    --shape: 999px; /* 999px ≈ circle; 0 = square; .5rem = rounded */
    --shadow: 0 1px 1px rgba(0,0,0,.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--size) * 1.75);
    height: calc(var(--size) * 1.75);
    font-size: var(--size);
    font-weight: bold;
    line-height: 1;
    border-radius: var(--shape);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .01em;
    vertical-align: -.15em;
    user-select: none;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Default style = solid badge. Letter color follows currentColor unless --fg is set */
.uxi {
    background: var(--bg);
    color: var(--fg, currentColor);
    box-shadow: var(--shadow);
}
/* Variants */
.uxi--outline {
    background: transparent;
    color: currentColor;
    box-shadow: inset 0 0 0 2px currentColor;
}

.uxi--ghost,
.uxi--no-bg {
    background: transparent;
    color: currentColor;
    box-shadow: none;
}
/* Bootstrap-friendly: background uses currentColor, letter forced to white (adjust if needed) */
.uxi--bg-current {
    background: currentColor;
    color: #fff;
}
/* Sizes */
.uxi-xsm {
    --size: 10px;
}

.uxi-sm {
    --size: .75rem;
}

.uxi-lg {
    --size: 1.25rem;
}

.uxi-2x {
    --size: 2rem;
}

.uxi-3x {
    --size: 3rem;
}
/* Shapes */
.uxi--circle {
    --shape: 999px;
}

.uxi--rounded {
    --shape: .5rem;
}

.uxi--square {
    --shape: 0;
}
/* Color helpers (still available; you can combine with Bootstrap) */
.uxi--primary {
    --bg: #2563eb;
}
/* blue-600 */
.uxi--success {
    --bg: #16a34a;
}
/* green-600 */
.uxi--warning {
    --bg: #d97706;
}
/* amber-600 */
.uxi--orange {
    --bg: var(--bs-orange);
}

.uxi--danger {
    --bg: #dc2626;
}
/* red-600 */
.uxi--neutral {
    --bg: #374151;
}
/* gray-700 */
.uxi--lighttext {
    --fg: #111827;
}
/* dark letter on light bg */
/* The actual letters */
.uxi::before {
    content: attr(data-letter);
}

.uxi-p::before {
    content: "P";
}

.uxi-a::before {
    content: "A";
}

.uxi-d::before {
    content: "D";
}
/* Fixed width (align nicely in lists) */
.uxi-fw {
    width: calc(var(--size) * 2.0);
}

table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > * {
    /* box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.95); */
    box-shadow: inset 0 0 0 9999px rgba(127, 180, 66, 0.5);
}

table.table.dataTable > tbody > tr.selected > * {
    /*box-shadow: inset 0 0 0 9999px rgb(13, 110, 253);*/
    box-shadow: inset 0 0 0 9999px rgba(127, 180, 66, 0.5);
    /*color: rgb(255, 255, 255);*/
    /*color: rgb(var(--dt-row-selected-text));*/
}


/* --> Maintenance Overlay */
.maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.96);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: auto;
    -webkit-user-select: none;
    user-select: none;
}
.maintenance-overlay__content {
    max-width: 520px;
    padding: 2.5rem 1.5rem;
}
.maintenance-overlay__content h1 {
    color: #fff;
    margin-bottom: 1rem;
}
.maintenance-overlay__content h5 {
    color: rgba(255, 255, 255, 0.75);
}
.maintenance-overlay__content #maintenanceCountdown {
    font-size: 2.25rem;
    letter-spacing: 0.05em;
}
.maintenance-overlay__content .maintenance-icon {
    font-size: 1.4rem;
    display: inline-block;
    transform-origin: center;
    animation: maintenance-spin 4s linear infinite;
}
@keyframes maintenance-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
body.maintenance-locked {
    overflow: hidden !important;
}
/* <-- Maintenance Overlay */

/* --> Notification badge */
.noti-icon { position: relative; }
.noti-icon .noti-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.65rem;
    padding: 2px 5px;
    min-width: 16px;
    line-height: 1;
    border-radius: 8px;
}
.notification-item {
    display: block;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease;
}
.notification-item:hover { background-color: rgba(0, 0, 0, 0.03); }
.notification-item.unread { background-color: rgba(13, 110, 253, 0.04); }
.notification-item.unread:hover { background-color: rgba(13, 110, 253, 0.08); }
.notification-item .noti-link {
    display: block;
    padding: 0.75rem 1rem;
    padding-right: 5.5rem;                /* room for the absolute-positioned actions */
    color: inherit;
    text-decoration: none;
}
.notification-item .noti-link:hover { text-decoration: none; color: inherit; }
/* Static variant (no ActionUrl) — same layout but no pointer affordance / no click navigation */
.notification-item .noti-link--static { cursor: default; }
.notification-item .noti-title { color: #212529; }
.notification-item .noti-time { font-size: 0.7rem; color: #6c757d; }

/* Action buttons — horizontal row in the top-right of the item OR the sticky toast */
.noti-actions {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    flex-direction: row;
    gap: 2px;
}
.noti-action {
    background: transparent;
    border: none;
    padding: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #adb5bd;                       /* muted by default */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.noti-action i { font-size: 0.75rem; }
.noti-action:hover { background-color: rgba(0, 0, 0, 0.04); }
.noti-action-view:hover   { color: #0dcaf0; }   /* info */
.noti-action-read:hover   { color: #1cbb8c; }   /* success */
.noti-action-delete:hover { color: #ff3d60; }   /* danger */

/* Sticky toast: actions live in the title row of the grid → always centered with the header,
   regardless of whether the body/time are visible (collapsed or expanded). */
#stickyToastContainer .sticky-toast .noti-actions {
    grid-area: actions;
    position: static;
    top: auto;
    right: auto;
    align-self: center;
    transform: none;
}

/* --> Notification skeleton (shimmer placeholder while loading more) */
.notification-skeleton {
    display: block;
    position: relative;
    padding: 0.75rem 1rem;
    padding-right: 5.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 3px solid rgba(0, 0, 0, 0.06);
}
.notification-skeleton .skel-line {
    display: block;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.12) 50%,
        rgba(0, 0, 0, 0.06) 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: noti-skel-shimmer 1.4s ease-in-out infinite;
}
.notification-skeleton .skel-title { height: 14px; width: 60%; margin-bottom: 8px; }
.notification-skeleton .skel-body  { height: 12px; width: 90%; margin-bottom: 8px; }
.notification-skeleton .skel-time  { height: 10px; width: 30%; }
@keyframes noti-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* <-- Notification skeleton */

/* Type accent: colored left border + inline icon color (matches sticky toasts) */
.notification-item.type-info    { border-left-color: #0dcaf0; }
.notification-item.type-success { border-left-color: #1cbb8c; }
.notification-item.type-warning { border-left-color: #f1734f; }
.notification-item.type-error   { border-left-color: #ff3d60; }
.notification-item.type-action  { border-left-color: #6B74AF; }
.notification-item.type-info    .noti-type-icon { color: #0dcaf0; }
.notification-item.type-success .noti-type-icon { color: #1cbb8c; }
.notification-item.type-warning .noti-type-icon { color: #f1734f; }
.notification-item.type-error   .noti-type-icon { color: #ff3d60; }
.notification-item.type-action  .noti-type-icon { color: #6B74AF; }

/* Priority override — sticky items always use danger accents + flag icon.
   Higher specificity than .type-* rules above so it wins regardless of type. */
.notification-item.priority {
    border-left-color: #ff3d60 !important;
    background-color: rgba(255, 61, 96, 0.04);
}
.notification-item.priority.unread { background-color: rgba(255, 61, 96, 0.08); }
.notification-item.priority:hover  { background-color: rgba(255, 61, 96, 0.10); }
.notification-item.priority .noti-type-icon { color: #ff3d60 !important; }
@keyframes noti-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.noti-icon.has-new i { animation: noti-pulse 0.4s ease; }
/* <-- Notification badge */

/* --> Update timer chip (floating, bottom-left) */
.update-chip {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 1070;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px 12px 20px;
    background: #37447A;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.24);
    user-select: none;
    pointer-events: none;
}
.update-chip-icon {
    font-size: 1.35rem;
    color: #ffd166;
}
.update-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.update-chip-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}
.update-chip-timer {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ff8585;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 575.98px) {
    .update-chip {
        bottom: 12px;
        left: 12px;
        padding: 9px 18px 9px 14px;
        gap: 10px;
    }
    .update-chip-icon  { font-size: 1.15rem; }
    .update-chip-label { font-size: 0.7rem; }
    .update-chip-timer { font-size: 0.98rem; }
}

/* --> Sticky toast backdrop (modal-like) */
.sticky-toast-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1075;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.sticky-toast-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* When a Bootstrap modal is open, demote the sticky deck behind the modal backdrop.
   Bootstrap modal-backdrop = 1050, modal = 1055. Sticky must sit below 1050. */
body.modal-open #stickyToastContainer,
body.modal-open #stickyToastBackdrop {
    z-index: 1040 !important;
    pointer-events: none;
}

/* --> Sticky toast (Sonner-style minimalist deck) */
#stickyToastContainer {
    display: grid;
    grid-template-areas: "stack";
    grid-template-columns: 1fr;
    width: 460px;
    pointer-events: none;
}

/* While JS pre-measures expanded heights, kill all transitions so the offscreen
   layout swap is invisible to the user. */
#stickyToastContainer.is-measuring,
#stickyToastContainer.is-measuring * {
    transition: none !important;
    animation: none !important;
}

/* Reset Bootstrap toast defaults that fight the minimal look */
#stickyToastContainer > .sticky-toast {
    grid-area: stack;
    margin: 0;
    min-width: 0;
    max-width: 460px;
    width: 100%;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 4px solid transparent;
    border-radius: 12px;
    box-shadow:
        0 12px 28px -10px rgba(15, 23, 42, 0.18),
        0 4px 10px -4px rgba(15, 23, 42, 0.08);
    padding: 14px 16px;
    position: relative;
    overflow: visible;
    pointer-events: auto;
    transform-origin: top center;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
                opacity   0.28s ease;
    transform: translateY(0) scale(1);
    z-index: calc(100 - var(--sticky-index, 0));
    /* Grid layout: title shares row with actions; body and time span both columns */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title actions"
        "body  body"
        "time  time";
    column-gap: 8px;
}
#stickyToastContainer .sticky-toast .sticky-title { grid-area: title; }
#stickyToastContainer .sticky-toast .sticky-text  { grid-area: body; }
#stickyToastContainer .sticky-toast .sticky-time  { grid-area: time; }
/* When the sticky has an ActionUrl, content is wrapped in an anchor; display:contents
   makes the anchor "transparent" to the grid so its children keep their grid-area assignments. */
#stickyToastContainer .sticky-toast .noti-link {
    display: contents;
    color: inherit;
    text-decoration: none;
}
#stickyToastContainer .sticky-toast a.noti-link { cursor: pointer; }
#stickyToastContainer > .sticky-toast.show {
    opacity: 1;
}
#stickyToastContainer > .sticky-toast[data-sticky-position="hidden"],
#stickyToastContainer > .sticky-toast[data-sticky-position="hidden"].show {
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px) scale(0.82);
}

/* Expanded on hover — uses dynamic per-toast height accumulation (Sonner-style) */
#stickyToastContainer.is-expanded > .sticky-toast,
#stickyToastContainer.is-expanded > .sticky-toast.show {
    transform: translateY(var(--sticky-expanded-offset, 0)) scale(1);
    opacity: 1;
}
#stickyToastContainer.is-expanded > .sticky-toast[data-sticky-position="hidden"],
#stickyToastContainer.is-expanded > .sticky-toast[data-sticky-position="hidden"].show {
    transform: translateY(var(--sticky-expanded-offset, 0)) scale(1);
    opacity: 1;
    pointer-events: auto;
}
/* Touch devices (no hover) previously force-expanded the deck permanently, which
   left up to 3 full-size cards fanned out with no way to collapse them — they
   covered the screen on tablets (e.g. Surface). Touch now uses an explicit
   tap-to-toggle (see notifications.shilo.js), so the deck honors `.is-expanded`
   exactly like hover-capable devices: collapsed (stacked) by default. */

/* --> Priority emphasis: ALL sticky toasts are priority, so type colors are
   overridden to danger and the left icon is a flag. */

/* Title text takes available space; long titles ellipsis */
.sticky-title-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gentle danger halo — refined "breathing" effect to draw attention without being noisy */
#stickyToastContainer > .sticky-toast {
    animation: stickyCardPulse 2.6s ease-in-out infinite;
    border-left-color: #ff3d60 !important;   /* danger accent overrides all type colors */
}
/* Flag icon breathes softly in sync */
#stickyToastContainer .sticky-toast .sticky-icon {
    animation: stickyFlagPulse 2.2s ease-in-out infinite;
    transform-origin: center;
    color: #ff3d60;
}

@keyframes stickyCardPulse {
    0%, 100% {
        box-shadow:
            0 12px 28px -10px rgba(15, 23, 42, 0.18),
            0 4px 10px -4px rgba(15, 23, 42, 0.08),
            0 0 0 0 rgba(255, 61, 96, 0),
            0 0 0 0 rgba(255, 61, 96, 0);
    }
    50% {
        box-shadow:
            0 12px 28px -10px rgba(15, 23, 42, 0.18),
            0 4px 10px -4px rgba(15, 23, 42, 0.08),
            0 0 0 3px rgba(255, 61, 96, 0.30),
            0 0 22px 6px rgba(255, 61, 96, 0.20);
    }
}
@keyframes stickyFlagPulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(0.92); }
}

/* Accessibility: respect users who disable motion */
@media (prefers-reduced-motion: reduce) {
    #stickyToastContainer > .sticky-toast,
    #stickyToastContainer .sticky-toast .sticky-icon {
        animation: none !important;
    }
}

/* Inner layout — mirrors the offcanvas notification item (icon inline with title) */
#stickyToastContainer .sticky-toast .sticky-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 6px 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
}
#stickyToastContainer .sticky-toast .sticky-icon {
    font-size: 0.95rem;
    line-height: 1;
}
/* Sticky icon is always the priority flag, rendered in danger color regardless of type */
#stickyToastContainer .sticky-toast .sticky-icon { color: #ff3d60; }
#stickyToastContainer .sticky-toast .sticky-text {
    margin: 0;
    font-size: 0.8125rem;
    color: #4b5563;
    line-height: 1.4;
    word-break: break-word;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}
#stickyToastContainer .sticky-toast .sticky-time {
    margin: 0;
    font-size: 0.7rem;
    color: #6c757d;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}
/* Collapsed state: tighten title since body/time are hidden */
#stickyToastContainer:not(.is-expanded) .sticky-toast .sticky-title {
    margin: 0;
}
/* Expanded state (hover): reveal body and time */
#stickyToastContainer.is-expanded .sticky-toast .sticky-text {
    max-height: 200px;
    opacity: 1;
    margin: 0 0 6px 0;
}
#stickyToastContainer.is-expanded .sticky-toast .sticky-time {
    max-height: 30px;
    opacity: 1;
}
/* Touch devices reveal body/time only when the deck is expanded via tap-to-toggle,
   same as the hover-expanded state above — no permanent always-on content. */

/* Responsive: shrink the deck on smaller viewports so it doesn't overlap the sidebar
   or feel oversized on tablets/phones. */
@media (max-width: 1199.98px) {
    #stickyToastContainer { width: 380px; }
    #stickyToastContainer > .sticky-toast {
        max-width: 380px;
        padding: 12px 14px;
    }
    #stickyToastContainer .sticky-toast .sticky-title { font-size: 0.9rem; }
    #stickyToastContainer .sticky-toast .sticky-text  { font-size: 0.78rem; }
}
@media (max-width: 767.98px) {
    #stickyToastContainer {
        width: calc(100vw - 16px);
        max-width: 380px;
    }
    #stickyToastContainer > .sticky-toast {
        max-width: 100%;
        /* Preserve vertical padding so the card keeps its height; only shrink horizontal */
        padding: 14px 12px;
        border-radius: 10px;
    }
    #stickyToastContainer .sticky-toast .sticky-title { font-size: 0.88rem; }
    #stickyToastContainer .sticky-toast .sticky-text  { font-size: 0.76rem; }
    #stickyToastContainer .sticky-toast .sticky-time  { font-size: 0.66rem; }
}

/* User dropdown menu header — name + email as a "card" header on mobile and desktop */
.user-menu-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, #37447A 0%, #6B74AF 100%);
}
.user-menu-header .fw-bold { color: #fff !important; font-size: 0.9rem; line-height: 1.2; }
.user-menu-header .text-muted { color: rgba(255, 255, 255, 0.75) !important; font-size: 0.72rem; }

/* Close button — tiny X icon top-right, no chrome */
/* <-- Sticky toast */

/* --> Notification dropdown tabs (underline style) */
.nav-noti-tabs {
    list-style: none;
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.nav-noti-tabs .nav-item .nav-link {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #6c757d;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
}
.nav-noti-tabs .nav-item .nav-link:hover {
    color: #212529;
}
.nav-noti-tabs .nav-item .nav-link.active {
    color: #1cbb8c;
    border-bottom-color: #1cbb8c;
    font-weight: 600;
}
.nav-noti-tabs .nav-item .nav-link .badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    background-color: #adb5bd;
    color: #fff;
    border-radius: 10px;
}
.nav-noti-tabs .nav-item .nav-link.active .badge {
    background-color: #ff3d60;
}
/* <-- Notification dropdown tabs */

/* --> Notifications offcanvas */
.noti-offcanvas {
    width: 420px;
    max-width: 100vw;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}
.noti-offcanvas .offcanvas-body {
    overflow-y: auto;
}
.noti-offcanvas .offcanvas-header {
    background: #fff;
}
/* <-- Notifications offcanvas */

/* --> Mobile sidebar drawer (<=992px)
   Nazox's base rules show the sidebar as a 70px overlay on top of the content
   with no scrim when the menu is toggled open below 992px. Here we turn it into
   a proper drawer: a full-width panel anchored to the left, a dark backdrop that
   dims the page and closes on tap, and a locked background. Scoped to the mobile
   breakpoint only, so the desktop layout and .vertical-collpsed are untouched. */
.vertical-menu-backdrop {
    display: none;
}

@media (max-width: 992px) {
    /* Full-height drawer on the left, above the backdrop, below the fixed topbar. */
    body.sidebar-enable .vertical-menu {
        position: fixed !important;
        top: 70px;
        bottom: 0;
        left: 0;
        right: auto;
        width: 240px !important;
        z-index: 1001;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
    }

    /* Dark scrim over the content. Sits below the drawer (1001) and the topbar
       (1002), so the hamburger stays tappable to close. */
    body.sidebar-enable .vertical-menu-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background-color: rgba(0, 0, 0, 0.5);
    }

    /* Don't scroll the page behind an open drawer. */
    body.sidebar-enable {
        overflow: hidden;
    }
}
/* <-- Mobile sidebar drawer */

/* --> Entry list responsive: PO/Qty truncation widths
   Replaces the JS screenWidth-driven truncation (stale after a Surface Pro
   redocks/rotates, and previously miscomputed by an operator-precedence bug:
   `data.length > screenWidth <= 1600 ? 20 : 45` always evaluated true) with a
   width-driven CSS rule that reacts live to viewport changes. Tap-target
   sizing and full-bleed modals for this page are a separate, later pass —
   see docs/superpowers/plans/2026-07-08-entry-index-responsive.md */
.dt-pos-clip {
    max-width: 250px;
}

.dt-qties-clip {
    max-width: none;
}

@media (max-width: 1600px) {
    .dt-pos-clip {
        max-width: 130px;
    }

    .dt-qties-clip {
        max-width: 80px;
    }
}
/* <-- Entry list responsive: PO/Qty truncation widths */

/* Load Order process indicators (P/A/L/D) — bigger, touch-friendly on coarse pointers (tablet/Surface).
   Scoped to #dtLoadings so the global .iconStatus badge used elsewhere is untouched.
   Mouse/desktop keeps the compact size. --> */
@media (pointer: coarse) {
    /* Enlarge the four P/A/L/D badges uniformly (badge = --size * 1.75 ≈ 26px). */
    #dtLoadings .iconStatus[data-letter] {
        --size: 15px;
        font-size: 15px !important; /* beat the .font-size-12 utility (declared !important) so the letter scales too */
        margin-inline: .15rem; /* extra gap so a tap doesn't hit the neighbor */
    }
    /* Give the actionable (clickable) indicators a ~44x44px hit area via padding. */
    #dtLoadings a.load-order-pick-indicator,
    #dtLoadings a.load-order-audit-indicator,
    #dtLoadings a.load-order-load-indicator,
    #dtLoadings a.load-order-load-nodock-indicator,
    #dtLoadings a.load-order-delivery-indicator {
        min-width: 44px;
        min-height: 44px;
        padding: .35rem;
        justify-content: center;
        align-items: center;
    }
}
/* <-- Load Order process indicators touch sizing */

/* Entry list touch tap targets (Surface Pro / coarse pointers)
   The issue/indicator/action icons in #dtEntries are ~16px FontAwesome glyphs
   packed tight — several are actionable (toggle Hazmat/Hold, open Damage/
   Inbond/GR modals) so a mistap flips the wrong flag. Inflate the tappable
   wrapper via padding (not the icon itself) so mouse/desktop layout is
   untouched — same ~44px hit-area target as the Load Order P/A/L/D indicators
   above, applied here to Entry's issue-icon and Indicators cells. */
@media (pointer: coarse) {
    /* :not(.dropdown-item) — the mDots action menu also lives inside tbody and
       most of its entries are <a data-bs-toggle='modal'>; turning those into
       44px inline-flex chips collapses the menu's vertical stacking (items end
       up side-by-side and look missing on Surface). Only the in-cell icons
       need the chip treatment. */
    #dtEntries tbody a[data-toggle='tooltip']:not(.dropdown-item),
    #dtEntries tbody span[data-toggle='tooltip'],
    #dtEntries tbody a[data-bs-toggle='modal']:not(.dropdown-item),
    #dtEntries tbody a.noti-icon:not(.dropdown-item) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: .35rem;
    }

    /* Menu entries keep block stacking; touch height comes from vertical
       padding instead (~40px row against the theme's .35rem default). */
    #dtEntries tbody .dropdown-menu .dropdown-item {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    /* The Responsive-extension row expander (first cell) gets the same
       breathing room so tapping it doesn't clip the adjacent Entry link. */
    #dtEntries tbody td.dtr-control {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }
}
/* <-- Entry list touch tap targets */

/* Entry list xl modals go full-bleed on narrow touch (Zebra TC22 class, <=575.98px)
   The ~15 modal-xl dialogs on this page (Entry Info, Documents, GRs, Damage,
   Inbond, etc.) letterbox to a fixed max-width and leave their col-md-4/
   col-md-6 form rows cramped on a phone-width screen. Full-bleed gives forms
   the whole viewport instead. Global to logiaide.css (all modal-xl dialogs
   site-wide), matching this file's existing 575.98px breakpoint. */
@media (max-width: 575.98px) {
    .modal-dialog.modal-xl {
        max-width: none;
        width: auto;
        margin: 0;
        min-height: 100dvh;
        display: flex;
        align-items: stretch;
    }

    .modal-dialog.modal-xl .modal-content {
        border: 0;
        border-radius: 0;
        min-height: 100dvh;
    }
}
/* <-- Entry list xl modals full-bleed on narrow touch */

/* Combined (linked-group) Pick/Audit/Load screens (#pageCombined).
   Operated on forklift tablets / Zebra TC22 (~360px): the per-order tab strip must
   scroll horizontally without wrapping, and every touch control needs a >=44px target.
   Scoped to #pageCombined so it never leaks into the per-order screens or the grid. */
#pageCombined #ulCombinedTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#pageCombined #ulCombinedTabs .nav-link {
    white-space: nowrap;
}

/* Keep the horizontal scroll inside each pane's table, never the page body. */
#pageCombined .cb-scroll {
    max-height: 62vh;
    overflow: auto;
}

#pageCombined .cb-status {
    width: 44px;
}

/* Coarse pointers (touch): enlarge scan/tab/status hit targets to the 44px minimum. */
@media (pointer: coarse) {
    #pageCombined #ulCombinedTabs .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    #pageCombined #txtCombinedScan,
    #pageCombined #combined-scan-go,
    #pageCombined #btnCombinedAuditPallets {
        min-height: 48px;
    }

    #pageCombined #divCombinedPanes td,
    #pageCombined #divCombinedPanes th {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
}

/* Very narrow devices (TC22 ~360px): tighten table cells so more columns stay visible. */
@media (max-width: 400px) {
    #pageCombined #divCombinedPanes td,
    #pageCombined #divCombinedPanes th {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
        font-size: 0.85rem;
    }
}
/* <-- Combined session screens */

/* Login: show/hide password toggle --> */
.auth-form-group-custom .auth-password-input {
    padding-right: 52px;
}

/* Hide Edge's built-in reveal button so it doesn't duplicate the custom toggle. */
.auth-form-group-custom .auth-password-input::-ms-reveal {
    display: none;
}

.auth-form-group-custom .auth-password-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #74788d;
    font-size: 20px;
    line-height: 1;
}

.auth-form-group-custom .auth-password-toggle:hover,
.auth-form-group-custom .auth-password-toggle:focus {
    color: #5664d2;
}
/* <-- Login password toggle */