/*
* custom.css
******************************************************************************/

.light-style .menu .app-brand.diamond {
  height: 64px;
}

/*
* Zoom-out preview — 90% view (matches browser Ctrl+- visual).
* Counter-scale on overlays compensates for fixed-position mismatch.
******************************************************************************/
html {
    zoom: 0.9;
    margin: 0;
    padding: 0;
}
html:has(.authentication-wrapper) {
    zoom: 1;
}
body {
    margin: 0;
    padding: 0;
}

/* Modals are fixed-position children of the zoomed html, so with html zoom
   0.9 (and no zoom here) modal content already renders at the same 90%
   scale as the rest of the page. Any zoom on .modal would compound with the
   html zoom (0.9 * 0.9 = 0.81) and shrink the text below the page size. */
.modal {
    zoom: 1;
}

/* Backdrop: fixed-position so % height doesn't stretch — use inset instead */
.modal-backdrop {
    inset: 0;
    width: 100vw;
    height: 100vh;
    transform: scale(1.1112);
    transform-origin: top left;
}

/* Select2 dropdown portals render their inline top/left at the product of
   their ancestors' zoom. Body-level portals sit under html zoom 0.9 (factor
   0.9) so they need zoom 1/0.9 = 1.1112; portals nested in a modal sit under
   html 0.9 AND modal 0.9 (factor 0.81) so they need zoom 1/0.81 = 1.2346.
   Either way the net positioning factor is 1.0, making select2's own
   top/left math exact. width:auto lets the portal shrink-wrap the dropdown
   instead of the inherited width:100%, which would otherwise inflate the
   document scrollWidth and add a horizontal scrollbar. */
body > .select2-container:has(.select2-dropdown) {
    zoom: 1.1112;
    width: auto !important;
}

.modal .select2-container:has(.select2-dropdown) {
    zoom: 1.1112;
    width: auto !important;
    /* select2 computes the portal top from offsetHeight (unzoomed layout px)
       plus a visual offset().top; under the modal's 0.9 net zoom (html only,
       .modal itself is zoom: 1) that lands the portal ~4px low. Pull it up. */
    margin-top: -4px;
}

/* Tooltips are Popper-positioned by transform, so the counter-zoom must stay
   on the .tooltip box for correct placement; the inner bubble is scaled down
   to the 90% page size. */
.tooltip {
    zoom: 1.1112;
}

.tooltip .tooltip-inner {
    zoom: 0.9;
}

/* Toastr lives outside the zoom context — bring back to 100% visual size */
#toast-container {
    zoom: 1.1112;
}

/* Select2 dropdown content inside the counter-zoomed portal. The portal's
   zoom:1.1112 cancels the page zoom (0.9 * 1.1112 = 1.0), so the dropdown
   needs zoom:0.9 to land back at the 90% visual scale of the rest of the
   page. font-size:0.9375rem (15px) renders at 15px * 0.9 = 13.5px visual,
   matching the page body text. !important is required because vendor libs
   load after custom.css and would otherwise override it. */
.select2-dropdown {
    zoom: 0.9;
    font-size: 0.9375rem !important;
}

.select2-dropdown .select2-results__option {
    font-size: 0.9375rem !important;
}

/* Select2 dropdown — slim scrollbar for the options list */
.select2-dropdown .select2-results__options {
    /* Firefox — thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 transparent;
}

/* Chrome / Edge / Safari */
.select2-dropdown .select2-results__options::-webkit-scrollbar {
    width: 5px;
}

.select2-dropdown .select2-results__options::-webkit-scrollbar-track {
    background: transparent;
}

.select2-dropdown .select2-results__options::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 20px;
}

.select2-dropdown .select2-results__options::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

/* Match the selected-value text in the control to the dropdown options so
   select2 text stays readable alongside the page's 13.5px body text. */
.select2-container .select2-selection__rendered {
    font-size: 0.9375rem !important;
}

/* Safety net for dropdown menus that are direct children of <body> (the app's
   DataTable action menus are in-flow today, so this rule matches nothing but
   keeps any teleported menu correctly placed at 100%). */
body > .dropdown-menu {
    zoom: 1.1112;
}

/*
* Full-height layout fix — zoom: 0.9 on html causes the page to render at
* 90% height, leaving a white gap at the bottom when content is short.
* Setting min-height: 111.12vh (= 100vh / 0.9) on the layout wrapper
* ensures the background always fills the actual screen.
* Scoped to non-auth pages only — auth pages use zoom: 1 and don't need this.
******************************************************************************/
html:not(:has(.authentication-wrapper)),
html:not(:has(.authentication-wrapper)) body {
    min-height: 111.12vh;
}

