/* --- Package Builder custom styles moved from package_builder.html --- */
.draggable-modal .modal-dialog {
    pointer-events: auto;
}
.dragging {
    user-select: none;
}
.draggable-handle {
    cursor: move !important;
}
.vendor-price-peninsular,
.vendor-price-ced,
.vendor-price-hd {
    text-align: right;
}
#loadOptionsTable tbody tr:hover {
    background-color: #f8f9fa;
    cursor: pointer;
}
#loadOptionsTable tbody tr.table-primary {
    background-color: #b3d4fc !important;
}
/* Unified DataTables child row expand/collapse control styles */
.dt-control {
    cursor: pointer;
    text-align: center;
    vertical-align: middle !important;
    font-size: 1.2em;
}
.dt-control i.fa-plus-square,
.dt-control i.fa-plus-square-o {
    color: #28a745 !important; /* Bootstrap green for expand */
    transition: color 0.2s;
}
.dt-control i.fa-minus-square,
.dt-control i.fa-minus-square-o {
    color: #dc3545 !important; /* Bootstrap red for collapse */
    transition: color 0.2s;
}
.dt-control-header {
    text-align: center;
}
.dt-control:hover i {
    filter: brightness(1.2);
    opacity: 0.85;
}
tr.shown .dt-control i.fa-plus-square,
tr.shown .dt-control i.fa-plus-square-o {
    display: none;
}
tr.shown .dt-control i.fa-minus-square,
tr.shown .dt-control i.fa-minus-square-o {
    display: inline;
}
.message {
    text-align: center;
    padding: 5px;
    border: #ccc dotted 2px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.logo2 {
    width: 300px;
    display: block;
    margin: auto;
}

.form-group {
    margin: 1rem 0;
}

.progress {
    width: 60%;
    height: 30px;
    font-size: 15px;
}

.select2-selection__rendered {
    line-height: 45px !important;
}

.select2-container .select2-selection--single {
    height: 50px !important;
}

.select2-selection__arrow {
    height: 49px !important;
}

form input,
form label {
    display: block
}

input[type="date"] {
    position: relative;
    padding: 10px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1;
}

input[type="date"]:before {
    color: transparent;
    background: none;
    display: block;
    font-family: 'FontAwesome';
    content: '\f073';
    /* This is the calendar icon in FontAwesome */
    width: 15px;
    height: 20px;
    position: absolute;
    top: 12px;
    right: 6px;
    color: #999;
}

nav2 ul {
    list-style: none;
    height: 200px;
    width: 40%;
}

.listwrapper {
    max-height: 200px;
    max-width: 60%;
    overflow: hidden;
    overflow-y: scroll;
}

.bolden {
    font-family: "Arial Black"
}

.datetimepicker {
    z-index: 99999 !important;
    /* has to be larger than 1050 */
}

