/* Your Global Styles */

:root .lpx-theme-dim, :root .lpx-theme-dark
{
    --lpx-logo: url('/images/logo/kombine/Kombine_light.svg');
    --lpx-logo-icon: url('/images/logo/kombine/Kombine-K_light.svg');
}

:root .lpx-theme-light
{
    --lpx-logo: url('/images/logo/kombine/Kombine_dark.svg');
    --lpx-logo-icon: url('/images/logo/kombine/Kombine-K_dark.svg');
}

.bankrow-inactive {
    background-color: #FED7D1; /* kombine light red */
    color: #999;
}

.bankicon-cell {
    text-align: center;
    padding: 4px;
}

.bankhighlight-name {
    background-color: #e6f7ff;
    font-weight: bold;
}

.bankmissing-address {
    background-color: #fff3cd;
    color: #856404;
}

@font-face {
    font-family: 'grotesk';
    src: url('/fonts/ABCMonumentGrotesk/ABCMonumentGrotesk-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* good for perceived performance */
}

/* (optional) extras for proper weight mapping */
@font-face {
    font-family: 'grotesk';
    src: url('/fonts/ABCMonumentGrotesk/ABCMonumentGrotesk-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* helps if something reads from :root directly */
    --bs-font-sans-serif: 'grotesk','Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --flex-lpx-footer-reserve: 3.25rem;
}

/* These beat theme rules that set [data-bs-theme="light|dark"] */
html[data-bs-theme="light"],
html[data-bs-theme="dark"] {
    --bs-font-sans-serif: 'grotesk','Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

/* Even more specific: set the resolved variable on body as a fallback */
body {
    --bs-body-font-family: 'grotesk','Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
    scrollbar-gutter: stable !important;
    overflow-y: scroll !important; /* fallback for browsers that don't support scrollbar-gutter */
}


html .lpx-nav-menu .menu-item .menu-item-text,
html .lpx-topbar .menu-item .menu-item-text,
html .lpx-mobile-navbar .menu-item .menu-item-text,
html .lpx-mobile-menu .menu-item .menu-item-text {
    font-family: 'grotesk','Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* font-face weight overrides */

/* Buttons */
.btn, button.btn {
    font-weight: 500 !important;
}

/* Badges */
.badge {
    font-weight: 500 !important;
}

/* Navigation */
.lpx-nav-menu .menu-item .menu-item-text {
    font-weight: 400 !important;
}

.lpx-nav-menu .menu-item:hover .menu-item-text {
    font-weight: 500 !important;
}

/* Headings */
h1, h2, h3 {
    font-weight: 500;
}

h4, h5, h6 {
    font-weight: 400;
}

/* Form labels */
.form-label {
    font-weight: 400 !important;
}

/* Tables */
table th {
    font-weight: 500;
}

table td {
    font-weight: 400;
}

/* Mobile card list for banks */
.bank-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.bank-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.transaction-card__row {
    display: grid;
    grid-template-columns: auto 1fr var(--amt-col, 10ch) var(--amt-col, 10ch);
    align-items: center;
    gap: 12px;
    width: 100%;
}

.transaction-card__left {
    display: contents;
}

.bank-card__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* enables text truncation */
}

.bank-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    flex: 0 0 auto;
}

.bank-card__titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}


.bank-card__transline {
    display: flex;
    flex: 1; /* take remaining width */
    align-items: center;
}


/* Middle column expands */
.trans-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0; /* IMPORTANT in grid/flex to allow shrinking */
}

/* Rightmost numeric columns: fixed width, right aligned */
.amount,
.running {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums; /* Perfect vertical digit alignment */
}