html:not(:has(.authentication-wrapper)) .layout-wrapper {
    min-height: 111.12vh;
}

html:not(:has(.authentication-wrapper)) .layout-page {
    min-height: 111.12vh;
}

html:not(:has(.authentication-wrapper)) .content-wrapper {
    min-height: calc(111.12vh - 70px);
    display: flex;
    flex-direction: column;
}

html:not(:has(.authentication-wrapper)) .content-wrapper .container-fluid {
    flex: 1 1 auto;
}

/* Remove Perfect Scrollbar */
.layout-menu .ps__rail-x,
.layout-menu .ps__rail-y {
    display: none !important;
}

/* Sidebar scroll */
.layout-menu .menu-inner {
    overflow-y: auto !important;
    overflow-x: hidden !important;

    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Chrome / Edge */
.layout-menu .menu-inner::-webkit-scrollbar {
    width: 5px;
}

.layout-menu .menu-inner::-webkit-scrollbar-track {
    background: transparent;
}

.layout-menu .menu-inner::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 20px;
}

/* Show when sidebar hover */
.layout-menu .menu-inner:hover::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 120, 0.45);
}

/* Make thumb bigger when hovering scrollbar */
.layout-menu .menu-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 120, 0.8);
}

/* Firefox */
.layout-menu .menu-inner:hover {
    scrollbar-color: rgba(120, 120, 120, 0.45) transparent;
}
/* Sidebar: use native scroll instead of Perfect Scrollbar (zoom-incompatible) */
/* .layout-menu .menu-vertical,
.layout-menu .menu-inner {
    zoom: 1.111;
} */

.dark-style .menu .app-brand.diamond {
  height: 64px;
}

.app-brand-logo.diamond {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 34px;
  height: 24px;
}

.app-brand-logo.diamond svg {
  width: 35px;
  height: 24px;
}

.app-brand-text.diamond {
  font-size: 1.375rem;
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 70px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* DataTable toggle switch fix
* Prevents DataTable CSS from overriding Bootstrap form-switch size
******************************************************************************/
table.dataTable .form-switch .form-check-input {
  width: 2rem !important;
  height: 1rem !important;
  margin-top: 0.2rem;
  cursor: pointer;
}

/*
* Toastr close button vertical alignment fix
******************************************************************************/
.toast-close-button {
  top: 50% !important;
  transform: translateY(-50%);
}

/*
* DataTable scrollX + Bootstrap dropdown fix
* Dropdowns use data-bs-container="body" to escape overflow constraints.
* Keep overflow-x:auto for horizontal scroll; overflow-y can stay auto.
******************************************************************************/
.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
}

/*
* DataTable scrollbar styling (global)
******************************************************************************/
.dataTables_wrapper .dataTables_scrollBody {
    scrollbar-width: thin;
    scrollbar-color: #bfbfbf transparent;
}
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar { height: 6px; }
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-track { background: transparent; }
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 20px; }
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb:hover { background-color: #999; }

/*
* DataTable scrollX — force table to natural width so horizontal scroll works
******************************************************************************/
table.dataTable {
    width: max-content !important;
}

table.dataTable th,
table.dataTable td {
    white-space: nowrap;
}

/*
* Column visibility dropdown — scrollable list with friendly scrollbar
******************************************************************************/
#colVisList {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 transparent;
}

/* Chrome, Edge, Safari */
#colVisList::-webkit-scrollbar {
    width: 5px;
}
#colVisList::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}
#colVisList::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 10px;
}
#colVisList::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

/*
* Sticky last column (Actions) for wide DataTables with scrollX
* Add class="dt-sticky-last" to the table element to enable.
******************************************************************************/
table.dataTable.dt-sticky-last thead tr th:last-child,
table.dataTable.dt-sticky-last tbody tr td:last-child {
    position: sticky !important;
    right: 0;
    z-index: 2;
    background-color: var(--bs-card-bg, #fff);
    box-shadow: -3px 0 6px -2px rgba(0, 0, 0, 0.08);
}

/* Dark mode support */
.dark-style table.dataTable.dt-sticky-last thead tr th:last-child,
.dark-style table.dataTable.dt-sticky-last tbody tr td:last-child {
    background-color: var(--bs-card-bg, #2b2c40);
}

/*
* Common Modal — scrollable body fix
* With html zoom: 0.9, 100vh is 90% of actual viewport.
* Divide by 0.9 to get the real available height, then subtract margin.
******************************************************************************/
#commonModal .modal-content {
    max-height: calc(100vh / 0.9 - 4rem);
    display: flex;
    flex-direction: column;
}

#commonModal .modal-header,
#commonModal .modal-footer {
    flex-shrink: 0;
}