.verticalTableHeader {
    text-align: left;
    white-space: nowrap;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.verticalTableHeader p {
    margin: 0 -100%;
    display: inline-block;
}

.verticalTableHeader p:before {
    content: '';
    width: 0;
    padding-top: 110%;
    /* takes width as reference, + 10% for faking some extra padding */
    display: inline-block;
    vertical-align: left
}

table.dataTable tbody td thead {
    vertical-align: middle;
}

.table th {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.table td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

tr.odd td:first-child,
tr.even td:first-child {
    padding-left: 1em;
}

th.dt-center,
td.dt-center {
    text-align: center;
}

td.details-control {
    background: url('../details_open.png') no-repeat center center;
    cursor: pointer;
}

td.details-control1 {
    background: url('../details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('../details_close.png') no-repeat center center;
}

tr.shown td.details-control1 {
    background: url('../details_close.png') no-repeat center center;
}
/* Ensure selected rows in DataTables are visible using theme colors */
.selected {
    background-color: var(--bs-success) !important; /* Use Bootstrap's success background color */
}

/* Apply text-success class to selected rows */
.selected.text-success {
    color: var(--bs-success-text) !important; /* Use Bootstrap's success text color */
}

div.dtsp-searchPane div.dt-container div.dt-scroll-body,
div.dtsp-searchPane div.dt-container div.dataTables_scrollBody,
div.dtsp-searchPane div.dataTables_wrapper div.dt-scroll-body,
div.dtsp-searchPane div.dataTables_wrapper div.dataTables_scrollBody {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

.dtsp-horizontalPanes {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping if too many panes */
    gap: 10px; /* Adds spacing between panes */
    justify-content: flex-start; /* Aligns panes to the left */
}

.dtsp-pane {
    flex: 1 1 auto; /* Adjust panes to have flexible widths */
    min-width: 150px; /* Set a minimum width for panes */
    max-width: 300px; /* Optional: Limit the maximum width */
}

div.dtsp-verticalContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes,
div.dtsp-verticalContainer div.dtsp-dataTable {
    width: 12%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 0;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 8%;
}

div.dtsp-verticalPanes {
    margin-right: 15px;
}

div.dtsp-title {
    margin-right: 0px !important;
    margin-top: 13px !important;
    margin-bottom: 0 !important;
}

input.dtsp-search {
    min-width: 0px !important;
    padding-left: 0px !important;
    margin: 0px !important;
}

/*
.dtsp-searchPane tr.selected {
    /* Use your theme’s variable if available 
    background-color: var(--bs-table-active-bg) !important;
}
*/
  
div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes {
    flex-direction: column;
    flex-basis: 0px;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes div.dtsp-searchPane {
    flex-basis: 0px;
}

div.dtsp-verticalContainer div.dtsp-dataTable {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 80%;
}

div.dts div.dataTables_scrollBody {
    background: #a0a0a0;
}

.dataTables_scrollBody {
    overflow-y: auto;
}

.dt-scroll-body {
    border-bottom: none !important;
  }
  
/* More specific selectors to ensure the styles are applied */
#selected-parts thead th {
    border-left: none !important;
    border-right: none !important;
}

#selected-parts tfoot th {
    border-left: none !important;
    border-right: none !important;
}

#jwlist.dataTable th:nth-child(1),
#jwlist.dataTable th:nth-child(2),
#jwlist.dataTable th:nth-child(8),
#jwlist.dataTable th:nth-child(10) {
    width: 50px;
    max-width: 50px;
    word-break: break-all;
    white-space: pre-line;
}

#jwlist.dataTable td:nth-child(1),
#jwlist.dataTable td:nth-child(2),
#jwlist.dataTable td:nth-child(8),
#jwlist.dataTable td:nth-child(10) {
    width: 50px;
    max-width: 50px;
    word-break: break-all;
    white-space: pre-line;
}

#login.container #login-row #login-column #login-box {
    margin-top: 120px;
    max-width: 600px;
    height: 370px;
    border: 1px solid #9C9C9C;
    background-color: #EAEAEA;
}

#login.container #login-row #login-column #login-box #login-form {
    padding: 20px;
}

/* Stop Line Break inside Cell */
.dt-body-nowrap {
    white-space: nowrap;
}

.dt-body-center {
    text-align: center;
}

/* Change opacity of table groups 
.subtable th:nth-child(4),
.subtable th:nth-child(5),
.subtable th:nth-child(6),
.subtable th:nth-child(7),
.subtable td:nth-child(4),
.subtable td:nth-child(5),
.subtable td:nth-child(6),
.subtable td:nth-child(7) {
    /*opacity: 0.8;
    filter: brightness(70%);
}*/

.pieceWork {
    /* This value is the OPPOSITE color of our background */ 
    mix-blend-mode: difference;
    filter: brightness(70%);
}
.tags-container {
    display: flex; /* Enables flex layout */
    flex-wrap: wrap; /* Allows the content to wrap to the next line */
    gap: 5px; /* Adds spacing between tag bubbles */
    max-width: 100%; /* Ensures the container doesn't overflow the cell */
    padding: 5px; /* Optional: adds some padding inside the container */
    box-sizing: border-box; /* Ensures padding is included in width calculations */
}
.tag-bubble {
    display: inline-block;
    padding: 0.25em 0.5em;
    margin: 0 0.25em;
    background-color: #6c757d;
    color: white;
    border-radius: 15px;
    cursor: pointer;
    white-space: nowrap; /* Prevents text inside bubbles from breaking */
}
.tag-bubble .remove-tag {
    margin-left: 5px;
    font-weight: bold;
    color: #ffdddd;
    cursor: pointer;
}
#add-tag-bubbles #tag-filters .badge {
    display: inline-flex; /* Ensures the bubble is treated as a flex container */
    align-items: center;  /* Centers content within the bubble */
    line-height: 1;       /* Ensure the height aligns with the font size */
    padding: 0.4rem 0.7rem; /* Uniform padding for consistent size */
    vertical-align: middle; /* Aligns bubble text with other inline elements */
}

