hr.hr-width{
    border-top: 4px solid var(--hairline, #e8e9ea);
}

/* Hide theme customizer side tab — markup and scripts retained */
.customizer {
    display: none !important;
}
.shipment-det-box input[type="checkbox"] {
    position: relative;
    appearance: none;
    width: 75px;
    height: 30px;
    background: whitesmoke;
    border-radius: 50px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.4s;
}

.shipment-det-box input[type="checkbox"]::after {
    position: absolute;
    content: "";
    width: 33px;
    height: 28px;
    top: 0;
    left: 3px;
    background: #ababab;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
    transition: 0.4s;
}

.shipment-det-box input:checked[type="checkbox"]::after {
    left: 50%;
    background: #3e3e99;
}

.increment{
    padding: 2px 8px;
    border-left: none;
    background: var(--surface-1, white);
    border-color: #000f9f;
    color: #000f9f;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-width: thin;
}
.decrement{
    padding: 2px 8px;
    background: var(--surface-1, white);
    border-color: #000f9f;
    color: #000f9f;
    border-width: thin;
}
.success-input{
    background-color: var(--surface-1, #f4fff4) !important;
    border: 1px solid #66b666;
}
.custom-btn-group {
    left: 0 !important;
    transform: none !important;
    margin: auto !important;
}
.jumbotron {
    padding: 1rem 0rem !important;
}
.imageBtns > .btn-sm{
    font-size: 0.75rem !important;
}
div.scroll-container {
    /*background-color: #333;*/
    overflow: auto;
    white-space: nowrap;
    padding: 10px;
}
div.scroll-container img {
    padding: 10px;
    border: 1px solid burlywood;
    border-radius: 10px;
    cursor: pointer;
    height: 180px !important;
    width: 170px !important;
}
div.scroll-container img.hover-shadow {
    transition: 0.3s;
}
div.scroll-container .hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#myPickupImageModal .row > .column {
    padding: 0 8px;
}

.luggage-thumbnail-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 5px; /* Adjust margin as needed */
}

.luggage-thumbnail {
    display: block;
    width: 100%;
    height: auto;
}

.luggage-thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 50% opacity black overlay */
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 10px;
}

.luggage-thumbnail-overlay:hover {
    opacity: 1;
}

.luggage-button-container {
    display: flex;
    gap: 10px;
}

.luggage-button {
    background-color: transparent;
    color: #fff;
    padding: 0px 0px;
    text-decoration: none;
    border-radius: 0px;
    font-size: 20px;
    border: none;
}

