/* Pagination Fix - Start*/
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding : 0px;
    margin-left: 0px;
    display: inline;
    border: 0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 0px;
}
/* Pagination Fix - End*/

.table td, .table th {
    vertical-align: middle;
}

table.dataTable tr.dtrg-group td {
    background-color: #5d7c9e17;
    box-shadow: 0 0.125rem 0.25rem 0.125rem rgba(58, 59, 69, 0.05) !important;
}


table.dataTable td.select-checkbox,
table.dataTable th.select-checkbox {
  /* Reserve enough room for the 18px checkbox so it stays centered and never
     clips against the table edge or crowds the next column (e.g. the ID col). */
  min-width: 30px;
}

table.dataTable tbody td.select-checkbox,
table.dataTable tbody th.select-checkbox {
  position: relative;
}

table.dataTable tbody td.select-checkbox:before,
table.dataTable tbody td.select-checkbox:after,
table.dataTable tbody th.select-checkbox:before,
table.dataTable tbody th.select-checkbox:after {
  display: block;
  position: absolute;
  /*top: 1.0em;*/
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
    cursor: pointer;
}

table.dataTable tbody td.select-checkbox:before,
table.dataTable tbody th.select-checkbox:before {
  content: ' ';
  margin-top: -8px;
  margin-left: -9px;
    vertical-align: middle;
  border: 1px solid black;
  border-radius: 3px;
}

table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
  content: '\2713';
  margin-top: -11px;
  margin-left: -9px;
  text-align: center;
  font-weight: bolder;
  text-shadow: none;
    color: #4b4b4b;
  /*{#text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;#}*/
}


table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  /*background-color: #B0BED9;*/
  /*  font-weight: bolder;*/
    background: rgba(201, 226, 255, 0.61);

  transform: none;
  -webkit-transform: none;
  -moz-transform: none;

  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

table.dataTable tbody > tr.selected > td:first-child {
  /*background-color: #B0BED9;*/
    border-left-width: 4px;
    border-left-color: var(--primary);
    border-left-style: solid;
}



table.dataTable.stripe tbody > tr.odd.selected,
table.dataTable.stripe tbody > tr.odd > .selected, table.dataTable.display tbody > tr.odd.selected,
table.dataTable.display tbody > tr.odd > .selected {
  /*background-color: #acbad4;*/
}
table.dataTable.hover tbody > tr.selected:hover,
table.dataTable.hover tbody > tr > .selected:hover, table.dataTable.display tbody > tr.selected:hover,
table.dataTable.display tbody > tr > .selected:hover {
  /*background-color: #aab7d1;*/
}