#commonModal .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;

    /* Firefox — thin scrollbar, no color until hover */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s;
}

#commonModal .modal-body:hover {
    scrollbar-color: rgba(115, 103, 240, 0.4) transparent;
}

/* Chrome / Edge / Safari — overlay scrollbar (no layout shift) */
#commonModal .modal-body::-webkit-scrollbar {
    width: 4px;
}

#commonModal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

#commonModal .modal-body::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 99px;
    transition: background-color 0.2s;
}

#commonModal .modal-body:hover::-webkit-scrollbar-thumb {
    background-color: rgba(115, 103, 240, 0.45);
}

#commonModal .modal-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(115, 103, 240, 0.75);
}

/*
* Shipping Modals — slim scrollbar for modal body & table
******************************************************************************/
#bulkShippingModal .modal-body,
#addDiamondsModal .modal-body {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 transparent;
}

#bulkShippingModal .modal-body::-webkit-scrollbar,
#addDiamondsModal .modal-body::-webkit-scrollbar {
    width: 5px;
}

#bulkShippingModal .modal-body::-webkit-scrollbar-track,
#addDiamondsModal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

#bulkShippingModal .modal-body::-webkit-scrollbar-thumb,
#addDiamondsModal .modal-body::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 20px;
}

#bulkShippingModal .modal-body::-webkit-scrollbar-thumb:hover,
#addDiamondsModal .modal-body::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

#bulkShippingModal .table-responsive,
#commonModalBody .table-responsive,
#addDiamondsModal .table-responsive,
#addJewelriesModal .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 transparent;
}

#bulkShippingModal .table-responsive::-webkit-scrollbar,
#commonModalBody .table-responsive::-webkit-scrollbar,
#addDiamondsModal .table-responsive::-webkit-scrollbar,
#addJewelriesModal .table-responsive::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

#bulkShippingModal .table-responsive::-webkit-scrollbar-track,
#commonModalBody .table-responsive::-webkit-scrollbar-track,
#addDiamondsModal .table-responsive::-webkit-scrollbar-track,
#addJewelriesModal .table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

#bulkShippingModal .table-responsive::-webkit-scrollbar-thumb,
#commonModalBody .table-responsive::-webkit-scrollbar-thumb,
#addDiamondsModal .table-responsive::-webkit-scrollbar-thumb,
#addJewelriesModal .table-responsive::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 20px;
}

#bulkShippingModal .table-responsive::-webkit-scrollbar-thumb:hover,
#commonModalBody .table-responsive::-webkit-scrollbar-thumb:hover,
#addDiamondsModal .table-responsive::-webkit-scrollbar-thumb:hover,
#addJewelriesModal .table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

/*
* Fulfillment status row colors — applied to sale jewelry table rows
* Add new status classes here for future fulfillment options.
******************************************************************************/
.row-fulfillment-packed {
    background-color: rgba(3, 102, 214, 0.08) !important;
}
.row-fulfillment-shipped {
    background-color: rgba(40, 167, 69, 0.08) !important;
}

.row-gw-nw-entered {
    background-color: rgba(255, 159, 67, 0.09) !important;
}

.dark-style .row-fulfillment-packed {
    background-color: rgba(3, 102, 214, 0.12) !important;
}
.dark-style .row-fulfillment-shipped {
    background-color: rgba(40, 167, 69, 0.12) !important;
}
.dark-style .row-gw-nw-entered {
    background-color: rgba(255, 159, 67, 0.14) !important;
}

/*
* Certificate image — constrained display in show views & modals
******************************************************************************/
.certificate-img {
    max-height: 200px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/*
* DataTable search row styles
******************************************************************************/
tr.search-row th {
    padding: 5px 10px !important;
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dbdade !important;
}

tr.search-row th:before,
tr.search-row th:after {
    display: none !important;
}

.column-search {
    width: 100% !important;
    min-width: 80px;
    font-weight: 400 !important;
    padding: 2px 5px !important;
    box-sizing: border-box !important;
}

thead tr.filter-row th {
    padding: 4px !important;
    vertical-align: top;
}

thead tr.filter-row input,
thead tr.filter-row select {
    width: 100%;
}

/*
* Filter dropdown badge — ensure it's never clipped by parent overflow
******************************************************************************/
.filter-dropdown-wrap,
.filter-dropdown-wrap .dropdown {
    overflow: visible !important;
}

/*
* Filter dropdown button — instant color change, no transition flash
******************************************************************************/
#filterDropdownBtn {
    transition: none !important;
}

