:root {
    --tw-indent: 1.0rem; /* base indent per level */
    --tw-row-padding-y: .25rem;
    --tw-row-padding-x: .5rem;
    --tw-row-gap: .5rem;
    --tw-row-radius: .375rem;
    --tw-row-hover-bg: rgba(0,0,0,0.04);
    --tw-row-focus-ring: #2684ff33;
    /* If LeptonX exposes CSS vars, prefer these: 
     --lpx-navbar-text-color, --lpx-navbar-icon-color, etc. */
}


/* 1) Hide the theme's built-in filter everywhere EXCEPT our custom one */
.lpx-menu-filter[data-lpx-menu-filter="sidebar"]:not([data-flex-filter="custom"]) {
    display: none !important;
}

#lpx-wrapper .lpx-sidebar-container .lpx-menu-filter:not([data-flex-filter="custom"]),
#lpx-wrapper .lpx-sidebar .lpx-menu-filter:not([data-flex-filter="custom"]) {
    display: none !important;
}

/* 2) Make sure OUR filter row is visible and laid out */
.lpx-menu-filter[data-flex-filter="custom"] {
    display: flex !important;
    align-items: center;
    gap: .5rem;
}

/* 3) Neutralize any "hidden until hover" behavior in OUR row */
#flex-mainmenu-root .lpx-menu-filter[data-flex-filter="custom"] .hidden-in-hover-trigger {
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4) Ensure the filter icon actually shows */
#flex-mainmenu-root .lpx-menu-filter[data-flex-filter="custom"] .menu-filter-icon {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 5) Optional: keep the clear 'x' visible and clickable */
#flex-mainmenu-root .lpx-menu-filter[data-flex-filter="custom"] .menu-filter-clear {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    opacity: .8;
}

    #flex-mainmenu-root .lpx-menu-filter[data-flex-filter="custom"] .menu-filter-clear:hover {
        opacity: 1;
    }


/* BankTree.razor.css */
.bank-tree-container {
    margin-left: 1.75rem;
}

.tv-row {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .125rem .25rem;
    border-radius: .25rem;
}

    .tv-row:hover {
        background: rgba(0,0,0,.06);
    }

.tv-caret {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
}

.tv-loading {
    color: var(--bs-secondary, #6c757d);
    font-size: .85rem;
    margin-left: 1.5rem;
}

/* root */
#flex-mainmenu-root.flex-menu {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* filter row spacing */
#flex-mainmenu-root .lpx-menu-filter[data-flex-filter="custom"] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
}

/* lists */
.flex-menu-list {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

    /* indentation per level */
    .flex-menu-list.level-0 {
        padding-left: .25rem;
    }

    .flex-menu-list.level-1 {
        padding-left: 1.25rem;
    }

    .flex-menu-list.level-2 {
        padding-left: 2.0rem;
    }

    .flex-menu-list.level-3 {
        padding-left: 2.75rem;
    }

/* row */
.flex-menu-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
    border-radius: .375rem;
}

/* hover/active */
.flex-menu-item .flex-menu-row:hover {
    background: rgba(0,0,0,.06);
}

.flex-menu-item.is-active > .flex-menu-row,
.flex-menu-item .menu-link.active {
    background: rgba(0,0,0,.08);
    font-weight: 600;
}

/* icons + caret */
.flex-menu-row .icon {
    font-size: 1rem;
    opacity: .85;
}

/* FBL 20251230 */
.flex-menu-item .lpx-icon {
    width: 20px;
}


.flex-menu-row .caret {
    font-size: .75rem;
    opacity: .85;
}