.bank-card__bank {
    font-weight: 500; /* Monument Grotesk Medium per your system */
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.bank-card__name {
    font-weight: 400; /* Regular */
    font-size: 14px;
   /* color: var(--bs-secondary-color); */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-card__name {
    font-weight: 400; /* Regular */
    font-size: 14px;
    /* color: var(--bs-secondary-color); */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.bank-card__actions {
    flex: 0 0 auto;
}

.transaction-card__actions {
    margin-right : 4px;
}

/* 4 columns: button space already outside, so text + amount + sum */
.trans-grid {
    display: grid;
    grid-template-columns: 1fr 8ch 8ch; /*  Adjust 8ch to taste */
    align-items: center;
    column-gap: 12px;
    width: 100%;
}

/* new transaction lines */


/* Default layout (larger screens): action | trans-text | amount | running */
.smalltransaction-card__row {
    display: grid;
    grid-template-columns: auto 1fr var(--amt-col, 10ch) var(--amt-col, 10ch);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 4px 2px 2px 2px;
}

.smalltransaction-card__left {
    display: contents;
}

.smalltrans-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}


.smallamount,
.smallrunning {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


/* Small mobile: action | amount | running, then trans-text spans full width below */
@media (max-width: 480px) {
    .smalltransaction-card__row {
        grid-template-columns: auto var(--amt-col, 10ch) var(--amt-col, 10ch);
        grid-template-rows: auto auto;
        row-gap: 4px;
    }

    .smalltrans-text {
        grid-column: 1 / -1; /* span all 3 columns */
        grid-row: 2;
        white-space: normal; /* allow wrapping on small screens */
        overflow: visible;
        text-overflow: unset;
        font-size: 0.875rem;
        color: var(--text-muted, #666);
    }

    .smalltransaction-card__actions {
        grid-column: 1;
        grid-row: 1;
    }

    .smallamount {
        grid-column: 2;
        grid-row: 1;
    }

    .smallrunning {
        grid-column: 3;
        grid-row: 1;
    }
}

/* Extra narrow phones need the two amount fields stacked so the action button keeps room. */
@media (max-width: 400px) {
    .smalltransaction-card__row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 8px;
    }

    .smalltransaction-card__actions {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: start;
    }

    .smallamount {
        grid-column: 2;
        grid-row: 1;
    }

    .smallrunning {
        grid-column: 2;
        grid-row: 2;
    }

    .smalltrans-text {
        grid-column: 1 / -1;
        grid-row: 3;
    }
}

/* Zebra striping between sublines */
.smallsubline:nth-child(even) {
    background-color: var(--subline-stripe, rgba(0, 0, 0, 0.015));
}

.smallsubline + .smallsubline {
    border-top: 1px solid var(--subline-divider, rgba(0, 0, 0, 0.08));
}

/* */

.bank-card__meta {
    margin-top: 8px;
    font-size: 13px;
}

    .bank-card__meta .label {
        /*  color: var(--bs-secondary-color);*/
        color: var(--lpx-text-color-secondary);
        margin-right: 6px;
    }



button.filter-btn {
    padding-left: 0.675rem !important;
    padding-right: 0.675rem !important;
}

.date-range-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Inputs should grow and align nicely */
.date-input {
    flex: 1 1 auto;
    min-width: 120px; /* prevents tiny collapse on mobile */
}

/* Buttons should not grow */
.quick-btn {
    flex: 0 0 auto;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Mobile behavior */
@media (max-width: 576px) {
    .date-range-container {
        flex-direction: row;
    }

    .date-input {
        flex: 1 1 45%; /* 2 inputs side-by-side */
    }

    .quick-btn {
        flex: 1 1 45%; /* 2 buttons side-by-side */
        text-align: center;
    }
}

/* CustomDateRangePicker unified input/button height */


/* --- CustomDateRangePicker grouping --- */
.cdrp {
    display: flex;
    flex-wrap: wrap; /* groups can wrap as units */
    gap: .5rem 1rem;
}

/* Two atomic groups that never wrap internally */
.cdrp-dates,
.cdrp-buttons {
    display: flex;
    flex-wrap: nowrap; /* never wrap inside a group */
    gap: .5rem;
    flex: 0 0 auto;
}

/* CRITICAL: neutralize Bootstrap's block, full-width inputs inside the picker */
.cdrp input.form-control {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 .5rem !important;
}

/* Make buttons the same height and keep them together */
.cdrp .cdrp-btn,
.cdrp .btn {
    height: 36px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 .75rem !important;
    white-space: nowrap;
}

/* MOBILE: force 2 rows only (dates row, buttons row) */
@media (max-width: 576px) {
    .cdrp-dates {
        flex-basis: 100%;
        justify-content: flex-start;
    }

    .cdrp-buttons {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

.dropdown-container{
    margin-top: 8px;
    margin-bottom: 8px;
}


.kombine-icon {
    display: inline-flex; /* makes vertical centering and alignment easier */
    align-items: center;
    line-height: 1;
}

.kombine-icon > img {
    display: block; /* remove extra descender space below images */
}

/* Align the row content (icon + text) in each menu item */
.dropdown-menu .dropdown-item.dropdown-entry > span {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* space between icon and text */
    min-width: 0; /* avoid accidental overflow with long labels */
}

/* Align only the icons you explicitly marked for dropdown usage */
.kombine-icon.dropdown-icon {
    display: inline-flex; /* not block; keep inline flow with text */
    align-items: center;
    justify-content: center;
    line-height: 1; /* remove baseline drift */
}

    /* Remove the image baseline gap */
    .kombine-icon.dropdown-icon > img {
        display: block;
    }

.dropdown-icon {
   /*  outline: 1px solid red !important; */
}


/* Settings group desktop table. Keep this global because Blazorise renders table cells from child components. */
.settings-table {
    --w-actions: 4rem;
    --w-icon: 3rem;
    --w-key: 11rem;
    --w-edited: 11.5rem;
    --w-input-max: clamp(22rem, 42vw, 30rem);
    width: 100% !important;
    table-layout: fixed;
}

.history-table {
    --w-historykey: 160px;
}

    .settings-table col.col-actions {
        width: var(--w-actions);
    }

    .settings-table col.col-icon {
        width: var(--w-icon);
    }

    .settings-table col.col-key {
        width: var(--w-key);
    }

    .settings-table col.col-input {
        width: auto;
    }

    .settings-table col.col-edited {
        width: var(--w-edited);
    }

    .history-table .history-key {
        width: var(--w-historykey);
    }

    .settings-table td,
    .settings-table th,
    table.settings-table > :not(caption) > * > * {
        padding: 0.65rem 0.5rem !important;
        padding-inline: 0.5rem !important;
        vertical-align: middle;
    }

    .settings-table td.col-actions {
        width: var(--w-actions);
        text-align: center;
        white-space: nowrap;
    }

    .settings-table td.col-icon {
        width: var(--w-icon);
        min-width: var(--w-icon);
        overflow: visible;
        text-align: center;
    }

        .settings-table td.col-icon > * {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: 24px;
            min-width: 24px;
            height: 24px;
        }

        .settings-table td.col-icon img,
        .settings-table td.col-icon svg {
            width: 24px;
            height: 24px;
            max-width: none;
        }

    .settings-table td.col-key {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .settings-table td.col-input {
        min-width: 0;
    }

        .settings-table td.col-input input:not([type="checkbox"]),
        .settings-table td.col-input select,
        .settings-table td.col-input textarea,
        .settings-table td.col-input .b-numeric,
        .settings-table td.col-input .form-control,
        .settings-table td.col-input .form-select,
        .settings-table td.col-input .form-control:not(.b-numeric-picker-input) {
            width: 100% !important;
            max-width: var(--w-input-max) !important;
        }

        .settings-table td.col-input .b-numeric > input {
            width: 100% !important;
            max-width: none !important;
        }

        /* Prevent hidden inputs (e.g. flatpickr) from stretching. */
        .settings-table td.col-input input[type="hidden"] {
            width: auto !important;
            max-width: none !important;
        }

    .settings-table td.col-edited {
        width: var(--w-edited);
        max-width: var(--w-edited);
        overflow: hidden;
        text-align: left;
        white-space: normal;
    }

body.lpx-theme-dark .settings-table tbody tr.dark-row-group > *,
body.lpx-theme-semi-dark .settings-table tbody tr.dark-row-group > * {
    --settings-row-bg: rgba(255, 255, 255, 0.045);
    --bs-table-bg: var(--settings-row-bg);
    color: #d6e3f6;
    background-color: var(--settings-row-bg) !important;
}

body.lpx-theme-dark .settings-table tbody tr.light-row-group > *,
body.lpx-theme-semi-dark .settings-table tbody tr.light-row-group > * {
    --settings-row-bg: rgba(255, 255, 255, 0.015);
    --bs-table-bg: var(--settings-row-bg);
    color: #d6e3f6;
    background-color: var(--settings-row-bg) !important;
}

body.lpx-theme-dark .settings-table tbody tr.dark-row-group:hover > *,
body.lpx-theme-semi-dark .settings-table tbody tr.dark-row-group:hover > * {
    --settings-row-bg: rgba(111, 153, 246, 0.12);
    --bs-table-bg: var(--settings-row-bg);
    background-color: var(--settings-row-bg) !important;
}

body.lpx-theme-dark .settings-table tbody tr.light-row-group:hover > *,
body.lpx-theme-semi-dark .settings-table tbody tr.light-row-group:hover > * {
    --settings-row-bg: rgba(111, 153, 246, 0.08);
    --bs-table-bg: var(--settings-row-bg);
    background-color: var(--settings-row-bg) !important;
}

body.lpx-theme-dark .minute-of-day-inherit-label,
body.lpx-theme-semi-dark .minute-of-day-inherit-label,
body.lpx-theme-dim .minute-of-day-inherit-label {
    color: #d6e3f6;
}

body.lpx-theme-dark .minute-of-day-inherit-track,
body.lpx-theme-semi-dark .minute-of-day-inherit-track,
body.lpx-theme-dim .minute-of-day-inherit-track {
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 0 0 1px rgba(141, 170, 229, 0.22);
}

body.lpx-theme-dark .minute-of-day-inherit-thumb,
body.lpx-theme-semi-dark .minute-of-day-inherit-thumb,
body.lpx-theme-dim .minute-of-day-inherit-thumb {
    background: #9aa8ba;
}

body.lpx-theme-dark .minute-of-day-inherit-input:checked + .minute-of-day-inherit-track,
body.lpx-theme-semi-dark .minute-of-day-inherit-input:checked + .minute-of-day-inherit-track,
body.lpx-theme-dim .minute-of-day-inherit-input:checked + .minute-of-day-inherit-track {
    background: #4f73f6;
    box-shadow: inset 0 0 0 1px rgba(111, 153, 246, 0.35);
}

body.lpx-theme-dark .minute-of-day-inherit-input:checked + .minute-of-day-inherit-track .minute-of-day-inherit-thumb,
body.lpx-theme-semi-dark .minute-of-day-inherit-input:checked + .minute-of-day-inherit-track .minute-of-day-inherit-thumb,
body.lpx-theme-dim .minute-of-day-inherit-input:checked + .minute-of-day-inherit-track .minute-of-day-inherit-thumb {
    background: #ffffff;
}

body.lpx-theme-dark .minute-of-day-inherit-input:focus-visible + .minute-of-day-inherit-track,
body.lpx-theme-semi-dark .minute-of-day-inherit-input:focus-visible + .minute-of-day-inherit-track,
body.lpx-theme-dim .minute-of-day-inherit-input:focus-visible + .minute-of-day-inherit-track {
    outline-color: rgba(111, 153, 246, 0.55);
}

body.lpx-theme-dark .minute-of-day-time-input,
body.lpx-theme-semi-dark .minute-of-day-time-input,
body.lpx-theme-dim .minute-of-day-time-input {
    color: #e5efff;
    background-color: rgba(12, 18, 30, 0.72);
    border-color: rgba(141, 170, 229, 0.22);
}

body.lpx-theme-dark .minute-of-day-time-input:focus,
body.lpx-theme-semi-dark .minute-of-day-time-input:focus,
body.lpx-theme-dim .minute-of-day-time-input:focus {
    border-color: #6f99f6;
    box-shadow: 0 0 0 1px rgba(111, 153, 246, 0.35);
}

/* Make the outer wrapper a positioned container */
.b-numeric {
    position: relative;
    display: flex;
    align-items: stretch;
}

    /* Size the input to leave room for the buttons */
    .b-numeric > input {
        padding-right: 1.5rem !important;
        flex: 1;
    }

/* Pin the handler wrap to the right, full height of the input */
.b-numeric-handler-wrap {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    height: auto;
    width: 1.25rem;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* clip anything poking outside */
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; /* match Bootstrap's input radius */
}

.b-numeric:focus-within > .b-numeric-handler-wrap {
    opacity: 1;
}

/* Each button takes exactly half the height */
.b-numeric-handler {
    flex: 1;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 0;
}

/* FA sort-up glyph lives in the BOTTOM of its box — shift it up */
.b-numeric-handler-up i.fa-sort-up {
    position: relative;
    right:6px;
    top: 4px; /* pulls the visible glyph to center of the upper half */
}

/* FA sort-down glyph lives in the TOP of its box — shift it down */
.b-numeric-handler-down i.fa-sort-down {
    position: relative;
    right: 6px;
    top: -8px; /* pulls the visible glyph to center of the lower half */
}
.card-mobile-header {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 10px;
    align-items: center;
}

.card-mobile-key {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ellipsis {
    max-width: 150px; /* Required: fixed width */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Show "..." when text overflows */
    /* border: 1px solid #ccc; /* Just for visibility */
    /* padding: 5px; */
    box-sizing: border-box;
}


@media (max-width: 1199.98px) {
    .history-table td.history-key {
        width : 40px;
        white-space: nowrap;
    }
}

@media (max-width: 992px) {
    .history-table td.history-key {
        width: 0px;
        white-space: nowrap;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden;
    }

    .history-table td.history-key > * {
        display: none !important;
    }
}


@media (min-width: 900px) and (max-width: 1280px) {
    .settings-page .card {
        --bs-card-spacer-x: 0.5rem; /* 12px */
        --bs-card-spacer-y: 0.5rem;
    }
}

.fade-in {
    animation: fadeIn 0.3s forwards; /* forwards keeps the final state */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}



.fade-out {
    animation: fadeOut 2s forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Slide OUT to the left */
.slide-out {
    animation: slideOut 0.4s ease-out forwards;
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-400px); /* slide left */
    }
}

/* Slide IN from the right */
.slide-in {
    animation: slideIn 0.2s ease-out forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100px); /* start from right */
    }

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


.autocomplete-panel {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    position: absolute;
    z-index: 9999;
    width: 95%;
    max-width: 250px;
    max-height: 240px;
    overflow-y: auto;
    border-radius: 4px;
    margin-top: 2px;
    box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.15);
}


.autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* important! */
    padding: 6px 10px;
    cursor: pointer;
}


    .autocomplete-item:hover,
    .autocomplete-item.highlight {
        background: var(--bs-tertiary-bg);
    }
.autocomplete-footer {
    padding: 6px 10px;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-secondary-bg);
    text-align: right;
}

    .autocomplete-footer a {
        font-size: 12px;
        color: var(--bs-secondary-color);
        text-decoration: underline;
    }

body.lpx-theme-dark .autocomplete-panel,
body.lpx-theme-dim .autocomplete-panel {
    background: var(--lpx-surface, #161616);
    border-color: var(--lpx-border-color, #23262a);
    color: var(--lpx-text-color, #9ca5b4);
}

body.lpx-theme-dark .autocomplete-item:hover,
body.lpx-theme-dark .autocomplete-item.highlight,
body.lpx-theme-dim .autocomplete-item:hover,
body.lpx-theme-dim .autocomplete-item.highlight {
    background: var(--lpx-surface-2, #202225);
}

body.lpx-theme-dark .autocomplete-footer,
body.lpx-theme-dim .autocomplete-footer {
    background: var(--lpx-surface-2, #202225);
    border-top-color: var(--lpx-border-color, #23262a);
}

body.lpx-theme-dark .autocomplete-footer a,
body.lpx-theme-dim .autocomplete-footer a {
    color: var(--lpx-text-color-secondary, #9ca5b4);
}

body.lpx-theme-dark .pin-icon,
body.lpx-theme-dim .pin-icon,
body.lpx-theme-dark .datagrid-search-history-button,
body.lpx-theme-dim .datagrid-search-history-button {
    color: var(--lpx-text-color-secondary, #9ca5b4);
}

body.lpx-theme-dark .pin-icon:hover,
body.lpx-theme-dim .pin-icon:hover,
body.lpx-theme-dark .datagrid-search-history-button:hover,
body.lpx-theme-dark .datagrid-search-history-button:focus,
body.lpx-theme-dim .datagrid-search-history-button:hover,
body.lpx-theme-dim .datagrid-search-history-button:focus {
    color: var(--lpx-text-color, #ffffff);
}

.pin-icon {
    cursor: pointer;
    padding-left: 10px;
    padding-right: 4px;
    color: var(--bs-secondary-color);
    pointer-events: auto;
}

    .pin-icon:hover {
        color: var(--bs-body-color);
    }

    .pin-icon .is-pinned {
        color: var(--bs-danger, #dc3545);
    }

.autocomplete-item:hover {
    background: var(--bs-tertiary-bg);
}

.pad2r {
    padding: 2rem;
}


/* ── FLUID CONTAINER: HOVER-TRIGGER (collapsed sidebar, all widths) ── */

#lpx-wrapper.hover-trigger .lpx-sidebar {
    transition: width 0.2s ease;
}

    #lpx-wrapper.hover-trigger .lpx-sidebar:not(:hover):not(:focus-within) .lpx-nav-items,
    #lpx-wrapper.hover-trigger .lpx-sidebar:not(:hover):not(:focus-within) .lpx-menu-filter,
    #lpx-wrapper.hover-trigger .lpx-sidebar:not(:hover):not(:focus-within) .lpx-nav-menu {
        display: none !important;
    }

    #lpx-wrapper.hover-trigger .lpx-sidebar:focus-within .lpx-nav-items,
    #lpx-wrapper.hover-trigger .lpx-sidebar:hover .lpx-nav-items {
        display: block !important;
    }

/* ── FLUID CONTAINER: 768-1199px ── */

@media only screen and (min-width: 768px) and (max-width: 1199px) {

    /* NON-COLLAPSED (full, no hover-trigger) */

    #lpx-wrapper.full:not(.hover-trigger) .lpx-sidebar {
        min-width: 280px !important;
        width: 280px !important;
    }

        #lpx-wrapper.full:not(.hover-trigger) .lpx-sidebar .lpx-nav {
            min-width: 280px !important;
            align-items: flex-start !important;
        }

    #lpx-wrapper.full:not(.hover-trigger) .lpx-content-wrapper {
        margin-left: 280px !important;
        margin-right: 72px !important;
    }

    #lpx-wrapper.full:not(.hover-trigger) .lpx-content-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #lpx-wrapper.full:not(.hover-trigger) .lpx-sidebar .lpx-logo-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #lpx-wrapper.full:not(.hover-trigger) .lpx-sidebar .lpx-brand-logo {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 240px !important;
        height: 32px !important;
        overflow: visible !important;
    }

    #lpx-wrapper.full:not(.hover-trigger) .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
        background-image: var(--lpx-logo) !important;
        width: 240px !important;
    }

    #lpx-wrapper.full:not(.hover-trigger) .lpx-sidebar-container .lpx-logo-container {
        width: 270px !important;
    }

    #lpx-wrapper.full:not(.hover-trigger) .lpx-sidebar-container:not(:hover) .menu-collapse-icon {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Hide built-in filter, show custom filter */
    #lpx-wrapper.full:not(.hover-trigger) .lpx-sidebar-container .lpx-menu-filter:not([data-flex-filter="custom"]) {
        display: none !important;
    }

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

        #lpx-wrapper.full:not(.hover-trigger) .lpx-sidebar-container .lpx-menu-filter[data-flex-filter="custom"] .hidden-in-hover-trigger,
        #lpx-wrapper.full:not(.hover-trigger) .lpx-sidebar-container:not(:hover) .lpx-menu-filter[data-flex-filter="custom"] .hidden-in-hover-trigger {
            display: block !important;
        }

    /* NON-COLLAPSED (fixed, no hover-trigger) */

    #lpx-wrapper.fixed:not(.hover-trigger) .lpx-sidebar {
        min-width: 280px !important;
        width: 280px !important;
    }

        #lpx-wrapper.fixed:not(.hover-trigger) .lpx-sidebar .lpx-nav {
            min-width: 280px !important;
            align-items: flex-start !important;
        }

    #lpx-wrapper.fixed:not(.hover-trigger) .lpx-content-wrapper {
        margin-left: 280px !important;
        margin-right: 72px !important;
    }

    #lpx-wrapper.fixed:not(.hover-trigger) .lpx-content-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #lpx-wrapper.fixed:not(.hover-trigger) .lpx-sidebar .lpx-logo-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #lpx-wrapper.fixed:not(.hover-trigger) .lpx-sidebar .lpx-brand-logo {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 240px !important;
        height: 32px !important;
        overflow: visible !important;
    }

    #lpx-wrapper.fixed:not(.hover-trigger) .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
        background-image: var(--lpx-logo) !important;
        width: 240px !important;
    }

    #lpx-wrapper.fixed:not(.hover-trigger) .lpx-sidebar-container .lpx-logo-container {
        width: 270px !important;
    }

    #lpx-wrapper.fixed:not(.hover-trigger) .lpx-sidebar-container:not(:hover) .menu-collapse-icon {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Hide built-in filter, show custom filter */
    #lpx-wrapper.fixed:not(.hover-trigger) .lpx-sidebar-container .lpx-menu-filter:not([data-flex-filter="custom"]) {
        display: none !important;
    }

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

        #lpx-wrapper.fixed:not(.hover-trigger) .lpx-sidebar-container .lpx-menu-filter[data-flex-filter="custom"] .hidden-in-hover-trigger,
        #lpx-wrapper.fixed:not(.hover-trigger) .lpx-sidebar-container:not(:hover) .lpx-menu-filter[data-flex-filter="custom"] .hidden-in-hover-trigger {
            display: block !important;
        }

    /* NON-COLLAPSED (boxed, no hover-trigger) */

    #lpx-wrapper.boxed:not(.hover-trigger) .lpx-sidebar {
        min-width: 280px !important;
        width: 280px !important;
    }

        #lpx-wrapper.boxed:not(.hover-trigger) .lpx-sidebar .lpx-nav {
            min-width: 280px !important;
            align-items: flex-start !important;
        }

    #lpx-wrapper.boxed:not(.hover-trigger) .lpx-content-wrapper {
        margin-left: 280px !important;
        margin-right: 72px !important;
    }

    #lpx-wrapper.boxed:not(.hover-trigger) .lpx-content-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #lpx-wrapper.boxed:not(.hover-trigger) .lpx-sidebar .lpx-logo-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #lpx-wrapper.boxed:not(.hover-trigger) .lpx-sidebar .lpx-brand-logo {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 240px !important;
        height: 32px !important;
        overflow: visible !important;
    }

    #lpx-wrapper.boxed:not(.hover-trigger) .lpx-sidebar-container:not(:hover) .lpx-brand-logo {
        background-image: var(--lpx-logo) !important;
        width: 240px !important;
    }

    #lpx-wrapper.boxed:not(.hover-trigger) .lpx-sidebar-container .lpx-logo-container {
        width: 270px !important;
    }

    #lpx-wrapper.boxed:not(.hover-trigger) .lpx-sidebar-container:not(:hover) .menu-collapse-icon {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Hide built-in filter, show custom filter */
    #lpx-wrapper.boxed:not(.hover-trigger) .lpx-sidebar-container .lpx-menu-filter:not([data-flex-filter="custom"]) {
        display: none !important;
    }

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

        #lpx-wrapper.boxed:not(.hover-trigger) .lpx-sidebar-container .lpx-menu-filter[data-flex-filter="custom"] .hidden-in-hover-trigger,
        #lpx-wrapper.boxed:not(.hover-trigger) .lpx-sidebar-container:not(:hover) .lpx-menu-filter[data-flex-filter="custom"] .hidden-in-hover-trigger {
            display: block !important;
        }


    /* COLLAPSED (full + hover-trigger) */

    #lpx-wrapper.full.hover-trigger .lpx-sidebar {
        min-width: 72px !important;
        overflow-x: hidden !important;
    }

    #lpx-wrapper.full.hover-trigger .lpx-content-wrapper {
        margin-left: 72px !important;
        margin-right: 72px !important;
    }

    #lpx-wrapper.full.hover-trigger .lpx-content-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #lpx-wrapper.full.hover-trigger .lpx-sidebar:not(:hover) .lpx-nav-items,
    #lpx-wrapper.full.hover-trigger .lpx-sidebar:not(:hover) .lpx-menu-filter {
        display: none !important;
    }

    #lpx-wrapper.full.hover-trigger .lpx-sidebar:not(:hover) .lpx-brand-logo {
        width: 32px !important;
        height: 32px !important;
        overflow: visible !important;
    }

    #lpx-wrapper.full.hover-trigger .lpx-sidebar:hover .lpx-brand-logo {
        width: 240px !important;
        height: 32px !important;
        overflow: visible !important;
    }

    /* COLLAPSED (fixed + hover-trigger) */

    #lpx-wrapper.fixed.hover-trigger .lpx-sidebar {
        min-width: 72px !important;
        overflow-x: hidden !important;
    }

    #lpx-wrapper.fixed.hover-trigger .lpx-content-wrapper {
        margin-left: 0px !important;
        margin-right: 72px !important;
    }

    #lpx-wrapper.fixed.hover-trigger .lpx-content-container {
        margin-left: 72px !important;
        margin-right: 0 !important;
    }

    #lpx-wrapper.fixed.hover-trigger .lpx-sidebar:not(:hover):not(:focus-within) .lpx-nav-items,
    #lpx-wrapper.fixed.hover-trigger .lpx-sidebar:not(:hover):not(:focus-within) .lpx-menu-filter {
        display: none !important;
    }

    #lpx-wrapper.fixed.hover-trigger .lpx-sidebar:not(:hover):not(:focus-within) .lpx-brand-logo {
        width: 32px !important;
        height: 32px !important;
        overflow: visible !important;
    }

    #lpx-wrapper.fixed.hover-trigger .lpx-sidebar:focus-within .lpx-brand-logo,
    #lpx-wrapper.fixed.hover-trigger .lpx-sidebar:hover .lpx-brand-logo {
        width: 240px !important;
        height: 32px !important;
        overflow: visible !important;
    }

    /* COMMON */
    
    #lpx-wrapper:not(.hover-trigger) .lpx-sidebar.overflow-auto {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important; /* Firefox */
    }


    #lpx-wrapper:not(.hover-trigger) .lpx-sidebar .menu-collapse-icon {
        display: flex !important;
    }

    #lpx-wrapper.full:not(.hover-trigger) .lpx-content-wrapper,
    #lpx-wrapper.fixed:not(.hover-trigger) .lpx-content-wrapper,
    #lpx-wrapper.boxed:not(.hover-trigger) .lpx-content-wrapper,
    #lpx-wrapper.full.hover-trigger .lpx-content-wrapper,
    #lpx-wrapper.fixed.hover-trigger .lpx-content-wrapper,
    #lpx-wrapper.boxed.hover-trigger .lpx-content-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #lpx-wrapper.full:not(.hover-trigger) .lpx-content-container,
    #lpx-wrapper.fixed:not(.hover-trigger) .lpx-content-container,
    #lpx-wrapper.boxed:not(.hover-trigger) .lpx-content-container {
        margin-left: 280px !important;
        margin-right: 72px !important;
    }

    #lpx-wrapper.full.hover-trigger .lpx-content-container,
    #lpx-wrapper.fixed.hover-trigger .lpx-content-container,
    #lpx-wrapper.boxed.hover-trigger .lpx-content-container {
        margin-left: 72px !important;
        margin-right: 72px !important;
    }

}