/*
* Page loader — full-screen overlay shown while the next page is being
* painted; hidden once the window 'load' event fires (or a safety timeout).
******************************************************************************/
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
    background: rgba(248, 249, 250, 0.88);
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader .page-loader-text {
    font-size: 0.9rem;
    color: #566a7f;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/*
* Sidebar group show/hide — the main section labels (Transactions, Ledgers,
* Admin, ...) toggle the following main-level menu items. Items keep their own
* icons; the header just shows/hides the group and rotates a chevron on the
* left (RTL layout).
******************************************************************************/
.menu-group-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.menu-group-toggle .menu-group-chevron {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
}
.menu-group-hidden {
    display: none !important;
}

/*
* Soft action buttons — shared color palette for buttons across modules.
* Classes are named by color (.btn-soft-{color}) so the same color can be
* reused on any button, not just bulk actions.
*
* They follow Sneat's .btn-label-* look (colored text + light tinted
* background). Update the base colors here to restyle everywhere.
******************************************************************************/
:root {
    --soft-purple-color: #7367f0;
    --soft-purple-bg: #e9e6fd;

    --soft-green-color: #28c76f;
    --soft-green-bg: #d9f5e6;

    --soft-orange-color: #ff9f43;
    --soft-orange-bg: #ffeeda;

    --soft-cyan-color: #00cfe8;
    --soft-cyan-bg: #d6f7fb;

    --soft-pink-color: #e83e8c;
    --soft-pink-bg: #fce4ee;

    --soft-amber-color: #b45309;
    --soft-amber-bg: #fef3c7;
}

.btn-soft-purple,
.btn-soft-green,
.btn-soft-orange,
.btn-soft-cyan,
.btn-soft-pink,
.btn-soft-amber {
    border-color: transparent;
}

.btn-soft-purple {
    color: var(--soft-purple-color);
    background: var(--soft-purple-bg);
}
.btn-soft-purple:hover {
    color: var(--soft-purple-color) !important;
    background: #dbd5fb !important;
}
.btn-soft-purple:disabled, .btn-soft-purple.disabled {
    color: var(--soft-purple-color) !important;
    background: var(--soft-purple-bg) !important;
}

.btn-soft-green {
    color: var(--soft-green-color);
    background: var(--soft-green-bg);
}
.btn-soft-green:hover {
    color: var(--soft-green-color) !important;
    background: #c8f1dc !important;
}
.btn-soft-green:disabled, .btn-soft-green.disabled {
    color: var(--soft-green-color) !important;
    background: var(--soft-green-bg) !important;
}

.btn-soft-orange {
    color: var(--soft-orange-color);
    background: var(--soft-orange-bg);
}
.btn-soft-orange:hover {
    color: var(--soft-orange-color) !important;
    background: #ffe6c6 !important;
}
.btn-soft-orange:disabled, .btn-soft-orange.disabled {
    color: var(--soft-orange-color) !important;
    background: var(--soft-orange-bg) !important;
}

.btn-soft-cyan {
    color: var(--soft-cyan-color);
    background: var(--soft-cyan-bg);
}
.btn-soft-cyan:hover {
    color: var(--soft-cyan-color) !important;
    background: #c2f3f9 !important;
}
.btn-soft-cyan:disabled, .btn-soft-cyan.disabled {
    color: var(--soft-cyan-color) !important;
    background: var(--soft-cyan-bg) !important;
}

.btn-soft-pink {
    color: var(--soft-pink-color);
    background: var(--soft-pink-bg);
}
.btn-soft-pink:hover {
    color: var(--soft-pink-color) !important;
    background: #f8d3e4 !important;
}
.btn-soft-pink:disabled, .btn-soft-pink.disabled {
    color: var(--soft-pink-color) !important;
    background: var(--soft-pink-bg) !important;
}

.btn-soft-amber {
    color: var(--soft-amber-color);
    background: var(--soft-amber-bg);
}
.btn-soft-amber:hover {
    color: var(--soft-amber-color) !important;
    background: #fde68a !important;
}
.btn-soft-amber:disabled, .btn-soft-amber.disabled {
    color: var(--soft-amber-color) !important;
    background: var(--soft-amber-bg) !important;
}

/* Dark mode adjustments */
.dark-style .btn-soft-purple {
    color: #a9a0ff;
    background: rgba(115, 103, 240, 0.16);
}
.dark-style .btn-soft-green {
    color: #6fe3a3;
    background: rgba(40, 199, 111, 0.16);
}
.dark-style .btn-soft-orange {
    color: #ffc27d;
    background: rgba(255, 159, 67, 0.16);
}
.dark-style .btn-soft-cyan {
    color: #5cdff5;
    background: rgba(0, 207, 232, 0.16);
}
.dark-style .btn-soft-pink {
    color: #f57ab0;
    background: rgba(232, 62, 140, 0.16);
}
.dark-style .btn-soft-amber {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.18);
}