/* leaf link */
.flex-menu-row.leaf-row .menu-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
/* FBL 20260420 START*/
/* host row */
.flex-menu-row.menu-item-has-tree {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

    /* Dynamic settings menu wrappers must stretch */
    .flex-menu-row.menu-item-has-tree > .menu-tree,
    .flex-menu-row.menu-item-has-tree .menu-tree-base,
    .flex-menu-row.menu-item-has-tree .flex-dynamic-settings-menu {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
/* FBL 20260420 SLUT*/

/* for debug purposes
.flex-menu-row.menu-item-has-tree {
    outline: 2px solid green !important;
}

    .flex-menu-row.menu-item-has-tree > .menu-tree {
        outline: 2px solid orange !important;
    }

*/


/* group header clickable */
.group-header {
    cursor: pointer;
}

/* clear button in filter */
.menu-filter-clear {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    opacity: .7;
}

    .menu-filter-clear:hover {
        opacity: 1;
    }

/* remove any default left padding/margin to make the root flush */
.menu-tree ul,
.menu-tree li {
    padding-left: 0.55em !important;
    margin-left: 0 !important;
}

/* optional: tighten the left gutter the dynamic settings menu may reserve */
.menu-tree {
    padding-left: 0.25em !important;
    margin-left: 0 !important;
}

.menu-tree-base {
    margin-left: -2.25em !important;
    width: 100%;
}
/*
    .menu-tree .tree-item {
        width: 100%;
        padding: .25rem .5rem;
        border-radius: .375rem;
        transition: background-color .12s ease-in-out, color .12s ease-in-out;
        cursor: pointer;
    }


        .menu-tree .tree-item:hover {
            background-color: var(--bs-gray-200);
            color: var(--bs-body-color);
        }

@media (prefers-color-scheme: dark) {
    .menu-tree .tree-item:hover {
        background-color: rgba(var(--bs-primary-rgb), .10);
    }
}

.menu-tree .tree-item:hover i {
    color: var(--bs-primary);
}

.menu-tree .tree-item:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), .4);
    outline-offset: 2px;
}

.menu-tree .tree-item a {
    color: inherit;
    text-decoration: none;
}

.menu-tree .tree-item:hover a {
    color: inherit;
}


    / * shrink the chevron column * /
    .menu-tree .expander {
        width: 0.75rem; / * or even 0 if safe * /
        margin-inline-start: 0;
    }

    / * ensure the text starts right after your icon * /
    .menu-tree .content {
        margin-left: 0;
        padding-left: 0;
    }
*/


.menu-tree .tree-item {
    display: flex;
    align-items: center;
    gap: var(--tw-row-gap);
    padding: var(--tw-row-padding-y) 0 var(--tw-row-padding-y) var(--tw-row-padding-x);
    /* indentation */
    padding-inline-start: calc(var(--tw-indent) * attr(data-level number, 0));
    border-radius: var(--tw-row-radius);
    /* optional guide line */
    position: relative;
}

    /*
        .menu-tree .tree-item::before {
            /* light vertical guide aligned with indentation * /
            content: "";
            position: absolute;
            inset-block: 0;
            inset-inline-start: calc(attr(data-level number, 0) * var(--tw-indent) - .5rem);
            width: 1px;
            background: rgba(128,128,128,0.25);
            pointer-events: none;
            /* only show guides for level >= 1 * /
            opacity: calc(attr(data-level number, 0) > 0 ? 1 : 0);
        }
    */
        /* Non-destructive hide (you already use a similar class) */
        .menu-tree .tree-item.is-hidden {
            display: none;
        }

        /* Hover + focus */
        .menu-tree .tree-item:hover {
            background: var(--tw-row-hover-bg);
        }

        .menu-tree .tree-item:focus-visible {
            outline: 2px solid var(--tw-row-focus-ring);
            outline-offset: 2px;
        }

        /* Icon + text alignment */
        .menu-tree .tree-item i.icon {
            color: var(--lpx-navbar-icon-color, #8898a4); /* LeptonX-friendly */
            font-size: 1rem;
            inline-size: 1.25rem; /* reserve space to align labels */
            text-align: center;
        }

        .menu-tree .tree-item .menu-label {
            color: var(--lpx-navbar-text-color, #2f3d4a);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    /* Toggle caret/button (if you render one) */
    .menu-tree .tw-toggle {
        border: none;
        background: transparent;
        color: var(--lpx-navbar-icon-color, #8898a4);
        inline-size: 1.25rem;
        cursor: pointer;
    }

        .menu-tree .tw-toggle:hover {
            color: var(--lpx-navbar-text-color, #2f3d4a);
        }

    /* Children container — compact spacing */
    .menu-tree .tree-item__children {
        margin-inline-start: .25rem;
        border-inline-start: 1px dashed rgba(128,128,128,0.2);
        padding-inline-start: .5rem;
    }

    /* Selected row (if you set a 'selected' class) */
    .menu-tree .tree-item.is-selected {
        background: rgba(38,132,255,0.10);
        border: 1px solid rgba(38,132,255,0.30);
    }

/* High-contrast/dark-friendly: prefer variables, avoid hard blacks */
@media (prefers-color-scheme: dark) {
    .menu-tree .tree-item::before {
        background: rgba(255,255,255,0.12);
    }

    .menu-tree .tree-item:hover {
        background: rgba(255,255,255,0.06);
    }
}


.menu-tree .tw-toggle {
    inline-size: 1.25rem; /* same width as icon slot */
    block-size: 1.25rem;
    display: inline-grid;
    place-items: center;
    margin-inline-end: .125rem;
}


.menu-tree .tree-item__children {
    transition: opacity .12s ease, transform .12s ease;
}

.menu-tree .tree-item.is-collapsing .tree-item__children {
    opacity: 0;
    transform: translateY(-2px);
}

.menu-tree .tree-item.is-expanding .tree-item__children {
    opacity: 1;
    transform: translateY(0);
}


.menu-tree .tree-badge {
    margin-inline-start: .25rem;
    font-size: .70rem;
    padding: .1rem .25rem;
    border-radius: .25rem;
    background: rgba(0,0,0,0.06);
    color: #556;
}


.menu-tree .tree-item a {
    color: inherit;
    text-decoration: none;
}

.menu-tree .tree-item:hover a {
    color: inherit;
}

/* 20250112 */


/* Reserve icon gutter and shift guides */
.menu-tree {
    --icon-gutter: 1.25rem;
}
    /* tune if needed */

    .menu-tree .tree-item::before {
        inset-inline-start: calc(var(--icon-gutter) + attr(data-level number, 0) * var(--tw-indent) - 0.25rem);
    }

    /* If the dashed children guide also looks like a trunk, push it right */
    .menu-tree .tree-item__children {
        margin-inline-start: 0;
        padding-inline-start: calc(var(--icon-gutter) + .25rem);
        border-inline-start: 1px dashed rgba(128,128,128,1.02); 
    }



/* Base icon rendering driven by CSS custom properties */
.lpx-icon.icon {
    display: inline-block;
    width: var(--ico-size, 20px);
    height: var(--ico-size, 20px);
    /* Using mask + currentColor tint */

    background-image: var(--ico);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


@media (prefers-color-scheme: dark) {
    .lpx-icon.icon {
        background-image: var(--ico-dark, var(--ico));
    }
}

/* Hover/Focus (uses --ico-focus if provided; otherwise stays the same) */
.lpx-icon.icon:hover,
.lpx-icon.icon:focus {
    background-image: var(--ico-focus, var(--ico));
}

/* Keep size helpers so ico-s-18 etc. continue to work */
.ico-s-16 {
    --ico-size: 16px;
}

.ico-s-18 {
    --ico-size: 18px;
}

.ico-s-20 {
    --ico-size: 20px;
}


/* Keep the outer row transparent even when it (or its children) are focused */
.flex-menu-row.menu-item-has-tree,
.flex-menu-row.menu-item-has-tree:hover,
.flex-menu-row.menu-item-has-tree:focus,
.flex-menu-row.menu-item-has-tree:focus-within {
    background: transparent !important;
    box-shadow: none !important; /* in case theme adds a glow */
}

    /* Neutralize link’s background states inside that special row */
    .flex-menu-row.menu-item-has-tree .menu-link,
    .flex-menu-row.menu-item-has-tree .menu-link:hover,
    .flex-menu-row.menu-item-has-tree .menu-link:focus,
    .flex-menu-row.menu-item-has-tree .menu-link:active,
    .flex-menu-row.menu-item-has-tree .menu-link.active {
        background: transparent !important;
        box-shadow: none !important;
        /* optional if you see rounded pills from the theme: */
        border-radius: 0 !important;
    }

.lpx-icon.icon {
    display: inline-block;
    width: var(--ico-size, 1em);
    height: var(--ico-size, 1em);
    background-color: transparent;
    background-image: var(--ico);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

/* fallback layer */
.lpx-icon.icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--ico-fallback);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* fallback hidden by default */
    opacity: 0;
}

/* Show fallback if main icon fails or is fully transparent */
.lpx-icon.icon:not([data-icon-loaded="true"])::after {
    opacity: 1;
}


    .lpx-icon.icon::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--ico-fallback-2);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0;
    }

    /* Show tertiary only if both primary + secondary fail */
    .lpx-icon.icon[data-fallback-stage="2"]::before {
        opacity: 1;
    }


.user-block-col{
    padding: 2px;
}
.user-block {
    padding: 3px 4px; /* the “few pixels around” the content */
    border-radius: 8px; /* looks nicer inside cards */

   /* background-size: cover; */
    background-position: center;
    /* In case you use semi-transparent backgrounds, keep it inside padding box */
    background-clip: padding-box;
    min-height : 32px;
}
.user-attributes-block {
    background-image: url(https://static.kombine.services/Icon1/edit_attributes.svg);
    background-repeat: no-repeat;
    background-color: rgba(248, 255, 255, 0.98);
    background-blend-mode: lighten;
}

.user-tags-block {
    background-image: url(https://static.kombine.services/Icon1/tags.svg);
    background-repeat: no-repeat;
    background-color: rgba(255, 248, 255, 0.98);
    background-blend-mode: lighten;
}

.user-locations-block {
    background-image: url(https://static.kombine.services/Icon1/edit_location.svg);
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 248, 0.98);
    background-blend-mode: lighten;
}

.lpx-theme-dark .user-block.user-attributes-block {
    background-image: none;
    background-color: rgba(248, 255, 255, 0.12) !important;
}

.lpx-theme-dark .user-block.user-tags-block {
    background-image: none;
    background-color: rgba(255, 248, 255, 0.12) !important;
}

.lpx-theme-dark .user-block.user-locations-block {
    background-image: none;
    background-color: rgba(255, 255, 248, 0.12) !important;
}

.mobile-pager-area {
    justify-content: center;
    align-items: center;
    display: flex;
    column-gap: 2px;
}

.vert-align-middle {
    vertical-align :middle;
}

.height-avail-webkit-fill {
    height: -webkit-fill-available;
}

/* dark mode */


/* for future use */
[data-theme="dark"] img.invertable {
    filter: invert(1) brightness(1.3);
}

[data-theme="light"] img.invertable {
    filter: none;
}
    
/*
[data-theme="dark"] img.invertable path {
    fill: var(--lpx-icon-color) !important;
}
*/


[data-theme="dark"] .lpx-icon {
    filter: invert(1) brightness(1.3);
}


/* Put this in a global stylesheet loaded after Lepton */
[data-theme="dark"] {
    --bs-body-bg: var(--lpx-bg-color);
    --bs-body-color: var(--lpx-text-color);
    --bs-border-color: var(--lpx-border-color);
    --bs-secondary-color: var(--lpx-text-color-secondary);
    --bs-secondary-bg: var(--lpx-surface-2);
    --bs-tertiary-bg: var(--lpx-surface-3, var(--lpx-surface-2));
    --bs-link-color: var(--lpx-link-color);
    --bs-link-hover-color: var(--lpx-link-hover-color);
    /* Optional extras if you notice mismatches */
    --bs-heading-color: var(--lpx-text-color);
    --bs-card-bg: var(--lpx-surface);
    --bs-dropdown-bg: var(--lpx-surface);
    --bs-tooltip-bg: var(--lpx-surface-2);
    --bs-popover-bg: var(--lpx-surface);
}

/* quick reference to lepton-x
Text & Icons
--lpx-text-color
--lpx-text-color-secondary
--lpx-icon-color
--lpx-icon-hover-color
--lpx-link-color
--lpx-link-hover-color

Backgrounds & Surfaces
--lpx-bg-color          // page background 
--lpx-surface           // main component/card surface 
--lpx-surface-2         // muted/secondary surface 
--lpx-surface-3         // (optional) tertiary surface if provided by skin 
--lpx-border-color
--lpx-shadow-color

Brand & Semantic
--lpx-primary
--lpx-primary-contrast
--lpx-success
--lpx-warning
--lpx-danger
--lpx-info

Focus & Misc

--lpx-focus-ring
--lpx-muted            // sometimes provided as a convenience 


*/


/*
Make Lepton-x not-pink: (exampler)
:root {
--lpx-primary: #4a90e2;          // New main accent 
--lpx-primary-hover: #3a7ac0;    // Hover accent 
--lpx-primary-active: #326ba6;   // Active state 
--lpx-primary-contrast: #ffffff; // Text/icon on primary 
}

If only dark mode:
[data-theme="dark"] {
    --lpx-primary: #ffcc00;
    --lpx-primary-hover: #e6b800;
    --lpx-primary-active: #cc9f00;
    --lpx-primary-contrast: #000000;
}

Whole UI (backgrounds, text, surface)
:root {
    --lpx-primary: #4a90e2;
    --lpx-primary-hover: #3a7ac0;
    --lpx-primary-active: #326ba6;
    --lpx-primary-contrast: #ffffff;

    --lpx-text-color: #222;
    --lpx-text-color-secondary: #555;
    --lpx-icon-color: #444;

    --lpx-bg-color: #fafafa;
    --lpx-surface: #ffffff;
    --lpx-surface-2: #f2f2f2;
    --lpx-border-color: #ddd;
}
and dark:
[data-theme="dark"] {
    --lpx-text-color: #f5f5f5;
    --lpx-text-color-secondary: #c2c2c2;
    --lpx-icon-color: #e9e9e9;

    --lpx-bg-color: #1b1b1b;
    --lpx-surface: #222;
    --lpx-surface-2: #2a2a2a;
    --lpx-border-color: #333;
}


*/