#lpx-wrapper:not(.hover-trigger) .lpx-sidebar .menu-collapse-icon {
    display: flex !important;
}

@media only screen and (min-width: 768px) {
    #lpx-wrapper:not(.hover-trigger) .lpx-sidebar {
        min-width: 280px !important;
        width: 280px !important;
    }

    #lpx-wrapper:not(.hover-trigger) .lpx-sidebar .lpx-nav {
        min-width: 280px !important;
        align-items: flex-start !important;
    }

    #lpx-wrapper:not(.hover-trigger) .lpx-sidebar .lpx-logo-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 270px !important;
    }

    #lpx-wrapper:not(.hover-trigger) .lpx-sidebar .lpx-brand-logo {
        display: block !important;
        width: 240px !important;
        height: 32px !important;
        background-image: var(--lpx-logo) !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    #lpx-wrapper:not(.hover-trigger) .lpx-content-container {
        margin-left: 280px !important;
        margin-right: 72px !important;
    }
}

#lpx-wrapper.hover-trigger .lpx-sidebar:not(:hover):not(:focus-within) .lpx-brand-logo {
    background-image: var(--lpx-logo-icon) !important;
}

#lpx-wrapper.hover-trigger .lpx-sidebar:hover .lpx-brand-logo,
#lpx-wrapper.hover-trigger .lpx-sidebar:focus-within .lpx-brand-logo {
    background-image: var(--lpx-logo) !important;
}

