/* ============================================================
   HBL Global Search Bar
   Bootstrap input-group + hbl-search* semantic classes.
   Light mode : navy icon block + navy border on focus/value.
   Dark mode  : transparent icon/input/border in all states.
   ============================================================ */

/* -- Container (applied to Bootstrap .input-group) ---------- */
.hbl-search {
    position: relative;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100%;
}

/* -- Search icon (input-group-text) ------------------------- */
.hbl-search.input-group .hbl-search-icon {
    flex: 0 0 auto !important;
    background-color: #f8f9fa !important;
    border-color: #d1d5db !important;
    border-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    color: #6c757d !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap;
    min-height: 38px;
    height: 38px;
    padding: 0 0.85rem !important;
}

/* -- Search input (form-control) ---------------------------- */
.hbl-search.input-group .hbl-search-input {
    border-left: 0 !important;
    border-color: #d1d5db !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    background-color: #ffffff !important;
    color: #122d50 !important;
    padding-right: 2.2rem !important;
    box-shadow: none !important;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    height: 38px;
}

.hbl-search.input-group .hbl-search-input::placeholder {
    color: #9ca3af;
}

/* Suppress WebKit native clear button on type="search" */
.hbl-search-input[type="search"]::-webkit-search-cancel-button,
.hbl-search-input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* -- Clear button (absolutely positioned inside the group) -- */
.hbl-search.input-group .hbl-search-clear {
    position: absolute !important;
    top: 50% !important;
    right: 0.35rem !important;
    transform: translateY(-50%) !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    width: 1.55rem !important;
    height: 1.55rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #6c757d !important;
    z-index: 4 !important;
    line-height: 1 !important;
}

.hbl-search.input-group.input-group-sm .hbl-search-icon,
.hbl-search.input-group.input-group-sm .hbl-search-input {
    min-height: 38px;
    height: 38px;
}

/* Show when not [hidden] */
.hbl-search.input-group .hbl-search-clear:not([hidden]) {
    display: inline-flex;
}

.hbl-search.input-group .hbl-search-clear:hover,
.hbl-search.input-group .hbl-search-clear:focus {
    color: var(--pm-orange, #e85d04) !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* -- Focus state : navy icon + navy border ------------------ */
.hbl-search.input-group:focus-within .hbl-search-icon {
    background-color: #122d50 !important;
    border-color: #122d50 !important;
    color: #ffffff !important;
}

.hbl-search.input-group:focus-within .hbl-search-input {
    border-color: #122d50 !important;
    box-shadow: none !important;
}

/* -- Has-value state : navy border -------------------------- */
.hbl-search.input-group.pm-filter-has-value .hbl-search-icon {
    border-color: #122d50 !important;
}

.hbl-search.input-group.pm-filter-has-value .hbl-search-input {
    border-color: #122d50 !important;
}

/* -- DataTable filter container reset ----------------------- */
.dataTables_filter .hbl-search.input-group {
    width: 100%;
}

.dataTables_filter .hbl-search.input-group .hbl-search-input {
    display: block !important;
    width: 1% !important;
}

/* ============================================================
   Dark mode
   ============================================================ */
body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group {
    --hbl-search-border: rgba(159, 176, 199, 0.35);
    --hbl-search-icon-bg: transparent;
    --hbl-search-input-bg: transparent;
    border: 1px solid var(--hbl-search-border) !important;
    border-radius: 0.25rem !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group:focus-within,
body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group.pm-filter-has-value {
    border-color: var(--hbl-search-border) !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group .hbl-search-icon {
    background: transparent !important;
    background-color: var(--hbl-search-icon-bg) !important;
    border-color: transparent !important;
    border-right: 1px solid var(--hbl-search-border) !important;
    box-shadow: none !important;
    color: #9fb0c7 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group .hbl-search-input {
    background: transparent !important;
    background-color: var(--hbl-search-input-bg) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #dfe7f2 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group .hbl-search-input:focus {
    background: transparent !important;
    background-color: var(--hbl-search-input-bg) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group .hbl-search-input::placeholder {
    color: #8d9bb0;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group .hbl-search-clear {
    color: #9fb0c7 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group .hbl-search-clear:focus,
body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group .hbl-search-clear:hover {
    background: transparent !important;
    box-shadow: none !important;
    color: #dfe7f2 !important;
    outline: none !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group:focus-within .hbl-search-icon {
    background: transparent !important;
    background-color: var(--hbl-search-icon-bg) !important;
    border-color: transparent !important;
    border-right: 1px solid var(--hbl-search-border) !important;
    box-shadow: none !important;
    color: #9fb0c7 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group:focus-within .hbl-search-input {
    background: transparent !important;
    background-color: var(--hbl-search-input-bg) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group.pm-filter-has-value .hbl-search-icon {
    background: transparent !important;
    background-color: var(--hbl-search-icon-bg) !important;
    border-color: transparent !important;
    border-right: 1px solid var(--hbl-search-border) !important;
    box-shadow: none !important;
    color: #9fb0c7 !important;
}

body.mod-skin-dark:not(.mod-skin-light) .hbl-search.input-group.pm-filter-has-value .hbl-search-input {
    background: transparent !important;
    background-color: var(--hbl-search-input-bg) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================================
   Sidebar navigation search
   ============================================================ */
.nav-filter .nav-filter-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0 1rem;
}

.page-sidebar .nav-filter {
    overflow: visible;
}

.nav-filter .nav-filter-search-field {
    flex: 1 1 auto;
    min-width: 0;
}

.page-sidebar .nav-filter .hbl-search.input-group {
    --hbl-search-border: rgba(159, 176, 199, 0.35);
    --hbl-search-icon-bg: transparent;
    --hbl-search-input-bg: transparent;
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.page-sidebar .nav-filter input[type="text"].hbl-search-input,
.page-sidebar .nav-filter input[type="text"].hbl-search-input:focus {
    width: 1% !important;
    min-width: 0 !important;
    padding: 0.375rem 2.2rem 0.375rem 0.75rem !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #dfe7f2 !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.page-sidebar .nav-filter .hbl-search.input-group .hbl-search-clear {
    color: #9fb0c7 !important;
    display: inline-flex !important;
    opacity: 0;
    pointer-events: none;
}

.page-sidebar .nav-filter .hbl-search.input-group .hbl-search-clear:not([hidden]),
.page-sidebar .nav-filter .hbl-search.input-group .hbl-search-input:not(:placeholder-shown) ~ .hbl-search-clear,
.page-sidebar .nav-filter .hbl-search.input-group .hbl-search-clear.is-visible {
    display: inline-flex !important;
    opacity: 1;
    pointer-events: auto;
}

.page-sidebar .nav-filter .hbl-search.input-group .hbl-search-clear:hover,
.page-sidebar .nav-filter .hbl-search.input-group .hbl-search-clear:focus {
    background: transparent !important;
    box-shadow: none !important;
    color: #dfe7f2 !important;
    outline: none !important;
}

.page-sidebar .nav-filter .nav-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(159, 176, 199, 0.35);
    border-radius: 0.25rem;
    background: transparent;
    color: #9fb0c7;
    box-shadow: none;
}

.page-sidebar .nav-filter .nav-filter-toggle:hover,
.page-sidebar .nav-filter .nav-filter-toggle:focus {
    border-color: rgba(159, 176, 199, 0.5);
    background: rgba(255, 255, 255, 0.04);
    color: #dfe7f2;
    box-shadow: none;
    outline: none;
}

.page-sidebar.list-filter-active .nav-filter {
    box-shadow: none !important;
}