/*******************************************************************************
 * Theme Gray Override (Sleek Charcoal Slate Gray + High Contrast Text)
 ******************************************************************************/
:root {
    --bs-primary: #5a6268;
    --bs-primary-rgb: 90, 98, 104;
    --bs-primary-hover: #374151;

    --soft-purple-color: #7367f0;
    --soft-purple-bg: #e9e6fd;
}

/* Primary Button Styling & Contrast */
.btn-primary,
a.btn-primary {
    color: #ffffff !important;
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(90, 98, 104, 0.4) !important;
}

.btn-primary:hover,
a.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:focus,
.btn-primary:active,
a.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle {
    color: #ffffff !important;
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
}

.btn-primary:hover *,
a.btn-primary:hover *,
.btn-primary:focus *,
a.btn-primary:focus *,
.btn-primary:active *,
a.btn-primary:active * {
    color: #ffffff !important;
}

.btn-primary:focus-visible,
.btn-check:focus + .btn-primary {
    box-shadow: 0 0 0 0.25rem rgba(90, 98, 104, 0.35) !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #ffffff !important;
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
    box-shadow: none !important;
}

.btn-outline-primary {
    color: #5a6268 !important;
    border-color: #5a6268 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: #ffffff !important;
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
}

/* Primary Text & Link Utility Classes */
.text-primary {
    color: #5a6268 !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: #374151 !important;
}

.bg-primary {
    background-color: #5a6268 !important;
    color: #ffffff !important;
}

.badge.bg-primary {
    color: #ffffff !important;
    background-color: #5a6268 !important;
}

.bg-label-gray {
    background-color: rgba(90, 98, 104, 0.12) !important;
    color: #5a6268 !important;
}

/* Navigation & Menu Active Item Visibility */
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
[dir=rtl] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle,
[dir=rtl] .bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
    background: linear-gradient(72.47deg, #5a6268 22.16%, rgba(90, 98, 104, 0.8) 76.47%) !important;
    box-shadow: 0px 2px 6px 0px rgba(90, 98, 104, 0.48) !important;
    color: #ffffff !important;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link:hover,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link:focus,
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link,
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:hover,
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:focus {
    color: #ffffff !important;
    background-color: #5a6268 !important;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(90, 98, 104, 0.3) !important;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link *,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link:hover *,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link:focus *,
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link *,
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:hover *,
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:focus * {
    color: #ffffff !important;
}

.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle) {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:before {
    border-color: #ffffff !important;
}

/* Inactive Sidebar Menu Links Hover State */
.bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover,
html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover {
    color: #374151 !important;
    background-color: rgba(90, 98, 104, 0.08) !important;
}

.bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover .menu-icon,
.bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover i {
    color: #374151 !important;
}

.bg-menu-theme .menu-sub > .menu-item:not(.active) > .menu-link:hover {
    color: #374151 !important;
    background-color: rgba(90, 98, 104, 0.08) !important;
}



/* Nav Pills (Tabs) Active & Hover State Contrast */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .show > .nav-link,
.nav-pills .show > .nav-link:hover {
    background-color: #5a6268 !important;
    color: #ffffff !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(90, 98, 104, 0.4) !important;
}

.nav-pills .nav-link.active *,
.nav-pills .nav-link.active:hover * {
    color: #ffffff !important;
}

.nav-pills .nav-link:hover:not(.active) {
    color: #374151 !important;
    background-color: rgba(90, 98, 104, 0.08) !important;
}

/* Form Controls & Focus Borders */
.form-control:focus,
.form-select:focus {
    border-color: #5a6268 !important;
    box-shadow: 0 0 0 0.25rem rgba(90, 98, 104, 0.15) !important;
}


.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #5a6268 !important;
    box-shadow: 0 0 0 0.25rem rgba(90, 98, 104, 0.15) !important;
    outline: 0 !important;
}

.form-check-input:checked {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
}

/* Select2 Dropdown Highlight & Selected Contrast */
.select2-results__option[role=option][aria-selected=true],
.select2-container--default .select2-results__option[role=option][aria-selected=true],
html body .select2-container--default .select2-results__option--highlighted[aria-selected=true] {
    background-color: #5a6268 !important;
    color: #ffffff !important;
}

html body .select2-container--default .select2-results__option--highlighted:not([aria-selected=true]),
html body .select2-results__option--highlighted:not([aria-selected=true]),
html body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:not([aria-selected=true]),
html body .select2-results__option--selectable:hover,
html body .select2-results__option[role=option]:hover,
html body .select2-results__option--highlighted {
    background-color: rgba(90, 98, 104, 0.15) !important;
    color: #374151 !important;
}

html body .select2-container--default .select2-results__option--highlighted[aria-selected=true],
html body .select2-results__option--highlighted[aria-selected=true],
html body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable[aria-selected=true],
html body .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #5a6268 !important;
    color: #ffffff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #4b5563;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #4b5563 !important;
}