#lpx-wrapper .lpx-content-wrapper > .flex-lpx-footer-host {
    margin: 0 !important;
    width: 100% !important;
}

#lpx-wrapper .lpx-content-wrapper > .flex-lpx-footer-host > .lpx-footer {
    margin-left: 0 !important;
    width: 100% !important;
}

#lpx-wrapper .flex-main-footer {
    box-sizing: border-box !important;
    padding-inline-start: 1rem !important;
    padding-inline-end: 1rem !important;
}

#lpx-wrapper .lpx-sidebar.overflow-auto {
    box-sizing: border-box !important;
    max-height: calc(100vh - var(--flex-lpx-footer-reserve) - env(safe-area-inset-bottom)) !important;
    padding-bottom: calc(var(--flex-lpx-footer-reserve) + env(safe-area-inset-bottom)) !important;
    scrollbar-gutter: stable;
}

@supports (height: 100dvh) {
    #lpx-wrapper .lpx-sidebar.overflow-auto {
        max-height: calc(100dvh - var(--flex-lpx-footer-reserve) - env(safe-area-inset-bottom)) !important;
    }
}

/* ── Bank DataGrid – Responsive columns ──────────────────────────── */

.bank-grid-container {
    container-type: inline-size;
    container-name: bank-datagrid;
}