.btn-primary ~ .dropdown-menu .dropdown-item.active, .btn-outline-primary ~ .dropdown-menu .dropdown-item.active, .btn-flat-primary ~ .dropdown-menu .dropdown-item.active {
  background-color: var(--brand-fill, #a2ae39) !important;
  color: #fff !important;
}

.dataTables_wrapper {
    margin: 15px auto !important;
}

.booking-media-panel {
    border: 1px solid var(--hairline, #e0e0e0);
    border-radius: 6px;
    background: var(--surface-1, #fafafa);
    padding: 0.75rem 0.5rem;
}

.booking-media-item {
    padding: 0.35rem 0.5rem;
}

.booking-media-card {
    background: var(--surface-1, #fff);
    border: 1px solid var(--hairline, #e8e8e8);
    border-radius: 6px;
    height: 100%;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0.65rem 0.5rem;
}

.booking-media-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink, #333);
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

.booking-media-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-media-body .btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.booking-media-btn-icon {
    font-size: 1.1rem !important;
    line-height: 1;
}

.booking-media-empty {
    font-size: 0.8rem;
    color: var(--ink-muted, #888);
}

@media (max-width: 767.98px) {
    .booking-media-item + .booking-media-item {
        margin-top: 0.5rem;
    }
}

/* Sidebar icon color */
.main-menu.menu-light .navigation > li > a > .material-icons {
    color: #8FA0B5;
}

.main-menu .navigation > li > a > .menu-icon-image {
    color: #8FA0B5;
}

.main-menu .navigation > li > a > img.menu-icon-image-file {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    object-fit: contain;
}

.main-menu.menu-light .navigation > li.nav-item.active > a .material-icons,
.main-menu.menu-light .navigation > li.nav-item.active > a .menu-icon-image {
    color: var(--brand-ti-6b8c2a, #6b8c2a);
}

/* Sidebar dropdown chevrons: reserved flex space prevents label overlap */
.main-menu.menu-light .navigation > li.has-sub > a {
    position: relative;
    padding-right: 1rem !important;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.main-menu.menu-light .navigation > li.has-sub > a .menu-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.main-menu.menu-light .navigation > li.has-sub > a .menu-chevron-spacer {
    flex: 0 0 1.5rem;
    width: 1.5rem;
}

.main-menu.menu-light .navigation > li.has-sub.hover > a,
.main-menu.menu-light .navigation > li.has-sub > a:hover {
    padding-right: 1rem !important;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li.has-sub > a:not(.mm-next):after {
    right: 1rem !important;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    margin-top: 0;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li.has-sub.open > a:not(.mm-next):after {
    transform: translateY(-50%) rotate(90deg);
}

/*
 * Layout — sidebar width must equal the content offset so left/right gutters match.
 * Loaded after vertical-menu.css (see panels/styles.blade.php).
 */
body.vertical-layout.vertical-menu-modern {
    --hb-layout-gutter: clamp(0.75rem, 1.2vw, 1.25rem);
    --hb-sidebar-expanded-width: 272px;
    --hb-sidebar-collapsed-width: 80px;
}

body.vertical-layout.vertical-menu-modern .header-navbar.floating-nav {
    margin-left: var(--hb-layout-gutter);
    margin-right: var(--hb-layout-gutter);
    border-radius: 0;
    box-shadow: none;
    z-index: 12;
}

body.vertical-layout.vertical-menu-modern .header-navbar .navbar-container {
    padding-left: 0;
    padding-right: 0;
}

/* Theme gives every .content a sidebar offset — reset nested instances inside the main panel */
body.vertical-layout.vertical-menu-modern .app-content .content,
body.vertical-layout.vertical-menu-modern .header-navbar .navbar-container.content {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.vertical-layout.vertical-menu-modern .content .content-wrapper {
    padding-left: var(--hb-layout-gutter);
    padding-right: var(--hb-layout-gutter);
}

/* Solid band behind fixed navbar — fills rounded-corner / gutter gaps with header color */
body.vertical-layout.vertical-menu-modern .app-content::before {
    content: "";
    position: fixed;
    top: 0;
    z-index: 11;
    height: 3.5rem;
    pointer-events: none;
    background-color: var(--brand-fill, #a2ae39);
}

@media (min-width: 1200px) {
    /* Extra sidebar width so long dropdown labels show in full */
    body.vertical-layout.vertical-menu-modern.menu-expanded .navbar .navbar-header,
    body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu,
    body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .main-menu-footer {
        width: var(--hb-sidebar-expanded-width);
    }

    body.vertical-layout.vertical-menu-modern.menu-expanded .navbar.fixed-top,
    body.vertical-layout.vertical-menu-modern.menu-expanded .app-content,
    body.vertical-layout.vertical-menu-modern.menu-expanded .footer {
        margin-left: var(--hb-sidebar-expanded-width);
    }

    body.vertical-layout.vertical-menu-modern.menu-expanded .app-content::before {
        left: calc(var(--hb-sidebar-expanded-width) + var(--hb-layout-gutter));
        width: calc(100vw - (100vw - 100%) - var(--hb-sidebar-expanded-width) - (var(--hb-layout-gutter) * 2));
    }

    body.vertical-layout.vertical-menu-modern.menu-collapsed .app-content::before {
        left: calc(var(--hb-sidebar-collapsed-width) + var(--hb-layout-gutter));
        width: calc(100vw - (100vw - 100%) - var(--hb-sidebar-collapsed-width) - (var(--hb-layout-gutter) * 2));
    }

    body.vertical-layout.vertical-menu-modern.menu-expanded.menu-flipped .app-content::before {
        left: var(--hb-layout-gutter);
        right: calc(var(--hb-sidebar-expanded-width) + var(--hb-layout-gutter));
        width: auto;
    }

    body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.floating-nav {
        width: calc(100vw - (100vw - 100%) - var(--hb-sidebar-expanded-width) - (var(--hb-layout-gutter) * 2));
    }

    body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.fixed-top {
        left: var(--hb-sidebar-expanded-width);
    }

    body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.navbar-static-top {
        left: var(--hb-sidebar-expanded-width);
        width: calc(100vw - (100vw - 100%) - var(--hb-sidebar-expanded-width));
    }

    body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.floating-nav {
        width: calc(100vw - (100vw - 100%) - var(--hb-sidebar-collapsed-width) - (var(--hb-layout-gutter) * 2));
    }

    body.vertical-layout.vertical-menu-modern.menu-expanded.menu-flipped .app-content,
    body.vertical-layout.vertical-menu-modern.menu-expanded.menu-flipped .navbar .navbar-container,
    body.vertical-layout.vertical-menu-modern.menu-expanded.menu-flipped .footer {
        margin-left: 0;
        margin-right: var(--hb-sidebar-expanded-width);
    }

    body.vertical-layout.vertical-menu-modern.menu-expanded.menu-flipped .header-navbar.floating-nav {
        width: calc(100vw - (100vw - 100%) - var(--hb-sidebar-expanded-width) - (var(--hb-layout-gutter) * 2));
    }

    body.vertical-layout.vertical-menu-modern.menu-expanded.menu-flipped .header-navbar.fixed-top {
        left: 0;
        right: var(--hb-sidebar-expanded-width);
    }
}

@media (max-width: 1199.98px) {
    body.vertical-layout.vertical-menu-modern.menu-expanded .app-content,
    body.vertical-layout.vertical-menu-modern.menu-expanded .footer,
    body.vertical-layout.vertical-menu-modern.menu-expanded.menu-flipped .app-content,
    body.vertical-layout.vertical-menu-modern.menu-expanded.menu-flipped .footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.vertical-layout.vertical-menu-modern .header-navbar.floating-nav,
    body.vertical-layout.vertical-menu-modern .app-content::before {
        width: calc(100vw - (100vw - 100%) - (var(--hb-layout-gutter) * 2));
        left: var(--hb-layout-gutter);
        right: auto;
    }

    body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.fixed-top,
    body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.navbar-static-top {
        left: 0;
        right: 0;
        width: auto;
    }
}
/* ==========================================================================
   Sidebar — nested (level 3) menu groups
   e.g. Configurations > Mobile App > App Banners

   components.css:365 uses a descendant selector:
       .navigation li.has-sub ul.menu-content { padding:7px; margin:-7px -7px 0 }
   Level 1 always carries .has-sub, so a level-2 group's nested list matched
   that rule a second time and gained a stray 7px inset. Reset it, then style
   the nested list on its own terms.
   ========================================================================== */

.main-menu .navigation li.has-sub ul.menu-content ul.menu-content {
    padding: 0;
    margin: 0;
}

/* Indent level-3 rows so the hierarchy is readable, and leave room for the
   bullet. Level-2 rows keep the theme's own 15px from .navigation li a. */
.main-menu .navigation > li .menu-content > li.has-sub > ul.menu-content > li > a {
    padding-left: 2.75rem;
    font-size: 13.5px;
}

/* Same row geometry as every other item: icon, label, chevron on one line. */
.main-menu .navigation > li .menu-content > li > a {
    display: flex;
    align-items: center;
}

.main-menu .navigation > li .menu-content > li > a > div {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reserve the chevron column so expandable and plain rows align their labels. */
.main-menu .navigation > li .menu-content > li.has-sub > a .menu-chevron-spacer {
    flex: 0 0 1rem;
    width: 1rem;
}

/* Marker for an expandable group, rotating when open — mirrors level 1.
   Override vertical-menu.css FontAwesome chevron (li.has-sub > a:after) which
   also matches nested items and renders as broken "vL" beside our border arrow. */
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li .menu-content > li.has-sub > a:not(.mm-next)::after {
    content: "" !important;
    font-family: inherit !important;
    font-size: inherit !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    display: block;
    flex: 0 0 auto;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: -0.75rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.55;
    transition: transform 0.25s ease;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li .menu-content > li.has-sub.open > a:not(.mm-next)::after,
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li .menu-content > li.has-sub.sidebar-group-active > a:not(.mm-next)::after {
    transform: rotate(45deg);
    opacity: 0.9;
}

/* Subtle rail tying level-3 rows to their parent. */
.main-menu.menu-light .navigation > li .menu-content > li.has-sub > ul.menu-content {
    border-left: 1px solid rgba(107, 140, 42, 0.18);
    margin-left: 1.35rem !important;
}

/* Collapsed sidebar: the rail and indent would misalign the flyout. */
.main-menu.menu-collapsed:not(.expanded) .navigation > li .menu-content > li.has-sub > ul.menu-content {
    border-left: 0;
    margin-left: 0 !important;
}

/* HalaBag wordmark pinned to the bottom of the tenant sidebar.
   .menu-inner is block-size:100% in the theme, which would push this mark
   out of the fixed menu and clip it. Let flex size the list instead. */
.layout-menu.menu-vertical .menu-inner {
    block-size: auto;
    min-block-size: 0;
}

.menu-halabag {
    flex: 0 0 auto;
    margin-top: auto;
    /* Same inline inset as .app-brand, so this lines up with the tenant logo. */
    padding-block: 0.5rem 1rem;
    padding-inline: calc(var(--bs-menu-vertical-link-padding-x, 0.75rem) * 2 - 0.25rem);
    text-align: start;
}

/* Logo.svg stacks "Powered By" over the HalaBag mark as a single vector,
   so it stays sharp at any zoom. Sized so the mark roughly matches the
   tenant logo above. */
.menu-halabag img {
    display: block;
    width: 8.25rem;
    max-width: 100%;
    height: auto;
    margin-inline-start: 0;
}

@media (min-width: 1200px) {
    .layout-menu-collapsed:not(.layout-menu-hover) .menu-halabag {
        display: none;
    }

    /* Wordmark beside the logo: remove entirely when collapsed (opacity-only still reserves space). */
    .layout-menu-collapsed:not(.layout-menu-hover) .app-brand .app-brand-text {
        display: none;
    }

    /* Collapse control crowds the icon rail; show it again when hover expands the menu. */
    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand > .layout-menu-toggle {
        display: none !important;
    }

    .layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand {
        justify-content: center;
    }
}

/* ==========================================================================
   DataTables toolbar (Length | Actions | Search) — all pages with Actions export
   Applied via hb-dt-toolbar on layout row (see operationsDtToolbarRowClass).
   ========================================================================== */
.hb-dt-toolbar,
.dt-container > .dt-layout-row.hb-dt-toolbar,
div.dt-container div.obt-table-controls.hb-dt-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
}

.hb-dt-toolbar > .dt-layout-full,
.hb-dt-toolbar > .dt-layout-start,
.hb-dt-toolbar > .dt-layout-end,
.hb-dt-toolbar > [class*="dt-layout-"]:not(.dt-layout-table) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.hb-dt-toolbar > .dt-layout-cell,
.hb-dt-toolbar > [class*="dt-layout-"]:not(.dt-layout-full):not(.dt-layout-table) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
}

/* custom-laravel.css centers .btn-group at 50% — breaks Actions in toolbars */
.hb-dt-toolbar .btn-group,
.hb-dt-toolbar .btn-group-vertical,
.hb-dt-toolbar .dt-buttons,
.hb-dt-toolbar .dt-buttons.btn-group,
.hb-dt-toolbar .dt-buttons .btn-group {
    left: 0 !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    max-width: 100%;
}

.hb-dt-toolbar .dataTables_length,
.hb-dt-toolbar .dt-length {
    order: 1;
    flex: 0 1 auto;
    max-width: 100%;
}

.hb-dt-toolbar .dt-buttons,
.hb-dt-toolbar > .dt-layout-cell:has(.dt-buttons) {
    order: 2;
    flex: 0 1 auto;
    max-width: 100%;
}

.hb-dt-toolbar .dataTables_filter,
.hb-dt-toolbar .dt-search,
.hb-dt-toolbar > .dt-layout-cell:has(.dt-search),
.hb-dt-toolbar > .dt-layout-cell:has(.dataTables_filter) {
    order: 3;
    margin-left: auto !important;
    flex: 0 1 auto;
    max-width: 100%;
}

.hb-dt-toolbar .dt-button-collection,
.dt-container .dt-button-collection {
    z-index: 1060;
}

/* Do not clip the toolbar when the table area uses overflow-x: hidden */
.dt-container:has(.hb-dt-toolbar) {
    overflow-x: visible;
    max-width: 100%;
}

.dt-container:has(.hb-dt-toolbar) .dt-layout-table,
.dt-container:has(.hb-dt-toolbar) .dt-layout-table > div,
.dt-container:has(.hb-dt-toolbar) .table-responsive {
    overflow-x: hidden;
    max-width: 100%;
}

.trp-dt .dt-container:has(.trp-table-controls) {
    overflow-x: visible;
    max-width: 100%;
}

.trp-dt .dt-container:has(.trp-table-controls) .dt-layout-table,
.trp-dt .dt-container:has(.trp-table-controls) .dt-layout-table > div,
.trp-dt .dt-container:has(.trp-table-controls) .table-responsive {
    overflow-x: hidden;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .hb-dt-toolbar {
        flex-wrap: wrap;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .hb-dt-toolbar .dataTables_filter,
    .hb-dt-toolbar .dt-search,
    .hb-dt-toolbar > .dt-layout-cell:has(.dt-search),
    .hb-dt-toolbar > .dt-layout-cell:has(.dataTables_filter),
    .hb-dt-toolbar > .dt-layout-end:has(.dt-search) {
        width: 100%;
        flex: 1 1 100%;
        order: 4;
        margin-left: 0 !important;
    }

    .hb-dt-toolbar .dataTables_filter label,
    .hb-dt-toolbar .dt-search label {
        width: 100%;
    }

    .hb-dt-toolbar .dataTables_filter input,
    .hb-dt-toolbar .dt-search input {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .hb-dt-toolbar > .dt-layout-start {
        flex-direction: column;
        align-items: stretch;
        width: 100% !important;
    }

    .hb-dt-toolbar .dt-layout-start > .dt-length,
    .hb-dt-toolbar .dt-layout-start > .dt-buttons,
    .hb-dt-toolbar .dt-layout-start > .dataTables_length {
        width: 100%;
        max-width: 100%;
    }

    .hb-dt-toolbar .dataTables_length,
    .hb-dt-toolbar .dt-length {
        width: 100%;
        flex: 1 1 100%;
    }

    .hb-dt-toolbar .dataTables_length label,
    .hb-dt-toolbar .dt-length label {
        white-space: normal;
    }

    .hb-dt-toolbar .dt-buttons,
    .hb-dt-toolbar > .dt-layout-cell:has(.dt-buttons) {
        width: 100% !important;
        flex: 1 1 100%;
        display: flex !important;
    }

    .hb-dt-toolbar .dt-buttons > .btn-group {
        width: 100%;
        display: flex;
    }

    .hb-dt-toolbar .dt-buttons .buttons-collection,
    .hb-dt-toolbar .dt-buttons .dt-button {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   Shared Trips DataTable chrome (.trp-dt)
   Mirrors resources/views/b2b/index.blade.php table UI (#FAFBF7 header/footer/
   search/Actions). Reuse .trp-table-card / .trp-table-controls / .trp-table-footer
   / .trp-dt-table / .trp-expand-col on list pages.
   ========================================================================== */
.trp-dt {
    --trp-accent: var(--accent, #a2ae39);
    --trp-text: var(--ink-2, #4b465c);
    --trp-muted: var(--ink-muted, #6e6b7b);
    --trp-border: var(--hairline, #ebe9f1);
    --trp-field-bg: var(--brand-table-head-bg, var(--brand-t-fafbf7, #fafbf7));
    --trp-view-border: var(--brand-t-d8dfb0, #d8dfb0);
    --trp-view-color: var(--brand-ti-6b7a28, #6b7a28);
}

.trp-dt .trp-table-card {
    margin-bottom: 1rem;
    border: 1px solid var(--trp-border);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(29, 29, 31, 0.04);
    background: var(--surface-1, #fff);
}

.trp-dt .trp-table-card .card-body {
    padding: 0.75rem 0 0;
}

.trp-dt .trp-table-card .table-responsive,
.trp-dt .trp-table-card > .table-responsive,
.trp-dt .trp-table-card .dt-container .dt-layout-table,
.trp-dt .trp-table-card .dt-container .dt-layout-table > div {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.trp-dt .trp-table-card .dataTables_wrapper,
.trp-dt .trp-table-card .dt-container {
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
}

.trp-dt .trp-filter-card {
    margin-bottom: 1rem;
    border: 1px solid var(--trp-border);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(29, 29, 31, 0.04);
    background: var(--surface-1, #fff);
    overflow: visible;
}

.trp-dt .trp-filter-card .card-body {
    padding: 1.15rem 1.25rem 0.85rem;
}

.trp-dt .trp-filter-card .col-form-label-sm {
    margin-bottom: 0.3rem;
    color: var(--trp-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.trp-dt .trp-filter-card .form-control-sm,
.trp-dt .trp-filter-card .form-select-sm {
    min-height: 38px;
    border: 1px solid var(--hairline, #e6e4dc);
    border-radius: 8px;
    color: var(--trp-text);
    background: var(--trp-field-bg) !important;
    background-color: var(--trp-field-bg) !important;
    background-image: none !important;
    font-size: 0.875rem;
    box-shadow: none;
}

.trp-dt .trp-filter-card .form-control-sm:focus,
.trp-dt .trp-filter-card .form-select-sm:focus {
    border-color: var(--trp-accent);
    box-shadow: 0 0 0 0.15rem rgba(var(--brand-primary-rgb, 162, 174, 57), 0.15);
    background: var(--surface-1, #fff) !important;
}

.trp-dt .trp-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.trp-dt .trp-header__title {
    margin: 0;
    color: var(--trp-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

.trp-dt .trp-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0 1.35rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
}

/* Length | Actions -------- Search (same as trips / .trp-page) */
.trp-dt .trp-table-controls,
.trp-dt .inv-table-controls,
.trp-dt .dt-container > .dt-layout-row.trp-table-controls,
.trp-dt .dt-container > .dt-layout-row.inv-table-controls {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0.3rem 1.15rem 0.3rem;
    background: var(--surface-1, #fff);
    width: 100%;
    box-sizing: border-box;
}

/* DT2 nests features inside a layout cell — make that cell the flex row */
.trp-dt .trp-table-controls > .dt-layout-full,
.trp-dt .inv-table-controls > .dt-layout-full {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}

/* When DT2 splits features into separate cells, keep them on one row */
.trp-dt .trp-table-controls > .dt-layout-cell,
.trp-dt .trp-table-controls > [class*="dt-layout-"]:not(.dt-layout-full),
.trp-dt .inv-table-controls > .dt-layout-cell,
.trp-dt .inv-table-controls > [class*="dt-layout-"]:not(.dt-layout-full) {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex: 0 0 auto;
}

.trp-dt .trp-table-controls .dataTables_length,
.trp-dt .trp-table-controls .dt-length,
.trp-dt .trp-table-controls .dt-buttons,
.trp-dt .trp-table-controls .dataTables_filter,
.trp-dt .trp-table-controls .dt-search,
.trp-dt .inv-table-controls .dataTables_length,
.trp-dt .inv-table-controls .dt-length,
.trp-dt .inv-table-controls .dt-buttons,
.trp-dt .inv-table-controls .dataTables_filter,
.trp-dt .inv-table-controls .dt-search {
    float: none;
    margin: 0 !important;
    flex: 0 0 auto;
}

.trp-dt .trp-table-controls .dataTables_length,
.trp-dt .trp-table-controls .dt-length,
.trp-dt .trp-table-controls > .dt-layout-cell:has(.dt-length),
.trp-dt .trp-table-controls > .dt-layout-cell:has(.dataTables_length),
.trp-dt .inv-table-controls .dataTables_length,
.trp-dt .inv-table-controls .dt-length,
.trp-dt .inv-table-controls > .dt-layout-cell:has(.dt-length),
.trp-dt .inv-table-controls > .dt-layout-cell:has(.dataTables_length) {
    order: 1;
}

.trp-dt .trp-table-controls .dataTables_length label,
.trp-dt .trp-table-controls .dt-length label {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--trp-view-color);
    white-space: nowrap;
}

.trp-dt .trp-table-controls .dataTables_length select,
.trp-dt .trp-table-controls .dataTables_length .custom-select,
.trp-dt .trp-table-controls .dt-length select,
.trp-dt .trp-table-controls .dt-length .form-select {
    min-width: 64px;
    min-height: 32px;
    height: 32px;
    padding: 0 1.65rem 0 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--trp-view-border);
    background-color: var(--surface-1, #fff) !important;
    color: var(--trp-view-color);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236b7a28' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 12px 12px !important;
}

.trp-dt .trp-table-controls .dataTables_length select:focus,
.trp-dt .trp-table-controls .dt-length select:focus {
    border-color: var(--trp-accent);
    box-shadow: 0 0 0 0.15rem rgba(var(--brand-primary-rgb, 162, 174, 57), 0.15);
    outline: 0;
}

/* Length + Actions on the left; Search on the right (same row). */
.trp-dt .trp-table-controls .dt-buttons,
.trp-dt .trp-table-controls .dt-buttons.btn-group,
.trp-dt .trp-table-controls .dt-buttons .btn-group,
.trp-dt .trp-table-controls .btn-group,
.trp-dt .trp-table-controls > .dt-layout-cell:has(.dt-buttons),
.trp-dt .inv-table-controls .dt-buttons,
.trp-dt .inv-table-controls .dt-buttons.btn-group,
.trp-dt .inv-table-controls .dt-buttons .btn-group,
.trp-dt .inv-table-controls .btn-group,
.trp-dt .inv-table-controls > .dt-layout-cell:has(.dt-buttons) {
    order: 2;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    transform: none !important;
    position: relative !important;
}

.trp-dt .trp-table-controls .dt-button-collection,
.trp-dt .inv-table-controls .dt-button-collection,
.trp-dt .dt-container .dt-button-collection {
    z-index: 1060;
}

.trp-dt .trp-table-controls .dataTables_filter,
.trp-dt .trp-table-controls .dt-search,
.trp-dt .trp-table-controls > .dt-layout-cell:has(.dt-search),
.trp-dt .trp-table-controls > .dt-layout-cell:has(.dataTables_filter),
.trp-dt .inv-table-controls .dataTables_filter,
.trp-dt .inv-table-controls .dt-search,
.trp-dt .inv-table-controls > .dt-layout-cell:has(.dt-search),
.trp-dt .inv-table-controls > .dt-layout-cell:has(.dataTables_filter) {
    order: 3;
    margin-left: auto !important;
}

.trp-dt .trp-table-controls .dataTables_filter label,
.trp-dt .trp-table-controls .dt-search label,
.trp-dt .inv-table-controls .dataTables_filter label,
.trp-dt .inv-table-controls .dt-search label {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.trp-dt .trp-table-controls .dataTables_filter input,
.trp-dt .trp-table-controls .dt-search input,
.trp-dt .inv-table-controls .dataTables_filter input,
.trp-dt .inv-table-controls .dt-search input {
    min-height: 32px;
    height: 32px;
    min-width: 140px;
    max-width: 220px;
    width: 180px;
    border-radius: 6px;
    font-size: 0.8125rem;
    border: 1px solid var(--trp-view-border);
    color: var(--trp-view-color);
    background: var(--trp-field-bg) !important;
}

.trp-dt .dataTables_wrapper .dt-buttons .btn,
.trp-dt .dataTables_wrapper .dt-buttons .btn-group > .btn,
.trp-dt .dataTables_wrapper .dt-buttons .dt-button,
.trp-dt .dataTables_wrapper .dt-buttons .buttons-collection,
.trp-dt .dt-container .dt-buttons .btn,
.trp-dt .dt-container .dt-buttons .btn-group > .btn,
.trp-dt .dt-container .dt-buttons .dt-button,
.trp-dt .dt-container .dt-buttons .buttons-collection {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 32px;
    padding: 0 0.95rem;
    background: var(--trp-field-bg) !important;
    background-color: var(--trp-field-bg) !important;
    border: 1px solid var(--trp-view-border) !important;
    color: var(--trp-view-color) !important;
    font-weight: 600;
    font-size: 0.8125rem;
    border-radius: 6px;
    box-shadow: none !important;
}

.trp-dt .dataTables_wrapper .dt-buttons .buttons-collection:before,
.trp-dt .dt-container .dt-buttons .buttons-collection:before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M12 5l-6 6M12 5l6 6' fill='none' stroke='%236b7a28' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.trp-dt .trp-dt-table,
.trp-dt table.display {
    width: 100% !important;
    margin-bottom: 0 !important;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.trp-dt .trp-dt-table.table-bordered,
.trp-dt table.display.table-bordered {
    border: 0 !important;
}

.trp-dt .trp-dt-table thead th,
.trp-dt .trp-dt-table tbody td,
.trp-dt table.display thead th,
.trp-dt table.display tbody td {
    border-left: 0 !important;
    border-right: 0 !important;
    vertical-align: middle;
}

.trp-dt .trp-dt-table thead th,
.trp-dt table.display thead th,
.trp-dt table.dataTable thead th {
    background: var(--trp-field-bg) !important;
    color: var(--brand-table-head-color, var(--brand-primary, #a2ae39));
    font-weight: 900;
    font-weight: 1000;
    font-size: 0.6875rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    /* nowrap so Responsive can measure overflow and fold columns under + */
    white-space: nowrap;
    word-break: normal;
    line-height: 1.3;
    padding: 0.7rem 0.55rem;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.trp-dt .trp-dt-table tbody td,
.trp-dt table.display tbody td,
.trp-dt table.dataTable tbody td,
.trp-dt table.dataTable tbody tr.odd td,
.trp-dt table.dataTable tbody tr.even td,
.trp-dt table.dataTable tbody td.sorting_1 {
    padding: 0.7rem 0.55rem;
    border-top: 0 !important;
    border-bottom: 1px solid var(--trp-border) !important;
    color: var(--trp-text);
    background: var(--surface-1, #fff) !important;
    font-size: 0.8125rem;
    white-space: nowrap;
    vertical-align: middle;
}

/* Primary identifier — stay in main row with DataTables class `all`. */
.trp-dt .trp-dt-table thead th.trp-id-col,
.trp-dt .trp-dt-table tbody td.trp-id-col,
.trp-dt table.display thead th.trp-id-col,
.trp-dt table.display tbody td.trp-id-col {
    min-width: 72px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trp-dt .trp-dt-table tbody td.trp-id-col,
.trp-dt table.display tbody td.trp-id-col {
    font-weight: 600;
}

/* Actions — fixed block so buttons/dropdowns are never clipped. */
.trp-dt .trp-dt-table thead th.trp-actions-col,
.trp-dt .trp-dt-table tbody td.trp-actions-col,
.trp-dt table.display thead th.trp-actions-col,
.trp-dt table.display tbody td.trp-actions-col {
    width: 270px;
    min-width: 270px;
    max-width: 270px;
    white-space: normal;
    vertical-align: middle;
    overflow: visible;
    padding-right: 0.85rem !important;
}

/* Compact Actions column for more_vert / dropdown menus (not button groups). */
.trp-dt .trp-dt-table thead th.trp-actions-col.trp-actions-col--menu,
.trp-dt .trp-dt-table tbody td.trp-actions-col.trp-actions-col--menu,
.trp-dt table.display thead th.trp-actions-col.trp-actions-col--menu,
.trp-dt table.display tbody td.trp-actions-col.trp-actions-col--menu {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    text-align: center;
    white-space: nowrap;
    padding-right: 0.55rem !important;
}

/* Never show a responsive expand glyph on ID / Actions cells. */
.trp-dt table.dataTable tbody td.trp-id-col.dtr-control:before,
.trp-dt table.dataTable tbody td.trp-id-col:before,
.trp-dt table.dataTable tbody td.trp-actions-col.dtr-control:before,
.trp-dt table.dataTable tbody td.trp-actions-col:before {
    display: none !important;
    content: none !important;
}

/* Status / badge cells stay readable when they remain in the main row. */
.trp-dt .trp-dt-table thead th.trp-status-col,
.trp-dt .trp-dt-table tbody td.trp-status-col,
.trp-dt table.display thead th.trp-status-col,
.trp-dt table.display tbody td.trp-status-col {
    min-width: 110px;
    white-space: nowrap;
}

.trp-dt .trp-dt-table thead th.trp-expand-col,
.trp-dt .trp-dt-table tbody td.trp-expand-col,
.trp-dt .trp-dt-table tbody td.dtr-control,
.trp-dt table.display thead th.trp-expand-col,
.trp-dt table.display tbody td.trp-expand-col,
.trp-dt table.display tbody td.dtr-control {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    position: relative;
    padding-right: 0.35rem !important;
    padding-left: 0.35rem !important;
    text-align: center;
    vertical-align: middle;
}

.trp-dt table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
.trp-dt table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,
.trp-dt table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
.trp-dt table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    border: 1.5px solid var(--brand-t-c7d8a2, #c7d8a2) !important;
    border-radius: 4px !important;
    background-color: var(--brand-t-edf3d3, #edf3d3) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%238a9e46' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 58% 58% !important;
    box-shadow: none !important;
    color: transparent !important;
    content: '' !important;
    font-size: 0 !important;
    line-height: 16px !important;
    transform: translate(-50%, -50%) !important;
}

.trp-dt table.dataTable.dtr-column > tbody > tr:is(.parent, .dtr-expanded, .dt-hasChild) > td.dtr-control:before,
.trp-dt table.dataTable.dtr-column > tbody > tr:is(.parent, .dtr-expanded, .dt-hasChild) > th.dtr-control:before,
.trp-dt table.dataTable.dtr-inline.collapsed > tbody > tr:is(.parent, .dtr-expanded, .dt-hasChild) > td.dtr-control:before,
.trp-dt table.dataTable.dtr-inline.collapsed > tbody > tr:is(.parent, .dtr-expanded, .dt-hasChild) > th.dtr-control:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%238a9e46' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.trp-dt .trp-table-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--trp-view-border);
    border-radius: 0 0 10px 10px;
    background: var(--trp-field-bg) !important;
}

.trp-dt .trp-table-footer > .dt-layout-full,
.trp-dt .trp-table-footer > [class*="dt-layout-"] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.trp-dt .trp-table-footer .dataTables_info,
.trp-dt .trp-table-footer .dt-info,
.trp-dt .trp-table-footer .dataTables_paginate,
.trp-dt .trp-table-footer .dt-paging {
    float: none;
    margin: 0;
    padding: 0;
    background: transparent !important;
}

.trp-dt .trp-table-footer .dataTables_info,
.trp-dt .trp-table-footer .dt-info {
    color: var(--trp-muted);
    font-size: 0.8125rem;
}

.trp-dt .trp-table-footer .dataTables_info strong,
.trp-dt .trp-table-footer .dt-info strong {
    color: var(--trp-text);
    font-weight: 700;
}

.trp-dt .trp-table-footer .dataTables_paginate .page-link,
.trp-dt .trp-table-footer .dt-paging .page-link {
    min-width: 25px;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--trp-border);
    border-radius: 5px !important;
    color: var(--trp-muted);
    background: var(--surface-1, #fff);
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
}

.trp-dt .trp-table-footer .dataTables_paginate .page-item.active .page-link,
.trp-dt .trp-table-footer .dt-paging .page-item.active .page-link {
    border-color: var(--brand-t-8c9b32, #8c9b32);
    color: #fff;
    background: var(--brand-t-8c9b32, #8c9b32);
}

.trp-dt .trp-table-footer .dataTables_paginate .page-item.disabled .page-link,
.trp-dt .trp-table-footer .dt-paging .page-item.disabled .page-link {
    color: #c9c9c9;
}

@media (max-width: 767.98px) {
    .trp-dt .trp-table-controls,
    .trp-dt .inv-table-controls,
    .trp-dt .trp-table-controls > .dt-layout-full,
    .trp-dt .inv-table-controls > .dt-layout-full {
        flex-wrap: wrap;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .trp-dt .trp-table-controls .dt-buttons,
    .trp-dt .trp-table-controls > .dt-layout-cell:has(.dt-buttons),
    .trp-dt .inv-table-controls .dt-buttons,
    .trp-dt .inv-table-controls > .dt-layout-cell:has(.dt-buttons) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .trp-dt .trp-table-controls .dataTables_filter,
    .trp-dt .trp-table-controls .dt-search,
    .trp-dt .trp-table-controls > .dt-layout-cell:has(.dt-search),
    .trp-dt .trp-table-controls > .dt-layout-cell:has(.dataTables_filter),
    .trp-dt .inv-table-controls .dataTables_filter,
    .trp-dt .inv-table-controls .dt-search,
    .trp-dt .inv-table-controls > .dt-layout-cell:has(.dt-search),
    .trp-dt .inv-table-controls > .dt-layout-cell:has(.dataTables_filter) {
        width: 100%;
        flex: 1 1 100%;
        order: 4;
        margin-left: 0 !important;
    }

    .trp-dt .trp-table-controls .dataTables_filter label,
    .trp-dt .trp-table-controls .dt-search label,
    .trp-dt .inv-table-controls .dataTables_filter label,
    .trp-dt .inv-table-controls .dt-search label {
        width: 100%;
    }

    .trp-dt .trp-table-controls .dataTables_filter input,
    .trp-dt .trp-table-controls .dt-search input,
    .trp-dt .inv-table-controls .dataTables_filter input,
    .trp-dt .inv-table-controls .dt-search input {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
    }

    .trp-dt .trp-table-footer {
        flex-wrap: wrap;
    }

    /* Do not use table-layout:fixed — it prevents Responsive from folding into +. */
    .trp-dt .trp-dt-table thead th.trp-actions-col,
    .trp-dt .trp-dt-table tbody td.trp-actions-col,
    .trp-dt table.display thead th.trp-actions-col,
    .trp-dt table.display tbody td.trp-actions-col {
        width: 180px;
        min-width: 180px;
        max-width: 180px;
        white-space: normal;
    }

    .trp-dt .trp-dt-table thead th.trp-actions-col.trp-actions-col--menu,
    .trp-dt .trp-dt-table tbody td.trp-actions-col.trp-actions-col--menu,
    .trp-dt table.display thead th.trp-actions-col.trp-actions-col--menu,
    .trp-dt table.display tbody td.trp-actions-col.trp-actions-col--menu {
        width: 64px;
        min-width: 64px;
        max-width: 64px;
        white-space: nowrap;
    }

    .trp-dt .trp-dt-table thead th.trp-id-col,
    .trp-dt .trp-dt-table tbody td.trp-id-col,
    .trp-dt table.display thead th.trp-id-col,
    .trp-dt table.display tbody td.trp-id-col {
        min-width: 64px;
        white-space: nowrap;
    }
}