/* Datatable controls layout + action/filter button refresh */
div.dataTables_wrapper > div.row:first-child {
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

div.dataTables_wrapper > div.row:first-child > div[class^="col-"] {
    margin-bottom: 0 !important;
}

/* The controls row has its negative .row margins zeroed above, so the
   Bootstrap column padding would otherwise indent the buttons ~15px past the
   table's left edge. Drop the leading column's left padding so the toolbar
   lines up flush-left with the table below. */
div.dataTables_wrapper > div.row:first-child > div[class^="col-"]:first-child {
    padding-left: 0 !important;
}

div.dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

div.dataTables_wrapper div.dt-buttons > .dt-button,
div.dataTables_wrapper .dt-button.buttons-collection,
div.dataTables_wrapper .dt-button.cs-filter-collection,
div.dataTables_wrapper .dt-buttons .btn,
div.dataTables_wrapper .dt-buttons .btn-secondary,
div.dataTables_wrapper .dt-buttons button,
div.dataTables_wrapper .dt-buttons a {
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: #eef1f4 !important;
    color: #3d4a5c !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    min-height: 32px !important;
    padding: 0.28rem 0.7rem !important;
    box-shadow: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

div.dataTables_wrapper .dt-button:hover,
div.dataTables_wrapper .dt-button:focus,
div.dataTables_wrapper .dt-button:active,
div.dataTables_wrapper .dt-buttons .btn:hover,
div.dataTables_wrapper .dt-buttons .btn:focus,
div.dataTables_wrapper .dt-buttons .btn:active,
div.dataTables_wrapper .dt-buttons .btn-secondary:hover,
div.dataTables_wrapper .dt-buttons .btn-secondary:focus,
div.dataTables_wrapper .dt-buttons .btn-secondary:active,
div.dataTables_wrapper .dt-buttons .btn-secondary:not(:disabled):not(.disabled).active,
div.dataTables_wrapper .dt-buttons .show > .btn-secondary.dropdown-toggle {
    background: #e3e8ee !important;
    border-color: transparent !important;
    color: #1f2a3a !important;
    box-shadow: none !important;
}

div.dataTables_wrapper .dt-button.active,
div.dataTables_wrapper .dt-button.buttons-collection[aria-expanded="true"],
div.dataTables_wrapper .dt-buttons .btn.active,
div.dataTables_wrapper .dt-buttons .btn-secondary.active,
div.dataTables_wrapper .dt-buttons .show > .btn-secondary.dropdown-toggle {
    background: #dce2e9 !important;
    border-color: transparent !important;
}

/* Filled primary (blue) toolbar button. Add the `dt-btn-primary` class to any
   toolbar button config (e.g. the Send to FBA collection button) to render it
   as a solid brand-coloured call-to-action instead of the white pill. */
div.dataTables_wrapper .dt-buttons .dt-btn-primary,
div.dataTables_wrapper .dt-buttons .dt-btn-primary:hover,
div.dataTables_wrapper .dt-buttons .dt-btn-primary:focus,
div.dataTables_wrapper .dt-buttons .dt-btn-primary.active,
div.dataTables_wrapper .dt-buttons .dt-btn-primary.buttons-collection[aria-expanded="true"] {
    background: var(--primary, #00629E) !important;
    border-color: var(--primary, #00629E) !important;
    color: #ffffff !important;
}

div.dataTables_wrapper .dt-buttons .dt-btn-primary i {
    color: #ffffff !important;
}

div.dataTables_wrapper .dt-buttons .dt-btn-primary:hover,
div.dataTables_wrapper .dt-buttons .dt-btn-primary:focus,
div.dataTables_wrapper .dt-buttons .dt-btn-primary.active,
div.dataTables_wrapper .dt-buttons .dt-btn-primary.buttons-collection[aria-expanded="true"] {
    background: color-mix(in srgb, var(--primary, #00629E) 88%, black) !important;
    border-color: color-mix(in srgb, var(--primary, #00629E) 88%, black) !important;
}

/* ============================================================
   Search box:  [ filter dropdown (if any) ]  [ input | → ]
   The input + arrow "go" button form ONE bordered box that never breaks
   apart (the box owns the border; the children are borderless), with a
   short inset divider between them. The filter dropdown — relocated from
   the toolbar in build_dt_search_pill — sits to the left, only when the
   table actually has a filter dropdown.
   ============================================================ */
div.dataTables_wrapper .dataTables_filter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0;
}

div.dataTables_wrapper .dataTables_filter label {
    margin: 0;
    width: 100%;
    max-width: 520px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0;
}

div.dataTables_wrapper .dataTables_filter.row {
    margin: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

div.dataTables_wrapper .dataTables_filter.row > label.col-2 {
    display: none !important;
}

/* Relocated filter dropdown — sits to the LEFT of the search box */
div.dataTables_wrapper .dataTables_filter .cs-relocated-filter {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 0.45rem 0 0 !important;
    padding: 0 0.6rem !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: #eef1f4 !important;
    color: #3d4a5c !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

div.dataTables_wrapper .dataTables_filter .cs-relocated-filter i {
    color: #3d4a5c !important;
}

div.dataTables_wrapper .dataTables_filter .cs-relocated-filter:hover,
div.dataTables_wrapper .dataTables_filter .cs-relocated-filter:focus,
div.dataTables_wrapper .dataTables_filter .cs-relocated-filter[aria-expanded="true"] {
    background: #e3e8ee !important;
    border-color: transparent !important;
    color: #1f2a3a !important;
}

/* The input + arrow form ONE bordered box that never wraps. */
div.dataTables_wrapper .dataTables_filter .input-group {
    width: 100% !important;
    max-width: 460px !important;
    height: 32px !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    border: 1px solid #bcccdc !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

div.dataTables_wrapper .dataTables_filter .input-group:focus-within {
    border-color: #a3b6cc !important;
}

/* Search input — borderless, fills the box (no border-right, never breaks).
   Scoped to the search input-group so it doesn't affect other inputs that may
   sit inside .dataTables_filter (e.g. the relocated filter dropdown's Org ID
   field, which keeps its own border). */
div.dataTables_wrapper .dataTables_filter .input-group input,
div.dataTables_wrapper .dataTables_filter .input-group .form-control {
    flex: 1 1 auto !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237f8ba0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 0.75rem center !important;
    color: #4b5a71 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    padding: 0.3rem 0.8rem 0.3rem 2.15rem !important;
    box-shadow: none !important;
}

div.dataTables_wrapper .dataTables_filter .input-group input:focus,
div.dataTables_wrapper .dataTables_filter .input-group .form-control:focus {
    outline: none !important;
    box-shadow: none !important;
}

div.dataTables_wrapper .dataTables_filter .input-group input::placeholder,
div.dataTables_wrapper .dataTables_filter .input-group .form-control::placeholder {
    color: #8b97a9 !important;
    opacity: 1 !important;
}

/* Hide the legacy magnifier prepend (added by the current-stock polish) */
div.dataTables_wrapper .dataTables_filter .input-group-prepend {
    display: none !important;
}

/* Arrow "go" button — borderless, no border-left so it stays stuck to the
   input. A short inset divider (::before) separates them without touching the
   top/bottom of the box border. */
div.dataTables_wrapper .dataTables_filter .input-group-append {
    display: flex !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

div.dataTables_wrapper .dataTables_filter .input-group-append .btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 38px !important;
    border: 0 !important;
    border-radius: 0 8px 8px 0 !important;
    background: transparent !important;
    color: #3d4a5c !important;
    padding: 0 0.85rem 0 0.7rem !important;
    box-shadow: none !important;
}

div.dataTables_wrapper .dataTables_filter .input-group-append .btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: #bcccdc;
}

div.dataTables_wrapper .dataTables_filter .input-group-append .btn i {
    font-size: 0.9rem !important;
    color: #3d4a5c !important;
}

div.dataTables_wrapper .dataTables_filter .input-group-append .btn:hover {
    background: #f7faff !important;
    color: #1f2a3a !important;
    box-shadow: none !important;
}

@media (max-width: 767.98px) {
    div.dataTables_wrapper .dt-buttons {
        margin-bottom: 0.6rem;
    }

    div.dataTables_wrapper .dataTables_filter label {
        max-width: none;
    }

    div.dataTables_wrapper .dataTables_filter.row > .input-group {
        max-width: none !important;
    }
}

/* ============================================================
   Toolbar dropdown menus (DataTables Buttons collections)
   Applies to every collection dropdown: Grouping, Export,
   Send to FBA, Actions, and the Filter menu.
   The collection is inserted as a child of .dt-buttons (inside
   .dataTables_wrapper), so rules are scoped to the wrapper —
   this also lifts their specificity above the toolbar-button
   rules above, which also reach into the open menu.
   ============================================================ */
div.dataTables_wrapper div.dt-button-collection {
    z-index: 3000;
}

/* The card surface lives on the inner .dropdown-menu (which actually holds
   the items). If a collection has no inner .dropdown-menu, the collection
   itself becomes the card. */
div.dataTables_wrapper div.dt-button-collection > .dropdown-menu,
div.dataTables_wrapper div.dt-button-collection:not(:has(> .dropdown-menu)) {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0.4rem !important;
    border: 1px solid #e7edf6 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(31, 42, 58, 0.14), 0 2px 6px rgba(31, 42, 58, 0.08) !important;
    /* Hug the longest item (kept on a single line) rather than a fixed
       wide min-width. The cap is generous so long labels don't wrap. */
    min-width: 0 !important;
    width: -moz-max-content !important;
    width: max-content !important;
    max-width: min(520px, 92vw) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    float: none !important;
}

/* When an inner .dropdown-menu is present, the outer .dt-button-collection is
   the positioning anchor. Keep it solid white (matching the inner card's
   rounded corners) so the table never shows through it while the page scrolls
   behind the open dropdown. */
div.dataTables_wrapper div.dt-button-collection:has(> .dropdown-menu) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    min-width: 0 !important;
}

/* Menu items */
div.dataTables_wrapper div.dt-button-collection .dt-button,
div.dataTables_wrapper div.dt-button-collection .dropdown-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.3rem 0.85rem !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #2f3a4a !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: none !important;
}

/* Inner content wrapper: DataTables wraps each item's text in a <span> liner;
   some Filter items nest a <div class="d-flex"> inside it. Lay both out as a
   centred row so the icon and (possibly multi-line) label align. */
div.dataTables_wrapper div.dt-button-collection .dt-button > span,
div.dataTables_wrapper div.dt-button-collection .dropdown-item > span,
div.dataTables_wrapper div.dt-button-collection .dt-button .d-flex,
div.dataTables_wrapper div.dt-button-collection .dropdown-item .d-flex {
    display: flex !important;
    align-items: center !important;
    width: 100%;
}

/* Leading icon(s): consistent sizing/colour plus a uniform right gap that
   replaces the inconsistent Bootstrap mr-1/mr-2 margins. A right margin (vs a
   parent flex `gap`) spaces the icon from the label whether it sits inline
   with the text or nested in its own <div> wrapper, so it works for both the
   Actions-style and Filter-style item markup. flex-shrink:0 keeps icons from
   collapsing and keeps multi-line labels beside the icon rather than wrapping
   beneath it. Colour is left without !important so the Filter menu's
   .text-white / .text-secondary toggles (set in select_cs_dt_filter) win. */
div.dataTables_wrapper div.dt-button-collection .dt-button i,
div.dataTables_wrapper div.dt-button-collection .dropdown-item i {
    flex: 0 0 auto;
    margin: 0 0.55rem 0 0 !important;
    color: #6b7a90;
    font-size: 0.95rem;
}

/* Hover / keyboard focus / active item */
div.dataTables_wrapper div.dt-button-collection .dt-button:hover,
div.dataTables_wrapper div.dt-button-collection .dt-button:focus,
div.dataTables_wrapper div.dt-button-collection .dt-button.active,
div.dataTables_wrapper div.dt-button-collection .dropdown-item:hover,
div.dataTables_wrapper div.dt-button-collection .dropdown-item:focus,
div.dataTables_wrapper div.dt-button-collection .dropdown-item.active {
    background: var(--primary, #00629E) !important;
    color: #ffffff !important;
    outline: none !important;
}

div.dataTables_wrapper div.dt-button-collection .dt-button:hover i,
div.dataTables_wrapper div.dt-button-collection .dt-button:focus i,
div.dataTables_wrapper div.dt-button-collection .dt-button.active i,
div.dataTables_wrapper div.dt-button-collection .dropdown-item:hover i,
div.dataTables_wrapper div.dt-button-collection .dropdown-item:focus i,
div.dataTables_wrapper div.dt-button-collection .dropdown-item.active i {
    color: #ffffff !important;
}

/* Divider rows: an <hr> wrapped inside a .dt-button. Strip the button
   chrome so only a clean separator line shows. */
div.dataTables_wrapper div.dt-button-collection .dt-button:has(hr),
div.dataTables_wrapper div.dt-button-collection .dropdown-item:has(hr) {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    pointer-events: none;
    cursor: default;
}

div.dataTables_wrapper div.dt-button-collection hr {
    width: 100%;
    margin: 0.35rem 0 !important;
    border: 0;
    border-top: 1px solid #eaeef5;
}

/* Sub-section caption rows (e.g. the "Export visible columns:" labels and
   the Filter menu group toggles, which use <strong>). Render them as muted,
   slightly emphasised captions. */
div.dataTables_wrapper div.dt-button-collection .dt-button strong,
div.dataTables_wrapper div.dt-button-collection .dropdown-item strong {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a97ab;
}

/* Header/title rows (the bold caption labels) get no hover highlight. */
div.dataTables_wrapper div.dt-button-collection .dt-button:has(strong),
div.dataTables_wrapper div.dt-button-collection .dt-button:has(strong):hover,
div.dataTables_wrapper div.dt-button-collection .dt-button:has(strong):focus,
div.dataTables_wrapper div.dt-button-collection .dropdown-item:has(strong),
div.dataTables_wrapper div.dt-button-collection .dropdown-item:has(strong):hover,
div.dataTables_wrapper div.dt-button-collection .dropdown-item:has(strong):focus {
    background: transparent !important;
    color: #8a97ab !important;
    cursor: default;
}

/* Keep the leading icon on a caption row (e.g. the eye on "Export visible
   columns:") visible on hover instead of turning white and disappearing. */
div.dataTables_wrapper div.dt-button-collection .dt-button:has(strong) i,
div.dataTables_wrapper div.dt-button-collection .dt-button:has(strong):hover i,
div.dataTables_wrapper div.dt-button-collection .dropdown-item:has(strong) i,
div.dataTables_wrapper div.dt-button-collection .dropdown-item:has(strong):hover i {
    color: #6b7a90 !important;
}

/* Apply / Clear filter buttons pinned as a sticky footer at the bottom of the
   filter dropdown, so they stay visible while the filter options scroll. The
   two stack (full-width each) with solid backgrounds so content doesn't show
   through. */
div.dataTables_wrapper div.dt-button-collection .dt-button.cs-filter-footer {
    position: sticky !important;
    z-index: 4;
    width: 100% !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0.45rem 0.85rem !important;
    background: #ffffff !important;
    border-radius: 4px !important;
}

div.dataTables_wrapper div.dt-button-collection .dt-button.cs-filter-footer:last-child {
    bottom: 0;
}

div.dataTables_wrapper div.dt-button-collection .dt-button.cs-filter-footer:nth-last-child(2) {
    bottom: 36px;
    border-top: 1px solid #eaeef5 !important;
}

/* Footer hover — the solid white background above otherwise wins over the
   generic hover, leaving white text on white. Give it a clear blue hover. */
div.dataTables_wrapper div.dt-button-collection .dt-button.cs-filter-footer:hover,
div.dataTables_wrapper div.dt-button-collection .dt-button.cs-filter-footer:focus {
    background: var(--primary, #00629E) !important;
    color: #ffffff !important;
}

div.dataTables_wrapper div.dt-button-collection .dt-button.cs-filter-footer:hover i,
div.dataTables_wrapper div.dt-button-collection .dt-button.cs-filter-footer:focus i {
    color: #ffffff !important;
}

/* Filter rows that contain an input (e.g. the Org ID field) get no hover
   highlight, so the field and its border stay readable. */
div.dataTables_wrapper div.dt-button-collection .dt-button:has(input),
div.dataTables_wrapper div.dt-button-collection .dt-button:has(input):hover,
div.dataTables_wrapper div.dt-button-collection .dt-button:has(input):focus,
div.dataTables_wrapper div.dt-button-collection .dropdown-item:has(input),
div.dataTables_wrapper div.dt-button-collection .dropdown-item:has(input):hover,
div.dataTables_wrapper div.dt-button-collection .dropdown-item:has(input):focus {
    background: transparent !important;
    color: #2f3a4a !important;
    cursor: default;
}

/* The Filter menu marks the currently-selected entries by adding Bootstrap's
   .bg-primary / .text-white utilities (set in select_cs_dt_filter). The base
   item rule above forces a transparent background, so restore an explicit
   solid-blue highlight here (with higher specificity) so selected filters
   read clearly. */
div.dataTables_wrapper div.dt-button-collection .dt-button.bg-primary,
div.dataTables_wrapper div.dt-button-collection .dropdown-item.bg-primary {
    background: var(--primary, #00629E) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}

div.dataTables_wrapper div.dt-button-collection .dt-button.bg-primary i,
div.dataTables_wrapper div.dt-button-collection .dropdown-item.bg-primary i {
    color: #ffffff !important;
}

div.dataTables_wrapper div.dt-button-collection .dt-button.bg-primary:hover,
div.dataTables_wrapper div.dt-button-collection .dropdown-item.bg-primary:hover {
    background: #00557f !important;
    color: #ffffff !important;
}

div.dataTables_wrapper div.dt-button-collection .dt-button.bg-primary:hover i,
div.dataTables_wrapper div.dt-button-collection .dropdown-item.bg-primary:hover i {
    color: #ffffff !important;
}

/* ============================================================
   ColVis column picker redesign (enhanced in base.js via
   cs_colvis_enhance). A tick-box list with a sticky header
   (title + counter + Reset), search, and Active/Available
   sections. Scoped to .cs-colvis-menu, so the Current Stock
   columns picker (a multiSelect modal) is unaffected.
   Selectors carry the full wrapper prefix to outrank the
   generic dropdown-item rules above.
   ============================================================ */
div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu > .dropdown-menu {
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    /* This menu has a wide header (title + counter + Reset), so it keeps a
       comfortable fixed width instead of hugging the (short) column names. */
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
}

/* Sticky header (title row + search) — extends over the card padding so it
   fully masks rows scrolling underneath; this is what fixes the top "see
   behind" bleed. */
div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .cs-colvis-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #ffffff;
    padding: 0.7rem 0.85rem 0.55rem;
    border-bottom: 1px solid #eef2f8;
    border-radius: 8px 8px 0 0;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .cs-colvis-titlerow {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .cs-colvis-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2a3a;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .cs-colvis-count {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 500;
    color: #8a97ab;
    white-space: nowrap;
}

/* Search pill */
div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .cs-colvis-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: 30px;
    padding: 0 0.7rem;
    border: 1px solid #e2e8f2;
    border-radius: 4px;
    background: #ffffff;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .cs-colvis-search:focus-within {
    border-color: #cdd8e8;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .cs-colvis-search i {
    color: #3d4a5c;
    font-size: 0.85rem;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .cs-colvis-search input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    color: #4b5a71;
    padding: 0;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .cs-colvis-search input::placeholder {
    color: #8b97a9;
}

/* Column rows as tick-box items (no icons). Override the generic dropdown
   item styling: active means "checked", not a highlighted row. */
div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .buttons-columnVisibility {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 1px 0.5rem !important;
    padding: 0.5rem 0.6rem !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #2f3a4a !important;
    font-weight: 500 !important;
    white-space: normal !important;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .buttons-columnVisibility::before {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-right: 0.65rem;
    border: 2px solid #c4cdda;
    border-radius: 4px;
    background: #ffffff;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .buttons-columnVisibility.active {
    background: transparent !important;
    color: #2f3a4a !important;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .buttons-columnVisibility.active::before {
    border-color: var(--primary, #00629E);
    background: var(--primary, #00629E) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .buttons-columnVisibility:hover {
    background: rgba(0, 98, 158, 0.07) !important;
    color: #1f2a3a !important;
}

/* Bottom breathing room so the last row clears the rounded corner cleanly. */
div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .buttons-columnVisibility:last-child {
    margin-bottom: 0.5rem !important;
}

div.dataTables_wrapper div.dt-button-collection.cs-colvis-menu .cs-colvis-hidden {
    display: none !important;
}

/* ============================================================
   Category tabs (card-header nav-tabs): rounded top corners and the
   same subtle gray-blue border as the toolbar buttons. The active tab
   keeps a white bottom edge so it stays connected to the content.
   ============================================================ */
ul.card-header-tabs .nav-link {
    border: 1px solid #dbe4f0 !important;
    border-radius: 8px 8px 0 0 !important;
}

ul.card-header-tabs .nav-link:hover,
ul.card-header-tabs .nav-link:focus {
    border-color: #bcccdc !important;
}

ul.card-header-tabs .nav-link.active {
    border-color: #dbe4f0 #dbe4f0 #ffffff !important;
}

/* ============================================================
   Assign-access dropdowns (admin user overview / moneyback agency
   dashboard): compact field + Grant Access button.
   ============================================================ */
div.dataTables_wrapper .dt-buttons .btn.cs-grant-btn,
.dt-buttons .btn.cs-grant-btn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 0.7rem !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
}

/* Compact select2 field in the moneyback assign dropdown. */
.cs-assign-dropdown .select2-container .select2-selection--single {
    height: 28px !important;
    border: 1px solid #bcccdc !important;
    border-radius: 6px !important;
}

.cs-assign-dropdown .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
    font-size: 0.8rem !important;
    padding-left: 8px !important;
}

.cs-assign-dropdown .select2-container .select2-selection--single .select2-selection__arrow {
    height: 26px !important;
}

/* ============================================================
   Toolbar button grouping — segmented controls with inset dividers
   (like the search box), driven entirely by per-button helper classes.

   Buttons sit flush (gap: 0). Spacing around the standalone buttons
   (Columns, the blue primary button) comes from Bootstrap `mr-2` / `mx-2`
   utilities set on the button in the *_dt_buttons JS config; the segment
   corners come from the cs-tb-* helper classes below.

   Pair the helpers per button to build a segmented bar:
     • group start  → cs-tb-round-left  cs-tb-flat-right
     • group middle → cs-tb-flat-left   cs-tb-flat-right  cs-tb-divider
     • group end    → cs-tb-flat-left   cs-tb-round-right cs-tb-divider
   Standalone buttons (Columns, blue) need no corner helper — they keep the
   default fully-rounded radius; just give them `mr-2` (or `mx-2`) for the gap.

   Helpers use a plain descendant selector (the same shape as the working
   base-button rule near the top of this file), with a two-`div` prefix so
   their specificity stays at/above the base radius rule and they win
   regardless of which base selector matched the button.
   ============================================================ */
div.dataTables_wrapper .dt-buttons {
    gap: 0 !important;
}
div.dataTables_wrapper div.dt-buttons .cs-tb-round-left {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

div.dataTables_wrapper div.dt-buttons .cs-tb-round-right {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

div.dataTables_wrapper div.dt-buttons .cs-tb-flat-left {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

div.dataTables_wrapper div.dt-buttons .cs-tb-flat-right {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Inset divider on the left seam of a grouped button (matches the search-box
   divider), so adjacent same-coloured buttons stay visually separated. */
div.dataTables_wrapper div.dt-buttons .cs-tb-divider {
    position: relative !important;
}

div.dataTables_wrapper div.dt-buttons .cs-tb-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: #cdd4dc;
}