/* Reserve enough first-column space for the localized bank action button text. */
/* Hide columns 3,6, 7, 8 on medium-narrow grids (e.g. sidebar expanded) */
@container bank-datagrid (max-width: 800px) {
    .bank-grid-container .b-datagrid {
        --col1-w: 120px;
        --col2-w: 80px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w));
    }


        .bank-grid-container .b-datagrid th:nth-child(3),
        .bank-grid-container .b-datagrid td:nth-child(3),
        .bank-grid-container .b-datagrid th:nth-child(6),
        .bank-grid-container .b-datagrid td:nth-child(6),
        .bank-grid-container .b-datagrid th:nth-child(7),
        .bank-grid-container .b-datagrid td:nth-child(7),
        .bank-grid-container .b-datagrid th:nth-child(8),
        .bank-grid-container .b-datagrid td:nth-child(8) {
            display: none;
        }

        .bank-grid-container .b-datagrid.b-table.table.table-striped {
            table-layout: fixed;
            width: 100%;
        }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
                width: var(--col1-w) !important;
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
                width: var(--col2-w);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(4),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(4) {
                width: calc((100% - var(--fixed-total)) * 0.6);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(5),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(5) {
                width: calc((100% - var(--fixed-total)) * 0.4);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th,
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td {
                padding: 6px 8px !important;
                white-space: nowrap; /* Prevent text wrapping */
                overflow: hidden; /* Hide overflow content */
                text-overflow: ellipsis; /* Show ellipsis for overflowing text */
            }
}

/* Hide column 3 as well on very narrow grids (e.g. sidebar expanded + small screen) */
@container bank-datagrid (max-width: 550px) {
    .bank-grid-container .b-datagrid {
        --col1-w: 120px;
        --col2-w: 80px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w));
    }

        .bank-grid-container .b-datagrid th:nth-child(3),
        .bank-grid-container .b-datagrid td:nth-child(3) {
            display: none;
        }

        .bank-grid-container .b-datagrid.b-table.table.table-striped {
            table-layout: fixed;
            width: 100%;
        }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
                width: var(--col1-w) !important;
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
                width: var(--col2-w);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(4),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(4) {
                width: calc((100% - var(--fixed-total)) * 0.6);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(5),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(5) {
                width: calc((100% - var(--fixed-total)) * 0.4);
            }


        .bank-grid-container .b-datagrid.b-table.table thead th,
        .bank-grid-container .b-datagrid.b-table.table tbody td {
            padding: 3px 5px;
        }
}
@container bank-datagrid (min-width: 801px) {
    .bank-grid-container .b-datagrid {
        --col1-w: 120px;
        --col2-w: 80px;
        --col3-w: 40px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w) + var(--col3-w));
    }


        .bank-grid-container .b-datagrid.b-table.table.table-striped {
            table-layout: fixed;
            width: 100%;
        }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
                width: var(--col1-w) !important;
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
                width: var(--col2-w);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(3),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(3) {
                width: var(--col3-w);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(4),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(4) {
                width: calc((100% - var(--fixed-total)) * 0.4);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(5),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(5) {
                width: calc((100% - var(--fixed-total)) * 0.3);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(6),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(6) {
                width: calc((100% - var(--fixed-total)) * 0.1);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(7),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(7) {
                width: calc((100% - var(--fixed-total)) * 0.1);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(8),
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(8) {
                width: calc((100% - var(--fixed-total)) * 0.1);
            }

            .bank-grid-container .b-datagrid.b-table.table.table-striped thead th,
            .bank-grid-container .b-datagrid.b-table.table.table-striped tbody td {
                padding: 6px 8px !important;
                white-space: nowrap; /* Prevent text wrapping */
                overflow: hidden; /* Hide overflow content */
                text-overflow: ellipsis; /* Show ellipsis for overflowing text */
            }
}

/* ── Transaction DataGrid – Responsive columns ──────────────────────────── */

.transaction-grid-container {
    container-type: inline-size;
    container-name: transaction-datagrid;
}

@container transaction-datagrid (max-width: 800px) {
    .transaction-grid-container .b-datagrid {
        --col1-w: 50px;
        --col2-w: 130px;
        --col3-w: 40px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w) + var(--col3-w));
    }


        .transaction-grid-container .b-datagrid th:nth-child(4),
        .transaction-grid-container .b-datagrid td:nth-child(4),
        .transaction-grid-container .b-datagrid th:nth-child(6),
        .transaction-grid-container .b-datagrid td:nth-child(6),
        .transaction-grid-container .b-datagrid th:nth-child(7),
        .transaction-grid-container .b-datagrid td:nth-child(7),
        .transaction-grid-container .b-datagrid th:nth-child(8),
        .transaction-grid-container .b-datagrid td:nth-child(8) {
            display: none;
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped {
            table-layout: fixed;
            width: 100%;
        }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
                width: var(--col1-w) !important;
            }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
                width: var(--col2-w);
            }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(3),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(3) {
                width: var(--col3-w);
            }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(5),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(5) {
                width: calc((100% - var(--fixed-total)) * 0.4);
            }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(9),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(9) {
                width: calc((100% - var(--fixed-total)) * 0.3);
            }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(10),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(10) {
                width: calc((100% - var(--fixed-total)) * 0.3);
            }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th,
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td {
                padding: 6px 8px !important;
                white-space: nowrap; /* Prevent text wrapping */
                overflow: hidden; /* Hide overflow content */
                text-overflow: ellipsis; /* Show ellipsis for overflowing text */
            }
    /*
    .b-datagrid.b-table.table > thead > tr > th,
    .b-datagrid.b-table.table > tbody > tr > td {
        padding: 6px 8px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    */
}

@container transaction-datagrid (max-width: 550px) {
    .transaction-grid-container .b-datagrid {
        --col1-w: 50px;
        --col2-w: 120px;
        --col3-w: 40px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w) + var(--col3-w));
    }

        .transaction-grid-container .b-datagrid th:nth-child(4),
        .transaction-grid-container .b-datagrid td:nth-child(4) {
            display: none;
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped {
            table-layout: fixed;
            width: 100%;
        }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
                width: var(--col1-w) !important;
                /*width: 50px !important;*/
            }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
                width: var(--col2-w);
            }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(3),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(3) {
                width: var(--col3-w);
            }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(5),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(5) {
                width: calc((100% - var(--fixed-total)) * 0.4);
            }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(9),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(9) {
                width: calc((100% - var(--fixed-total)) * 0.3);
            }

            .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(10),
            .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(10) {
                width: calc((100% - var(--fixed-total)) * 0.3);
            }


        .transaction-grid-container .b-datagrid.b-table.table thead th,
        .transaction-grid-container .b-datagrid.b-table.table tbody td {
            padding: 3px 5px;
        }
}

