/* HubBroker Overrides and Custom Themes styling */
.text-hb-primary {
    color: var(--hb-primary) !important;
}
.text-hb-primary-dark {
    color: var(--hb-primary-dark) !important;
}

/* Global popover header title matching HubBroker active theme color */
.popover-header {
    color: var(--hb-primary) !important;
    font-weight: bold !important;
}

body {
    font-family: var(--hb-font-family);
    font-size: 13px;
    color: var(--hb-text-color);
}

input,
select,
textarea,
button,
.form-control,
.form-select,
.select2-container {
    font-family: var(--hb-font-family);
    font-size: 13px;
}

/* Select2 V4 Parity Styling matching V4 Screenshot */
.select2-container,
.select2-container--default,
.select2-container--bootstrap-5,
.select2-selection,
.select2-selection--single,
.select2-selection__rendered,
.select2-results__option,
.select2-search__field {
    font-size: 12px !important;
}

.select2-container--default .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection--single {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: #fff !important;
}

.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
    border-color: #66afe9 !important;
    outline: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important;
    color: #555 !important;
    padding-left: 8px !important;
    font-size: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
    right: 6px !important;
}

.select2-dropdown {
    border: 1px solid #66afe9 !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 12px rgba(0,0,0,.175) !important;
    z-index: 10051 !important;
}

.select2-search--dropdown {
    padding: 6px !important;
    background-color: #fff !important;
}

.select2-search--dropdown .select2-search__field {
    padding: 4px 28px 4px 8px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    outline: none !important;
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat right 8px center !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #66afe9 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--hb-primary) !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: var(--hb-primary) !important;
    color: #fff !important;
}

.select2-results__option {
    padding: 4px 10px !important;
    font-size: 12px !important;
    color: #333 !important;
}

/* V4 Parity: "No matches found" Yellow Warning Box */
.select2-results__option--no-results {
    background-color: #fcf8e3 !important;
    border: 1px solid #faebcc !important;
    color: #8a6d3b !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    margin: 4px 6px !important;
    border-radius: 3px !important;
}

label,
.form-label,
.text-secondary,
.filterHeading,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--hb-font-family);
    color: var(--hb-text-color) !important;
}

label,
.form-label {
    font-size: 13px;
    font-weight: 700;
}