.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: #ffffff !important;
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(90, 98, 104, 0.4) !important;
}

.btn-outline-primary:hover *,
.btn-outline-primary:focus *,
.btn-outline-primary:active * {
    color: #ffffff !important;
}

/* Dropdown Item Base & Hover States */
.dropdown-menu .dropdown-item,
a.dropdown-item {
    color: #4b5563 !important;
}

.dropdown-menu .dropdown-item *,
a.dropdown-item * {
    color: inherit;
}

.dropdown-item:not(.text-danger):not(.dropdown-item-danger):hover,
a.dropdown-item:not(.text-danger):not(.dropdown-item-danger):hover,
.dropdown-item:not(.text-danger):not(.dropdown-item-danger):focus,
a.dropdown-item:not(.text-danger):not(.dropdown-item-danger):focus {
    color: #5a6268 !important;
    background-color: rgba(90, 98, 104, 0.08) !important;
}

.dropdown-item:not(.text-danger):not(.dropdown-item-danger):hover *,
a.dropdown-item:not(.text-danger):not(.dropdown-item-danger):hover *,
.dropdown-item:not(.text-danger):not(.dropdown-item-danger):focus *,
a.dropdown-item:not(.text-danger):not(.dropdown-item-danger):focus *,
.dropdown-item:not(.text-danger):not(.dropdown-item-danger):hover i,
.dropdown-item:not(.text-danger):not(.dropdown-item-danger):hover span {
    color: #5a6268 !important;
}

.dropdown-item.text-danger,
a.dropdown-item.text-danger {
    color: #ea5455 !important;
}

.dropdown-item.text-danger:hover,
a.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus,
a.dropdown-item.text-danger:focus,
.dropdown-item-danger:hover,
a.dropdown-item-danger:hover {
    color: #ea5455 !important;
    background-color: rgba(234, 84, 85, 0.1) !important;
}

.dropdown-item.text-danger *,
.dropdown-item.text-danger:hover *,
a.dropdown-item.text-danger:hover *,
.dropdown-item.text-danger i,
.dropdown-item.text-danger span,
.dropdown-item.text-danger:hover i,
.dropdown-item.text-danger:hover span,
a.dropdown-item.text-danger:hover i,
a.dropdown-item.text-danger:hover span {
    color: #ea5455 !important;
}

/* Dropdown Item Active & Click State */
.dropdown-item:not(.text-danger):not(.dropdown-item-danger).active,
a.dropdown-item:not(.text-danger):not(.dropdown-item-danger).active,
.dropdown-item:not(.text-danger):not(.dropdown-item-danger):active,
a.dropdown-item:not(.text-danger):not(.dropdown-item-danger):active {
    color: #ffffff !important;
    background-color: #5a6268 !important;
}

.dropdown-item:not(.text-danger):not(.dropdown-item-danger).active *,
a.dropdown-item:not(.text-danger):not(.dropdown-item-danger).active *,
.dropdown-item:not(.text-danger):not(.dropdown-item-danger):active *,
a.dropdown-item:not(.text-danger):not(.dropdown-item-danger):active *,
.dropdown-item:not(.text-danger):not(.dropdown-item-danger).active i,
.dropdown-item:not(.text-danger):not(.dropdown-item-danger).active span,
.dropdown-item:not(.text-danger):not(.dropdown-item-danger):active i,
.dropdown-item:not(.text-danger):not(.dropdown-item-danger):active span,
a.dropdown-item:not(.text-danger):not(.dropdown-item-danger):active i,
a.dropdown-item:not(.text-danger):not(.dropdown-item-danger):active span {
    color: #ffffff !important;
}

a.text-danger:hover,
.text-danger:hover {
    color: #ea5455 !important;
}

/* Table Hover Row Links & Icons */
.table hover tbody tr:hover,
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(90, 98, 104, 0.04) !important;
}

/* Additional UI Controls & Component Color Consistency */
.form-check-input:checked {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
}

.form-switch .form-check-input:checked {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: #5a6268 !important;
}

.tooltip-primary .tooltip-inner {
    background-color: #5a6268 !important;
}

.progress-bar {
    background-color: #5a6268 !important;
}