@container transaction-datagrid (min-width: 801px) {
    .transaction-grid-container .b-datagrid {
        --col1-w: 60px;
        --col2-w: 130px;
        --col3-w: 40px;
        --col4-w: 120px;
        --col6-w: 100px;
        --col7-w: 100px;
        --col9-w: 80px;
        --col10-w: 80px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w) + var(--col3-w) + var(--col4-w) + var(--col6-w) + var(--col7-w) + var(--col9-w) + var(--col10-w));
    }

    .transaction-grid-container.hide-location .b-datagrid {
        --col6-w: 0px;
    }

        .transaction-grid-container.hide-location .b-datagrid th:nth-child(6),
        .transaction-grid-container.hide-location .b-datagrid td:nth-child(6) {
            display: none !important;
        }

    .transaction-grid-container.hide-unit .b-datagrid {
        --col7-w: 0px;
    }

        .transaction-grid-container.hide-unit .b-datagrid th:nth-child(7),
        .transaction-grid-container.hide-unit .b-datagrid td:nth-child(7) {
            display: none !important;
        }

    .transaction-grid-container .b-datagrid.b-table.table.table-striped {
        table-layout: fixed !important;
        width: 100%;
    }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
        .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
            width: var(--col1-w) !important;
            /*width: 60px !important;*/
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
        .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
            width: var(--col2-w);
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(3),
        .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(3) {
            width: var(--col3-w);
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(4),
        .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(4) {
            /* width: calc((100% - var(--fixed-total)) * 0.20);*/
            width: var(--col4-w);
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(5),
        .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(5) {
            width: calc((100% - var(--fixed-total)) * 0.20) !important;
            /* width: 100px !important; */
            /*max-width: 140px !important;*/
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(6),
        .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(6) {
            width: var(--col6-w);
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(7),
        .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(7) {
            width: var(--col7-w);
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(8),
        .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(8) {
            width: calc((100% - var(--fixed-total)) * 0.80) !important;
            /*width: 400px !important;*/
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(9),
        .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(9) {
            /* width: calc((100% - var(--fixed-total)) * 0.1); */
            width: var(--col9-w);
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(10),
        .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(10) {
            /* width: calc((100% - var(--fixed-total)) * 0.1); */
            width: var(--col10-w);
        }

        .transaction-grid-container .b-datagrid.b-table.table.table-striped thead th,
        .transaction-grid-container .b-datagrid.b-table.table.table-striped tbody td {
            padding: 6px 8px !important;
            white-space: nowrap; /* Prevent text wrapping */
            overflow: hidden; /* Hide overflow content */
            text-overflow: ellipsis; /* Show ellipsis for overflowing text */
        }
}


/* ── Location DataGrid – Responsive columns ──────────────────────────── */

.location-grid-container {
    container-type: inline-size;
    container-name: location-datagrid;
}

/* Keep row action dropdowns from forcing a vertical scrollbar when the grid has only a few rows. */
.location-grid-container .table-responsive {
    min-height: 180px;
}

.datagrid-search-column {
    --datagrid-search-control-height: calc(1.5em + 1.5rem + var(--bs-border-width, 1px) + var(--bs-border-width, 1px));
}

.datagrid-search-surface {
    position: relative;
}

.datagrid-search-input-shell {
    align-items: stretch;
    display: flex;
    position: relative;
    width: 100%;
}

.input-group > .datagrid-search-input-shell {
    flex: 1 1 auto;
    min-width: 0;
    width: 1%;
}

.datagrid-search-input-shell .datagrid-search-input {
    height: var(--datagrid-search-control-height);
    min-height: var(--datagrid-search-control-height);
    padding-right: 2rem;
}

.datagrid-search-input-shell.has-history-action .datagrid-search-input {
    padding-right: 4rem;
}

.input-group > .datagrid-search-input-shell:not(:last-child) .datagrid-search-input {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.input-group > .datagrid-search-input-shell:not(:first-child) .datagrid-search-input {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.datagrid-search-spinner {
    animation: datagrid-search-spinner 0.7s linear infinite;
    border: 2px solid rgba(13, 110, 253, 0.22);
    border-radius: 50%;
    border-top-color: var(--bs-primary, #0d6efd);
    display: inline-block;
    flex: 0 0 auto;
    height: 0.85rem;
    pointer-events: none;
    width: 0.85rem;
}

.datagrid-search-input-actions {
    align-items: center;
    bottom: 0;
    display: inline-flex;
    gap: 0.35rem;
    pointer-events: none;
    position: absolute;
    right: 0.55rem;
    top: 0;
}

.datagrid-search-history-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--bs-secondary-color, #6c757d);
    display: inline-flex;
    height: 1.4rem;
    justify-content: center;
    padding: 0;
    pointer-events: auto;
    width: 1.4rem;
}

.datagrid-search-history-button:hover,
.datagrid-search-history-button:focus {
    color: var(--bs-primary, #0d6efd);
}

.datagrid-search-clear-button {
    align-items: center;
    display: inline-flex;
    height: var(--datagrid-search-control-height);
    justify-content: center;
    min-height: var(--datagrid-search-control-height);
}

@keyframes datagrid-search-spinner {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 767.98px) {
    .datagrid-search-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .datagrid-search-column form,
    .datagrid-search-column .input-group {
        width: 100%;
    }
}

/* Hide columns 5,6,7 on medium-narrow grids (e.g. sidebar expanded) */
@container location-datagrid (max-width: 800px) {
    .location-grid-container .b-datagrid {
        --col1-w: 100px;
        --col2-w: 60px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w));
    }


        .location-grid-container .b-datagrid th:nth-child(5),
        .location-grid-container .b-datagrid td:nth-child(5),
        .location-grid-container .b-datagrid th:nth-child(6),
        .location-grid-container .b-datagrid td:nth-child(6),
        .location-grid-container .b-datagrid th:nth-child(7),
        .location-grid-container .b-datagrid td:nth-child(7) {
            display: none;
        }

        .location-grid-container .b-datagrid.b-table.table.table-striped {
            table-layout: fixed;
            width: 100%;
        }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
                width: var(--col1-w) !important;
            }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
                width: var(--col2-w);
            }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(4),
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(4) {
                width: calc((100% - var(--fixed-total)) * 0.6);
            }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(5),
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(5) {
                width: calc((100% - var(--fixed-total)) * 0.4);
            }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th,
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td {
                padding: 6px 8px !important;
                white-space: nowrap; /* Prevent text wrapping */
                overflow: hidden; /* Hide overflow content */
                text-overflow: ellipsis; /* Show ellipsis for overflowing text */
            }
}

@container location-datagrid (min-width: 801px) {
    .location-grid-container .b-datagrid {
        --col1-w: 100px;
        --col2-w: 60px;
        --col4-w: 150px;
        --col5-w: 110px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w) + var(--col4-w) + var(--col5-w) );
    }

        .location-grid-container .b-datagrid.b-table.table.table-striped {
            /* table-layout: fixed;*/
            width: 100%;
        }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
                width: var(--col1-w) !important;
            }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
                width: var(--col2-w);
            }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(3),
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(3) {
                width: calc((100% - var(--fixed-total)) * 0.4);
            }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(4),
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(4) {
                width: var(--col4-w);
            }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(5),
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(5) {
                width: var(--col5-w);
            }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(6),
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(6) {
                width: calc((100% - var(--fixed-total)) * 0.3);
            }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(7),
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(7) {
                width: calc((100% - var(--fixed-total)) * 0.3);
            }

            .location-grid-container .b-datagrid.b-table.table.table-striped thead th,
            .location-grid-container .b-datagrid.b-table.table.table-striped tbody td {
                padding: 6px 8px !important;
                white-space: nowrap; /* Prevent text wrapping */
                overflow: hidden; /* Hide overflow content */
                text-overflow: ellipsis; /* Show ellipsis for overflowing text */
            }
}

/* ── User DataGrid – Responsive columns ──────────────────────────── */

.user-grid-container {
    container-type: inline-size;
    container-name: user-datagrid;
}

/* Hide columns 5,6,7 on medium-narrow grids (e.g. sidebar expanded) */

@container user-datagrid (max-width: 500px) {
    .user-grid-container .b-datagrid {
        --col1-w: 100px;
        --col2-w: 100px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w) );
    }


        .user-grid-container .b-datagrid th:nth-child(3),
        .user-grid-container .b-datagrid td:nth-child(3),
        .user-grid-container .b-datagrid th:nth-child(5),
        .user-grid-container .b-datagrid td:nth-child(5),
        .user-grid-container .b-datagrid th:nth-child(6),
        .user-grid-container .b-datagrid td:nth-child(6),
        .user-grid-container .b-datagrid th:nth-child(8),
        .user-grid-container .b-datagrid td:nth-child(8) {
            display: none;
        }

        .user-grid-container .b-datagrid.b-table.table.table-striped {
            table-layout: fixed;
            width: 100%;
        }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
                width: var(--col1-w) !important;
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
                width: var(--col2-w);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(4),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(4) {
                width: calc((100% - var(--fixed-total)) * 0.4);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(7),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(7) {
                width: calc((100% - var(--fixed-total)) * 0.3);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th,
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td {
                padding: 3px 5px !important;
                white-space: nowrap; /* Prevent text wrapping */
                overflow: hidden; /* Hide overflow content */
                text-overflow: ellipsis; /* Show ellipsis for overflowing text */
            }
}
@container user-datagrid (min-width: 501px) and (max-width: 800px) {
    .user-grid-container .b-datagrid {
        --col1-w: 100px;
        --col2-w: 140px;
        --col3-w: 60px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w) + var(--col3-w));
    }


        .user-grid-container .b-datagrid th:nth-child(5),
        .user-grid-container .b-datagrid td:nth-child(5),
        .user-grid-container .b-datagrid th:nth-child(6),
        .user-grid-container .b-datagrid td:nth-child(6) {
            display: none;
        }

        .user-grid-container .b-datagrid.b-table.table.table-striped {
            table-layout: fixed;
            width: 100%;
        }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
                width: var(--col1-w) !important;
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
                width: var(--col2-w);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(3),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(3) {
                width: var(--col3-w);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(4),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(4) {
                width: calc((100% - var(--fixed-total)) * 0.4);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(7),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(7) {
                width: calc((100% - var(--fixed-total)) * 0.3);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(8),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(8) {
                width: calc((100% - var(--fixed-total)) * 0.3);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th,
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td {
                padding: 6px 8px !important;
                white-space: nowrap; /* Prevent text wrapping */
                overflow: hidden; /* Hide overflow content */
                text-overflow: ellipsis; /* Show ellipsis for overflowing text */
            }
}

@container user-datagrid (min-width: 801px) and (max-width: 900px) {
    .user-grid-container .b-datagrid {
        --col1-w: 100px;
        --col2-w: 140px;
        --col3-w: 60px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w) + var(--col3-w));
    }


        .user-grid-container .b-datagrid th:nth-child(6),
        .user-grid-container .b-datagrid td:nth-child(6) {
            display: none;
        }

        .user-grid-container .b-datagrid.b-table.table.table-striped {
            table-layout: fixed;
            width: 100%;
        }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
                width: var(--col1-w) !important;
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
                width: var(--col2-w);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(3),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(3) {
                width: var(--col3-w);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(4),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(4) {
                width: calc((100% - var(--fixed-total)) * 0.3);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(5),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(5) {
                width: calc((100% - var(--fixed-total)) * 0.2);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(7),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(7) {
                width: calc((100% - var(--fixed-total)) * 0.25);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(8),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(8) {
                width: calc((100% - var(--fixed-total)) * 0.25);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th,
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td {
                padding: 6px 8px !important;
                white-space: nowrap; /* Prevent text wrapping */
                overflow: hidden; /* Hide overflow content */
                text-overflow: ellipsis; /* Show ellipsis for overflowing text */
            }
}

@container user-datagrid (min-width: 901px) {
    .user-grid-container .b-datagrid {
        --col1-w: 100px;
        --col2-w: 140px;
        --col3-w: 60px;
        --fixed-total: calc(var(--col1-w) + var(--col2-w) + var(--col3-w));
    }

        .user-grid-container .b-datagrid.b-table.table.table-striped {
            table-layout: fixed;
            width: 100%;
        }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(1),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(1) {
                width: var(--col1-w) !important;
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(2),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(2) {
                width: var(--col2-w);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(3),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(3) {
                width: var(--col3-w);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(4),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(4) {
                width: calc((100% - var(--fixed-total)) * 0.2);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(5),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(5) {
                width: calc((100% - var(--fixed-total)) * 0.2);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(6),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(6) {
                width: calc((100% - var(--fixed-total)) * 0.2);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(7),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(7) {
                width: calc((100% - var(--fixed-total)) * 0.2);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th:nth-child(8),
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td:nth-child(8) {
                width: calc((100% - var(--fixed-total)) * 0.2);
            }

            .user-grid-container .b-datagrid.b-table.table.table-striped thead th,
            .user-grid-container .b-datagrid.b-table.table.table-striped tbody td {
                padding: 6px 8px !important;
                white-space: nowrap; /* Prevent text wrapping */
                overflow: hidden; /* Hide overflow content */
                text-overflow: ellipsis; /* Show ellipsis for overflowing text */
            }
}

/* Pagination fix on all ABP Ext DataGrid */

@container bank-datagrid (max-width: 550px) {
    /* Hide ALL page items first */
    .bank-grid-container .pagination .page-item {
        display: none !important;
    }
        /* Show all 4 controls + dropdown */
        .bank-grid-container .pagination .page-item:nth-child(1), /* First */
        .bank-grid-container .pagination .page-item:nth-child(2), /* Prev */
        .bank-grid-container .pagination .page-item:nth-last-child(2), /* Next */
        .bank-grid-container .pagination .page-item:last-child, /* Last */
        .bank-grid-container .pagination .page-item.d-sm-none {
            display: inline-flex !important;
        }
    /* Remove text */
    .bank-grid-container .pagination .page-link {
        font-size: 0 !important;
        padding: 0.35rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
    }
        /* Base icon styling */
        .bank-grid-container .pagination .page-link::after {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 0.95rem;
        }
    /* First */
    .bank-grid-container .pagination .page-item:nth-child(1) .page-link::after {
        content: "\f100"; /* angles-left */
    }
    /* Previous */
    .bank-grid-container .pagination .page-item:nth-child(2) .page-link::after {
        content: "\f104"; /* chevron-left */
    }
    /* Next */
    .bank-grid-container .pagination .page-item:nth-last-child(2) .page-link::after {
        content: "\f105"; /* chevron-right */
    }
    /* Last */
    .bank-grid-container .pagination .page-item:last-child .page-link::after {
        content: "\f101"; /* angles-right */
    }
    /* Dropdown */
    .bank-grid-container .pagination select.form-select {
        width: auto;
        min-width: 65px;
        font-size: 0.85rem;
        padding: 0.25rem 0.4rem;
    }

    .bank-grid-container .pagination {
        gap: 4px;
        align-items: center;
        justify-content: center;
    }

        .bank-grid-container .pagination .page-link {
            transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
        }
            /* Hover */
            .bank-grid-container .pagination .page-link:hover {
                background-color: rgba(0,0,0,0.06);
            }
            /* Click (tap feedback) */
            .bank-grid-container .pagination .page-link:active {
                transform: scale(0.92);
                box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
            }

    .bank-grid-container .table {
        transition: opacity 0.15s ease;
    }

    .bank-grid-container.loading .table {
        opacity: 0.5;
    }

    .bank-grid-container .pagination .page-item.active .page-link {
        transition: all 0.2s ease;
    }

    .bank-grid-container .pagination .page-item.active .page-link {
        transform: scale(1.05);
    }

    .bank-grid-container .row.justify-content-between {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

        .bank-grid-container .row.justify-content-between > div {
            margin: 0 !important;
        }
}

@container location-datagrid (max-width: 550px) {
    /* Hide ALL page items first */
    .location-grid-container .pagination .page-item {
        display: none !important;
    }
        /* Show all 4 controls + dropdown */
        .location-grid-container .pagination .page-item:nth-child(1), /* First */
        .location-grid-container .pagination .page-item:nth-child(2), /* Prev */
        .location-grid-container .pagination .page-item:nth-last-child(2), /* Next */
        .location-grid-container .pagination .page-item:last-child, /* Last */
        .location-grid-container .pagination .page-item.d-sm-none {
            display: inline-flex !important;
        }
    /* Remove text */
    .location-grid-container .pagination .page-link {
        font-size: 0 !important;
        padding: 0.35rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
    }
        /* Base icon styling */
        .location-grid-container .pagination .page-link::after {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 0.95rem;
        }
    /* First */
    .location-grid-container .pagination .page-item:nth-child(1) .page-link::after {
        content: "\f100"; /* angles-left */
    }
    /* Previous */
    .location-grid-container .pagination .page-item:nth-child(2) .page-link::after {
        content: "\f104"; /* chevron-left */
    }
    /* Next */
    .location-grid-container .pagination .page-item:nth-last-child(2) .page-link::after {
        content: "\f105"; /* chevron-right */
    }
    /* Last */
    .location-grid-container .pagination .page-item:last-child .page-link::after {
        content: "\f101"; /* angles-right */
    }
    /* Dropdown */
    .location-grid-container .pagination select.form-select {
        width: auto;
        min-width: 65px;
        font-size: 0.85rem;
        padding: 0.25rem 0.4rem;
    }

    .location-grid-container .pagination {
        gap: 4px;
        align-items: center;
        justify-content: center;
    }

        .location-grid-container .pagination .page-link {
            transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
        }
            /* Hover */
            .location-grid-container .pagination .page-link:hover {
                background-color: rgba(0,0,0,0.06);
            }
            /* Click (tap feedback) */
            .location-grid-container .pagination .page-link:active {
                transform: scale(0.92);
                box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
            }

    .location-grid-container .table {
        transition: opacity 0.15s ease;
    }

    .location-grid-container.loading .table {
        opacity: 0.5;
    }

    .location-grid-container .pagination .page-item.active .page-link {
        transition: all 0.2s ease;
    }

    .location-grid-container .pagination .page-item.active .page-link {
        transform: scale(1.05);
    }

    .location-grid-container .row.justify-content-between {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

        .location-grid-container .row.justify-content-between > div {
            margin: 0 !important;
        }
}

@container user-datagrid (max-width: 550px) {
    /* Hide ALL page items first */
    .user-grid-container .pagination .page-item {
        display: none !important;
    }
        /* Show all 4 controls + dropdown */
        .user-grid-container .pagination .page-item:nth-child(1), /* First */
        .user-grid-container .pagination .page-item:nth-child(2), /* Prev */
        .user-grid-container .pagination .page-item:nth-last-child(2), /* Next */
        .user-grid-container .pagination .page-item:last-child, /* Last */
        .user-grid-container .pagination .page-item.d-sm-none {
            display: inline-flex !important;
        }
    /* Remove text */
    .user-grid-container .pagination .page-link {
        font-size: 0 !important;
        padding: 0.35rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
    }
        /* Base icon styling */
        .user-grid-container .pagination .page-link::after {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 0.95rem;
        }
    /* First */
    .user-grid-container .pagination .page-item:nth-child(1) .page-link::after {
        content: "\f100"; /* angles-left */
    }
    /* Previous */
    .user-grid-container .pagination .page-item:nth-child(2) .page-link::after {
        content: "\f104"; /* chevron-left */
    }
    /* Next */
    .user-grid-container .pagination .page-item:nth-last-child(2) .page-link::after {
        content: "\f105"; /* chevron-right */
    }
    /* Last */
    .user-grid-container .pagination .page-item:last-child .page-link::after {
        content: "\f101"; /* angles-right */
    }
    /* Dropdown */
    .user-grid-container .pagination select.form-select {
        width: auto;
        min-width: 65px;
        font-size: 0.85rem;
        padding: 0.25rem 0.4rem;
    }

    .user-grid-container .pagination {
        gap: 4px;
        align-items: center;
        justify-content: center;
    }

        .user-grid-container .pagination .page-link {
            transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
        }
            /* Hover */
            .user-grid-container .pagination .page-link:hover {
                background-color: rgba(0,0,0,0.06);
            }
            /* Click (tap feedback) */
            .user-grid-container .pagination .page-link:active {
                transform: scale(0.92);
                box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
            }

    .user-grid-container .table {
        transition: opacity 0.15s ease;
    }

    .user-grid-container.loading .table {
        opacity: 0.5;
    }

    .user-grid-container .pagination .page-item.active .page-link {
        transition: all 0.2s ease;
    }

    .user-grid-container .pagination .page-item.active .page-link {
        transform: scale(1.05);
    }

    .user-grid-container .row.justify-content-between {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

        .user-grid-container .row.justify-content-between > div {
            margin: 0 !important;
        }
}

@container transaction-datagrid (max-width: 550px) {
    /* Hide ALL page items first */
    .transaction-grid-container .pagination .page-item {
        display: none !important;
    }
        /* Show all 4 controls + dropdown */
        .transaction-grid-container .pagination .page-item:nth-child(1), /* First */
        .transaction-grid-container .pagination .page-item:nth-child(2), /* Prev */
        .transaction-grid-container .pagination .page-item:nth-last-child(2), /* Next */
        .transaction-grid-container .pagination .page-item:last-child, /* Last */
        .transaction-grid-container .pagination .page-item.d-sm-none {
            display: inline-flex !important;
        }
    /* Remove text */
    .transaction-grid-container .pagination .page-link {
        font-size: 0 !important;
        padding: 0.35rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
    }
        /* Base icon styling */
        .transaction-grid-container .pagination .page-link::after {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 0.95rem;
        }
    /* First */
    .transaction-grid-container .pagination .page-item:nth-child(1) .page-link::after {
        content: "\f100"; /* angles-left */
    }
    /* Previous */
    .transaction-grid-container .pagination .page-item:nth-child(2) .page-link::after {
        content: "\f104"; /* chevron-left */
    }
    /* Next */
    .transaction-grid-container .pagination .page-item:nth-last-child(2) .page-link::after {
        content: "\f105"; /* chevron-right */
    }
    /* Last */
    .transaction-grid-container .pagination .page-item:last-child .page-link::after {
        content: "\f101"; /* angles-right */
    }
    /* Dropdown */
    .transaction-grid-container .pagination select.form-select {
        width: auto;
        min-width: 65px;
        font-size: 0.85rem;
        padding: 0.25rem 0.4rem;
    }

    .transaction-grid-container .pagination {
        gap: 4px;
        align-items: center;
        justify-content: center;
    }

        .transaction-grid-container .pagination .page-link {
            transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
        }
            /* Hover */
            .transaction-grid-container .pagination .page-link:hover {
                background-color: rgba(0,0,0,0.06);
            }
            /* Click (tap feedback) */
            .transaction-grid-container .pagination .page-link:active {
                transform: scale(0.92);
                box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
            }

    .transaction-grid-container .table {
        transition: opacity 0.15s ease;
    }

    .transaction-grid-container.loading .table {
        opacity: 0.5;
    }

    .transaction-grid-container .pagination .page-item.active .page-link {
        transition: all 0.2s ease;
    }

    .transaction-grid-container .pagination .page-item.active .page-link {
        transform: scale(1.05);
    }

    .transaction-grid-container .row.justify-content-between {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

        .transaction-grid-container .row.justify-content-between > div {
            margin: 0 !important;
        }
}

/* Let row action dropdowns escape the first column's ellipsis clipping. */
.bank-grid-container .b-datagrid thead th:first-child,
.bank-grid-container .b-datagrid tbody td:first-child,
.location-grid-container .b-datagrid thead th:first-child,
.location-grid-container .b-datagrid tbody td:first-child,
.user-grid-container .b-datagrid thead th:first-child,
.user-grid-container .b-datagrid tbody td:first-child,
.transaction-grid-container .b-datagrid thead th:first-child,
.transaction-grid-container .b-datagrid tbody td:first-child {
    overflow: visible !important;
    text-overflow: clip !important;
}

.bank-grid-container .b-datagrid tbody td:first-child .dropdown-menu-position-strategy,
.location-grid-container .b-datagrid tbody td:first-child .dropdown-menu-position-strategy,
.user-grid-container .b-datagrid tbody td:first-child .dropdown-menu-position-strategy,
.transaction-grid-container .b-datagrid tbody td:first-child .dropdown-menu-position-strategy {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1050;
}

/* DatPro manager administration */

.datpro-managers-toolbar {
    gap: 0.75rem;
}

.datpro-managers-search {
    min-width: min(100%, 22rem);
}

.datpro-managers-create {
    margin-left: auto;
}

.datpro-manager-data-area {
    container-name: datpro-manager-data;
    container-type: inline-size;
}

.datpro-manager-grid-wrap {
    container-name: datpro-manager-grid;
    container-type: inline-size;
}

.datpro-manager-mobile-view {
    display: none;
}

.datpro-manager-mobile-view--standalone {
    display: block;
}

.datpro-manager-mobile-list {
    display: grid;
    gap: 0.625rem;
}

.datpro-manager-mobile-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0.75rem;
}

.datpro-manager-mobile-card__top {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    min-height: 2rem;
}

.datpro-manager-mobile-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: flex-end;
}

.datpro-manager-mobile-id {
    color: #5f6b7a;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}

.datpro-manager-mobile-name {
    font-weight: 600;
    line-height: 1.25;
    margin-top: 0.625rem;
    overflow-wrap: anywhere;
}

.datpro-manager-mobile-email,
.datpro-manager-mobile-phone {
    color: #5f6b7a;
    font-size: 0.875rem;
    line-height: 1.3;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

.datpro-manager-mobile-empty {
    border: 1px dashed rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    color: #5f6b7a;
    padding: 1rem;
    text-align: center;
}

.datpro-manager-mobile-pager {
    margin-top: 0.875rem;
}

.datpro-manager-profile-page {
    display: grid;
    gap: 1rem;
}

.datpro-manager-profile-header {
    align-items: flex-start;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.datpro-manager-profile-header h3 {
    color: #18364f;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.datpro-manager-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.datpro-manager-profile-meta span {
    background: #f2f5f8;
    border: 1px solid #dfe6ee;
    border-radius: 999px;
    color: #34495e;
    font-size: 0.8125rem;
    line-height: 1.2;
    padding: 0.25rem 0.625rem;
}

.datpro-manager-profile-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.datpro-manager-profile-form {
    background: #ffffff;
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.datpro-manager-profile-section {
    display: grid;
    gap: 0.875rem;
}

.datpro-manager-profile-password-section {
    background: #f8fafc;
    border: 1px solid #d8e2ec;
    border-radius: 8px;
    margin-top: 0.25rem;
    padding: 1rem;
}

.datpro-manager-profile-password-section .btn {
    justify-self: stretch;
}

.datpro-manager-profile-section h4 {
    color: #18364f;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.datpro-manager-profile-grid {
    display: grid;
    gap: 0.875rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.datpro-manager-profile-flags {
    display: grid;
    gap: 0.625rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.datpro-manager-profile-check {
    align-items: center;
    color: #34495e;
    display: inline-flex;
    gap: 0.5rem;
    line-height: 1.25;
    margin: 0;
    min-height: 1.75rem;
}

.datpro-manager-profile-empty {
    background: #ffffff;
    border: 1px dashed rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    color: #5f6b7a;
    padding: 1rem;
    text-align: center;
}

.datpro-manager-grid-wrap .b-datagrid {
    overflow: visible !important;
    table-layout: fixed;
    width: 100%;
}

.datpro-manager-grid-wrap .table-responsive,
.datpro-manager-grid-wrap .b-datagrid-container,
.datpro-manager-grid-wrap .b-datagrid-body,
.datpro-manager-grid-wrap .b-datagrid-row,
.datpro-manager-grid-wrap .b-datagrid tbody,
.datpro-manager-grid-wrap .b-datagrid tr {
    overflow: visible !important;
}

.datpro-manager-grid-wrap .b-datagrid th,
.datpro-manager-grid-wrap .b-datagrid td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datpro-manager-grid-wrap .b-datagrid th:nth-child(1),
.datpro-manager-grid-wrap .b-datagrid td:nth-child(1) {
    width: 8rem;
}

.datpro-manager-grid-wrap .b-datagrid th:nth-child(2),
.datpro-manager-grid-wrap .b-datagrid td:nth-child(2) {
    width: 7rem;
}

.datpro-manager-grid-wrap .b-datagrid th:nth-child(3),
.datpro-manager-grid-wrap .b-datagrid td:nth-child(3) {
    width: 32%;
}

.datpro-manager-grid-wrap .b-datagrid thead th:first-child,
.datpro-manager-grid-wrap .b-datagrid tbody td:first-child {
    overflow: visible !important;
    text-overflow: clip !important;
}

.datpro-manager-grid-wrap .b-datagrid tbody td:first-child .dropdown-menu-position-strategy {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1050;
}

@container datpro-manager-grid (max-width: 900px) {
    .datpro-manager-grid-wrap .b-datagrid th,
    .datpro-manager-grid-wrap .b-datagrid td {
        padding: 0.375rem 0.5rem;
    }

    .datpro-manager-grid-wrap .b-datagrid th:nth-child(1),
    .datpro-manager-grid-wrap .b-datagrid td:nth-child(1) {
        width: 6.5rem;
    }

    .datpro-manager-grid-wrap .b-datagrid th:nth-child(2),
    .datpro-manager-grid-wrap .b-datagrid td:nth-child(2) {
        width: 6rem;
    }
}

@container datpro-manager-data (max-width: 700px) {
    .datpro-manager-grid-wrap {
        display: none;
    }

    .datpro-manager-mobile-view {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .datpro-managers-toolbar {
        align-items: stretch !important;
        flex-direction: column;
    }

    .datpro-managers-title,
    .datpro-managers-create,
    .datpro-managers-search {
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    .datpro-managers-create {
        margin-left: 0;
    }

    .datpro-managers-create .btn {
        width: 100%;
    }

    .datpro-managers-search {
        flex: 0 0 100%;
    }

    .datpro-manager-grid-wrap {
        display: none;
    }

    .datpro-manager-mobile-view {
        display: block;
    }

    .datpro-manager-mobile-list {
        display: grid;
        gap: 0.625rem;
    }

    .datpro-manager-mobile-card {
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding: 0.75rem;
    }

    .datpro-manager-mobile-card__top {
        align-items: center;
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;
        min-height: 2rem;
    }

    .datpro-manager-mobile-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .datpro-manager-mobile-id {
        color: #5f6b7a;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .datpro-manager-mobile-name {
        font-weight: 600;
        line-height: 1.25;
        margin-top: 0.625rem;
        overflow-wrap: anywhere;
    }

    .datpro-manager-mobile-email,
    .datpro-manager-mobile-phone {
        color: #5f6b7a;
        font-size: 0.875rem;
        line-height: 1.3;
        margin-top: 0.25rem;
        overflow-wrap: anywhere;
    }

    .datpro-manager-mobile-empty {
        border: 1px dashed rgba(0, 0, 0, 0.16);
        border-radius: 8px;
        color: #5f6b7a;
        padding: 1rem;
        text-align: center;
    }

    .datpro-manager-profile-header,
    .datpro-manager-profile-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .datpro-manager-profile-actions .btn {
        width: 100%;
    }

    .datpro-manager-profile-grid,
    .datpro-manager-profile-flags {
        grid-template-columns: 1fr;
    }

}