/* V4 color line component for modals */
.color-line {
    background: var(--hb-surface-alt);
    height: 6px;
    background-image: linear-gradient(to right, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 37.5%, #3498db 37.5%, #3498db 50%, #1abc9c 50%, #1abc9c 62.5%, #2ecc71 62.5%, #2ecc71 75%, #f1c40f 75%, #f1c40f 87.5%, #e67e22 87.5%, #e67e22 100%, #e74c3c 100%);
    background-size: 100% 6px;
    background-position: 50% 0%;
}

/* Modal header/footer button styling */
.modal-header .btn-xs,
.modal-footer .btn-xs {
    padding: 2px 10px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
}


/* Datetimepicker widget Bootstrap 5 & FontAwesome styling */
.bootstrap-datetimepicker-widget {
    z-index: 10050 !important;
    background-color: #ffffff !important;
    border: 1px solid var(--hb-border-color, #ccc) !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175) !important;
    padding: 8px !important;
}

.bootstrap-datetimepicker-widget table td span {
    border-radius: 4px !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--hb-primary, #1ab394) !important;
    color: #ffffff !important;
}

.bootstrap-datetimepicker-widget a[data-action] {
    color: var(--hb-text-color, #333) !important;
    padding: 6px !important;
}

.btn-default {
    background-color: var(--hb-surface-bg) !important;
    border: 1px solid var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

.btn-default:hover {
    background-color: var(--hb-surface-alt) !important;
    border-color: var(--hb-input-border) !important;
    color: #333333 !important;
}

[data-bs-theme="dark"] .btn-default {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .btn-default:hover {
    background-color: var(--hb-border-color) !important;
    color: var(--hb-surface-bg) !important;
}

a {
    color: var(--hb-primary);
    text-decoration: none;
}

a:hover {
    color: var(--hb-primary-dark);
}

.btn-primary {
    background-color: var(--hb-primary, #7f8558) !important;
    border-color: var(--hb-primary, #7f8558) !important;
    color: var(--hb-surface-bg, #ffffff) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--hb-primary-dark, #6e7740) !important;
    border-color: var(--hb-primary-dark, #6e7740) !important;
}

.text-primary {
    color: var(--hb-primary) !important;
}

/* Sidebar Active State and highlight styling */
.side-nav .side-nav-item.active>.side-nav-link,
.side-nav .side-nav-link.active {
    color: var(--hb-primary) !important;
    font-weight: 600;
}

.side-nav .side-nav-item.active>a i,
.side-nav .side-nav-link.active i {
    color: var(--hb-primary) !important;
}

/* Form inputs hover and focus state overrides - border highlight removed */
.form-control:focus,
.form-control:hover,
.form-select:focus,
.form-select:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover {
    outline: none !important;
    box-shadow: none !important;
}

.form-control:not(.input-validation-error):not(.is-invalid):focus,
.form-control:not(.input-validation-error):not(.is-invalid):hover,
.form-select:not(.input-validation-error):not(.is-invalid):focus,
.form-select:not(.input-validation-error):not(.is-invalid):hover,
textarea:not(.input-validation-error):not(.is-invalid):focus,
textarea:not(.input-validation-error):not(.is-invalid):hover,
select:not(.input-validation-error):not(.is-invalid):focus,
select:not(.input-validation-error):not(.is-invalid):hover {
    border-color: #e4e5e7 !important;
    box-shadow: none !important;
}

/* Cards custom panels style */
.card {
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Page Header custom wrapper */
.page-title-box {
    padding: 1rem 1.5rem;
    background: var(--hb-surface-bg);
    border-bottom: 1px solid var(--hb-border-color);
    margin-bottom: 1.5rem;
}

/* Custom badges */
.badge-primary {
    background-color: var(--hb-primary) !important;
    color: var(--hb-surface-bg) !important;
}

.badge-accent {
    background-color: var(--hb-accent) !important;
    color: #2d3748 !important;
}


/* Premium Interaction Animations and Transitions */
.btn,
.hb-action-btn,
.card,
.side-nav-link,
.topbar-link,
.form-control,
.form-select {
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Button & Icon Hover Effects */
.btn:hover,
.hb-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.btn:active,
.hb-action-btn:active {
    transform: translateY(0);
}

/* Card Hover Elevation */
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

/* Topbar Links Hover Effect */
.topbar-link:hover {
    background-color: var(--hb-primary-light);
    color: var(--hb-primary) !important;
    transform: scale(1.05);
}

.side-nav-link {
    transition: background-color 0.18s ease-in-out, color 0.18s ease-in-out, border-color 0.18s ease-in-out !important;
    border-left: 3px solid transparent !important;
}

.logo-topbar {
    background-color: transparent !important;
}

.side-nav-link:hover {
    background-color: var(--hb-surface-alt) !important;
    color: var(--hb-primary) !important;
    border-left: 3px solid var(--hb-surface-alt) !important;
}

[data-bs-theme="dark"] .side-nav-link:hover {
    background-color: var(--hb-surface-bg) !important;
    color: var(--hb-primary) !important;
    border-left: 3px solid var(--hb-surface-bg) !important;
}

/* Sidenav Active Menu Highlight with left dynamic accent border */
.side-nav-item.active>.side-nav-link {
    background-color: var(--hb-primary-light) !important;
    color: var(--hb-primary) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--hb-primary) !important;
}

[data-bs-theme="dark"] .side-nav-item.active>.side-nav-link {
    background-color: var(--hb-body-bg) !important;
    color: var(--hb-primary) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--hb-primary) !important;
}

/* Keep sub-menus cleaner without left border lines */
.sub-menu .side-nav-link {
    border-left: none !important;
}

.sub-menu .side-nav-link:hover {
    background-color: var(--hb-surface-alt) !important;
    color: var(--hb-primary) !important;
    border-left: none !important;
}

[data-bs-theme="dark"] .sub-menu .side-nav-link:hover {
    background-color: var(--hb-surface-bg) !important;
    color: var(--hb-primary) !important;
    border-left: none !important;
}

.sub-menu .side-nav-item.active>.side-nav-link {
    background-color: transparent !important;
    color: var(--hb-primary) !important;
    font-weight: 700 !important;
    border-left: none !important;
}

[data-bs-theme="dark"] .sub-menu .side-nav-item.active>.side-nav-link {
    background-color: transparent !important;
    color: var(--hb-primary) !important;
    font-weight: 700 !important;
    border-left: none !important;
}

/* Input Focus Glow Removed */
.form-control:focus,
.form-control:hover,
.form-select:focus,
.form-select:hover {
    outline: none !important;
    box-shadow: none !important;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {

    .btn,
    .hb-action-btn,
    .card,
    .side-nav-link,
    .topbar-link,
    .form-control,
    .form-select {
        transition: none !important;
        transform: none !important;
        box-shadow: none !important;
    }
}


/* Global Dark Mode Overrides */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--hb-body-bg);
    --bs-body-color: var(--hb-text-color);
    --bs-border-color: var(--hb-border-color);

    background-color: var(--hb-body-bg) !important;
}

/* Layout Page Backgrounds */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .content-page,
[data-bs-theme="dark"] .wrapper {
    background-color: var(--hb-body-bg) !important;
    color: var(--hb-text-color) !important;
}

/* Header/Topbar Overrides */
[data-bs-theme="dark"] .app-topbar {
    background-color: var(--hb-surface-bg) !important;
    border-bottom: 1px solid var(--hb-border-color) !important;
}

[data-bs-theme="dark"] .topbar-search {
    background-color: var(--hb-body-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .topbar-link {
    color: var(--hb-text-muted) !important;
}

[data-bs-theme="dark"] .topbar-link:hover {
    background-color: var(--hb-border-color) !important;
    color: var(--hb-surface-bg) !important;
}

/* Sidebar Navigation Overrides */
[data-bs-theme="dark"] .sidenav-menu {
    background-color: var(--hb-surface-bg) !important;
    border-right: 1px solid var(--hb-border-color) !important;
}

[data-bs-theme="dark"] .side-nav-link {
    color: var(--hb-text-muted) !important;
}

[data-bs-theme="dark"] .side-nav-link:hover {
    color: var(--hb-accent) !important;
    background-color: var(--hb-border-color) !important;
}

[data-bs-theme="dark"] .side-nav .side-nav-item.active>.side-nav-link,
[data-bs-theme="dark"] .side-nav .side-nav-link.active {
    color: var(--hb-accent) !important;
    background-color: var(--hb-border-color) !important;
}

/* Cards & Panel Layouts */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .panel-v4 {
    background-color: var(--hb-surface-bg) !important;
    border: 1px solid var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .panel-v4-header,
[data-bs-theme="dark"] .panel-v4-footer {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .panel-v4-header span,
[data-bs-theme="dark"] .panel-v4-header i {
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .panel-v4-body {
    background-color: var(--hb-surface-bg) !important;
    color: var(--hb-text-color) !important;
}

/* Form Controls & Inputs */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--hb-body-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--hb-body-bg) !important;
    color: var(--hb-surface-bg) !important;
}

/* Dropdowns */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--hb-surface-bg) !important;
    border: 1px solid var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--hb-text-muted) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: var(--hb-border-color) !important;
    color: var(--hb-surface-bg) !important;
}

[data-bs-theme="dark"] .dropdown-header {
    color: var(--hb-text-muted) !important;
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--hb-border-color) !important;
}

/* Tables */
[data-bs-theme="dark"] .table {
    color: var(--hb-text-color) !important;
    border-color: var(--hb-border-color) !important;
}

[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td {
    border-color: var(--hb-border-color) !important;
    background-color: transparent !important;
}

/* Page Headers & Breadcrumbs */
[data-bs-theme="dark"] .page-title-box,
[data-bs-theme="dark"] .page-title-head {
    background-color: var(--hb-surface-bg) !important;
    border-bottom: 1px solid var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .page-title-head h4 {
    color: var(--hb-accent) !important;
}

[data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--hb-accent) !important;
}

/* Modals */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--hb-surface-bg) !important;
    border: 1px solid var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    background-color: var(--hb-body-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .modal-title {
    color: var(--hb-text-color) !important;
}

/* Customizer Drawer Custom CSS overrides */
[data-bs-theme="dark"] .offcanvas {
    background-color: var(--hb-surface-bg) !important;
    border-left: 1px solid var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .offcanvas-footer {
    background-color: var(--hb-body-bg) !important;
    border-top: 1px solid var(--hb-border-color) !important;
}

[data-bs-theme="dark"] .offcanvas-body h6 {
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .card-radio label {
    border-color: var(--hb-border-color) !important;
    background-color: var(--hb-body-bg) !important;
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .card-radio input:checked+label {
    border-color: var(--hb-primary) !important;
    background-color: var(--hb-surface-bg) !important;
}

/* Dashboard Counts overrides */
[data-bs-theme="dark"] .count-item a h4 {
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .count-item a:hover h4 {
    color: var(--hb-accent) !important;
}

/* Premium Card Migration */
[data-bs-theme="dark"] .premium-card-migration {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid var(--hb-border-color) !important;
}

/* General Link color resets */
[data-bs-theme="dark"] a {
    color: var(--hb-accent);
}

[data-bs-theme="dark"] a:hover {
    color: var(--hb-surface-bg);
}

/* Footers */
[data-bs-theme="dark"] .footer {
    background-color: var(--hb-surface-bg) !important;
    border-top: 1px solid var(--hb-border-color) !important;
    color: var(--hb-text-muted) !important;
}

/* Topbar Brand Logo layout styling */
.logo-topbar {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-topbar img {
    max-height: 38px;
    width: auto;
    display: inline-block;
}

/* V4-style User Profile Block in Sidebar */
.sidenav-user {
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 10px 2px 10px !important;
    border-bottom: 1px solid var(--hb-border-color) !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.sidenav-user-avatar {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
    background-color: var(--hb-surface-bg);
}

.sidenav-user-name {
    display: block;
}

.sidenav-user .font-extra-bold {
    font-weight: 800;
}

.sidenav-user .font-uppercase {
    text-transform: uppercase;
}

.sidenav-user .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* Sidebar user block details */
.sidenav-user .company-name {
    font-weight: 800;
    font-size: 0.85rem !important;
}

.sidenav-user .user-name-link {
    font-size: 0.82rem !important;
    font-weight: 700;
}

.sidenav-user .settings-toggle {
    font-size: 0.78rem !important;
}

.sidenav-user .dropdown-menu {
    font-size: 0.8rem;
    min-width: 140px;
}

/* Sidebar links font size */
.side-nav-link {
    font-size: 0.88rem !important;
}

/* Sidebar menu container spacing alignment to prevent topbar logo overlap */
.sidenav-menu {
    padding-top: 45px !important;
}

/* Sidebar and Logo alignment overrides (for expanded and collapsed states) */
html[data-sidenav-size="default"] .logo-topbar {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
}

html[data-sidenav-size="collapse"] .logo-topbar,
html[data-sidenav-size="offcanvas"] .logo-topbar {
    width: 75px !important;
    min-width: 75px !important;
    max-width: 75px !important;
    height: calc(100% - 4px) !important;
    padding-right: 0 !important;
    border-right: 1px solid rgba(228, 229, 231, 0.7) !important;
}

html[data-sidenav-size="default"] .sidenav-menu {
    width: 220px !important;
}

html[data-sidenav-size="default"] .content-page {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
}

/* Sidebar user block dark mode contrast overrides */
[data-bs-theme="dark"] .sidenav-user .company-name,
[data-bs-theme="dark"] .sidenav-user .user-name-link {
    color: var(--hb-text-color) !important;
}

[data-bs-theme="dark"] .sidenav-user .settings-toggle {
    color: var(--hb-text-muted) !important;
}

/* Shared Modal Style Overrides for V4 Parity */
.modal-content {
    border-radius: 4px !important;
}

.modal-body .form-check {
    padding-left: 1.75em !important;
}

.modal-body .form-check-input {
    margin-left: -1.75em !important;
    width: 16px;
    height: 16px;
    margin-top: 0.15em;
    border-radius: 3px !important;
}

.modal-body .form-check-label {
    margin-bottom: 0 !important;
    vertical-align: middle;
}

/* Shared Action Buttons System for V4 Parity */
.btn-action-icon {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    background-color: var(--hb-surface-alt, #f7f9fa) !important;
    border: 1px solid var(--hb-border-color, #e4e5e7) !important;
    color: var(--hb-text-color, #6a6c6f) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

.btn-action-icon i {
    line-height: 1 !important;
}

/* Run / Play Button: V4 Green */
.btn-action-run:hover {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(26, 179, 148, 0.15) !important;
}

/* Upload Button: V4 Blue */
.btn-action-upload:hover {
    background-color: var(--hb-blue, #1c84c6) !important;
    border-color: var(--hb-blue, #1c84c6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(28, 132, 198, 0.15) !important;
}

/* History Button: Orange / Amber */
.btn-action-history:hover {
    background-color: var(--hb-yellow, #f8ac59) !important;
    border-color: var(--hb-yellow, #f8ac59) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(248, 172, 89, 0.15) !important;
}

/* Clone / Copy Button: V4 Teal */
.btn-action-clone:hover {
    background-color: #23c6c8 !important;
    border-color: #23c6c8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(35, 198, 200, 0.15) !important;
}

/* Edit / Configure Button: V4 Yellow/Orange */
.btn-action-edit:hover {
    background-color: var(--hb-yellow, #f8ac59) !important;
    border-color: var(--hb-yellow, #f8ac59) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(248, 172, 89, 0.15) !important;
}

/* Archive / Restore Button: V4 Slate Gray */
.btn-action-archive:hover,
.btn-action-restore:hover {
    background-color: #707070 !important;
    border-color: #707070 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(112, 112, 112, 0.15) !important;
}

/* Delete / Trash Button: V4 Red */
.btn-action-delete:hover {
    background-color: var(--hb-red, #ed5565) !important;
    border-color: var(--hb-red, #ed5565) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(237, 85, 101, 0.2) !important;
}

/* Adaptors Button: V4 Blue */
.btn-action-adaptors:hover {
    background-color: var(--hb-blue, #1c84c6) !important;
    border-color: var(--hb-blue, #1c84c6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(28, 132, 198, 0.15) !important;
}

/* Mappings Button: V4 Purple */
.btn-action-mappings:hover {
    background-color: #7266ba !important;
    border-color: #7266ba !important;
    color: #ffffff !important;
}

/* Active/Inactive Gateway Card top border colors */
.gateway-card.border-green {
    border-top: 3px solid var(--hb-primary);
}
.gateway-card.border-gray {
    border-top: 3px solid var(--hb-border-color, #e4e5e7);
}

/* Gateway Card Body Padding Adjustment */
.gateway-card .gateway-card-body {
    padding-top: 0;
    padding-bottom: 0.5rem;
}

/* Gateway Card Height and Spacing Overrides */
.gateway-card {
    height: fit-content;
}
.gateway-card .card-header-v4 {
    border-bottom: none;
    padding-bottom: 0.25rem;
}

/* Toolbar count badge styled to match My Adaptors */
.count-badge {
    background-color: var(--hb-primary) !important;
    color: white !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 12px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    border: none !important;
}

/* Shared V4-style Tables and DataTables Styling */
.table-v4 {
    font-size: 13px !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    background-color: transparent !important;
    border-collapse: collapse !important;
}

.table-v4 th {
    background-color: var(--hb-surface-alt) !important;
    color: #676a6c !important;
    font-weight: 700 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--hb-border-color) !important;
    font-size: 11px;
}

.table-v4 td {
    padding: 8px 10px !important;
    border: 1px solid var(--hb-border-color) !important;
    vertical-align: middle !important;
}

.table-v4 tbody tr:hover {
    background-color: var(--hb-surface-alt) !important;
}

[data-bs-theme="dark"] .table-v4 th {
    background-color: var(--hb-surface-bg) !important;
    color: var(--hb-text-color) !important;
    border-color: var(--hb-border-color) !important;
}

[data-bs-theme="dark"] .table-v4 td {
    border-color: var(--hb-border-color) !important;
}

[data-bs-theme="dark"] .table-v4 tbody tr:hover {
    background-color: var(--hb-border-color) !important;
}

/* DataTables elements alignment rules */
.dt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.dt-toolbar-left {
    display: flex;
    align-items: center;
}

.dt-toolbar-right {
    display: flex;
    align-items: center;
}

.dt-pagination-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--hb-border-color);
}

[data-bs-theme="dark"] .dt-pagination-panel {
    border-top-color: var(--hb-border-color) !important;
}



/* --- Global Loader & Skeleton Styles --- */
.hb-global-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.2s ease-in-out;
}

[data-bs-theme="dark"] .hb-global-loader-overlay {
    background-color: rgba(15, 23, 42, 0.85);
}

.hb-loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--hb-border-color);
    border-top: 4px solid var(--hb-primary, #6E7740);
    border-radius: 50%;
    animation: hb-spin 0.8s linear infinite;
}

.hb-loader-text {
    margin-top: 16px;
    font-weight: 600;
    color: var(--hb-border-subtle);
    font-size: 14px;
}

[data-bs-theme="dark"] .hb-loader-text {
    color: var(--hb-input-border);
}

.hb-section-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99;
    border-radius: inherit;
}

[data-bs-theme="dark"] .hb-section-loader-overlay {
    background-color: rgba(30, 41, 59, 0.7);
}

.hb-section-loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--hb-border-color);
    border-top: 3px solid var(--hb-primary, #6E7740);
    border-radius: 50%;
    animation: hb-spin 0.8s linear infinite;
}

/* Shimmer Skeleton Effects */
.hb-skeleton-line {
    height: 14px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, #f1f5f9 25%, var(--hb-border-color) 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: hb-shimmer 1.5s infinite;
    border-radius: 4px;
}

[data-bs-theme="dark"] .hb-skeleton-line {
    background: linear-gradient(90deg, var(--hb-surface-bg) 25%, var(--hb-border-color) 50%, var(--hb-surface-bg) 75%);
    background-size: 200% 100%;
}

.hb-skeleton-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(90deg, #f1f5f9 25%, var(--hb-border-color) 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: hb-shimmer 1.5s infinite;
}

[data-bs-theme="dark"] .hb-skeleton-circle {
    background: linear-gradient(90deg, var(--hb-surface-bg) 25%, var(--hb-border-color) 50%, var(--hb-surface-bg) 75%);
    background-size: 200% 100%;
}

@keyframes hb-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes hb-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* --- V6 Shared UI Component System --- */

/* 1. Page Shell */
.hb-page-shell {
    padding: 1.5rem;
    background-color: var(--hb-surface-alt);
}

[data-bs-theme="dark"] .hb-page-shell {
    background-color: var(--hb-body-bg);
}

.hb-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    gap: 0.75rem;
}

.hb-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--hb-border-color);
    margin: 0;
}

[data-bs-theme="dark"] .hb-page-title {
    color: var(--hb-text-color);
}

.hb-page-subtitle {
    font-size: 0.85rem;
    color: var(--hb-text-muted);
    margin-top: 0.25rem;
}

[data-bs-theme="dark"] .hb-page-subtitle {
    color: var(--hb-text-muted);
}

.hb-page-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* 2. Homer Section Panel */
.hb-panel,
.hpanel {
    border: 1px solid var(--hb-border);
    border-radius: 4px;
    background-color: var(--hb-surface-bg);
    margin-bottom: 1.25rem;
    overflow: visible;
}

[data-bs-theme="dark"] .hb-panel,
[data-bs-theme="dark"] .hpanel {
    border-color: var(--hb-border-color);
    background-color: var(--hb-surface-bg) !important;
}

.hb-panel-header,
.hbuilt {
    background-color: var(--hb-section-header);
    border-bottom: 1px solid var(--hb-border);
    padding: 0.75rem 1rem;
    font-weight: 700;
    color: var(--hb-border-subtle);
}

[data-bs-theme="dark"] .hb-panel-header,
[data-bs-theme="dark"] .hbuilt {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: var(--hb-input-border);
}

.hb-panel-body,
.hpanel .panel-body {
    padding: 1rem;
}

[data-bs-theme="dark"] .hb-panel-body,
[data-bs-theme="dark"] .hpanel .panel-body {
    color: var(--hb-input-border) !important;
}

/* 3. Setup Tab Bar */
.hb-setup-tabs {
    display: flex;
    border-bottom: 1px solid var(--hb-border);
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    list-style: none;
    padding-left: 0;
}

[data-bs-theme="dark"] .hb-setup-tabs {
    border-color: var(--hb-border-color);
}

.hb-setup-tabs .nav-link {
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: var(--hb-text-muted);
    background: transparent;
    transition: all 0.15s ease-in-out;
}

.hb-setup-tabs .nav-link.active {
    color: var(--hb-primary) !important;
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border) !important;
    border-bottom: 2px solid var(--hb-primary) !important;
}

[data-bs-theme="dark"] .hb-setup-tabs .nav-link.active {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
}

.hb-setup-tabs .nav-link.disabled {
    color: var(--hb-input-border) !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 4. Action Buttons Brand Styles */
.hb-btn-save {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: var(--hb-surface-bg) !important;
}

.hb-btn-save:hover {
    background-color: var(--hb-primary-dark) !important;
    border-color: var(--hb-primary-dark) !important;
}

.hb-btn-delete {
    background-color: var(--hb-red) !important;
    border-color: var(--hb-red) !important;
    color: var(--hb-surface-bg) !important;
}

.hb-btn-delete:hover {
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
}

.hb-btn-blue {
    background-color: var(--hb-blue) !important;
    border-color: var(--hb-blue) !important;
    color: var(--hb-surface-bg) !important;
}

.hb-btn-blue:hover {
    background-color: #1a7bb9 !important;
    border-color: #1a7bb9 !important;
}

/* 5. View Switcher Toggle */
.hb-view-toggle-bar {
    display: inline-flex;
    border: 1px solid var(--hb-border);
    border-radius: 4px;
    overflow: hidden;
}

[data-bs-theme="dark"] .hb-view-toggle-bar {
    border-color: var(--hb-border-color);
}

.hb-view-toggle-btn {
    height: 32px;
    padding: 0 0.75rem;
    background-color: var(--hb-surface-bg);
    border: none;
    color: var(--hb-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

[data-bs-theme="dark"] .hb-view-toggle-btn {
    background-color: var(--hb-surface-bg);
    color: var(--hb-input-border);
}

.hb-view-toggle-btn.active {
    background-color: var(--hb-primary-light, #F0F2E8) !important;
    color: var(--hb-primary, #6E7740) !important;
    border: 1px solid var(--hb-accent, #C8D89A) !important;
    font-weight: bold !important;
}

.hb-view-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    background-color: var(--hb-primary-light, #F0F2E8);
    color: var(--hb-primary, #6E7740);
    padding: 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid var(--hb-accent, #C8D89A);
}

[data-bs-theme="dark"] .hb-view-toggle-count {
    background-color: var(--hb-surface-bg);
    color: var(--hb-input-border);
    border-color: var(--hb-border-color);
}

/* 6. Common Components: Cards */
.hb-ui-card {
    border: 1px solid var(--hb-border);
    border-radius: 6px;
    background-color: var(--hb-surface-bg);
    padding: 1rem;
    transition: all 0.2s ease-in-out;
    position: relative;
}

[data-bs-theme="dark"] .hb-ui-card {
    border-color: var(--hb-border-color);
    background-color: var(--hb-surface-bg);
}

.hb-ui-card-icon {
    font-size: 1.5rem;
    color: var(--hb-primary);
    margin-right: 0.75rem;
}

.hb-ui-card-footer {
    border-top: 1px solid var(--hb-border);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--hb-text-muted);
}

[data-bs-theme="dark"] .hb-ui-card-footer {
    border-color: var(--hb-border-color);
    color: var(--hb-text-muted);
}

/* 7. Common Components: Modals */
.hb-modal-strip {
    height: 6px;
    background: linear-gradient(to right, #3085d6 0%, #3085d6 14.28%, #6f42c1 14.28%, #6f42c1 28.56%, #ec4758 28.56%, #ec4758 42.84%, #17a2b8 42.84%, #17a2b8 57.12%, #6E7740 57.12%, #6E7740 71.4%, #f8ac59 71.4%, #f8ac59 85.68%, #bc3f3f 85.68%, #bc3f3f 100%) !important;
    width: 100%;
}

.hb-modal-header-box {
    padding: 1.25rem 1.5rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--hb-surface-alt, #f7f9fa) !important;
    border-bottom: 1px solid var(--hb-border-color, #e4e5e7) !important;
}

.hb-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hb-surface-bg);
    margin: 0;
}

[data-bs-theme="dark"] .hb-modal-title {
    color: var(--hb-text-color);
}

.hb-modal-subtitle {
    font-size: 0.8rem;
    color: var(--hb-text-muted);
    margin-top: 0.25rem;
}

/* 8. Empty & Error Feedback States */
.hb-empty-state {
    padding: 2.5rem;
    text-align: center;
    color: var(--hb-text-muted);
}

.hb-empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--hb-input-border);
}

/* Breadcrumb and Page Header V6 Customizations */
.small-header {
    background-color: var(--hb-surface-bg);
    border-bottom: 1px solid var(--hb-border-color);
    padding: 15px 25px;
    margin: -25px -25px 20px -25px;
}

[data-bs-theme="dark"] .small-header {
    background-color: var(--hb-surface-bg);
    border-bottom-color: var(--hb-border-color);
}

.hb-page-header {
    margin-bottom: 0 !important;
}

.hb-page-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
}

.hb-page-subtitle {
    margin-bottom: 0 !important;
}

/* Select2 Bootstrap 5 Theme Integration Overrides */
.select2-container--default .select2-selection--single {
    background-color: var(--bs-card-bg, var(--hb-surface-bg)) !important;
    border: 1px solid var(--bs-border-color, var(--hb-border-color)) !important;
    border-radius: 4px !important;
    height: 38px !important;
    padding: 6px 12px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: #f1f5f9 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color, var(--hb-text-color)) !important;
    line-height: 24px !important;
    padding-left: 0 !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--hb-input-border) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent !important;
}

/* Dropdown menu styling */
.select2-dropdown {
    background-color: var(--bs-card-bg, var(--hb-surface-bg)) !important;
    border: 1px solid var(--bs-border-color, var(--hb-border-color)) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    z-index: 1060 !important;
}

[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
}

/* Search input inside dropdown */
.select2-container--default .select2-search--dropdown {
    padding: 8px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--bs-border-color, var(--hb-border-color)) !important;
    border-radius: 4px !important;
    padding: 6px 32px 6px 12px !important;
    outline: none !important;
    background-color: var(--bs-card-bg, var(--hb-surface-bg)) !important;
    color: var(--bs-body-color, var(--hb-text-color)) !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--hb-body-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: #f1f5f9 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
}

/* Custom theme focus indicators for Select2 */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--hb-primary, #6E7740) !important;
    box-shadow: 0 0 0 0.2rem var(--hb-primary-light, rgba(110, 119, 64, 0.25)) !important;
}

/* Options / Results styling */
.select2-container--default .select2-results__option {
    padding: 6px 12px !important;
    font-size: 13px !important;
    color: var(--bs-body-color, var(--hb-text-color)) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--hb-input-border) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--hb-primary, #1ab394) !important;
    color: var(--hb-surface-bg) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--hb-primary-light, var(--hb-surface-alt)) !important;
    color: var(--hb-primary) !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--hb-border-color) !important;
}

/* Disabled select2 styling */
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--bs-secondary-bg, var(--hb-surface-alt)) !important;
    border-color: var(--bs-border-color, var(--hb-border-color)) !important;
    cursor: not-allowed !important;
}

/* Custom styled Select2 messages (e.g., 'Please enter 1 or more character') to match V4 validation */
.select2-container--default .select2-results__message {
    background-color: #fcf8e3 !important;
    color: #8a6d3b !important;
    border: 1px solid #faebcc !important;
    padding: 8px 12px !important;
    margin: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__message {
    background-color: #3e2b0f !important;
    color: #ffd8a8 !important;
    border-color: #5c3e16 !important;
}

[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--hb-body-bg) !important;
    border-color: var(--hb-border-color) !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--bs-secondary-color, #adb5bd) !important;
}

/* Card Layout Fixes inside Modals/Popups */
.hb-ui-card.hpanel {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
}

.hb-ui-card.hpanel .hb-ui-card-body {
    flex-grow: 1 !important;
    height: auto !important;
    padding: 1.25rem !important;
}

.hb-ui-card.hpanel .panel-footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    background-color: var(--bs-light-bg-subtle, #fafbfa) !important;
    border-top: 1px solid var(--bs-border-color, var(--hb-border-color)) !important;
    padding: 10px 1.25rem !important;
}

/* Prevent horizontal scrolling in popup card views */
#AvailableList,
.projects {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
}

#AllAvailableListModel .modal-body {
    overflow-x: hidden !important;
}

/* Modal Top Spacing and Alignment Fixes */
.hb-modal-header-box {
    padding: 1.25rem 1.5rem 0.5rem !important;
}

.hb-modal-subtitle {
    margin-bottom: 0.5rem !important;
}

.modal-body {
    padding-top: 0.5rem !important;
}

/* Align modal filter row form groups */
.modal-body .form-group {
    margin-bottom: 0.75rem !important;
}

.modal-body label.form-label {
    margin-bottom: 0.25rem !important;
}

/* Disabled pagination button overrides */
.btn-group .btn[disabled],
.btn-group .btn.disabled {
    background-color: var(--bs-light-bg-subtle, var(--hb-surface-alt)) !important;
    color: var(--bs-secondary-color, #adb5bd) !important;
    border-color: var(--bs-border-color, #dcdcdc) !important;
    cursor: not-allowed !important;
    opacity: 0.65;
}

/* Global Page Header & Breadcrumb Restore Styles */
.app-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 70px !important;
    z-index: 1030 !important;
    background-color: var(--hb-surface-bg);
    border-bottom: 1px solid var(--bs-border-color, var(--hb-border-color)) !important;
}

.content-page {
    padding-top: 70px !important;
    /* height of app-topbar to prevent overlap */
}

/* Sidebar menu clearance under topbar */
.sidenav-menu {
    padding-top: 0 !important;
}

.topbar-menu {
    border-bottom: none !important;
}

.side-nav>.side-nav-item:first-child {
    border-top: none !important;
}

/* Homer v3.3.1 Page Title Head Styles */
.page-title-head {
    min-height: 40px;
    background-color: var(--hb-surface-bg);
    margin: 0.75rem 0 1rem;
    border-radius: var(--bs-border-radius, 4px);
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--bs-border-color, var(--hb-border-color));
    transition: margin 0.35s ease-in-out, width 0.35s ease-in-out, padding 0.35s ease-in-out;
    position: relative;
    z-index: 10;
}

[data-bs-theme="dark"] .page-title-head {
    background-color: var(--hb-surface-bg);
    border-color: var(--hb-border-color);
}

#page-head-box {
    transition: max-height 0.25s ease-in-out !important;
}

/* Breadcrumb alignments and styling overrides */
.breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 0.75rem !important;
}

.fs-xs {
    font-size: 0.75rem !important;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: var(--hb-text-muted);
}

.breadcrumb-item a {
    color: var(--hb-border-subtle);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.breadcrumb-item a:hover {
    color: var(--hb-primary);
}

.breadcrumb-item.active {
    color: var(--hb-text-muted);
    font-weight: 600;
}

/* Customize breadcrumb separator to Homer tabler-icons right chevron */
.breadcrumb-item+.breadcrumb-item::before {
    font-family: "tabler-icons" !important;
    content: "\ea61" !important;
    color: var(--hb-text-muted) !important;
    font-size: 0.75rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    display: inline-block;
    vertical-align: middle;
}

/* Active / Expanded full-width state */
.page-title-head.active {
    margin: 0 -24px 1rem !important;
    border-radius: 0 !important;
    border-width: 0 0 1px 0 !important;
}

@media (min-width: 1400px) {
    .page-title-head.active {
        margin: 0 -62px 1rem !important;
    }
}

/* Styling for Minimize/Maximize Header button to match Homer screenshot */
#btn-page-head {
    border: 1px solid var(--bs-border-color, var(--hb-border-color)) !important;
    background-color: var(--hb-surface-bg) !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--hb-body-bg) !important;
    border-color: var(--hb-border-color) !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--bs-secondary-color, #adb5bd) !important;
}


/* Prevent horizontal scrolling in popup card views */
#AvailableList,
.projects {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
}

#AllAvailableListModel .modal-body {
    overflow-x: hidden !important;
}

/* Modal Top Spacing and Alignment Fixes */
.hb-modal-header-box {
    padding: 1.25rem 1.5rem 0.5rem !important;
}

.hb-modal-subtitle {
    margin-bottom: 0.5rem !important;
}

.modal-body {
    padding-top: 0.5rem !important;
}

/* Align modal filter row form groups */
.modal-body .form-group {
    margin-bottom: 0.75rem !important;
}

.modal-body label.form-label {
    margin-bottom: 0.25rem !important;
}

/* Disabled pagination button overrides */
.btn-group .btn[disabled],
.btn-group .btn.disabled {
    background-color: var(--bs-light-bg-subtle, var(--hb-surface-alt)) !important;
    color: var(--bs-secondary-color, #adb5bd) !important;
    border-color: var(--bs-border-color, #dcdcdc) !important;
    cursor: not-allowed !important;
    opacity: 0.65;
}

/* Global Page Header & Breadcrumb Restore Styles */
.app-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 70px !important;
    z-index: 1030 !important;
    background-color: var(--hb-surface-bg);
    border-bottom: 1px solid var(--bs-border-color, var(--hb-border-color)) !important;
}

.content-page {
    padding-top: 70px !important;
    /* height of app-topbar to prevent overlap */
}

/* Sidebar menu clearance under topbar */
.sidenav-menu {
    padding-top: 0 !important;
}

.topbar-menu {
    border-bottom: none !important;
}

.side-nav>.side-nav-item:first-child {
    border-top: none !important;
}

/* Homer v3.3.1 Page Title Head Styles */
.page-title-head {
    min-height: 40px;
    background-color: var(--hb-surface-bg);
    margin: 0.75rem 0 1rem;
    border-radius: var(--bs-border-radius, 4px);
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--bs-border-color, var(--hb-border-color));
    transition: margin 0.35s ease-in-out, width 0.35s ease-in-out, padding 0.35s ease-in-out;
    position: relative;
    z-index: 10;
}

[data-bs-theme="dark"] .page-title-head {
    background-color: var(--hb-surface-bg);
    border-color: var(--hb-border-color);
}

#page-head-box {
    transition: max-height 0.25s ease-in-out !important;
}

/* Breadcrumb alignments and styling overrides */
.breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: 0.75rem !important;
}

.fs-xs {
    font-size: 0.75rem !important;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: var(--hb-text-muted);
}

.breadcrumb-item a {
    color: var(--hb-border-subtle);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.breadcrumb-item a:hover {
    color: var(--hb-primary);
}

.breadcrumb-item.active {
    color: var(--hb-text-muted);
    font-weight: 600;
}

/* Customize breadcrumb separator to Homer tabler-icons right chevron */
.breadcrumb-item+.breadcrumb-item::before {
    font-family: "tabler-icons" !important;
    content: "\ea61" !important;
    color: var(--hb-text-muted) !important;
    font-size: 0.75rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    display: inline-block;
    vertical-align: middle;
}

/* Active / Expanded full-width state */
.page-title-head.active {
    margin: 0 -24px 1rem !important;
    border-radius: 0 !important;
    border-width: 0 0 1px 0 !important;
}

@media (min-width: 1400px) {
    .page-title-head.active {
        margin: 0 -62px 1rem !important;
    }
}



/* Styling for Minimize/Maximize Header button to match Homer screenshot */
#btn-page-head {
    border: 1px solid var(--bs-border-color, var(--hb-border-color)) !important;
    background-color: var(--hb-surface-bg) !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: var(--hb-primary) !important;
    /* Homer branding color */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="dark"] #btn-page-head {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
}

#btn-page-head:hover {
    background-color: var(--hb-primary-light) !important;
    border-color: var(--hb-primary) !important;
    color: var(--hb-primary-dark) !important;
}

/* Legacy HPanel / Card Styles for Mappings List */
.hpanel {
    background-color: #ffffff;
    border: 1px solid #e4e5e7;
    border-radius: 4px;
    margin-bottom: 25px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: calc(100% - 25px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.catalogue-filters-panel {
    height: auto;
}

.hpanel:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

.hpanel.hyellow {
    border-top: 7px solid #dec856 !important;
}

.hpanel.hnavyblue {
    border-top: 7px solid #003C71 !important;
}

.hpanel.hgreen {
    border-top: 7px solid #7f8558 !important;
}

.hpanel.hbrown {
    border-top: 7px solid #d28a44 !important;
}

.hpanel.hred {
    border-top: 7px solid #bc3f3f !important;
}

.hpanel .panel-body {
    padding: 20px;
    flex: 1 1 auto;
}

.hpanel .panel-footer {
    background: #fafafa;
    border-top: 1px solid #e4e5e7;
    padding: 12px 20px;
    font-size: 85%;
    border-radius: 0 0 4px 4px;
}

/* Align dot user / date clock icons in footer */
.hpanel .panel-footer .LastUpdated {
    color: #676a6c !important;
    font-weight: 500;
    text-decoration: none !important;
}

.hpanel .panel-footer .TrasnsformationCustomer {
    color: #676a6c !important;
    font-weight: 500;
    text-decoration: none !important;
}

/* Custom rounded badge for variant counts */
.btn-circle {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 50% !important;
    text-align: center;
    font-size: 13px;
    line-height: 32px !important;
    display: inline-block;
    font-weight: 700;
}

/* Alignment utilities */
.pull-right {
    float: right !important;
}

/* Pager / Switcher toolbar styling */
.paging {
    position: relative !important;
    z-index: 1 !important;
}

.paging .hpanel {
    border-top: none !important;
    margin-bottom: 20px;
    height: auto !important;
}

.paging .panel-body {
    padding: 15px 20px !important;
}

.paging .form-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* General styles for all left-side paging buttons */
.paging .TotalRecords,
.paging .Payble,
.paging .NonPayble,
.paging .mediumview,
.paging .tableview,
.paging .exceldata,
.paging .xmldata {
    height: 32px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    margin-right: -1px !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
    /* Prevent stretching in Bootstrap 5 btn-group */
}

/* Spans (counts) padding and colors */
.paging span.TotalRecords {
    padding: 0 14px !important;
    background-color: #81B0D2 !important;
    border: 1px solid #81B0D2 !important;
    color: #ffffff !important;
}

.paging span.Payble {
    padding: 0 14px !important;
    background-color: #dec856 !important;
    border: 1px solid #dec856 !important;
    color: #ffffff !important;
}

.paging span.NonPayble {
    padding: 0 14px !important;
    background-color: #D28A44 !important;
    border: 1px solid #D28A44 !important;
    color: #ffffff !important;
}

/* View buttons (anchors) inactive state styling */
.paging a.mediumview,
.paging a.tableview,
.paging a.exceldata,
.paging a.xmldata {
    width: 38px !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
}

.paging a.mediumview:hover,
.paging a.tableview:hover,
.paging a.exceldata:hover,
.paging a.xmldata:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #334155 !important;
}

/* View buttons active state styling (when JS adds btn-warning) */
.paging a.mediumview.btn-warning,
.paging a.tableview.btn-warning,
.paging a.exceldata.btn-warning,
.paging a.xmldata.btn-warning {
    background-color: #dec856 !important;
    border-color: #dec856 !important;
    color: #ffffff !important;
}

.paging a.mediumview.btn-warning:hover,
.paging a.tableview.btn-warning:hover,
.paging a.exceldata.btn-warning:hover,
.paging a.xmldata.btn-warning:hover {
    background-color: #e1ce67 !important;
    border-color: #e1ce67 !important;
    color: #ffffff !important;
}

.paging a.mediumview i,
.paging a.tableview i,
.paging a.exceldata i,
.paging a.xmldata i {
    font-size: 16px !important;
    color: inherit !important;
}

/* Border radius corners */
.paging .TotalRecords {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.paging .xmldata {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}



.paging .pull-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: flex-end !important;
}

/* Tooltip and dropdown text wraps */
.dot span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legacy btn-default fallback */
.btn-default {
    color: #676a6c !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.btn-default:hover {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #94a3b8 !important;
}

.btn-default i {
    color: #64748b !important;
}

/* Card action buttons spacing and icon styling */
.hpanel .panel-footer .btn-group {
    display: inline-flex !important;
    gap: 5px !important;
}

.hpanel .panel-footer .btn {
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.15s ease-in-out !important;
}

.hpanel .panel-footer .btn:hover {
    transform: scale(1.1) !important;
}

.hpanel .panel-footer .btn i {
    font-size: 15px !important;
    line-height: 1 !important;
}

/* Specific button colors overrides */
.btn-warning2 {
    background-color: #f0ad4e !important;
    border-color: #f0ad4e !important;
    color: #ffffff !important;
}

.btn-warning2:hover {
    background-color: #ec971f !important;
    border-color: #ec971f !important;
}

.btn-primary2 {
    background-color: #7047eb !important;
    border-color: #7047eb !important;
    color: #ffffff !important;
}

.btn-primary2:hover {
    background-color: #5c34cb !important;
    border-color: #5c34cb !important;
}

/* Card layout details */
.hpanel h4 {
    margin-bottom: 8px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.hpanel h4 a {
    color: #003C71 !important;
    font-size: 1.05rem !important;
    text-decoration: none !important;
}

.hpanel h4 a:hover {
    color: #002244 !important;
}

.hpanel .panel-body .row {
    align-items: center;
}

.hpanel .LastUpdated i,
.hpanel .TrasnsformationCustomer i {
    font-size: 14px !important;
    vertical-align: -1px;
}

/* Tabler icons alignment */
.ti {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* Pager arrow buttons styling */
.paging #first,
.paging #previous,
.paging #next,
.paging #last {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

.paging #first:hover,
.paging #previous:hover,
.paging #next:hover,
.paging #last:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.paging #first i,
.paging #previous i,
.paging #next i,
.paging #last i {
    font-size: 16px !important;
}

.paging .AddNewTransformation {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    background-color: #81B0D2 !important;
    border-color: #81B0D2 !important;
    color: #ffffff !important;
}

.paging .AddNewTransformation:hover {
    background-color: #9DC1E0 !important;
    border-color: #9DC1E0 !important;
    color: #ffffff !important;
}

/* Fix legacy Bootstrap 3 datetimepicker collapse visibility in Bootstrap 5 */
.bootstrap-datetimepicker-widget .collapse.in {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}

/* Datetimepicker dropdown & calendar styling overrides */
.bootstrap-datetimepicker-widget {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
    padding: 10px !important;
    color: #334155 !important;
    z-index: 1000 !important;
}

.bootstrap-datetimepicker-widget table {
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

.bootstrap-datetimepicker-widget table th {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

.bootstrap-datetimepicker-widget table td {
    border-radius: 4px !important;
    font-size: 0.85rem !important;
    color: #334155 !important;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #1ab394 !important;
    color: #ffffff !important;
}

.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: #94a3b8 !important;
}

.bootstrap-datetimepicker-widget a[data-action] {
    color: #475569 !important;
    padding: 4px 0 !important;
    display: block;
    text-align: center;
}

.bootstrap-datetimepicker-widget a[data-action]:hover {
    color: #1ab394 !important;
}

.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* Table row height, vertical alignment, fonts, colors and borders to match V4 */
#TransformationTable {
    border: 1px solid #ddd !important;
    border-collapse: collapse !important;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    color: #676a6c !important;
}

#TransformationTable td {
    vertical-align: middle !important;
    padding: 8px 10px !important;
    border: 1px solid #ddd !important;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    color: #676a6c !important;
    word-break: break-all !important;
}

#TransformationTable th {
    vertical-align: middle !important;
    padding: 8px 10px !important;
    border: 1px solid #ddd !important;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    color: #676a6c !important;
}

/* Column width helper classes for table parity with V4 */
.dtcolwidth140 {
    min-width: 140px !important;
}

.dtcolwidth130 {
    min-width: 130px !important;
}

.dtcolwidth160 {
    min-width: 160px !important;
}

.dtcolwidth40 {
    min-width: 40px !important;
}

.dtcolwidth150 {
    min-width: 150px !important;
}

.dtcolwidth113 {
    min-width: 113px !important;
}

/* Table view action buttons styling */
#TransformationTable td .btn-group {
    display: inline-flex !important;
    gap: 5px !important;
}

#TransformationTable td .btn {
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.15s ease-in-out !important;
    text-decoration: none !important;
}

#TransformationTable td .btn:hover {
    transform: scale(1.1) !important;
}

#TransformationTable td .btn i {
    font-size: 15px !important;
    line-height: 1 !important;
}

/* Table view status borders */
#TransformationTable colgroup col:first-child {
    width: 7px !important;
}