#add-tag-bubbles #tag-filters {
    display: flex; /* Ensure the bubbles are laid out as flex items */
    align-items: center; /* Align bubbles within their container */
}

.nested-table tr.table-danger {
    background-color: var(--bs-table-bg, #f8d7da) !important;
    color: var(--bs-table-color, #721c24) !important;
}

.nested-table tr.table-warning {
    background-color: var(--bs-table-bg, #fff3cd) !important;
    color: var(--bs-table-color, #856404) !important;
}

.dtsp-container {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Added to try to correct entries/search header for datatables */
.dt-length {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Force left alignment */
    gap: 0.5rem;
    text-align: left;
}
.dataTables_wrapper .row .col-sm-6:first-child {
    text-align: left !important;
}

/* ============================== */
/* Draggable Modal Styles */
/* ============================== */
.draggable-modal {
    position: absolute !important;
    margin: 0 !important;
}

.draggable-handle {
    cursor: move !important;
    user-select: none;
}

.draggable-handle:active {
    cursor: grabbing !important;
}

/* Prevent text selection while dragging */
.modal.dragging {
    user-select: none;
}

/* Optional: Add visual indicator when hovering over draggable area */
.draggable-handle:hover {
    opacity: 0.9;
}

/* Vacation Time Summary Table Styles */
/* Force vertical centering for dt-control cells */
#timeTable td.dt-control,
#vacationReportTable td.dt-control {
    vertical-align: middle !important;
    height: auto !important;
    padding: 8px !important;
    position: relative !important;
}

/* Remove or control the ::before pseudo-element that DataTables adds */
#timeTable td.dt-control::before,
#vacationReportTable td.dt-control::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure the icon is properly positioned */
#timeTable td.dt-control i,
#vacationReportTable td.dt-control i {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Ensure all table cells have consistent height and alignment */
#timeTable td {
    vertical-align: middle !important;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 8px !important;
}

/* Prevent text wrapping on name columns */
#timeTable td.no-wrap {
    white-space: nowrap;
}

/* Ensure table rows don't have extra height */
#timeTable tr {
    height: auto !important;
}

/* Vacation Report Specific Styles */
.vacation-report-container {
    margin: 20px 0;
}

.report-controls {
    background: var(--bs-light, #f8f9fa);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.balance-positive {
    color: var(--bs-success, #28a745);
    font-weight: bold;
}

.balance-negative {
    color: var(--bs-danger, #dc3545);
    font-weight: bold;
}

.balance-warning {
    color: var(--bs-warning, #ffc107);
    font-weight: bold;
}

.transaction-detail {
    font-size: 0.85em;
    padding: 5px;
    margin: 2px 0;
    border-left: 3px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-light, #f8f9fa);
    color: var(--bs-body-color, #212529) !important;
}

.transaction-accrual {
    border-left-color: var(--bs-success, #28a745);
}

.transaction-usage {
    border-left-color: var(--bs-danger, #dc3545);
}

.transaction-carryover {
    border-left-color: var(--bs-warning, #ffc107);
}

/* Child row content styling */
.child-row-content {
    background: var(--bs-light, #f8f9fa);
    color: var(--bs-body-color, #212529) !important;
    padding: 15px;
    border-left: 4px solid var(--bs-primary, #0d6efd);
}

.child-row-content h6 {
    color: var(--bs-body-color, #495057) !important;
    font-weight: bold;
    margin-bottom: 10px;
}

.child-row-content .text-muted {
    color: var(--bs-secondary-color, #6c757d) !important;
}

.child-row-content .text-danger {
    color: var(--bs-danger, #dc3545) !important;
}

/* PO Details difference highlighting */
.difference-row {
    color: var(--bs-danger, #dc3545) !important;
}

.difference-row td {
    color: var(--bs-danger, #dc3545) !important;
}

.text-danger-amount {
    color: var(--bs-danger, #dc3545) !important;
}

/* ============================== */
/* Part Mapper Styles */
/* ============================== */

/* Main container layout */
.part-mapper-wrapper {
    min-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
}

.part-mapper-container {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Dual panel layout */
.part-mapper-panels {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
}

.part-mapper-tag-panel {
    flex-shrink: 0;
    position: static;
}

.part-mapper-panel {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Set specific widths for each panel */
.part-mapper-panel:first-child {
    flex: 0 0 40%;
    margin-right: 15px;
}

.part-mapper-panel:last-child {
    flex: 0 0 calc(60% - 15px);
}

.panel-header,
.part-mapper-panel-header {
    display: flex;
    align-items: stretch;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    flex-shrink: 0;
}

.part-mapper-panel-header > .d-flex {
    width: 100%;
    gap: 12px;
    flex-wrap: nowrap;
}

.part-mapper-panel-header > .d-flex > :first-child {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.part-mapper-panel-header h5,
.part-mapper-panel-header small {
    text-align: left;
}

.part-mapper-panel-header small {
    display: block;
    margin-top: 2px;
}

.part-mapper-panel-header > .d-flex > :last-child {
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.suggestion-mode-control {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

.suggestion-mode-control .form-check {
    display: flex;
    align-items: center;
}

.suggestion-mode-control .form-check-input {
    margin: 0;
}

.suggestion-mode-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.2;
}

.suggestion-mode-title {
    font-weight: 600;
    cursor: pointer;
}

.suggestion-mode-subtext {
    display: block;
    margin-top: 2px;
}

.panel-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
    margin: 0;
}

.panel-stats {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Table containers with auto-fit scrolling */
.table-container,
.part-mapper-table-container {
    flex: 1;
    min-height: 0;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

.table-container .dataTables_wrapper,
.part-mapper-table-container .dataTables_wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.table-container .dataTables_scroll,
.part-mapper-table-container .dataTables_scroll {
    flex: 1;
    min-height: 0;
}

.table-container .dataTables_scrollBody,
.part-mapper-table-container .dataTables_scrollBody {
    overflow: auto !important;
}

/* Part Mapper specific DataTables styles */
.part-mapper-table {
    width: 100% !important;
}

#productsTable {
    table-layout: fixed;
}

#productsTable > tbody > tr > td:nth-child(4) {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

#productsTable > thead > tr > th:nth-child(5),
#productsTable > tbody > tr > td:nth-child(5) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    white-space: nowrap;
}

.part-mapper-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.edit-vendor-product-btn {
    background-color: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
}

.edit-vendor-product-btn:hover,
.edit-vendor-product-btn:focus,
.edit-vendor-product-btn:active {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    color: #fff !important;
}

.map-existing-btn {
    background-color: var(--bs-warning, #ffc107) !important;
    border-color: var(--bs-warning, #ffc107) !important;
    color: #212529 !important;
}

.map-existing-btn:hover,
.map-existing-btn:focus,
.map-existing-btn:active {
    background-color: #ffca2c !important;
    border-color: #ffc720 !important;
    color: #212529 !important;
}

.part-mapper-table th {
    background: var(--bs-light, #f8f9fa);
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    padding: 12px 8px;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

.part-mapper-table td {
    padding: 8px;
    vertical-align: middle;
    border-bottom: 1px solid var(--bs-border-color-subtle, #f0f0f0);
}

.part-mapper-table tbody tr:hover {
    background-color: var(--bs-light, #f8f9fa);
}

/* Warning background for hidden items */
.table-warning {
    background-color: #fff3cd !important;
}

.table-warning:hover {
    background-color: #ffeaa7 !important;
}

/* Bulk promotion controls */
.bulk-promotion-controls {
    flex-shrink: 0;
    margin-bottom: 10px;
}

/* Status indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.active {
    background-color: var(--bs-success, #28a745);
}

.status-dot.inactive {
    background-color: var(--bs-secondary, #6c757d);
}

.status-dot.promoted {
    background-color: var(--bs-primary, #007bff);
}

/* Sage part indicator */
.sage-part {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: var(--bs-primary, #007bff);
    background: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.1));
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.875rem;
}

.no-sage-part {
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
    font-size: 0.875rem;
}

.sage-range-6000 {
    color: var(--bs-info, #17a2b8);
    background: var(--bs-info-bg-subtle, rgba(23, 162, 184, 0.1));
}

/* Tag management styles */
.part-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 200px;
}

.tag-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
    cursor: pointer;
}

.tag-badge:hover {
    opacity: 0.8;
}

/* Tag filter section */
.tag-filters {
    margin-bottom: 15px;
    padding: 10px;
    background: var(--bs-light, #f8f9fa);
    border-radius: 4px;
}

.tag-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 2px;
    padding: 4px 8px;
    background: white;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 15px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tag-filter-item:hover {
    background: var(--bs-primary, #007bff);
    color: white;
    border-color: var(--bs-primary, #007bff);
}

.tag-filter-item.active {
    background: var(--bs-primary, #007bff);
    color: white;
    border-color: var(--bs-primary, #007bff);
}

.tag-filter-remove {
    font-weight: bold;
    margin-left: 5px;
    cursor: pointer;
}

/* Action buttons */
.action-buttons {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
    color: white;
}

/* Modal improvements */
.modal-header {
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
}

.modal-footer {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* Form controls in modals */
.modal-body .form-group {
    margin-bottom: 1rem;
}

.modal-body .form-control {
    border-radius: 4px;
}

.modal-body .form-control:focus {
    border-color: var(--bs-primary, #007bff);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Product promotion styles */
.promotion-preview {
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
    padding: 15px;
    margin: 10px 0;
}

.promotion-preview h6 {
    color: var(--bs-primary, #007bff);
    margin-bottom: 10px;
}

.promotion-field {
    margin: 5px 0;
    font-size: 0.9rem;
}

.promotion-field strong {
    color: var(--bs-body-color, #212529);
    min-width: 120px;
    display: inline-block;
}

/* Responsive design for smaller screens */
@media (max-width: 1200px) {
    .part-mapper-panels {
        flex-direction: column;
        gap: 15px;
    }
    
    .part-mapper-panel {
        flex: 1;
        min-height: 300px;
        max-height: none;
    }
    
    .table-container,
    .part-mapper-table-container {
        flex: 1;
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .part-mapper-container {
        margin: 10px 0;
    }
    
    .part-mapper-panel {
        padding: 10px;
        min-height: 250px;
    }
    
    .panel-header,
    .part-mapper-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .part-mapper-panel-header > .d-flex {
        flex-wrap: wrap;
    }

    .part-mapper-panel-header > .d-flex > :last-child {
        margin-left: 0;
        width: 100%;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 3px;
    }
    
    .part-tags {
        max-width: 150px;
    }
    
    .table-container,
    .part-mapper-table-container {
        flex: 1;
        min-height: 200px;
    }
}

/* Loading states */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* DataTables customization for Part Mapper */
.part-mapper-datatable .dataTables_wrapper {
    padding: 0;
}

.part-mapper-datatable .dataTables_filter {
    float: right;
    margin-bottom: 10px;
}

.part-mapper-datatable .dataTables_filter input {
    margin-left: 0.5em;
    border-radius: 4px;
    border: 1px solid var(--bs-border-color, #ced4da);
    padding: 0.375rem 0.75rem;
}

.part-mapper-datatable .dataTables_info {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
    margin-top: 10px;
}

.part-mapper-datatable .dataTables_scrollHead {
    border-bottom: 2px solid var(--bs-border-color, #dee2e6);
}

.part-mapper-datatable .dataTables_scrollBody {
    border-top: none;
}

/* Table row selection */
.part-mapper-table tbody tr.selected {
    background-color: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.1)) !important;
}

.part-mapper-table tbody tr.selected td {
    color: var(--bs-primary, #007bff);
}

/* Vendor product mapping indicator */
.mapped-indicator {
    color: var(--bs-success, #28a745);
    font-weight: bold;
}

.unmapped-indicator {
    color: var(--bs-warning, #ffc107);
    font-weight: bold;
}

/* Price comparison styles */
.price-comparison {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 0.9rem;
}

.price-current {
    font-weight: bold;
    color: var(--bs-primary, #007bff);
}

.price-vendor {
    color: var(--bs-secondary-color, #6c757d);
}

.price-savings {
    color: var(--bs-success, #28a745);
    font-weight: bold;
}

.price-increase {
    color: var(--bs-danger, #dc3545);
    font-weight: bold;
}

/* Search and filter improvements */
.search-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 200px;
}

.filter-dropdown {
    min-width: 150px;
}

/* Batch operation styles */
.batch-operations {
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    display: none;
}

.batch-operations.show {
    display: block;
}

.batch-count {
    font-weight: bold;
    color: var(--bs-primary, #007bff);
}

.batch-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Notification styles */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    max-width: 300px;
    padding: 15px;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.notification.show {
    transform: translateX(0);
}

.notification.success {
    background-color: var(--bs-success, #28a745);
}

.notification.error {
    background-color: var(--bs-danger, #dc3545);
}

.notification.warning {
    background-color: var(--bs-warning, #ffc107);
    color: var(--bs-dark, #212529);
}

.notification.info {
    background-color: var(--bs-info, #17a2b8);
}

/* Sage part styling updates */
.sage-part-indicator.clickable {
    cursor: pointer;
    text-decoration: underline;
    color: #0066cc;
}

.sage-part-indicator.clickable:hover {
    color: #004499;
    text-decoration: none;
}

/* Drag and drop styling */
.dragging {
    opacity: 0.7;
    cursor: move;
}

.drag-helper {
    position: absolute;
    z-index: 9999;
    background: rgba(0, 123, 255, 0.1);
    border: 2px dashed #007bff;
    pointer-events: none;
    transform: rotate(5deg);
}

#productsTable tbody tr.drop-target {
    background-color: rgba(40, 167, 69, 0.1) !important;
    border: 2px dashed #28a745;
}

/* Search styling */
#global-search-input {
    border-radius: 20px;
    padding-left: 40px;
}

.search-container {
    position: relative;
}

.search-container .fas.fa-search {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

/* Modal improvements */
.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

/* Table row hover for better UX */
#vendorProductsTable tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05) !important;
    cursor: grab;
}

#vendorProductsTable tbody tr:active {
    cursor: grabbing;
}

#vendorProductsTable tbody tr.suggestion-source-row {
    background-color: rgba(13, 110, 253, 0.12) !important;
}

/* Child table styling */
.child-table-container {
    background-color: #f8f9fa;
    padding: 15px;
    border-left: 4px solid #007bff;
    margin: 10px 0;
}

.child-vendor-table {
    background-color: white;
    margin-bottom: 0;
    font-size: 0.82rem;
}

.child-vendor-table thead th {
    background-color: #e9ecef;
    font-size: 0.8rem;
    font-weight: 600;
}

.vendor-mapping-row {
    cursor: grab;
}

.vendor-mapping-row:hover {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.vendor-mapping-row:active {
    cursor: grabbing;
}

.vendor-mapping-row.dragging {
    opacity: 0.6;
}

/* Apply small button styling to both main table and child table action buttons */
/* Clean DataTables styling using CSS classes */
#vendorProductsTable tbody tr.vp-compact-row td {
    font-size: 0.80rem;
    line-height: 1.1;
}

#vendorProductsTable tbody tr.vp-compact-row .btn {
    font-size: 0.72rem;
    padding: 0.08rem 0.20rem;
    line-height: 1;
}

/* Child table button consistency */
.child-vendor-table .child-action-btn {
    padding: 0.08rem 0.20rem;
    line-height: 1;
    font-size: 0.66rem;
}

/* Child table drag helper */
.unmap-helper {
    background: rgba(220, 53, 69, 0.1) !important;
    border: 2px dashed #dc3545 !important;
}

/* Drop zone styling for sage parts */
.sage-part-drop-zone {
    transition: background-color 0.2s;
}

.sage-part-drop-zone.drop-target {
    background-color: rgba(40, 167, 69, 0.1) !important;
    border-left: 4px solid #28a745;
}

/* Expand/collapse control styling */
td.dt-control {
    cursor: pointer;
    text-align: center;
    font-size: 1.1em;
}

/* Child Table Simple Sorting Styles */
.child-vendor-table th.sortable {
    cursor: pointer;
    position: relative;
    user-select: none;
}

.child-vendor-table th.sortable:hover {
    background-color: #e9ecef;
}

.child-vendor-table .sort-icon {
    margin-left: 5px;
    font-size: 10px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.child-vendor-table th.sortable:hover .sort-icon {
    opacity: 0.8;
}

.child-vendor-table th.sort-asc .sort-icon,
.child-vendor-table th.sort-desc .sort-icon {
    opacity: 1;
    color: #007bff;
}

/* Style the newly added/highlighted rows */
.child-vendor-table tr.newly-added {
    animation: highlight-child-table 3s ease-out;
}

.child-vendor-table tr.newly-mapped {
    background-color: #d4edda !important;
}

@keyframes highlight-child-table {
    0% { background-color: #d4edda; }
    100% { background-color: transparent; }
}

td.dt-control i {
    color: #007bff;
    transition: all 0.2s;
}

td.dt-control:hover i {
    color: #0056b3;
    transform: scale(1.1);
}

tr.shown td.dt-control i {
    color: #dc3545;
}

/* Remove default DataTables chevron styling */
td.dt-control:before {
    content: none !important;
}

td.dt-control:after {
    content: none !important;
}

/* Add responsive table scrolling on smaller screens */
@media (max-width: 768px) {
    .part-mapper-panel {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .part-mapper-panels {
        flex-direction: column;
    }
    
    .child-table-container {
        padding: 10px;
    }
    
    .child-vendor-table {
        font-size: 0.8rem;
    }
}

/* Part Mapper - Hide sorting icons on non-sortable columns */
.no-sort.sorting:before,
.no-sort.sorting:after,
.no-sort.sorting_asc:before,
.no-sort.sorting_asc:after,
.no-sort.sorting_desc:before,
.no-sort.sorting_desc:after {
    display: none !important;
}

#productsTable th:first-child.sorting:before,
#productsTable th:first-child.sorting:after,
#productsTable th:first-child.sorting_asc:before,
#productsTable th:first-child.sorting_asc:after,
#productsTable th:first-child.sorting_desc:before,
#productsTable th:first-child.sorting_desc:after,
#vendorProductsTable th:first-child.sorting:before,
#vendorProductsTable th:first-child.sorting:after,
#vendorProductsTable th:first-child.sorting_asc:before,
#vendorProductsTable th:first-child.sorting_asc:after,
#vendorProductsTable th:first-child.sorting_desc:before,
#vendorProductsTable th:first-child.sorting_desc:after {
    display: none !important;
}

#productsTable th:first-child.sorting,
#productsTable th:first-child.sorting_asc,
#productsTable th:first-child.sorting_desc,
#productsTable th:first-child.sorting_disabled,
#vendorProductsTable th:first-child.sorting,
#vendorProductsTable th:first-child.sorting_asc,
#vendorProductsTable th:first-child.sorting_desc,
#vendorProductsTable th:first-child.sorting_disabled,
#productsTable th.no-sort,
#vendorProductsTable th.no-sort {
    background-image: none !important;
    padding-right: 8px !important;
}

#productsTable th:first-child .dt-column-order,
#vendorProductsTable th:first-child .dt-column-order,
#productsTable th.no-sort .dt-column-order,
#vendorProductsTable th.no-sort .dt-column-order {
    display: none !important;
}

.no-sort.sorting,
.no-sort.sorting_asc,
.no-sort.sorting_desc {
    cursor: default !important;
}

.no-sort.sorting:hover,
.no-sort.sorting_asc:hover,
.no-sort.sorting_desc:hover {
    background-color: transparent !important;
}

/* Part Mapper Actions - Button spacing */
.part-mapper-actions {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
}

.part-mapper-actions .btn {
    margin: 0;
}