/* Modal & Scrollable Container Scrollbar Styling */
html body .modal,
html body .modal-dialog,
html body .modal-content,
html body .modal-body,
html body .ps,
html body ::-webkit-scrollbar {
    scrollbar-width: thin !important;
    scrollbar-color: #9ca3af #f1f5f9 !important;
}

html body .modal::-webkit-scrollbar,
html body .modal-dialog::-webkit-scrollbar,
html body .modal-content::-webkit-scrollbar,
html body .modal-body::-webkit-scrollbar,
html body .ps::-webkit-scrollbar,
html body ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

html body .modal::-webkit-scrollbar-track,
html body .modal-dialog::-webkit-scrollbar-track,
html body .modal-content::-webkit-scrollbar-track,
html body .modal-body::-webkit-scrollbar-track,
html body .ps::-webkit-scrollbar-track,
html body ::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
}

html body .modal::-webkit-scrollbar-thumb,
html body .modal-dialog::-webkit-scrollbar-thumb,
html body .modal-content::-webkit-scrollbar-thumb,
html body .modal-body::-webkit-scrollbar-thumb,
html body .ps__thumb-y,
html body .ps__thumb-x,
html body ::-webkit-scrollbar-thumb {
    background-color: #9ca3af !important;
    background: #9ca3af !important;
    border-radius: 4px !important;
}

html body .modal::-webkit-scrollbar-thumb:hover,
html body .modal-dialog::-webkit-scrollbar-thumb:hover,
html body .modal-content::-webkit-scrollbar-thumb:hover,
html body .modal-body::-webkit-scrollbar-thumb:hover,
html body .ps__rail-y:hover > .ps__thumb-y,
html body .ps__rail-x:hover > .ps__thumb-x,
html body ::-webkit-scrollbar-thumb:hover {
    background-color: #5a6268 !important;
    background: #5a6268 !important;
}

/* Select2 Diamond Search Custom Item Styling */
.select2-results__option .select2-diamond-item {
    color: #435971;
}
.select2-results__option .select2-diamond-item .select2-diamond-title {
    color: #435971;
}
.select2-results__option .select2-diamond-item .select2-diamond-specs {
    color: #697a8d;
}
.select2-results__option .select2-diamond-item .select2-diamond-date {
    color: #8592a3;
}
.select2-results__option .select2-diamond-item .select2-diamond-badge {
    background-color: rgba(105, 108, 255, 0.16);
    color: #696cff;
}

/* 1. Unselected Option Hover State (Light gray background & dark crisp text) */
html body .select2-container--default .select2-results__option--highlighted:not([aria-selected=true]),
html body .select2-results__option--highlighted:not([aria-selected=true]) {
    background-color: rgba(90, 98, 104, 0.12) !important;
}

html body .select2-container--default .select2-results__option--highlighted:not([aria-selected=true]) .select2-diamond-item .select2-diamond-title,
html body .select2-results__option--highlighted:not([aria-selected=true]) .select2-diamond-item .select2-diamond-title {
    color: #23272e !important;
}

html body .select2-container--default .select2-results__option--highlighted:not([aria-selected=true]) .select2-diamond-item .select2-diamond-specs,
html body .select2-results__option--highlighted:not([aria-selected=true]) .select2-diamond-item .select2-diamond-specs {
    color: #4b5563 !important;
}

html body .select2-container--default .select2-results__option--highlighted:not([aria-selected=true]) .select2-diamond-item .select2-diamond-date,
html body .select2-results__option--highlighted:not([aria-selected=true]) .select2-diamond-item .select2-diamond-date {
    color: #6b7280 !important;
}

html body .select2-container--default .select2-results__option--highlighted:not([aria-selected=true]) .select2-diamond-item .select2-diamond-badge,
html body .select2-results__option--highlighted:not([aria-selected=true]) .select2-diamond-item .select2-diamond-badge {
    background-color: rgba(105, 108, 255, 0.2) !important;
    color: #696cff !important;
}

/* 2. Selected Option State (Dark charcoal slate background & crisp white text) */
html body .select2-container--default .select2-results__option[aria-selected=true],
html body .select2-results__option[aria-selected=true] {
    background-color: #5a6268 !important;
    color: #ffffff !important;
}

html body .select2-container--default .select2-results__option[aria-selected=true] .select2-diamond-item,
html body .select2-container--default .select2-results__option[aria-selected=true] .select2-diamond-item *,
html body .select2-results__option[aria-selected=true] .select2-diamond-item,
html body .select2-results__option[aria-selected=true] .select2-diamond-item * {
    color: #ffffff !important;
}