#TransformationTable td.dtyellowborder,
#TransformationTable td.dtnavyblueborder,
#TransformationTable td.dtgreenborder,
#TransformationTable td.dtbrownborder,
#TransformationTable td.dtredborder {
    padding: 0px !important;
    width: 7px !important;
    min-width: 7px !important;
    max-width: 7px !important;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    border-right: none !important;
}

#TransformationTable td.dtyellowborder {
    border-left: 7px solid var(--hb-yellow) !important;
}

#TransformationTable td.dtnavyblueborder {
    border-left: 7px solid var(--hb-blue) !important;
}

#TransformationTable td.dtgreenborder {
    border-left: 7px solid var(--hb-primary) !important;
}

#TransformationTable td.dtbrownborder {
    border-left: 7px solid #d28a44 !important;
}

#TransformationTable td.dtredborder {
    border-left: 7px solid var(--hb-red) !important;
}

#TransformationTable th.dtcolpadding0 {
    padding: 0px !important;
    width: 7px !important;
    min-width: 7px !important;
    max-width: 7px !important;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
    border-right: none !important;
}

.dvhide {
    display: none;
}

/* Filters Panel V4 style parity */
.hpanelshowhide {
    height: auto !important;
    display: block !important;
}

.hpanelshowhide .card-header.Panelshowhide {
    background-color: #e0e0e0 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    padding: 10px 10px !important;
    border-radius: 4px 4px 0 0 !important;
    min-height: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #676a6c !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.hpanelshowhide .card-header.Panelshowhide .panel-tools a {
    color: #9d9fa2 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

.hpanelshowhide .card-header.Panelshowhide .panel-tools a i {
    font-size: 14px !important;
}

/* Filters Search & Clear buttons styling to match V4 */
#btnAdvanceSearch {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: var(--hb-surface-bg) !important;
}

#btnAdvanceSearch:hover {
    background-color: var(--hb-primary-dark) !important;
    border-color: var(--hb-primary-dark) !important;
    color: var(--hb-surface-bg) !important;
}

#Clear {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

#Clear:hover {
    background-color: var(--hb-surface-alt) !important;
    border-color: var(--hb-border-subtle) !important;
    color: var(--hb-text-heading) !important;
}

/* Card layout details V4 color parity */
.hpanel .text-warning {
    color: #dec856 !important;
}

.hpanel .VariantCount {
    background-color: #81B0D2 !important;
    border-color: #81B0D2 !important;
    color: #ffffff !important;
}



/* Card action buttons spacing and icon styling */
.hpanel .panel-footer .btn-group {
    display: inline-flex !important;
    gap: 5px !important;
}

.hpanel .panel-footer .btn {
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.15s ease-in-out !important;
}

.hpanel .panel-footer .btn:hover {
    transform: scale(1.1) !important;
}

.hpanel .panel-footer .btn i {
    font-size: 15px !important;
    line-height: 1 !important;
}








/* Filters Panel V4 style parity */
.hpanelshowhide {
    height: auto !important;
    display: block !important;
}

.hpanelshowhide .card-header.Panelshowhide {
    background-color: #e0e0e0 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    padding: 10px 10px !important;
    border-radius: 4px 4px 0 0 !important;
    min-height: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #676a6c !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.hpanelshowhide .card-header.Panelshowhide .panel-tools a {
    color: #9d9fa2 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

.hpanelshowhide .card-header.Panelshowhide .panel-tools a i {
    font-size: 14px !important;
}

/* Filters Search & Clear buttons styling to match V4 */
#btnAdvanceSearch {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: var(--hb-surface-bg) !important;
}

#btnAdvanceSearch:hover {
    background-color: var(--hb-primary-dark) !important;
    border-color: var(--hb-primary-dark) !important;
    color: var(--hb-surface-bg) !important;
}

#Clear {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
}

#Clear:hover {
    background-color: var(--hb-surface-alt) !important;
    border-color: var(--hb-border-subtle) !important;
    color: var(--hb-text-heading) !important;
}

/* Card layout details V4 color parity */
.hpanel .text-warning {
    color: #dec856 !important;
}

.hpanel .VariantCount {
    background-color: #81B0D2 !important;
    border-color: #81B0D2 !important;
    color: #ffffff !important;
}

#btn-page-head .btn-page-head-icon {
    transition: transform 0.3s ease, rotate 0.3s ease !important;
    width: 14px !important;
    height: 14px !important;
    color: inherit !important;
}

/* Rotate icon when page-head-box is active (expanded) */
.page-title-head.active #btn-page-head .btn-page-head-icon {
    transform: rotate(180deg) !important;
}

/* Prevent horizontal scrolling in popup card views */
#AvailableList,
.projects {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
}

#AllAvailableListModel .modal-body {
    overflow-x: hidden !important;
}

.btn-page-head-icon {
    display: inline-block;
    animation: bounceLoop 1.5s ease-in-out infinite;
}

@keyframes bounceLoop {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

/* Remove extra blank vertical space below the page footer */
.content-page {
    padding-bottom: 42px !important;
    min-height: 100vh !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e4e5e7 !important;
    color: #6a6c6f !important;
    margin-bottom: 0 !important;
    padding: 10px 0 !important;
    height: 42px !important;
    box-sizing: border-box !important;
}

.footer .container-fluid {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.footer .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Logo responsive show/hide based on collapse state */
.logo-topbar .logo-lg {
    display: block !important;
}

.logo-topbar .logo-sm {
    display: none !important;
}

html[data-sidenav-size="collapse"] .logo-topbar .logo-lg {
    display: none !important;
}

html[data-sidenav-size="collapse"] .logo-topbar .logo-sm {
    display: block !important;
}

.logo-topbar .logo-sm img {
    max-height: 38px;
    width: auto;
    max-width: 50px;
    display: inline-block;
}

/* Reusable V6 Adaptor Setup Layout Classes */
.hb-adaptor-setup-shell {
    margin-top: 1rem !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.hb-adaptor-setup-shell>.card-body {
    padding: 0 !important;
}

/* Toolbar container for tabs and actions */
.adaptor-tabs-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-bottom: 4px !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1.25rem !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
}

/* Tab row block list - Connected Stepper */
.stepper-nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 68% !important;
}

/* Individual Stepper links */
.stepper-nav-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s ease-in-out !important;
    position: relative !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Connective Line */
.stepper-line {
    flex-grow: 1 !important;
    height: 2px !important;
    background-color: var(--hb-border-color) !important;
    margin: 0 8px !important;
    z-index: 1 !important;
    transform: translateY(-12px) !important;
}

.stepper-line.completed {
    background-color: var(--hb-primary) !important;
}

/* Step Circles */
.stepper-nav-link .step-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 2px solid var(--hb-border-color) !important;
    background-color: var(--hb-surface-bg) !important;
    color: var(--hb-text-muted) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
    transition: all 0.2s ease !important;
}

/* Configured State */
.stepper-nav-link.configured .step-circle {
    background-color: var(--hb-primary-light) !important;
    border-color: var(--hb-primary) !important;
    color: var(--hb-primary) !important;
}

/* Not Configured State */
.stepper-nav-link.not-configured .step-circle {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: var(--hb-text-muted) !important;
}

/* Current / Active tab style: focus ring */
.stepper-nav-link.stepper-active-tab.configured .step-circle,
.stepper-nav-link.stepper-active-tab.not-configured .step-circle,
.stepper-nav-link.stepper-active-tab .step-circle {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px var(--hb-primary-light), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.stepper-nav-link.stepper-active-tab.configured .step-circle i,
.stepper-nav-link.stepper-active-tab.not-configured .step-circle i,
.stepper-nav-link.stepper-active-tab.configured .step-circle span,
.stepper-nav-link.stepper-active-tab.not-configured .step-circle span,
.stepper-nav-link.stepper-active-tab .step-circle i,
.stepper-nav-link.stepper-active-tab .step-circle span {
    color: #ffffff !important;
}

/* Stepper Labels */
.stepper-nav-link .step-label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--hb-text-muted) !important;
    text-align: center !important;
}

.stepper-nav-link.stepper-active-tab.configured .step-label,
.stepper-nav-link.stepper-active-tab.not-configured .step-label,
.stepper-nav-link.stepper-active-tab .step-label {
    color: var(--hb-primary) !important;
    font-weight: 700 !important;
}

.stepper-nav-link:hover .step-circle {
    border-color: var(--hb-primary) !important;
}

/* Action button overrides for unified theme styling */
.adaptor-action-buttons .btn.SaveNext {
    background-color: var(--hb-primary-light, #f1f5f9) !important;
    background-image: none !important;
    border: 1px solid var(--hb-accent, var(--hb-input-border)) !important;
    color: var(--hb-primary, var(--hb-border-subtle)) !important;
}

.adaptor-action-buttons .btn.SaveNext:hover {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: var(--hb-surface-bg) !important;
}

.adaptor-action-buttons .btn.SaveExit {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: var(--hb-surface-bg) !important;
}

.adaptor-action-buttons .btn.SaveExit:hover {
    background-color: var(--hb-primary-dark) !important;
    border-color: var(--hb-primary-dark) !important;
    color: var(--hb-surface-bg) !important;
}

.adaptor-action-buttons .AdaptorPollNow {
    background-color: var(--hb-primary) !important;
    border: 1px solid var(--hb-primary) !important;
    color: #ffffff !important;
}

.adaptor-action-buttons .AdaptorPollNow:hover {
    background-color: var(--hb-primary-dark) !important;
    border-color: var(--hb-primary-dark) !important;
    color: #ffffff !important;
}

.adaptor-action-buttons .AdaptorHistory {
    background-color: #f59e0b !important;
    border: 1px solid #f59e0b !important;
    color: #ffffff !important;
}

.adaptor-action-buttons .AdaptorHistory:hover {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

.adaptor-action-buttons .btnAdaptorNotes {
    background-color: #f1c40f !important;
    border: 1px solid #f1c40f !important;
    color: #ffffff !important;
}

.adaptor-action-buttons .btnAdaptorNotes:hover {
    background-color: #d4ac0d !important;
    border-color: #d4ac0d !important;
    color: #ffffff !important;
}

/* Action buttons block list */
.adaptor-action-buttons {
    display: inline-flex !important;
    gap: 4px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
}

/* Ensure all buttons have identical heights */
.adaptor-action-buttons .btn-sm {
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    padding: 0 12px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

/* Icon-only action buttons: square sizes */
.adaptor-action-buttons a.btn-sm:not(.SaveNext):not(.SaveExit),
.adaptor-action-buttons button.btn-sm:not(.SaveNext):not(.SaveExit) {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
}

/* Save & Next / Save & Exit color overrides to match V4 layout with dynamic theme skin support */
.adaptor-action-buttons .SaveNext {
    background-color: var(--hb-primary, #6E7740) !important;
    border-color: var(--hb-primary, #6E7740) !important;
    color: var(--hb-surface-bg) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

.adaptor-action-buttons .SaveNext:hover {
    background-color: var(--hb-primary-dark, #4A5228) !important;
    border-color: var(--hb-primary-dark, #4A5228) !important;
}

.adaptor-action-buttons .SaveExit {
    background-color: var(--hb-surface-bg) !important;
    border: 1px solid var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

.adaptor-action-buttons .SaveExit:hover {
    background-color: var(--hb-surface-alt) !important;
    border-color: var(--hb-input-border) !important;
    color: #333333 !important;
}


/* Compact form settings inside setup panels */
.hb-adaptor-setup-shell .hpanel {
    border: 1px solid var(--hb-border, var(--hb-border-color)) !important;
    border-top: 1px solid var(--hb-border, var(--hb-border-color)) !important;
    border-radius: 4px !important;
    background-color: var(--hb-surface-bg) !important;
    margin-bottom: 1.25rem !important;
    overflow: visible !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.hb-adaptor-setup-shell .hpanel.hgreen {
    border-top: 3px solid var(--hb-primary, #6E7740) !important;
}

.hb-adaptor-setup-shell .hpanel .hbuilt {
    background-color: var(--hb-surface-alt) !important;
    /* Grey bar */
    border-bottom: 1px solid var(--hb-border, var(--hb-border-color)) !important;
    padding: 6px 12px !important;
    font-weight: 700 !important;
    color: var(--hb-text-heading, #2f4050) !important;
    font-size: 0.9rem !important;
}

[data-bs-theme="dark"] .hb-adaptor-setup-shell .hpanel .hbuilt {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: var(--hb-text-heading, #f8fafc) !important;
}

.hb-adaptor-setup-shell .hpanel .panel-body {
    padding: 12px !important;
    /* Compact body padding */
}

/* Form fields compactness */
.hb-adaptor-setup-shell .form-group {
    margin-bottom: 0.75rem !important;
}

.hb-adaptor-setup-shell .form-control,
.hb-adaptor-setup-shell .form-select {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.85rem !important;
    height: auto !important;
}

.hb-adaptor-setup-shell label.form-label {
    margin-bottom: 0.25rem !important;
    font-size: 0.85rem !important;
}

/* Compact Selected Gateway Card styling overrides */
.hb-adaptor-setup-shell .hb-ui-card.hpanel .hb-ui-card-body {
    padding: 10px !important;
}

.hb-adaptor-setup-shell .hb-ui-card.hpanel .panel-footer {
    padding: 6px 10px !important;
    background-color: var(--hb-surface-alt) !important;
}

.hb-adaptor-setup-shell .hb-ui-card-icon {
    font-size: 1.25rem !important;
    color: var(--hb-primary, #6E7740) !important;
}

.hb-adaptor-setup-shell .hb-ui-card-body h5 {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
}

/* Document Type table overrides */
.hb-adaptor-setup-shell .table th {
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    background-color: var(--hb-surface-alt) !important;
}

.hb-adaptor-setup-shell .table td {
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
}

/* Extra small button sizes for dynamic tables/gateway popovers */
.btn-xs {
    padding: 0.15rem 0.4rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.2rem !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   HubBroker Centralized Reusable Styles & Utilities
   ========================================================================== */

/* 1. Layout Helpers */
.hb-max-w-600 {
    max-width: 600px !important;
}

.hb-max-w-500 {
    max-width: 500px !important;
}

.hb-max-w-650 {
    max-width: 650px !important;
}

.hb-max-w-140 {
    max-width: 140px !important;
}

.hb-max-h-100-y-auto {
    max-height: 100px !important;
    overflow-y: auto !important;
}

.hb-w-55 {
    width: 55px !important;
}

.hb-w-40 {
    width: 40px !important;
}

.hb-w-80 {
    width: 80px !important;
}

.hb-border-left-4 {
    border-left-width: 4px !important;
}

/* 2. Page Header Helpers */
.fontweight600 {
    font-weight: 600 !important;
}

/* 3. Section/Panel Helpers */
.hpanel {
    background-color: var(--bs-card-bg, var(--hb-surface-bg));
    border: 1px solid var(--bs-border-color, var(--hb-border-color));
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.015);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hpanel:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.hbuilt {
    background: var(--bs-light-bg-subtle, var(--hb-surface-alt));
    border-bottom: 1px solid var(--bs-border-color, var(--hb-border-color));
    padding: 12px 18px;
    font-weight: 600;
    font-size: 14px;
    color: var(--bs-body-color, var(--hb-text-color));
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.hpanel .panel-body {
    padding: 20px;
    color: var(--bs-body-color);
}

/* Colored top borders for panels matching V4 styling */
.hpanel.hgreen,
.hpanel.status-success {
    border-top: 3px solid var(--hb-primary, #1ab394) !important;
}

.hpanel.hred,
.hpanel.status-danger {
    border-top: 3px solid #e74c3c !important;
}

.hpanel.hblue,
.hpanel.status-info {
    border-top: 3px solid #3498db !important;
}

.hpanel.hyellow,
.hpanel.status-warning {
    border-top: 3px solid #f8ac59 !important;
}

/* Remove blockquote border-left layout issues inside cards */
.hpanel blockquote {
    border-left: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
}

.hpanel blockquote .form-group {
    margin-bottom: 0 !important;
}

/* 4. Form/Filter Helpers */
.tagsinput {
    width: 100% !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 6px !important;
}

.bootstrap-tagsinput {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 6px !important;
    border: 1px solid #ced4da !important;
    padding: 6px 12px !important;
    box-shadow: none !important;
}

.bootstrap-tagsinput input {
    min-width: 180px !important;
    width: auto !important;
}

.bootstrap-tagsinput .tag {
    background: #b5c48c !important;
    color: white !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 0.85rem !important;
}

.indent-panel {
    padding-left: 2rem;
    border-left: 2px solid #eaeded;
    margin-left: 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

/* 5. Table Helpers */
.dtcolpadding0 {
    padding: 0px !important;
    width: 0.1% !important;
}

.dtcolwidth140 {
    min-width: 140px !important;
}

.dtcolwidth105 {
    min-width: 105px !important;
}

.dtgreenborder {
    border-left: 3px solid var(--hb-primary) !important;
}

.dtredborder {
    border-left: 3px solid #c0392b !important;
}

.dtyellowborder {
    border-left: 3px solid #f1c40f !important;
}

.status-indicator-col {
    width: 6px !important;
    min-width: 6px !important;
    max-width: 6px !important;
    padding: 0 !important;
}

.status-indicator-col.dtgreenborder {
    background-color: var(--hb-primary) !important;
}

.status-indicator-col.dtredborder {
    background-color: #c0392b !important;
}

.status-indicator-col.dtyellowborder {
    background-color: #f1c40f !important;
}

/* 6. Toolbar/Button Helpers */
.btn-define-email {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-define-email:hover {
    transform: translateY(-1px);
}

.btn-default.border {
    background-color: var(--bs-card-bg, var(--hb-surface-bg)) !important;
    border-color: var(--bs-border-color, #dcdcdc) !important;
    color: var(--bs-body-color, #676a6c) !important;
}

.btn-default.border:hover {
    background-color: var(--bs-light-bg-subtle, var(--hb-surface-alt)) !important;
    color: var(--bs-body-color, #676a6c) !important;
}

/* V4 multi-color header line */
.color-line {
    background: #fb8c00;
    height: 6px;
    background-image: linear-gradient(to right, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 50%, #3498db 50%, #3498db 75%, #1abc9c 75%, #1abc9c 100%);
    background-size: 100% 6px;
    background-position: 50% 100%;
    background-repeat: no-repeat;
}

/* 7. Adaptor Setup Helpers */
.tab-content-container {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 8. Card/Modal Helpers */
.panel-footer {
    background: var(--bs-light-bg-subtle, #fafbfa) !important;
    border-top: 1px solid var(--bs-border-color, var(--hb-border-color)) !important;
    padding: 8px 18px !important;
    font-size: 11px !important;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    color: var(--bs-secondary-color, #6c757d);
}

.panel-footer .GatewayLastUpdated {
    display: inline-block;
    padding-top: 4px;
    color: var(--bs-secondary-color, #6c757d) !important;
    font-weight: 500;
    text-decoration: none;
}

.panel-footer .float-end,
.panel-footer .pull-right {
    float: right;
}

.panel-footer .select-btn,
.panel-footer .SelectGateway {
    background-color: var(--hb-primary, #6E7740) !important;
    border-color: var(--hb-primary, #6E7740) !important;
    color: var(--hb-surface-bg) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
}

.panel-footer .select-btn:hover,
.panel-footer .SelectGateway:hover {
    background-color: var(--hb-primary-dark, #575e32) !important;
    border-color: var(--hb-primary-dark, #575e32) !important;
    color: var(--hb-surface-bg) !important;
}

.paging .btn-group .btn-info {
    background-color: var(--hb-primary, #3498db) !important;
    border-color: var(--hb-primary, #3498db) !important;
    color: var(--hb-surface-bg) !important;
}

.paging .btn-group .btn.active,
.paging .btn-group .btn-info.active {
    background-color: var(--hb-primary-dark, #34495e) !important;
    border-color: var(--hb-primary-dark, #34495e) !important;
    color: var(--hb-surface-bg) !important;
}

#dtGateways #SelectGateway,
#dtTransformation #SelectGateway,
.table #SelectGateway {
    background-color: var(--hb-primary, #6E7740) !important;
    border-color: var(--hb-primary, #6E7740) !important;
    color: var(--hb-surface-bg) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
}

#dtGateways #SelectGateway:hover,
#dtTransformation #SelectGateway:hover,
.table #SelectGateway:hover {
    background-color: var(--hb-primary-dark, #575e32) !important;
    border-color: var(--hb-primary-dark, #575e32) !important;
    color: var(--hb-surface-bg) !important;
}

#SelectedSourceGatewaysList .hb-ui-card.hpanel,
#SelectedDestinationGatewaysList .hb-ui-card.hpanel {
    border: 1px solid var(--bs-border-color, var(--hb-border-color)) !important;
    border-top: 3px solid var(--hb-primary, #6E7740) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.hb-adaptor-setup-shell .hb-ui-card.hpanel {
    height: auto !important;
}

.hb-adaptor-setup-shell #SelectedSourceGatewaysList,
.hb-adaptor-setup-shell #SelectedDestinationGatewaysList {
    margin-top: 0 !important;
}

/* 9. Loader/Empty-state Helpers */

/* 10. Small Utilities & Dark Theme Overrides */
[data-bs-theme="dark"] .hpanel {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) !important;
}

[data-bs-theme="dark"] .hbuilt {
    background: var(--hb-body-bg) !important;
    border-bottom-color: var(--hb-border-color) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .panel-body {
    color: var(--hb-input-border) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .text-secondary {
    color: var(--hb-text-muted) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--hb-body-bg) !important;
    color: var(--hb-input-border) !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--hb-surface-bg) !important;
}

[data-bs-theme="dark"] .modal-content {
    background-color: var(--hb-surface-bg) !important;
    color: var(--hb-input-border) !important;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    background-color: var(--hb-body-bg) !important;
    border-color: var(--hb-border-color) !important;
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .panel-footer {
    background: var(--hb-body-bg) !important;
    border-top-color: var(--hb-border-color) !important;
    color: var(--hb-text-muted) !important;
}

[data-bs-theme="dark"] .panel-footer .GatewayLastUpdated {
    color: var(--hb-text-muted) !important;
}

[data-bs-theme="dark"] #SelectedSourceGatewaysList .hb-ui-card.hpanel,
[data-bs-theme="dark"] #SelectedDestinationGatewaysList .hb-ui-card.hpanel {
    border-color: var(--hb-border-color) !important;
    border-top-color: var(--hb-primary, #6E7740) !important;
}

/* Alert styling overrides */
.hb-alert-success {
    border-left: 4px solid var(--hb-primary, #6E7740) !important;
    color: var(--hb-primary, #6E7740) !important;
    background-color: #f4fdfb !important;
    border-radius: 4px;
    font-size: 0.88rem;
}

.hb-alert-danger {
    border-left: 4px solid var(--hb-red, #ed5565) !important;
    color: var(--hb-red, #ed5565) !important;
    background-color: #fdf5f6 !important;
    border-radius: 4px;
    font-size: 0.88rem;
}

.hb-alert-warning {
    border-left: 4px solid var(--hb-yellow, #f8ac59) !important;
    color: var(--hb-yellow, #f8ac59) !important;
    background-color: #fffcf5 !important;
    border-radius: 4px;
    font-size: 0.88rem;
}

.hb-alert-info {
    border-left: 4px solid var(--hb-blue, #1c84c6) !important;
    color: var(--hb-blue, #1c84c6) !important;
    background-color: #f5fafd !important;
    border-radius: 4px;
    font-size: 0.88rem;
}

/* Alert warning empty/filter container */
.hb-alert-warning-box {
    border: 1px solid var(--hb-yellow, #f8ac59) !important;
    border-radius: 4px;
}

/* Table layout styling */
.table-header-integrated {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

.table-footer-integrated {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.hb-table-search-box {
    width: 180px !important;
    height: 28px !important;
    font-size: 0.8rem !important;
    border-color: #ced4da !important;
}

.hb-table-title-cell {
    font-weight: 700 !important;
    color: #2f4050 !important;
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-left: 1.25rem !important;
}

.hb-table-icon {
    max-height: 16px !important;
    max-width: 16px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

.hb-table-action-cell {
    text-align: right !important;
    padding-right: 1.25rem !important;
    white-space: nowrap !important;
}

#sidenavUserchart {
    max-height: 40px !important;
}

.hb-btn-square-38 {
    height: 38px !important;
    width: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Style validation settings modal buttons to match V4 with dynamic theme skin support */
#ValidationSettingsModel .btn-primary {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: var(--hb-surface-bg) !important;
}

#ValidationSettingsModel .btn-primary:hover {
    background-color: var(--hb-primary-dark) !important;
    border-color: var(--hb-primary-dark) !important;
}

#ValidationSettingsModel .btn-default {
    background-color: var(--hb-surface-bg) !important;
    border-color: #ccc !important;
    color: #333 !important;
}

#ValidationSettingsModel #btnValidationAdd {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: var(--hb-surface-bg) !important;
}

#ValidationSettingsModel #btnValidationAdd:hover {
    background-color: var(--hb-primary-dark) !important;
    border-color: var(--hb-primary-dark) !important;
}

#ValidationSettingsModel #btnValidationEdit {
    background-color: var(--hb-yellow, #f8ac59) !important;
    border-color: var(--hb-yellow, #f8ac59) !important;
    color: var(--hb-surface-bg) !important;
}

#ValidationSettingsModel #btnValidationEdit:hover {
    filter: brightness(0.9);
}

/* Card Action buttons (Validation and Filtration Settings) styled dynamically by theme skin selection */
.val-settings-btn.btn-success,
.filt-settings-btn.btn-success {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: var(--hb-surface-bg) !important;
}

.val-settings-btn.btn-success:hover,
.filt-settings-btn.btn-success:hover {
    background-color: var(--hb-primary-dark) !important;
    border-color: var(--hb-primary-dark) !important;
}

.val-settings-btn.btn-warning,
.filt-settings-btn.btn-warning {
    background-color: var(--hb-yellow, #f8ac59) !important;
    border-color: var(--hb-yellow, #f8ac59) !important;
    color: var(--hb-surface-bg) !important;
}

.val-settings-btn.btn-warning:hover,
.filt-settings-btn.btn-warning:hover {
    background-color: #f7a54a !important;
    border-color: #f7a54a !important;
}

/* Select2 overrides for height alignment with input groups and buttons */
.select2-container .select2-selection--single {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 12px !important;
    color: #212529 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px !important;
}

/* --- Vertical Left-aligned Tabs Layout (.tabs-left) --- */
.tabs-left {
    display: flex;
    flex-wrap: nowrap;
}

.tabs-left>.nav-tabs {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 250px;
    min-width: 220px;
    flex-shrink: 0;
    border-bottom: 0 !important;
    border-right: 1px solid var(--hb-border-color) !important;
    padding: 15px 0;
    margin: 0;
    list-style: none;
    background-color: transparent !important;
}

.tabs-left>.nav-tabs>li {
    width: 100%;
    float: none !important;
}

.tabs-left>.nav-tabs>li>a {
    display: block;
    padding: 12px 20px;
    color: var(--hb-text-color);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px 0 0 4px;
    margin-right: -1px;
    transition: all 0.15s ease-in-out;
}

.tabs-left>.nav-tabs>li>a:hover {
    background-color: #f3f4f6;
    color: #333;
}

.tabs-left>.nav-tabs>li.active>a,
.tabs-left>.nav-tabs>li>a.active {
    background-color: var(--hb-surface-bg) !important;
    border-color: var(--hb-border-color) transparent var(--hb-border-color) var(--hb-border-color) !important;
    color: var(--hb-text-color) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--hb-primary) !important;
}

.tabs-left>.tab-content {
    flex-grow: 1;
    padding: 25px;
    background-color: var(--hb-surface-bg);
    min-height: 450px;
    border: 1px solid var(--hb-border-color);
    border-radius: 0 4px 4px 4px;
    margin-left: -1px;
}

.tabs-left>.tab-content>.tab-pane {
    display: none !important;
}

.tabs-left>.tab-content>.tab-pane.active {
    display: block !important;
}

/* --- Olive-themed Checkbox Styling for Validation Settings (.i-checks) --- */
/* Replaces V4's iCheck square-darkgreen plugin with native CSS checkboxes */
.i-checks {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #b0b3a0;
    border-radius: 3px;
    background-color: var(--hb-surface-bg);
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    margin-right: 6px;
    margin-top: -1px;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    flex-shrink: 0;
}

.i-checks:checked {
    background-color: var(--hb-primary);
    border-color: var(--hb-primary);
}

.i-checks:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid var(--hb-surface-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.i-checks:hover:not(:disabled) {
    border-color: var(--hb-primary);
}

.i-checks:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f0f0f0;
}

.i-checks:disabled:checked {
    background-color: var(--hb-accent);
    border-color: var(--hb-accent);
}

/* Form group layout for checkboxes + labels inside validation settings */
.tabs-left .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.tabs-left .form-group>label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 500;
    color: #5b5d5f;
    font-size: 0.9rem;
}

.tabs-left .form-group>.fa-info-circle,
.tabs-left .form-group>.bi-info-circle {
    margin-left: 4px;
    color: #9ca0a8;
    cursor: pointer;
}

/* --- MarginLeft utility (matches V4) --- */
.MarginLeft {
    margin-left: 25px !important;
}

/* Layout Width and Margin Optimization */
.content-page {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.content-page>.container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Ensure active/expanded page head adjusts to the 10px layout padding without overflowing */
.content-page .page-title-head.active {
    margin-left: -10px !important;
    margin-right: -10px !important;
}

/* Ensure all main content cards stretch to full available width */
.card,
.hpanel,
.dashboard-wrapper {
    width: 100% !important;
}

/* Filtration Settings V4 Styling Parity */
.subFiltration {
    padding-left: 20px !important;
}

.subFiltration .row {
    margin-bottom: 1.25rem !important;
}


.radio-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem;
    color: #676a6c;
}


.radio-inline input[type="radio"] {
    margin-right: 6px;
    width: 18px;
    height: 18px;
    accent-color: var(--hb-primary);
    cursor: pointer;
    vertical-align: middle;
}

/* Centralized Radio and Checkbox Styling Linked to Dynamic Brand Theme Skins */
.form-check-input:checked {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
}

.form-check-input:focus {
    border-color: var(--hb-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.form-check-input {
    accent-color: var(--hb-primary) !important;
    cursor: pointer;
}

input[type="radio"],
input[type="checkbox"],
.form-check-input {
    border-color: #ced4da !important;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
}



/* Bootstrap 5 Popover Theme Overrides to Match V4 */
.popover {
    border: 1.5px solid #cacaca !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    font-family: inherit !important;
    max-width: 320px !important;
    z-index: 1060 !important;
    padding: 0 !important;
    background-color: var(--hb-surface-bg) !important;
}

.popover .popover-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #e3e6f0 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #4e73df !important;
    padding: 10px 14px !important;
    margin: 0 !important;
}

.popover .popover-body {
    padding: 12px 14px !important;
    font-size: 0.85rem !important;
    color: #4e5154 !important;
    line-height: 1.5 !important;
}

.popover .popover-body br {
    display: block;
    content: "";
    margin-top: 6px;
}

/* Global page navigation loader */
.global-page-loader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--hb-surface-bg);
    color: #737b4c;
}

.global-page-loader.is-visible {
    display: flex;
}

.global-page-loader>.color-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.global-page-loader-content {
    padding: 20px;
    text-align: center;
}

.global-page-loader-content h1 {
    margin: 0 0 10px;
    color: #737b4c;
    font-size: 24px;
    font-weight: 300;
}

/* ==========================================================================
   Company Wizard Step Navigation & Action Buttons styling
   ========================================================================== */
.content .navGeneral,
.content .navDocumentCapacity,
.content .navLocations,
.content .navUsers,
.content .navEndpoints {
    background-color: #7f8558 !important;
    color: var(--hb-surface-bg) !important;
    border: 1px solid #7f8558 !important;
    transition: all 0.2s ease;
    margin: 0 !important;
}

.content .navGeneral {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.content .navDocumentCapacity,
.content .navUsers {
    border-radius: 0 !important;
}

.content .navLocations,
.content .navEndpoints {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.global-page-loader-content p {
    margin: 0 0 20px;
    color: #737b4c;
    font-size: 14px;
}

.content .navGeneral.btn-outline,
.content .navDocumentCapacity.btn-outline,
.content .navLocations.btn-outline,
.content .navUsers.btn-outline,
.content .navEndpoints.btn-outline {
    background-color: var(--hb-surface-bg) !important;
    color: #7f8558 !important;
    border: 1px solid #7f8558 !important;
}

/* Action Buttons Styling */
.content .btnCancel {
    background-color: var(--hb-surface-bg) !important;
    color: #7f8558 !important;
    border: 1px solid #7f8558 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.content .btnCancel:hover {
    background-color: #7f8558 !important;
    color: var(--hb-surface-bg) !important;
}

.content .btnNext {
    background-color: #003c71 !important;
    color: var(--hb-surface-bg) !important;
    border: 1px solid #003c71 !important;
    border-radius: 0 !important;
}

.content .btnNext:hover {
    background-color: #002b52 !important;
}

.content .btnSaveExit {
    background-color: var(--hb-surface-bg) !important;
    color: #81b0d2 !important;
    border: 1px solid #81b0d2 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.content .btnSaveExit:hover {
    background-color: #81b0d2 !important;
    color: var(--hb-surface-bg) !important;
}

.content .form-group {
    margin-bottom: 15px !important;
}


/* Total records, excel, and xml buttons grouping */
#TotalRecords,
.exceldata,
.xmldata {
    margin: 0 !important;
}

#TotalRecords {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.exceldata {
    border-radius: 0 !important;
}

.xmldata {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* Panel collapse/expand tools layout */
.panel-tools {
    float: right !important;
    display: inline-block;
    padding: 0;
    margin: 0;
}



/* Unobtrusive jQuery validation error styling */
.input-validation-error {
    border: 1px solid #e74c3c !important;
}

/*select.input-validation-error+.select2-container .select2-selection {
    border: 1px solid #e74c3c !important;
}*/

/* Select2 Custom Olive Theme Overrides */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--hb-primary) !important;
    box-shadow: 0 0 0 .25rem var(--hb-primary-transparent, rgba(127, 133, 88, 0.25)) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--hb-primary) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--hb-primary) !important;
    box-shadow: 0 0 0 .25rem var(--hb-primary-transparent, rgba(127, 133, 88, 0.25)) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true] {
    background-color: var(--hb-primary) !important;
    color: #ffffff !important;
}

/* Invert brand logos in dark mode or on dark headers for clarity */
[data-bs-theme="dark"] .logo-topbar img,
[data-bs-theme="dark"] .sidenav-user-avatar,
[data-bs-theme="dark"] .sidenav-user-name img {
    filter: invert(1) brightness(2) !important;
}

/* Dynamic Brand Logo Accents (Inverting and Hue Rotating to match theme skin) */
html.theme-skin-red .logo-topbar img,
html.theme-skin-red .sidenav-user img {
    filter: hue-rotate(275deg) saturate(1.8) !important;
}

html.theme-skin-blue .logo-topbar img,
html.theme-skin-blue .sidenav-user img {
    filter: hue-rotate(145deg) saturate(1.8) !important;
}

html.theme-skin-purple .logo-topbar img,
html.theme-skin-purple .sidenav-user img {
    filter: hue-rotate(205deg) saturate(1.8) !important;
}

html.theme-skin-teal .logo-topbar img,
html.theme-skin-teal .sidenav-user img {
    filter: hue-rotate(105deg) saturate(1.5) !important;
}

html.theme-skin-amber .logo-topbar img,
html.theme-skin-amber .sidenav-user img {
    filter: hue-rotate(330deg) saturate(2) !important;
}

html.theme-skin-slate .logo-topbar img,
html.theme-skin-slate .sidenav-user img {
    filter: saturate(0) opacity(0.8) !important;
}

/* Also handle dark mode compatibility with these logo filters */
[data-bs-theme="dark"].theme-skin-red .logo-topbar img,
[data-bs-theme="dark"].theme-skin-red .sidenav-user img {
    filter: invert(1) brightness(2) hue-rotate(275deg) saturate(1.8) !important;
}

[data-bs-theme="dark"].theme-skin-blue .logo-topbar img,
[data-bs-theme="dark"].theme-skin-blue .sidenav-user img {
    filter: invert(1) brightness(2) hue-rotate(145deg) saturate(1.8) !important;
}

[data-bs-theme="dark"].theme-skin-purple .logo-topbar img,
[data-bs-theme="dark"].theme-skin-purple .sidenav-user img {
    filter: invert(1) brightness(2) hue-rotate(205deg) saturate(1.8) !important;
}

[data-bs-theme="dark"].theme-skin-teal .logo-topbar img,
[data-bs-theme="dark"].theme-skin-teal .sidenav-user img {
    filter: invert(1) brightness(2) hue-rotate(105deg) saturate(1.5) !important;
}

[data-bs-theme="dark"].theme-skin-amber .logo-topbar img,
[data-bs-theme="dark"].theme-skin-amber .sidenav-user img {
    filter: invert(1) brightness(2) hue-rotate(330deg) saturate(2) !important;
}

[data-bs-theme="dark"].theme-skin-slate .logo-topbar img,
[data-bs-theme="dark"].theme-skin-slate .sidenav-user img {
    filter: invert(1) brightness(1.5) saturate(0) !important;
}

/* Color-shifting the black collapsed logo icon (hubbroker_ident_black.png) to match theme skins */
html.theme-skin-olive .logo-topbar .logo-sm img {
    filter: invert(45%) sepia(35%) saturate(375%) hue-rotate(40deg) brightness(91%) contrast(88%) !important;
}

html.theme-skin-red .logo-topbar .logo-sm img {
    filter: invert(34%) sepia(87%) saturate(2330%) hue-rotate(345deg) brightness(97%) contrast(93%) !important;
}

html.theme-skin-blue .logo-topbar .logo-sm img {
    filter: invert(47%) sepia(91%) saturate(1982%) hue-rotate(205deg) brightness(101%) contrast(98%) !important;
}

html.theme-skin-purple .logo-topbar .logo-sm img {
    filter: invert(44%) sepia(93%) saturate(1478%) hue-rotate(245deg) brightness(98%) contrast(97%) !important;
}

html.theme-skin-teal .logo-topbar .logo-sm img {
    filter: invert(37%) sepia(83%) saturate(1005%) hue-rotate(130deg) brightness(98%) contrast(96%) !important;
}

html.theme-skin-amber .logo-topbar .logo-sm img {
    filter: invert(72%) sepia(58%) saturate(3015%) hue-rotate(5deg) brightness(101%) contrast(96%) !important;
}

html.theme-skin-slate .logo-topbar .logo-sm img {
    filter: invert(33%) sepia(21%) saturate(601%) hue-rotate(175deg) brightness(93%) contrast(91%) !important;
}

/* Dark mode configurations for collapsed logo */
[data-bs-theme="dark"].theme-skin-olive .logo-topbar .logo-sm img {
    filter: invert(45%) sepia(35%) saturate(375%) hue-rotate(40deg) brightness(120%) contrast(88%) !important;
}

[data-bs-theme="dark"].theme-skin-red .logo-topbar .logo-sm img {
    filter: invert(34%) sepia(87%) saturate(2330%) hue-rotate(345deg) brightness(120%) contrast(93%) !important;
}

[data-bs-theme="dark"].theme-skin-blue .logo-topbar .logo-sm img {
    filter: invert(47%) sepia(91%) saturate(1982%) hue-rotate(205deg) brightness(120%) contrast(98%) !important;
}

[data-bs-theme="dark"].theme-skin-purple .logo-topbar .logo-sm img {
    filter: invert(44%) sepia(93%) saturate(1478%) hue-rotate(245deg) brightness(120%) contrast(97%) !important;
}

[data-bs-theme="dark"].theme-skin-teal .logo-topbar .logo-sm img {
    filter: invert(37%) sepia(83%) saturate(1005%) hue-rotate(130deg) brightness(120%) contrast(96%) !important;
}

[data-bs-theme="dark"].theme-skin-amber .logo-topbar .logo-sm img {
    filter: invert(72%) sepia(58%) saturate(3015%) hue-rotate(5deg) brightness(120%) contrast(96%) !important;
}

[data-bs-theme="dark"].theme-skin-slate .logo-topbar .logo-sm img {
    filter: invert(90%) brightness(1.2) saturate(0) !important;
}

/* Settings Directory Page Styles */
.settings-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0.5rem;
}

.settings-list li {
    margin-bottom: 0.15rem;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
}

.settings-list a {
    color: #003C71 !important;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.settings-list a::before {
    content: "•";
    color: var(--hb-border-color);
    margin-right: 0.5rem;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
}

.settings-list a:hover {
    color: #003C71 !important;
    transform: translateX(4px);
    text-decoration: none !important;
}

.settings-list a:hover::before {
    color: var(--hb-primary);
    transform: scale(1.3);
}

.settings-category-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hb-text-color) !important;
    margin-bottom: 0.4rem;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-transform: none;
    letter-spacing: normal;
}

.settings-category-title i {
    font-size: 1rem;
    color: var(--hb-primary) !important;
}

.border-right-v4-settings {
    border-right: 1px solid var(--hb-border-color);
}

@media (max-width: 991.98px) {
    .border-right-v4-settings {
        border-right: none;
        border-bottom: 1px solid var(--hb-border-color);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
}

/* Global Splash Loader Styles (Premium Frosted-Glass Pill Loader) */
.global-page-loader.splash {
    position: fixed;
    z-index: 20000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.15) !important; /* Extremely light overlay */
    backdrop-filter: blur(4px) !important; /* Polished background blur */
    pointer-events: none; /* Let all clicks pass through to the page elements */
    display: none;
}
[data-bs-theme="dark"] .global-page-loader.splash {
    background: rgba(15, 23, 42, 0.25) !important;
}
.global-page-loader.splash.dvshow {
    display: block !important;
}
.global-page-loader.splash.dvhide {
    display: none !important;
}
/* Option 1: Top-Edge Progress Bar */
.global-page-loader.splash .color-line {
    height: 3px;
    background: var(--hb-primary, #7f8558);
    box-shadow: 0 0 10px var(--hb-primary, #7f8558), 0 0 5px var(--hb-primary, #7f8558);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: topLoadingBar 1.8s infinite ease-in-out;
    transform-origin: left center;
}
/* Option 2: Premium Frosted Glass Mini-Pill */
.global-page-loader.splash .splash-title {
    text-align: center;
    width: 160px;
    margin: 18% auto;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.85) !important; /* Light frosted glass */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12px);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
[data-bs-theme="dark"] .global-page-loader.splash .splash-title {
    background: rgba(30, 41, 59, 0.85) !important; /* Deep dark slate in dark mode */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.global-page-loader.splash .splash-title h1,
.global-page-loader.splash .splash-title p {
    display: none !important; /* Hide the big, outdated text labels */
}
/* Add modern, clean loading label */
.global-page-loader.splash .splash-title::after {
    content: "Processing...";
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155; /* Dark text for light mode card */
    letter-spacing: 0.5px;
}
[data-bs-theme="dark"] .global-page-loader.splash .splash-title::after {
    color: #f8fafc; /* Light text for dark mode card */
}
.global-page-loader.splash .splash-title svg {
    margin: 0 auto;
    display: block;
    width: 38px !important;
    height: 38px !important;
}

@keyframes topLoadingBar {
    0% {
        transform: translateX(-100%) scaleX(0.2);
    }
    50% {
        transform: translateX(-30%) scaleX(0.7);
    }
    100% {
        transform: translateX(100%) scaleX(0.2);
    }
}

/* Modal Available Mappings Card custom border-top and styling matching V4 */
#AllAvailableListModel .hpanel.hgreen {
    border-top: 4px solid var(--hb-primary, #6E7740) !important;
    border-radius: 4px !important;
    border-left: 1px solid var(--hb-border-color, #e4e5e7) !important;
    border-right: 1px solid var(--hb-border-color, #e4e5e7) !important;
    border-bottom: 1px solid var(--hb-border-color, #e4e5e7) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    background-color: var(--hb-card-bg, #fff) !important;
}

/* Prevent horizontal scrollbars inside the Select Mappings modal and make it responsive */
#AllAvailableListModel .modal-body,
#AllAvailableListModel .table-responsive {
    overflow-x: hidden !important;
    width: 100% !important;
}

#AllAvailableListModel .dataTables_wrapper {
    width: 100% !important;
    overflow-x: hidden !important;
}

/* Highlight active view toggle buttons in the mappings modal */
#AllAvailableListModel .view-grid-btn.active,
#AllAvailableListModel .view-table-btn.active {
    background-color: var(--hb-primary-light, #F0F2E8) !important;
    color: var(--hb-primary, #6E7740) !important;
    border: 1px solid var(--hb-accent, #C8D89A) !important;
    font-weight: bold !important;
}

#AllAvailableListModel .view-grid-btn:not(.active),
#AllAvailableListModel .view-table-btn:not(.active) {
    background-color: #fff !important;
    color: #676a6c !important;
    border-color: #cbd5e1 !important;
}

/* Make all panel cards and table grids borders darker and clearly visible using theme variables */
.hpanel {
    border-color: var(--hb-border-subtle, #cbd5e1) !important;
}

.table-bordered,
.table-bordered > :not(caption) > * > *,
.table-bordered > :not(caption) > * {
    border-color: var(--hb-border-subtle, #cbd5e1) !important;
}

/* Ensure Select2 inside input-groups aligns properly on a single line without wrapping buttons */
.input-group > .select2-container {
    flex: 1 1 auto !important;
    width: 1% !important;
}

.input-group > .select2-container .select2-selection--single {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: 38px !important;
}

/* Tags Input Theme Styling Overrides */
div.tagsinput {
    border: 1px solid var(--hb-border-subtle, #cbd5e1) !important;
    border-radius: 4px !important;
    padding: 6px !important;
    background: var(--bs-card-bg, var(--hb-surface-bg)) !important;
}

div.tagsinput span.tag {
    background-color: var(--hb-primary-light, #F0F2E8) !important;
    border: 1px solid var(--hb-accent, #C8D89A) !important;
    color: var(--hb-primary, #6E7740) !important;
    border-radius: 3px !important;
    font-family: inherit !important;
    padding: 4px 8px !important;
    margin-right: 5px !important;
    margin-bottom: 5px !important;
}

div.tagsinput span.tag a {
    color: var(--hb-primary, #6E7740) !important;
    margin-left: 6px !important;
    font-size: 12px !important;
}

div.tagsinput input {
    font-family: inherit !important;
    padding: 4px !important;
    color: var(--bs-body-color, var(--hb-text-color)) !important;
    min-width: 180px !important;
    width: auto !important;
}

/* Fix squished text buttons inside hpanel panel footers */
.hpanel .panel-footer .btn.btn-sm,
.hpanel .panel-footer .btn.btn-xs,
.hpanel .panel-footer .btn.DeleteTransformationFiltration,
.hpanel .panel-footer .btn.DeleteAdaptorFiltration,
.hpanel .panel-footer .btn.SaveTransformationFiltration,
.hpanel .panel-footer .btn.SaveAdaptorFiltration {
    width: auto !important;
    height: auto !important;
    padding: 0.25rem 0.75rem !important; /* Proper spacing for text buttons */
    display: inline-block !important;
}

/* SweetAlert Confirm Button Theme Customization */
.sweet-alert button.confirm,
.swal2-confirm,
.swal-button--confirm {
    background-color: var(--hb-primary, #7f8558) !important;
    border-color: var(--hb-primary, #7f8558) !important;
    color: #fff !important;
}

.sweet-alert button.confirm:hover,
.swal2-confirm:hover,
.swal-button--confirm:hover {
    background-color: var(--hb-primary-dark, #6e7740) !important;
    border-color: var(--hb-primary-dark, #6e7740) !important;
    color: #fff !important;
}

/* Datatables Buttons spacing and alignment (hidden in favor of custom HTML toolbar) */
.dt-buttons {
    display: none !important;
}

/* ============================================================ */
/* Consolidated Core Page Styles: hubadaptors.css */
/* ============================================================ */
.hubadaptors-header { margin-bottom: 1.5rem; }
.hubadaptors-header h1 { font-weight: 800; color: var(--hb-text-heading); font-size: 1.6rem; margin-bottom: 0.2rem; letter-spacing: -0.5px; }
.hubadaptors-header .subtitle { font-size: 0.85rem; color: var(--hb-text-muted); }
.filter-panel { background-color: var(--hb-surface-bg); border: 1px solid var(--hb-border-color); border-radius: 4px; margin-bottom: 1.5rem; overflow: visible; }
.filter-panel-header { border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: var(--hb-surface-alt); border-bottom: 1px solid var(--hb-border-color); padding: 0.75rem 1.25rem; font-weight: 600; color: var(--hb-text-color); font-size: 0.85rem; }
.filter-panel-body { padding: 1.25rem; }
.filter-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.filter-actions { display: flex; justify-content: flex-end; gap: 0.5rem; border-top: 1px solid var(--hb-surface-alt); padding-top: 1rem; }
.btn-filter-clear { background-color: var(--hb-surface-bg); border: 1px solid var(--hb-border-color); color: var(--hb-text-color); border-radius: 4px; padding: 0.4rem 1rem; font-size: 0.82rem; font-weight: 600; transition: all 0.2s; }
.btn-filter-clear:hover { background-color: var(--hb-surface-alt); color: var(--hb-text-heading); }
.btn-filter-search { background-color: var(--hb-primary); border: 1px solid var(--hb-primary); color: var(--hb-surface-bg); border-radius: 4px; padding: 0.4rem 1.25rem; font-size: 0.82rem; font-weight: 600; transition: all 0.2s; }
.btn-filter-search:hover { background-color: var(--hb-primary-dark); border-color: var(--hb-primary-dark); }
.adaptor-toolbar { background-color: var(--hb-surface-bg); border: 1px solid var(--hb-border-color); border-radius: 4px; padding: 0.75rem 1.25rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.toolbar-left { display: flex; align-items: center; gap: 0.75rem; }
.count-badge { background-color: var(--hb-primary); color: var(--hb-surface-bg); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 10px; }
.btn-view-toggle { background-color: transparent; border: 1px solid var(--hb-border-color); color: var(--hb-text-color); border-radius: 4px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: all 0.2s; text-decoration: none; }
.btn-view-toggle.active { background-color: var(--hb-primary) !important; color: #ffffff !important; border-color: var(--hb-primary) !important; }
.btn-view-toggle:hover { background-color: var(--hb-surface-alt); color: var(--hb-primary); border-color: var(--hb-border-color); }
.btn-export-option { background-color: var(--hb-surface-bg); border: 1px solid var(--hb-border-color); color: var(--hb-text-color); border-radius: 4px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; cursor: pointer; opacity: 1; transition: all 0.2s; text-decoration: none; }
.btn-export-option:hover { background-color: var(--hb-surface-alt); border-color: var(--hb-input-border); color: var(--hb-text-color); }
.toolbar-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pagination-info { font-size: 0.82rem; color: var(--hb-text-color); font-weight: 500; }
.pagination-controls { display: flex; align-items: center; gap: 0.25rem; }
.btn-pagination { background-color: var(--hb-surface-bg); border: 1px solid var(--hb-border-color); color: var(--hb-text-color); border-radius: 4px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: all 0.2s; text-decoration: none; }
.btn-pagination:hover:not(.disabled) { background-color: var(--hb-surface-alt); color: var(--hb-primary); }
.btn-pagination.disabled { color: var(--hb-border-color); border-color: var(--hb-border-color); cursor: not-allowed; background-color: var(--hb-surface-alt); }
.btn-new-adaptor { background-color: var(--hb-primary); border: 1px solid var(--hb-primary); color: var(--hb-surface-bg); border-radius: 4px; padding: 0.4rem 1rem; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.4rem; }
.btn-new-adaptor:hover { background-color: var(--hb-primary-dark); border-color: var(--hb-primary-dark); color: var(--hb-surface-bg); }
.adaptors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    width: 100%;
}
@media (max-width: 992px) {
    .adaptors-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
.adaptor-card { background-color: var(--hb-surface-bg); border: 1px solid var(--hb-border-color); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; flex-direction: column; overflow: hidden; position: relative; transition: all 0.2s ease; }
.adaptor-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.adaptor-card.border-green { border-top: 3px solid var(--hb-primary); }
.adaptor-card.border-yellow { border-top: 3px solid var(--hb-accent); }
.adaptor-card.border-red { border-top: 3px solid var(--hb-red); }
.adaptor-card.border-gray { border-top: 3px solid var(--hb-text-muted, #888888); }
.card-header-v4 { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--hb-surface-alt); display: flex; align-items: center; justify-content: space-between; }
.card-title-v4 { font-weight: 700; color: var(--hb-text-heading); font-size: 0.95rem; margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 75%; }
.card-badges { display: flex; gap: 0.4rem; }
.badge-mode { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 3px; background-color: var(--hb-surface-alt); color: var(--hb-text-color); }
.badge-mode.mode-production { background-color: rgba(26, 179, 148, 0.1); color: #1ab394; }
.badge-mode.mode-sandbox { background-color: rgba(248, 172, 89, 0.1); color: var(--hb-yellow); }
.badge-status { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 3px; }
.badge-status.status-active { background-color: var(--hb-primary); color: var(--hb-surface-bg); }
.badge-status.status-inactive { background-color: var(--hb-red); color: var(--hb-surface-bg); }
.card-body-v4 { padding: 1.25rem; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gateway-section-title { font-size: 0.8rem; font-weight: 700; color: var(--hb-text-color); text-transform: capitalize; }
.gateway-icon-container { font-size: 1.8rem; color: var(--hb-primary); width: 32px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.gateway-info-box { border-left: 1px solid var(--hb-border-color) !important; padding-left: 0.5rem; min-height: 40px; display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; }
.gateway-type-text { font-size: 0.72rem; color: var(--hb-text-muted); font-weight: 500; }
.gateway-name-text { font-size: 0.8rem; margin-top: 0.1rem; min-width: 0; }
.gateway-link { color: var(--hb-yellow) !important; font-weight: 700; text-decoration: none; }
.gateway-link:hover { text-decoration: underline !important; }
.transform-connector-circle { display: inline-flex; align-items: center; justify-content: center; }
.transform-icon-btn { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.2s; text-decoration: none; cursor: pointer; z-index: 10; }
.transform-icon-btn.is-unmapped { background-color: var(--hb-primary-light) !important; border: 1px solid var(--hb-primary) !important; color: var(--hb-primary) !important; }
.transform-icon-btn.is-unmapped:hover { background-color: var(--hb-primary-light) !important; border-color: var(--hb-primary) !important; color: var(--hb-primary) !important; transform: scale(1.1); }
.transform-icon-btn.is-mapped { background-color: var(--hb-primary) !important; border: 1px solid var(--hb-primary) !important; color: #ffffff !important; }
.transform-icon-btn.is-mapped:hover { background-color: var(--hb-primary) !important; border-color: var(--hb-primary) !important; color: #ffffff !important; transform: scale(1.1); }
.card-metadata-v4 { padding: 0.5rem 1.25rem; background-color: var(--hb-surface-alt); border-top: 1px solid var(--hb-surface-alt); border-bottom: 1px solid var(--hb-surface-alt); font-size: 0.72rem; color: var(--hb-text-muted); display: flex; justify-content: space-between; align-items: center; }
.metadata-item { display: flex; align-items: center; gap: 0.25rem; }
.card-actions-v4 { padding: 0.6rem 1.25rem; background-color: var(--hb-surface-bg); display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
.btn-card-action { background-color: var(--hb-surface-bg); border: 1px solid var(--hb-border-color); color: var(--hb-text-color); padding: 0.3rem 0.6rem; font-size: 0.75rem; font-weight: 600; border-radius: 3px; display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; transition: all 0.15s; }
.btn-card-action:hover { background-color: var(--hb-surface-alt); color: var(--hb-text-heading); border-color: var(--hb-border-color); }
.btn-card-action.btn-execute { color: var(--hb-primary); border-color: rgba(var(--bs-primary-rgb), 0.3); }
.btn-card-action.btn-execute:hover { background-color: var(--hb-primary); color: var(--hb-surface-bg); border-color: var(--hb-primary); }
.btn-card-action.btn-upload { color: var(--hb-blue); border-color: rgba(28, 132, 198, 0.3); }
.btn-card-action.btn-upload:hover { background-color: var(--hb-blue); color: var(--hb-surface-bg); border-color: var(--hb-blue); }
.btn-card-action.btn-delete { color: var(--hb-red); }
.btn-card-action.btn-delete:hover { background-color: var(--hb-red); color: var(--hb-surface-bg); border-color: var(--hb-red); }
.btn-card-action.disabled, .btn-card-action:disabled { color: var(--hb-border-color) !important; border-color: var(--hb-border-color) !important; background-color: var(--hb-surface-alt) !important; cursor: not-allowed; opacity: 0.6; pointer-events: none; }
.btn-action-icon {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    background-color: var(--hb-surface-alt, #f7f9fa);
    border: 1px solid var(--hb-border-color, #e4e5e7);
    color: var(--hb-text-color, #6a6c6f);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}
.btn-action-icon i { line-height: 1 !important; }
.btn-action-icon.btn-success { background-color: var(--hb-primary) !important; color: #ffffff !important; }
.btn-action-icon.btn-success:hover { background-color: var(--hb-primary-dark) !important; }
.btn-action-icon.btn-primary { background-color: var(--hb-primary) !important; color: #ffffff !important; }
.btn-action-icon.btn-primary:hover { background-color: var(--hb-primary-dark) !important; }
.btn-action-icon.btn-info { background-color: var(--hb-primary) !important; color: #ffffff !important; }
.btn-action-icon.btn-info:hover { background-color: var(--hb-primary-dark) !important; }
.btn-action-icon.btn-warning { background-color: var(--hb-primary) !important; color: #ffffff !important; }
.btn-action-icon.btn-warning:hover { background-color: var(--hb-primary-dark) !important; }
.btn-action-icon.btn-slate { background-color: var(--hb-primary) !important; color: #ffffff !important; }
.btn-action-icon.btn-slate:hover { background-color: var(--hb-primary-dark) !important; }
.btn-action-icon.btn-danger { background-color: var(--hb-red) !important; color: #ffffff !important; }
.btn-action-icon.btn-danger:hover { background-color: var(--hb-red-hover, #ec4758) !important; }
.btn-action-icon.disabled, .btn-action-icon:disabled { opacity: 0.4 !important; cursor: not-allowed !important; background-color: var(--hb-border-color) !important; border-color: var(--hb-border-color) !important; color: var(--hb-text-muted) !important; }

/* ============================================================ */
/* Consolidated Core Page Styles: mygateways.css */
/* ============================================================ */
.gateway-filter-row { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
.gateway-toolbar .btn-view-toggle, .gateway-toolbar .btn-pagination { padding: 0; }
.gateways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.gateway-card { min-height: 215px; }
.gateway-card-body { justify-content: flex-start; min-height: 88px; }
.gateway-card-icon { width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--bs-primary-rgb), .08); color: var(--hb-primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 46px; font-size: 1.35rem; }
.gateway-card .gateway-name-text { color: var(--hb-yellow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gateway-metadata { gap: 1rem; }
.gateway-metadata .metadata-left { font-size: 0.72rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 70%; }
.gateway-created-by { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gateway-loading { padding: 1rem; margin-bottom: 1rem; background: var(--hb-surface-bg); border: 1px solid var(--hb-border-color); border-radius: 4px; color: var(--hb-text-color); text-align: center; font-size: .82rem; }
.gateway-catalog-search { margin-bottom: 1rem; }
.gateway-search-control { display: flex; align-items: center; gap: 0.75rem; }
.gateway-search-control > i { color: var(--hb-text-muted); font-size: 1rem; }
.gateway-search-control .form-control { min-height: 38px; }
.gateway-catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 1rem; }
.gateway-catalog-heading h2 { margin: 0 0 0.2rem; color: var(--hb-text-heading); font-size: 1.05rem; font-weight: 700; }
.gateway-catalog-heading p { margin: 0; color: var(--hb-text-muted); font-size: 0.8rem; }
.gateway-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gateway-type-card { background: var(--hb-surface-bg); border: 1px solid var(--hb-border-color); border-top: 3px solid var(--hb-primary); border-radius: 4px; padding: 1.25rem; display: flex; flex-direction: column; min-height: 255px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gateway-type-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.gateway-type-icon { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--bs-primary-rgb), 0.08); color: var(--hb-primary); font-size: 1.4rem; margin-bottom: 1rem; }
.gateway-type-content { flex: 1; min-width: 0; }
.gateway-type-content h3 { color: var(--hb-text-heading); font-size: 0.95rem; font-weight: 700; margin: 0 0 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gateway-type-category { color: var(--hb-primary); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.gateway-type-content p { color: var(--hb-text-muted); font-size: 0.78rem; line-height: 1.5; margin: 0.75rem 0 1rem; }
.gateway-type-select { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.45rem; background: var(--hb-primary); border-color: var(--hb-primary); color: var(--hb-surface-bg); font-size: 0.8rem; font-weight: 600; }
.gateway-type-select:hover { background: var(--hb-primary-dark); border-color: var(--hb-primary-dark); color: var(--hb-surface-bg); }
.gateway-empty-state { min-height: 220px; background: var(--hb-surface-bg); border: 1px solid var(--hb-border-color); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--hb-text-muted); text-align: center; }
.gateway-empty-state > i { color: var(--hb-yellow); font-size: 2rem; }
.gateway-empty-state strong { color: var(--hb-text-color); }
.gateway-selection-summary { display: flex; align-items: center; gap: 1rem; }
.gateway-selection-summary > i { color: var(--hb-primary); font-size: 2rem; }
.gateway-selection-summary div { display: flex; flex-direction: column; gap: 0.2rem; }
.gateway-selection-summary span { color: var(--hb-text-muted); font-size: 0.8rem; }
/* Gateway details modal */
.gateway-details-list {
    display: flex;
    flex-direction: column;
}

.gateway-detail-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr);
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--hb-border-color);
}

    .gateway-detail-row:last-child {
        border-bottom: 0;
    }

    .gateway-detail-row span {
        color: var(--hb-text-muted);
        font-size: 0.78rem;
    }

    .gateway-detail-row strong {
        color: var(--hb-text-color);
        font-size: 0.78rem;
        font-weight: 600;
        overflow-wrap: anywhere;
    }
@media (max-width: 992px) {
    .gateways-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .gateway-detail-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}
/* ============================================================ */
/* Consolidated Core Page Styles: dashboard.css */
/* ============================================================ */
.dashboard-wrapper { color: var(--v4-text-color); }
.panel-v4 { background-color: var(--v4-card-bg, #fff); border: 1px solid var(--v4-border-color, #e5e7eb); border-radius: 6px; box-shadow: var(--v4-panel-shadow, 0 4px 12px rgba(0, 0, 0, 0.05)); overflow: visible; margin-bottom: 0.4rem; transition: all 0.25s ease-in-out; }
.panel-v4-header { border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #fafafa; border-bottom: 1px solid var(--v4-border-color, #e5e7eb); padding: 0.4rem 1rem; font-size: 0.95rem; color: #4b5563; font-weight: 700; letter-spacing: -0.2px; cursor: pointer; user-select: none; }
.panel-v4-header:hover { background-color: #f3f4f6; }
.panel-collapse-icon { font-size: 0.85rem; color: var(--v4-text-muted, #6b7280); transition: transform 0.2s ease; }
.panel-v4-header.collapsed .panel-collapse-icon { transform: rotate(180deg); }
.panel-v4-body { padding: 0.5rem 0.75rem; background-color: var(--v4-card-bg, #fff); }
.panel-v4-footer { background-color: #f9fafb; border-top: 1px solid var(--v4-border-color, #e5e7eb); padding: 0.3rem 1rem; font-size: 0.85rem; color: var(--v4-text-muted, #6b7280); }
.row-counts { display: flex; flex-wrap: wrap; align-items: center; }
.count-item { border-right: 1px solid #f3f4f6; }
.count-item:last-child { border-right: none; }
.count-link { text-decoration: none !important; display: block; padding: 0.75rem 0.3rem; border-radius: 6px; border: 1px solid transparent; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.count-link:hover { background-color: #ffffff; border-color: #e7eaec; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05); transform: translateY(-3px); }
.count-link i { transition: all 0.3s ease; }
.count-link:hover i { color: #1ab394 !important; transform: scale(1.15); }
.count-value { font-size: 1.45rem; font-weight: 800; color: #676a6c !important; }
.count-value i { font-size: 1.2rem; margin-right: 0.15rem; vertical-align: middle; }
.count-label { font-size: 0.7rem; color: #888888; text-transform: none; font-weight: 400; }
@media (min-width: 1200px) {
    .col-lg-1_5 {
        flex: 0 0 auto;
        width: 12.5% !important;
    }
}
.min-height-chart { min-height: 180px; }
.border-right-v4 { border-right: 1px solid var(--v4-border-color, #e5e7eb); }
.chart-title { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.large-indicator-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.large-indicator-value { font-size: 2.2rem; color: #676a6c !important; line-height: 1; }
.info-icon-pop { font-size: 0.8rem; color: var(--v4-text-muted, #6b7280); cursor: pointer; vertical-align: middle; }
.text-olive-accent { color: var(--hb-primary) !important; }
.btn-v4-action { font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.75rem; border-radius: 4px; border: 1px solid transparent; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-refresh { background-color: var(--hb-accent) !important; border-color: var(--hb-accent) !important; color: #5b5d5f !important; }
.btn-refresh:hover { background-color: var(--hb-primary-light) !important; border-color: var(--hb-primary) !important; color: #5b5d5f !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.2) !important; }
.btn-deactivate { background-color: var(--hb-primary) !important; border-color: var(--hb-primary) !important; color: #ffffff !important; }
.btn-deactivate:hover { background-color: var(--hb-primary-dark) !important; border-color: var(--hb-primary-dark) !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.35) !important; }
.form-control-v4 { font-size: 0.8rem; padding: 0.4rem 0.6rem; border-radius: 4px; height: auto; background-color: #ffffff !important; border: 1px solid var(--v4-border-color, #e5e7eb); color: var(--v4-text-color, #374151) !important; }
.form-control-v4:focus { border-color: var(--hb-primary); box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.2); }
.alert-gated { background-color: rgba(96, 108, 56, 0.08); border: 1px solid rgba(96, 108, 56, 0.3); border-radius: 6px; color: var(--v4-text-color, #374151); padding: 1rem 1.25rem; }
.badge-gated { background-color: var(--v4-olive-green, #606c38); color: #ffffff; font-weight: 600; }
.spinning-icon { animation: spin 0.8s linear infinite; display: inline-block; }
.premium-card-migration { background: rgba(30, 41, 59, 0.6) !important; backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.premium-card-migration:hover { transform: translateY(-5px); background: rgba(30, 41, 59, 0.85) !important; border-color: rgba(26, 179, 148, 0.5) !important; box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25), 0 0 15px rgba(26, 179, 148, 0.25) !important; }
.alert-warning-v4 { background-color: var(--hb-surface-alt) !important; border: 1px solid var(--hb-border-color) !important; color: var(--hb-text-color) !important; border-left: 4px solid var(--hb-primary) !important; border-radius: 4px; padding: 0.4rem 1rem; font-size: 0.85rem; position: relative; }
.alert-warning-v4 a { color: var(--hb-primary) !important; text-decoration: underline; font-weight: bold; }

.nav-tabs > li.activeTab > a,
.nav-tabs > li.activeTab > a:hover,
.nav-tabs > li.activeTab > a:focus,
#tabFilter.nav-tabs .nav-link.active,
#tabFilter.nav-tabs .nav-link.active:hover,
#tabFilter.nav-tabs .nav-link.active:focus,
#tabFilter.nav-tabs .nav-item.activeTab .nav-link,
#tabFilter > li.active > a,
#tabFilter > li.activeTab > a,
#tabFilter > li > a.active {
    border: 1px solid #c8cca9 !important;
    background-color: #c8cca9 !important;
    color: #5b5d5f !important;
    border-bottom-color: #c8cca9 !important;
    border-top: 1px solid #c8cca9 !important;
}

#tabFilter.nav-tabs {
    border-bottom: 1px solid #e4e5e7 !important;
    margin-bottom: 15px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

#tabFilter > li {
    margin-right: 15px !important;
    display: inline-block !important;
    list-style: none !important;
}

#tabFilter > li > a {
    border: 1px solid transparent !important;
    background-color: transparent !important;
    color: #0275d8 !important;
    border-radius: 4px 4px 0 0 !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease-in-out;
}

#tabFilter > li > a:hover {
    background-color: #f5f5f5 !important;
    color: #014c8c !important;
}

#SearchTextbox {
    flex-grow: 1 !important;
}

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

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

/* Custom Bootstrap Tooltip Styling to match V4 Popover/Light style globally */
.tooltip {
    --bs-tooltip-bg: #ffffff !important;
    --bs-tooltip-color: #676a6c !important;
    --bs-tooltip-border-color: #cbd5e1 !important;
}
.tooltip-inner {
    background-color: #ffffff !important;
    color: #676a6c !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
    font-weight: 500 !important;
}
.tooltip-arrow::before {
    border-top-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
    border-left-color: #ffffff !important;
    border-right-color: #ffffff !important;
}

/* ============================================================ */
/* Consolidated Setup Shell, Panels & Tabs Configuration Styles */
/* ============================================================ */

/* Layout shell container */
.hb-adaptor-setup-shell {
    background: var(--hb-primary-light, #f8fafc) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.05) !important;
}
.hb-adaptor-setup-shell > .card-body {
    padding: 20px 24px !important;
}

/* Modern segment controller tab navigation */
.adaptor-tabs-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    background: #ffffff !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.04) !important;
}

.adaptor-nav-tabs {
    display: flex !important;
    background: #f1f5f9 !important;
    padding: 4px !important;
    border-radius: 8px !important;
    gap: 4px !important;
}

.adaptor-nav-link {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 0.825rem !important;
    font-weight: 550 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

.active-tab-v4 {
    background: var(--hb-primary, #004d80) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb, 110, 119, 64), 0.15) !important;
}

.inactive-tab-v4 {
    color: #64748b !important;
    background: transparent !important;
}

.inactive-tab-v4:hover {
    color: #0f172a !important;
    background: rgba(148, 163, 184, 0.12) !important;
}

/* Status indicators in tabs */
.tab-status-icon {
    font-size: 0.95rem !important;
    margin-right: 6px !important;
}

/* Top & bottom action controls */
.adaptor-action-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.adaptor-action-buttons .btn {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
}

/* Specific button designs */
.adaptor-action-buttons .btn-primary.btnSaveNext {
    background-color: var(--hb-primary, #6e7740) !important;
    border-color: var(--hb-primary, #6e7740) !important;
    color: #ffffff !important;
}
.adaptor-action-buttons .btn-primary.btnSaveNext:hover {
    background-color: var(--hb-primary-dark, #4a5228) !important;
    border-color: var(--hb-primary-dark, #4a5228) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.adaptor-action-buttons .btn-info.btnSaveExit {
    background-color: transparent !important;
    border: 1.5px solid var(--hb-primary, #6e7740) !important;
    color: var(--hb-primary, #6e7740) !important;
}
.adaptor-action-buttons .btn-info.btnSaveExit:hover {
    background-color: var(--hb-primary, #6e7740) !important;
    border-color: var(--hb-primary, #6e7740) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Adaptor state icon buttons (notes, history, play) */
    .adaptor-action-buttons .AdaptorPollNow,
    .adaptor-action-buttons .AdaptorHistory,
    .adaptor-action-buttons .btnAdaptorNotes {
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        color: #475569 !important;
        padding: 8px 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }

.adaptor-action-buttons .AdaptorPollNow:hover {
    background: #dcfce7 !important;
    color: #15803d !important;
    border-color: #bbf7d0 !important;
}

.adaptor-action-buttons .AdaptorHistory:hover {
    background: #fef9c3 !important;
    color: #a16207 !important;
    border-color: #fef08a !important;
}

.adaptor-action-buttons .btnAdaptorNotes:hover {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}

/* Global Premium Overrides for all Adaptor & HubApp tabs content */
.hpanel {
    background: #ffffff !important;
    border: 1px solid var(--hb-border-color, #e4e5e7) !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 20px -2px rgba(var(--bs-primary-rgb, 110, 119, 64), 0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible !important;
}
.hpanel:hover {
    box-shadow: 0 10px 25px -5px rgba(var(--bs-primary-rgb, 110, 119, 64), 0.08) !important;
    border-color: var(--hb-accent, #c8d89a) !important;
}
.hpanel .hbuilt,
.hbuilt,
.hbuilt .fontweight600,
.hbuilt span,
.hbuilt h4,
.hbuilt h5 {
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
    background: var(--hb-surface-alt, #f7f9fa) !important;
    border-bottom: 1px solid var(--hb-border-color, #e4e5e7) !important;
    padding: 12px 20px !important;
    font-size: 0.925rem !important;
    color: var(--hb-text-heading, #2f4050) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}
.hpanel .panel-body {
    padding: 20px 20px !important;
}
.form-control, .form-select {
    border-radius: 8px !important;
    border: 1px solid var(--hb-border-color, #e4e5e7) !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    color: var(--hb-text-color, #334155) !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}
.form-control:focus, .form-select:focus {
    background-color: #ffffff !important;
    border-color: var(--hb-primary, #6e7740) !important;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb, 110, 119, 64), 0.12) !important;
    outline: none !important;
}

/* Custom radios and checkboxes */
.form-check-input {
    border: 1px solid var(--hb-border-color, #e4e5e7) !important;
    width: 1.15em !important;
    height: 1.15em !important;
    margin-top: 0.22em !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb, 110, 119, 64), 0.15) !important;
    border-color: var(--hb-primary, #6e7740) !important;
}
.form-check-input:checked {
    background-color: var(--hb-primary, #6e7740) !important;
    border-color: var(--hb-primary, #6e7740) !important;
}
.form-check-label {
    font-size: 0.9rem !important;
    color: #334155 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    padding-left: 6px !important;
}
.form-check-inline {
    margin-right: 1.5rem !important;
}

/* ==========================================================================
   Modernized Enterprise Topbar & Global UI Overrides
   ========================================================================== */

/* 1. Topbar Container & Shadow styling */
.app-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(228, 229, 231, 0.7) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03), 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s ease !important;
}

/* 2. Brand Gradient Line matching active skin */
.color-line {
    background: linear-gradient(90deg, var(--hb-primary, #6E7740) 0%, var(--hb-accent, #C8D89A) 50%, var(--hb-primary-dark, #4A5228) 100%) !important;
    height: 3px !important;
}

/* 3. Logo Alignment & Constraints */
.logo-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-right: 12px !important;
}
.logo-topbar img {
    max-height: 26px !important;
    width: auto !important;
    transition: transform 0.2s ease !important;
}
.logo-topbar img:hover {
    transform: scale(1.02);
}

/* 4. Modern Pill Search Bar */
.app-search {
    position: relative !important;
    width: 250px !important;
    margin-left: 12px !important;
    display: flex;
    align-items: center !important;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.topbar-search {
    background-color: #f1f5f9 !important;
    border: 1px solid transparent !important;
    border-radius: 30px !important;
    padding: 6px 14px 6px 36px !important;
    font-size: 0.825rem !important;
    height: 36px !important;
    width: 100% !important;
    color: #334155 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.topbar-search:focus {
    background-color: #ffffff !important;
    border-color: var(--hb-primary, #6e7740) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 110, 119, 64), 0.15) !important;
    outline: none !important;
}
.app-search:focus-within {
    width: 290px !important; /* Grow smoothly on focus */
}
.app-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    width: 15px !important;
    height: 15px !important;
    color: #94a3b8 !important;
    transition: color 0.2s ease !important;
}
.topbar-search:focus + .app-search-icon {
    color: var(--hb-primary, #6e7740) !important;
}

/* 5. Icons, Toggles and Buttons */
.topbar-link, .button-collapse-toggle {
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}
.topbar-link:hover, .button-collapse-toggle:hover {
    color: var(--hb-primary, #6e7740) !important;
    background-color: var(--hb-primary-light, #f0f2e8) !important;
    transform: translateY(-1px);
}
.topbar-link i, .button-collapse-toggle i {
    width: 20px !important;
    height: 20px !important;
    transition: stroke 0.2s ease !important;
}

/* Quick links dashboard/search/settings buttons */
.topbar-item .btn-link {
    color: #64748b !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}
.topbar-item .btn-link:hover {
    color: var(--hb-primary, #6e7740) !important;
    background-color: var(--hb-primary-light, #f0f2e8) !important;
    transform: translateY(-1px);
}
.topbar-item .btn-link i {
    width: 18px !important;
    height: 18px !important;
}

/* Specific logout icon hover matching theme colors */
.topbar-item a.text-primary.topbar-link:hover {
    color: var(--hb-primary, #6e7740) !important;
    background-color: var(--hb-primary-light, #f0f2e8) !important;
}

/* 6. Dropdown Menu Animations & Aesthetics */
.dropdown-menu {
    border-radius: 10px !important;
    border: 1px solid rgba(228, 229, 231, 0.8) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    animation: topbarDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 12px !important;
    z-index: 1060 !important;
}

/* Global Dropdown Stacking & Stacking Context Support across all Cards/Panels */
.hpanel:focus-within,
.hb-panel:focus-within,
.panel-v4:focus-within,
.filter-panel:focus-within,
.card:focus-within,
.hpanel:has(.show),
.hpanel:has(.open),
.card:has(.show),
.card:has(.open) {
    z-index: 25;
    position: relative;
}

.dropdown.show,
.dropdown.open,
.btn-group.show,
.btn-group.open {
    position: relative;
    z-index: 1050;
}

.select2-container--open {
    z-index: 10060 !important;
}
@keyframes topbarDropdownFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hover-bg-light {
    transition: all 0.15s ease !important;
}
.hover-bg-light:hover {
    background-color: var(--hb-primary-light, #f0f2e8) !important;
    color: var(--hb-primary, #6e7740) !important;
}
.hover-bg-light:hover i {
    color: var(--hb-primary, #6e7740) !important;
}

/* --- Advance Search View Theme Styles --- */
.tablepanel #TotalFiles {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: white !important;
}
.tablepanel #btnView1.active, .tablepanel #btnView2.active {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: white !important;
}
.tablepanel #btnView1.active i, .tablepanel #btnView2.active i {
    color: white !important;
}
/* Datepicker active date selection theme coloring */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
    background-color: var(--hb-primary) !important;
    background-image: none !important;
    color: #ffffff !important;
}
/* Clean and align search box container */
.toolbar-right .search-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.toolbar-right .search-container #customSearchBox {
    height: 31px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.toolbar-right .search-container #customSearchBtn {
    height: 31px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f4f4f4 !important;
    box-sizing: border-box !important;
}
/* Style Table Action Buttons to look like Card Action Buttons */
.tablepanel .btn-group {
    display: inline-flex !important;
    gap: 4px !important;
    box-shadow: none !important;
}
.tablepanel table td .btn {
    border-radius: 6px !important;
    background-color: #f7f9fa !important;
    border: 1px solid #e4e5e7 !important;
    color: #6a6c6f !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 2px !important;
}
.tablepanel table td #editor_url:hover {
    background-color: #23c6c8 !important;
    border-color: #23c6c8 !important;
    color: #ffffff !important;
}
.tablepanel table td #Notification:hover {
    background-color: var(--hb-blue, #1c84c6) !important;
    border-color: var(--hb-blue, #1c84c6) !important;
    color: #ffffff !important;
}
.tablepanel table td #OriginalFile:hover,
.tablepanel table td .downloadlink:hover {
    background-color: #1ab394 !important;
    border-color: #1ab394 !important;
    color: #ffffff !important;
}
.tablepanel table td #TransformedFile:hover {
    background-color: var(--hb-yellow, #f8ac59) !important;
    border-color: var(--hb-yellow, #f8ac59) !important;
    color: #ffffff !important;
}

/* My Hub Adaptors List/Table View Left Border Status Stripes */
#MyHubAdaptorsTable tbody tr.border-green td:first-child {
    border-left: 3px solid var(--hb-primary) !important;
}
#MyHubAdaptorsTable tbody tr.border-yellow td:first-child {
    border-left: 3px solid var(--hb-yellow, #f8ac59) !important;
}
#MyHubAdaptorsTable tbody tr.border-red td:first-child {
    border-left: 3px solid var(--hb-red, #ed5565) !important;
}
#MyHubAdaptorsTable tbody tr.border-gray td:first-child {
    border-left: 3px solid #888888 !important;
}

/* Table Date Stamp Column Wrap Prevention */
#MyHubAdaptorsTable th:nth-child(4),
#MyHubAdaptorsTable td:nth-child(4) {
    white-space: nowrap !important;
    width: 145px !important;
}

/* Pagination Dynamic Theme Casing */
.pagination-controls-v4 .page-item.active .page-link,
.dataTables_paginate .pagination .page-item.active .page-link {
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: #ffffff !important;
}

/* Global DataTables Length and Filter Controls styling to match V4 */
.dataTables_length,
.dataTables_filter,
.dt-length,
.dt-search,
.dataTables_info,
.dt-info,
.table-header-integrated {
    font-size: 13px !important;
    color: #676a6c !important;
    font-weight: normal !important;
}

.dataTables_length select,
.dt-length select,
.table-header-integrated select {
    padding: 2px 20px 2px 8px !important;
    height: 30px !important;
    font-size: 13px !important;
    color: #676a6c !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    width: 65px !important;
    display: inline-block !important;
    line-height: 1.5 !important;
}

.dataTables_filter input,
.dt-search input,
.table-header-integrated input {
    padding: 3px 8px !important;
    height: 30px !important;
    font-size: 13px !important;
    color: #676a6c !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    width: 180px !important;
    display: inline-block !important;
}

/* MyGateways specific table cell formatting overrides */
#MyGatewaysTable td {
    white-space: normal !important;
    word-break: break-word;
    vertical-align: middle;
}
#MyGatewaysTable th {
    vertical-align: middle;
}

/* Gateway Form Layout Styles */
form .col-12.col-lg-6:first-of-type .hpanel {
    border-top: none !important;
    margin-bottom: 0 !important;
}
form .col-12.col-lg-6:first-of-type .hpanel:first-child {
    border-top: 4px solid var(--hb-primary) !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}
form .col-12.col-lg-6:first-of-type .hpanel:last-child {
    border-bottom: 1px solid var(--hb-border-color) !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    margin-bottom: 1rem !important;
}

/* Collapse chevron toggle to be inline and borderless */
form .col-12.col-lg-6:first-of-type .gateway-collapse-toggle {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Reset duplicate styles inside collapsible headers */
form .col-12.col-lg-6:first-of-type .hbuilt span,
form .col-12.col-lg-6:first-of-type .hbuilt h4,
form .col-12.col-lg-6:first-of-type .hbuilt h5 {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
}

/* Uniform height and width for gateway action buttons */
form .col-12.col-lg-6:first-of-type .btn:not(.gateway-collapse-toggle) {
    min-width: 90px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
}

/* Align Add Account button height and colors with active theme */
#addFTP, #addSFTP {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    background-color: var(--hb-primary) !important;
    border-color: var(--hb-primary) !important;
    color: #fff !important;
}
#addFTP:hover, #addSFTP:hover {
    background-color: var(--hb-primary-dark, var(--hb-primary)) !important;
    border-color: var(--hb-primary-dark, var(--hb-primary)) !important;
    filter: brightness(0.9);
}

/* Bold and large plus icons */
#addFTP i, #addSFTP i {
    font-weight: 900 !important;
    font-size: 1.3rem !important;
}

/* Status button styles matching V4 */

.btn-danger2 {
    background-color: #8b2f2f;
    border-color: #8b2f2f;
    color: #FFFFFF;
}

    .btn-danger2:hover,
    .btn-danger2:focus,
    .btn-danger2:active,
    .btn-danger2.active,
    .open .dropdown-toggle.btn-danger2 {
        background-color: #A73B39;
        border-color: #A73B39;
        color: #FFFFFF;
    }

    .btn-danger2:active,
    .btn-danger2.active,
    .open .dropdown-toggle.btn-danger2 {
        background-image: none;
    }

        .btn-danger2.disabled,
        .btn-danger2.disabled:hover,
        .btn-danger2.disabled:focus,
        .btn-danger2.disabled:active,
        .btn-danger2.disabled.active,
        .btn-danger2[disabled],
        .btn-danger2[disabled]:hover,
        .btn-danger2[disabled]:focus,
        .btn-danger2[disabled]:active,
        .btn-danger2.active[disabled],
        fieldset[disabled] .btn-danger2,
        fieldset[disabled] .btn-danger2:hover,
        fieldset[disabled] .btn-danger2:focus,
        fieldset[disabled] .btn-danger2:active,
        fieldset[disabled] .btn-danger2.active {
            background-color: #a73225;
            border-color: #a73225;
        }



#ChkStatus .btn-outline,
.ticket-col-status .btn-outline {
    color: inherit !important;
    background-color: transparent !important;
    transition: all .5s;
    border: 1px solid currentColor !important;
}
#ChkStatus .btn.ChkStatus,
.ticket-col-status .btn.ChkStatus {
    margin-right: 5px;
    margin-bottom: 5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 3px;
    display: inline-block;
}
#ChkStatus .btn.ChkStatus input[type="checkbox"],
.ticket-col-status .btn.ChkStatus input[type="checkbox"] {
    display: none;
}

#ChkStatus .btn-primary.btn-outline, .ticket-col-status .btn-primary.btn-outline { color: #003C71 !important; border-color: #003C71 !important; background-color: transparent !important; }
#ChkStatus .btn-primary2.btn-outline, .ticket-col-status .btn-primary2.btn-outline { color: #9b59b6 !important; border-color: #9b59b6 !important; background-color: transparent !important; }
#ChkStatus .btn-success.btn-outline, .ticket-col-status .btn-success.btn-outline { color: #7f8558 !important; border-color: #7f8558 !important; background-color: transparent !important; }
#ChkStatus .btn-success2.btn-outline, .ticket-col-status .btn-success2.btn-outline { color: #c7d474 !important; border-color: #c7d474 !important; background-color: transparent !important; }
#ChkStatus .btn-info.btn-outline, .ticket-col-status .btn-info.btn-outline { color: #81B0D2 !important; border-color: #81B0D2 !important; background-color: transparent !important; }
#ChkStatus .btn-warning.btn-outline, .ticket-col-status .btn-warning.btn-outline { color: #dec856 !important; border-color: #dec856 !important; background-color: transparent !important; }
#ChkStatus .btn-warning2.btn-outline, .ticket-col-status .btn-warning2.btn-outline { color: #D28A44 !important; border-color: #D28A44 !important; background-color: transparent !important; }
#ChkStatus .btn-danger.btn-outline, .ticket-col-status .btn-danger.btn-outline { color: #bc3f3f !important; border-color: #bc3f3f !important; background-color: transparent !important; }
#ChkStatus .btn-danger2.btn-outline, .ticket-col-status .btn-danger2.btn-outline { color: #8b2f2f !important; border-color: #8b2f2f !important; background-color: transparent !important; }

/* Hover states */
#ChkStatus .btn-primary.btn-outline:hover, .ticket-col-status .btn-primary.btn-outline:hover,
#ChkStatus .btn-primary2.btn-outline:hover, .ticket-col-status .btn-primary2.btn-outline:hover,
#ChkStatus .btn-success.btn-outline:hover, .ticket-col-status .btn-success.btn-outline:hover,
#ChkStatus .btn-success2.btn-outline:hover, .ticket-col-status .btn-success2.btn-outline:hover,
#ChkStatus .btn-info.btn-outline:hover, .ticket-col-status .btn-info.btn-outline:hover,
#ChkStatus .btn-warning.btn-outline:hover, .ticket-col-status .btn-warning.btn-outline:hover,
#ChkStatus .btn-warning2.btn-outline:hover, .ticket-col-status .btn-warning2.btn-outline:hover,
#ChkStatus .btn-danger.btn-outline:hover, .ticket-col-status .btn-danger.btn-outline:hover,
#ChkStatus .btn-danger2.btn-outline:hover, .ticket-col-status .btn-danger2.btn-outline:hover {
    color: #fff !important;
}
#ChkStatus .btn-primary.btn-outline:hover, .ticket-col-status .btn-primary.btn-outline:hover { background-color: #003C71 !important; }
#ChkStatus .btn-primary2.btn-outline:hover, .ticket-col-status .btn-primary2.btn-outline:hover { background-color: #9b59b6 !important; }
#ChkStatus .btn-success.btn-outline:hover, .ticket-col-status .btn-success.btn-outline:hover { background-color: #7f8558 !important; }
#ChkStatus .btn-success2.btn-outline:hover, .ticket-col-status .btn-success2.btn-outline:hover { background-color: #c7d474 !important; }
#ChkStatus .btn-info.btn-outline:hover, .ticket-col-status .btn-info.btn-outline:hover { background-color: #81B0D2 !important; }
#ChkStatus .btn-warning.btn-outline:hover, .ticket-col-status .btn-warning.btn-outline:hover { background-color: #dec856 !important; }
#ChkStatus .btn-warning2.btn-outline:hover, .ticket-col-status .btn-warning2.btn-outline:hover { background-color: #D28A44 !important; }
#ChkStatus .btn-danger.btn-outline:hover, .ticket-col-status .btn-danger.btn-outline:hover { background-color: #bc3f3f !important; }
#ChkStatus .btn-danger2.btn-outline:hover, .ticket-col-status .btn-danger2.btn-outline:hover { background-color: #8b2f2f !important; }

/* Active states */
#ChkStatus .btn-primary.active, .ticket-col-status .btn-primary.active {
    background-color: #1A517A !important;
    border-color: #1A517A !important;
    color: #FFFFFF !important;
}
#ChkStatus .btn-primary2.active, .ticket-col-status .btn-primary2.active {
    background-color: #a86ebf !important;
    border-color: #a86ebf !important;
    color: #FFFFFF !important;
}
#ChkStatus .btn-success.active, .ticket-col-status .btn-success.active {
    background-color: #8C9169 !important;
    border-color: #8C9169 !important;
    color: #FFFFFF !important;
}
#ChkStatus .btn-success2.active, .ticket-col-status .btn-success2.active {
    background-color: #c8d474 !important;
    border-color: #c8d474 !important;
    color: #FFFFFF !important;
}
#ChkStatus .btn-info.active, .ticket-col-status .btn-info.active {
    background-color: #9DC1E0 !important;
    border-color: #9DC1E0 !important;
    color: #FFFFFF !important;
}
#ChkStatus .btn-warning.active, .ticket-col-status .btn-warning.active {
    background-color: #E1CE67 !important;
    border-color: #E1CE67 !important;
    color: #FFFFFF !important;
}
#ChkStatus .btn-warning2.active, .ticket-col-status .btn-warning2.active {
    background-color: #D28A44 !important;
    border-color: #D28A44 !important;
    color: #FFFFFF !important;
}
#ChkStatus .btn-danger.active, .ticket-col-status .btn-danger.active {
    background-color: #C35353 !important;
    border-color: #C35353 !important;
    color: #FFFFFF !important;
}
#ChkStatus .btn-danger2.active, .ticket-col-status .btn-danger2.active {
    background-color: #A73B39 !important;
    border-color: #A73B39 !important;
    color: #FFFFFF !important;
}

/* Set select2 dropdown height to match input height (44px) */
form .col-12.col-lg-6:first-of-type .select2-container .select2-selection--single {
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
}
form .col-12.col-lg-6:first-of-type .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
}

/* Active tab style matching HubBroker theme selected color */
.nav-tabs > li.active > a,
.nav-tabs > li.nav-item.active > a.nav-link,
.nav-tabs .nav-link.active {
    color: var(--hb-primary) !important;
    border-top: 3px solid var(--hb-primary) !important;
    font-weight: bold !important;
}

/* Style password status alert to match HubBroker theme selected color */
#ShowPasswordStatus.alert-info {
    background-color: var(--hb-surface-alt, #f7f9fa) !important;
    border: 1px solid var(--hb-border-color, #e4e5e7) !important;
    border-left: 4px solid var(--hb-primary) !important;
    color: var(--hb-primary) !important;
    font-weight: 600 !important;
}

/* Datatables Row Selection Theme Color overrides */
table.dataTable > tbody > tr.selected > *,
table.dataTable.table-striped > tbody > tr.odd.selected > *,
table.dataTable.table-striped > tbody > tr.even.selected > *,
table.dataTable.table-hover > tbody > tr.selected:hover > * {
    background-color: var(--hb-primary-light) !important;
    box-shadow: inset 0 0 0 9999px var(--hb-primary-light) !important;
    color: var(--hb-text-color, #6a6c6f) !important;
}

table.dataTable > tbody > tr.selected a:not(.btn) {
    color: var(--hb-primary) !important;
}

[data-bs-theme="dark"] table.dataTable > tbody > tr.selected > *,
[data-bs-theme="dark"] table.dataTable.table-striped > tbody > tr.odd.selected > *,
[data-bs-theme="dark"] table.dataTable.table-striped > tbody > tr.even.selected > *,
[data-bs-theme="dark"] table.dataTable.table-hover > tbody > tr.selected:hover > * {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), 0.2) !important;
    color: var(--hb-text-color, #f8fafc) !important;
}

/* Zebra row striping for My Hub Adaptors Table */
#MyHubAdaptorsTable tbody tr:nth-child(even) td {
    background-color: var(--hb-surface-alt, #f7f9fa);
}

/* Redesign Phase 1A My Adaptors Styling */
.hb-header-container {
    background-color: #ffffff;
    border: 1px solid var(--hb-border-color, #e4e5e7);
    border-radius: 4px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.hb-summary-row {
    margin-bottom: 1.25rem;
}
.hb-summary-card {
    background-color: #ffffff;
    border: 1px solid var(--hb-border-color, #e4e5e7);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hb-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.hb-summary-card .card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hb-text-color, #676a6c);
    line-height: 1.2;
}
.hb-summary-card .card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888888;
    margin-top: 2px;
}
.hb-summary-card-border-green {
    border-top: 3px solid #1ab394;
}
.hb-summary-card-border-yellow {
    border-top: 3px solid #f8ac59;
}
.hb-summary-card-border-red {
    border-top: 3px solid #ed5565;
}
.hb-summary-card-border-primary {
    border-top: 3px solid var(--hb-primary, #7f8558);
}

.btn-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
}
.btn-action-icon:hover {
    transform: scale(1.08);
}
.btn-action-icon i {
    font-size: 12px;
}

.btn-action-run { background-color: #f3f3f4; color: #1ab394; border: 1px solid #1ab394; }
.btn-action-run:hover { background-color: #1ab394; color: white; }
.btn-action-upload { background-color: #f3f3f4; color: #34495e; border: 1px solid #34495e; }
.btn-action-upload:hover { background-color: #34495e; color: white; }
.btn-action-history { background-color: #f3f3f4; color: #23c6c8; border: 1px solid #23c6c8; }
.btn-action-history:hover { background-color: #23c6c8; color: white; }
.btn-action-clone { background-color: #f3f3f4; color: #f8ac59; border: 1px solid #f8ac59; }
.btn-action-clone:not(.disabled):hover { background-color: #f8ac59; color: white; }
.btn-action-edit { background-color: #f3f3f4; color: #1c84c6; border: 1px solid #1c84c6; }
.btn-action-edit:not(.disabled):hover { background-color: #1c84c6; color: white; }
.btn-action-archive { background-color: #f3f3f4; color: #7f8558; border: 1px solid #7f8558; }
.btn-action-archive:not(.disabled):hover { background-color: #7f8558; color: white; }
.btn-action-restore { background-color: #f3f3f4; color: #888; border: 1px solid #888; }
.btn-action-restore:not(.disabled):hover { background-color: #888; color: white; }
.btn-action-delete { background-color: #f3f3f4; color: #ed5565; border: 1px solid #ed5565; }
.btn-action-delete:hover { background-color: #ed5565; color: white; }

.adaptor-card {
    transition: all 0.2s ease-in-out;
}
.adaptor-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.gateway-link {
    color: var(--hb-primary, #7f8558) !important;
    font-weight: 600;
}
.gateway-link:hover {
    text-decoration: underline !important;
}
.gateway-section-title {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px;
}
.gateway-type-text {
    font-size: 10px;
    color: #999;
}
.gateway-name-text {
    font-size: 12px;
    font-weight: 600;
    color: #444;
}
.gateway-icon-container {
    width: 32px;
    height: 32px;
    background-color: #f3f3f4;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hb-border-color, #e4e5e7);
}
.gateway-icon-container img {
    max-height: 20px;
    max-width: 20px;
}
.gateway-icon-container i {
    font-size: 14px;
    color: #676a6c;
}
.transform-connector-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid var(--hb-border-color, #e4e5e7);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.transform-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #676a6c;
    transition: all 0.2s ease;
}
.transform-icon-btn.is-mapped {
    color: #1ab394;
    background-color: #e6f7f4;
}
.transform-icon-btn.is-unmapped {
    color: #ed5565;
    background-color: #fdf2f2;
}
.transform-icon-btn:hover {
    transform: rotate(180deg);
}

.table-header-integrated, .table-footer-integrated {
    background-color: #fafbfc;
}

/* AI Mode & Search Panel CSS */
.hb-ai-prompt-chip {
    border-radius: 12px;
    font-size: 11px;
    padding: 0.2rem 0.6rem;
    background-color: #f3f3f4;
    border: 1px solid #e4e5e7;
    color: #676a6c;
    transition: all 0.15s ease-in-out;
}
.hb-ai-prompt-chip:hover {
    background-color: #e4e5e7;
    color: #333333;
}
.hb-ai-filter-chip {
    transition: all 0.2s ease;
}
.hb-ai-filter-chip:hover {
    background-color: #23c6c8 !important;
    transform: translateY(-1px);
}
.hb-ai-loading {
    border-top: 1px dashed #e4e5e7;
}
.hb-ai-interpretation {
    border-color: #d1adea !important; /* Soft violet indicator borders for AI highlights */
    border-left-width: 4px !important;
}

/* Voice Waveform Styling */
.ai-waveform-container {
    height: 18px;
    display: none !important;
    align-items: center;
    gap: 2px;
}
.ai-waveform-container.listening {
    display: inline-flex !important;
}
.ai-waveform-container .bar {
    width: 3px;
    height: 6px;
    background-color: var(--hb-primary, #1ab394);
    border-radius: 2px;
    transition: height 0.2s ease, background-color 0.2s ease;
}
.ai-waveform-container.listening .bar {
    animation: pulseWaveform 0.8s ease-in-out infinite alternate;
}
.ai-waveform-container.listening .bar-1 { animation-delay: 0.1s; }
.ai-waveform-container.listening .bar-2 { animation-delay: 0.3s; }
.ai-waveform-container.listening .bar-3 { animation-delay: 0.5s; }

@keyframes pulseWaveform {
    0% { height: 6px; }
    100% { height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-waveform-container.listening .bar {
        animation: none;
        height: 12px;
    }
}


#aiSearchSubmit {
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.2s ease;
}
#aiSearchSubmit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(26, 179, 148, 0.2);
}

.hb-ai-prompt-chip {
    background-color: #f3f3f4 !important;
    color: #676a6c !important;
    border: 1px solid #e4e5e7 !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.hb-ai-prompt-chip:hover {
    background-color: var(--hb-primary, #1ab394) !important;
    border-color: var(--hb-primary, #1ab394) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(26, 179, 148, 0.15);
}

/* ==========================================================================
   V6 GLOBAL UI/UX MODERNIZATION UTILITIES
   ========================================================================== */

/* 0. Modern Typography (System Font Stack Upgrade) */
body, h1, h2, h3, h4, h5, h6, .form-control, .btn, .label, .badge {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

/* Toolbar Alignment: Normalize Badge & Button heights to match exactly */
#my-adaptors-content-wrapper .d-flex .badge,
#my-adaptors-content-wrapper .d-flex .btn-sm,
#my-adaptors-content-wrapper .d-flex .btn-group .btn-sm {
    height: 31px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* 2. Modern Form Inputs & Select2 Rounded Look */
.form-control, .select2-container .select2-choice, .select2-choices {
    border-radius: 8px !important;
    border: 1px solid var(--hb-border-color, #d2d6de) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.form-control:focus, .select2-container-active .select2-choice {
    border-color: var(--hb-primary, #7f8558) !important;
    box-shadow: 0 0 0 3px rgba(127, 133, 88, 0.15) !important;
}


/* 4. Modern Pastel Badge / Label Indicators */
.label, .badge {
    border-radius: 6px !important; /* Clean rounded corners instead of capsule pills */
    padding: 5px 10px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
}
.label-success, .badge-success {
    background-color: rgba(34, 197, 94, 0.12) !important;
    color: #166534 !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
}
.label-warning, .badge-warning {
    background-color: rgba(234, 179, 8, 0.12) !important;
    color: #854d0e !important;
    border-color: rgba(234, 179, 8, 0.2) !important;
}
.label-danger, .badge-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #991b1b !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}
.label-info, .badge-info {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #1e40af !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

/* Dark theme specific adjustments for Pastel Badges */
[data-bs-theme="dark"] .label-success, [data-bs-theme="dark"] .badge-success {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .label-warning, [data-bs-theme="dark"] .badge-warning {
    background-color: rgba(234, 179, 8, 0.2) !important;
    color: #fde047 !important;
}
[data-bs-theme="dark"] .label-danger, [data-bs-theme="dark"] .badge-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}
[data-bs-theme="dark"] .label-info, [data-bs-theme="dark"] .badge-info {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}
/* Ensure V6 "No Source Available" and "No Destination Available" warnings use V4 red highlight colors instead of green */
#my-adaptors-content-wrapper span[title*="source available"],
#my-adaptors-content-wrapper span[title*="destination available"],
#my-adaptors-content-wrapper span[title*="no source available"],
#my-adaptors-content-wrapper span[title*="no destination available"] {
    color: #c0392b !important;
    border-color: #c0392b !important;
    background-color: #fce4e4 !important;
}
#my-adaptors-content-wrapper span[title*="source available"] i,
#my-adaptors-content-wrapper span[title*="destination available"] i {
    color: #c0392b !important;
}

/* Force Select2 dropdown containers to occupy 100% width of their grid column wrappers */
.select2-container {
    width: 100% !important;
}

.ActivateCustomer {
    background-color: #c8cca9 !important;
}

.button-btn-warning3 {
    background-color: #f3ebc3 !important;
}

/* Brand Logo display states aligned with sidenav sizes */
html[data-sidenav-size="collapse"] .logo-lg,
html[data-sidenav-size="offcanvas"] .logo-lg {
    display: none !important;
}
html[data-sidenav-size="collapse"] .logo-sm,
html[data-sidenav-size="offcanvas"] .logo-sm {
    display: inline-block !important;
}

html[data-sidenav-size="default"] .logo-lg {
    display: inline-block !important;
}
html[data-sidenav-size="default"] .logo-sm {
    display: none !important;
}