html body .select2-container--default .select2-results__option[aria-selected=true] .select2-diamond-item .select2-diamond-badge,
html body .select2-results__option[aria-selected=true] .select2-diamond-item .select2-diamond-badge {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/*
* Sticky First Column (Checkbox Column) for DataTables & Tables
******************************************************************************/
table.dataTable thead tr th:first-child,
table.dataTable tbody tr td:first-child,
.dataTables_scrollHead table thead tr th:first-child,
.dataTables_scrollBody table tbody tr td:first-child,
.card-datatable table.dataTable thead tr th:first-child,
.card-datatable table.dataTable tbody tr td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background-color: var(--bs-card-bg, #ffffff);
    box-shadow: 2px 0 5px -1px rgba(0, 0, 0, 0.08);
}

.dataTables_scrollHead table thead tr th:first-child,
table.dataTable thead tr th:first-child {
    z-index: 6 !important;
    background-color: var(--bs-card-bg, #ffffff) !important;
}

table.dataTable thead tr.search-row th:first-child,
.dataTables_scrollHead table thead tr.search-row th:first-child {
    z-index: 6 !important;
    background-color: #f8f9fa !important;
}

/* Hover state for sticky 1st column cell */
table.dataTable tbody tr:hover > td:first-child {
    background-color: #f5f5f9 !important;
}

/*
* DataTables Dynamic Selected Row Colors (Checked/Unchecked Checkboxes)
* Uses a soft light version (#f3f1fe) matching .bg-label-primary (#eae8fd)
* for a clean, elegant row selection highlight.
******************************************************************************/
table.dataTable tbody tr.selected-row,
table.dataTable tbody tr.selected-row > td,
table.dataTable tbody tr.table-row-selected,
table.dataTable tbody tr.table-row-selected > td,
.table tbody tr.selected-row,
.table tbody tr.selected-row > td,
.table tbody tr.table-row-selected,
.table tbody tr.table-row-selected > td {
    background-color: #f3f1fe !important;
    color: #111827 !important;
}

table.dataTable tbody tr.selected-row:hover > td,
table.dataTable tbody tr.table-row-selected:hover > td,
.table tbody tr.selected-row:hover > td,
.table tbody tr.table-row-selected:hover > td {
    background-color: #eae8fd !important;
}

/* Specific status rows override when not selected */
table.dataTable tbody tr.used-diamond-row > td:first-child {
    background-color: #d1d5db !important;
}
table.dataTable tbody tr.row-fulfillment-packed > td:first-child {
    background-color: rgba(3, 102, 214, 0.08) !important;
}
table.dataTable tbody tr.row-fulfillment-shipped > td:first-child {
    background-color: rgba(40, 167, 69, 0.08) !important;
}
table.dataTable tbody tr.row-gw-nw-entered > td:first-child {
    background-color: rgba(255, 159, 67, 0.09) !important;
}

table.dataTable tbody tr.used-diamond-row.selected-row > td,
table.dataTable tbody tr.used-diamond-row.selected-row > td:first-child,
table.dataTable tbody tr.row-fulfillment-packed.selected-row > td,
table.dataTable tbody tr.row-fulfillment-shipped.selected-row > td,
table.dataTable tbody tr.row-gw-nw-entered.selected-row > td {
    background-color: #f3f1fe !important;
}

/* Dark mode support */
.dark-style table.dataTable thead tr th:first-child,
.dark-style .dataTables_scrollHead table thead tr th:first-child {
    background-color: var(--bs-card-bg, #2b2c40) !important;
}

.dark-style table.dataTable tbody tr td:first-child,
.dark-style .dataTables_scrollBody table tbody tr td:first-child {
    background-color: #2b2c40 !important;
}

.dark-style table.dataTable tbody tr:hover > td:first-child {
    background-color: #32374e !important;
}

.dark-style table.dataTable tbody tr.selected-row,
.dark-style table.dataTable tbody tr.selected-row > td,
.dark-style table.dataTable tbody tr.table-row-selected,
.dark-style table.dataTable tbody tr.table-row-selected > td,
.dark-style .table tbody tr.selected-row,
.dark-style .table tbody tr.selected-row > td,
.dark-style .table tbody tr.table-row-selected,
.dark-style .table tbody tr.table-row-selected > td {
    background-color: rgba(115, 103, 240, 0.16) !important;
    color: #e1e2ff !important;
}

.dark-style table.dataTable tbody tr.selected-row:hover > td,
.dark-style table.dataTable tbody tr.table-row-selected:hover > td,
.dark-style .table tbody tr.selected-row:hover > td,
.dark-style .table tbody tr.table-row-selected:hover > td {
    background-color: rgba(115, 103, 240, 0.26) !important;
}