html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: black !important;
   
}


/*
   ==== ToolBar
   
*/
.k-toolbar {
    border-color: rgba(0, 0, 0, 0.08);
    color: black !important;
    background-color: #fafafa !important;
}
    .k-toolbar.mytoolbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
        background: #ffffff !important;
        border: 1px solid #e5eaf3 !important;
        border-radius: 16px !important;
        padding: 10px 12px !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        margin-bottom: 18px;
        
    }

    .mytoolbar .k-button {
        border-radius: 8px !important;
        min-height: 26px;
        padding: 7px 14px !important;
        font-weight: 600;
        border-color: #d7dfec !important;
    }
.MyToolBarButtonDefault {
    min-height: 36px !important;
    padding: 7px 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #1274ac !important;
    color: #ffffff !important;
    border: 1px solid #0f6697 !important;
    border-radius: 10px !important;
    font-weight: 600;
    line-height: 1.2;
    box-sizing: border-box !important;
    cursor: pointer;
    outline: none !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

    .MyToolBarButtonDefault::before,
    .MyToolBarButtonDefault::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .MyToolBarButtonDefault:hover {
        background-color: #0f6697 !important;
        color: #ffffff !important;
        border-color: #0b5279 !important;
        outline: none !important;
        transform: none !important;
        box-shadow: 0 4px 10px rgba(18, 116, 172, 0.25) !important;
    }

    .MyToolBarButtonDefault:focus,
    .MyToolBarButtonDefault:focus-visible,
    .MyToolBarButtonDefault.k-focus {
        background-color: #0f6697 !important;
        color: #ffffff !important;
        border-color: #0b5279 !important;
        outline: none !important;
        outline-offset: 0 !important;
        transform: none !important;
        box-shadow: 0 0 0 3px rgba(18, 116, 172, 0.2) !important;
    }

    .MyToolBarButtonDefault:active,
    .MyToolBarButtonDefault.k-active,
    .MyToolBarButtonDefault.k-selected {
        background-color: #0b5279 !important;
        color: #ffffff !important;
        border-color: #094766 !important;
        outline: none !important;
        transform: none !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16) !important;
    }

    .MyToolBarButtonDefault .k-icon {
        color: #ffffff !important;
        transition: none !important;
    }

    .MyToolBarButtonDefault:disabled,
    .MyToolBarButtonDefault.k-disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

.MyToolBarButton,
.MyToolBarButtonAction {
    background-color: #fafafa !important;
    color: #1f3b64 !important;
    border: 1px solid #d7dfec !important;
    border-radius: 10px !important;
    font-weight: 600;
    padding: 7px 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box !important;
    cursor: pointer;
    outline: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
}

    .MyToolBarButton::before,
    .MyToolBarButton::after,
    .MyToolBarButtonAction::before,
    .MyToolBarButtonAction::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    .MyToolBarButton .k-icon,
    .MyToolBarButtonAction .k-icon {
        color: #1274ac !important;
        font-size: 16px;
        transition: none !important;
    }

    .MyToolBarButton:hover,
    .MyToolBarButton:focus,
    .MyToolBarButton:focus-visible,
    .MyToolBarButton:active,
    .MyToolBarButton.k-focus,
    .MyToolBarButton.k-active,
    .MyToolBarButton.k-selected,
    .MyToolBarButtonAction:hover,
    .MyToolBarButtonAction:focus,
    .MyToolBarButtonAction:focus-visible,
    .MyToolBarButtonAction:active,
    .MyToolBarButtonAction.k-focus,
    .MyToolBarButtonAction.k-active,
    .MyToolBarButtonAction.k-selected {
        background-color: #1274ac !important;
        color: #ffffff !important;
        border-color: #1274ac !important;
        outline: none !important;
        outline-offset: 0 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
    }

        .MyToolBarButton:hover .k-icon,
        .MyToolBarButton:focus .k-icon,
        .MyToolBarButton:focus-visible .k-icon,
        .MyToolBarButton:active .k-icon,
        .MyToolBarButton.k-focus .k-icon,
        .MyToolBarButton.k-active .k-icon,
        .MyToolBarButtonAction:hover .k-icon,
        .MyToolBarButtonAction:focus .k-icon,
        .MyToolBarButtonAction:focus-visible .k-icon,
        .MyToolBarButtonAction:active .k-icon,
        .MyToolBarButtonAction.k-focus .k-icon,
        .MyToolBarButtonAction.k-active .k-icon {
            color: #ffffff !important;
        }


/* =========================
COMMON GRID
========================= */

/*.app-grid {
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid #e5eaf3 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    background: #ffffff;
}

    .app-grid .k-grid-header,
    .app-grid .k-grid-header-wrap,
    .app-grid .k-grid-header table,
    .app-grid .k-grid-header th {
        background: #f5f5f5 !important;*/
        /*background: #E5E5E5 !important;*/
    /*}

        .app-grid .k-grid-header th,
        .app-grid .k-grid-header th .k-link,
        .app-grid .k-grid-header th .k-column-title,
        .app-grid .k-grid-header th .k-cell-inner {*/
          /*  color: #555555 !important;*/
            /*font-size: 13px;
            font-family: "Segoe UI", Arial, sans-serif;
            font-weight: 600 !important;
            color: #333333 !important;
            letter-spacing: 0.2px;
        }

        .app-grid .k-grid-header th {
            border-color: #d7dfec !important;
            padding-top: 12px !important;
            padding-bottom: 12px !important;
        }

    .app-grid .k-grid-content td {
        border-color: #f2f2f2 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        color: #26364d;
    }

    .app-grid .k-grid-content tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .app-grid .k-grid-content tr:hover {
        background-color: #e0e0e0 !important;
    }*/
.app-grid {
    border-radius: 16px !important;
    /*overflow: hidden;*/
    overflow: visible !important;
    border: 1px solid #e5eaf3 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    background: #ffffff;
    font-size: 13px;
}

    .app-grid .k-grid-header,
    .app-grid .k-grid-header-wrap,
    .app-grid .k-grid-header table,
    .app-grid .k-grid-header th {
        background: #f5f5f5 !important;
    }

        .app-grid .k-grid-header th,
        .app-grid .k-grid-header th .k-link,
        .app-grid .k-grid-header th .k-column-title,
        .app-grid .k-grid-header th .k-cell-inner {
            font-size: 12.5px !important;
            font-weight: 700 !important;
            color: #374151 !important;
            letter-spacing: 0.1px;
        }

        .app-grid .k-grid-header th {
            border-color: #d7dfec !important;
            padding-top: 12px !important;
            padding-bottom: 12px !important;
        }

    .app-grid .k-grid-content td {
        font-size: 13px !important;
        font-weight: 400;
        color: #1f2937;
        border-color: #f2f2f2 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .app-grid .k-grid-content tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .app-grid .k-grid-content tr:hover {
        background-color: #e0e0e0 !important;
    }

        .app-grid .k-grid-content tr:hover td {
            color: #111827;
        }

    .app-grid .k-grid-footer {
        background: #f8fafc !important;
        font-weight: 700;
        color: #0b3b82;
        min-height: 40px !important;
    }

    .app-grid .k-button {
        border-radius: 9px !important;
    }

    /*.app-grid .k-grid-toolbar {
        
        min-height: 58px !important;
        padding: 12px 14px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e5e5e5 !important;
        display: flex;
        align-items: center;
        gap: 8px;
    }*/



    .app-grid .k-grid-toolbar {
        position: sticky !important;
        top: 0;
        z-index: 100;
        min-height: 58px !important;
        padding: 10px 14px !important;
        background: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% ) !important;
        border: 0 !important;
        border-bottom: 1px solid #dfe5ee !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        backdrop-filter: blur(8px);
    }
        .app-grid .k-grid-toolbar .k-button {
            min-height: 36px !important;
            height: 36px;
            padding: 7px 14px !important;
            border-radius: 9px !important;
            font-weight: 600;
            line-height: 1.2;
            transform: none !important;
        }
    

/* =========================
COMMON FORM
========================= */

.app-label {
    display: block;
    margin-bottom: 6px !important;
    font-size: 13px;
    font-weight: 600;
    color: #1f3b64;
}

.app-form-card {
    background: #fafafa;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border: 1px solid #e5eaf3;
}

/*    .app-form-card .k-input,
    .app-form-card .k-picker,
    .app-form-card .k-textarea {
        border-radius: 10px !important;
        border-color: #d7dfec !important;
        min-height: 40px;
        box-shadow: none !important;
    }

        .app-form-card .k-input:focus-within,
        .app-form-card .k-picker:focus-within,
        .app-form-card .k-textarea:focus-within {
            border-color: #0d6efd !important;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12) !important;
        }*/

        /*
            For CHeckBox
        */
    .app-form-card .k-checkbox {
        width: 25px !important;
        height: 25px !important;
        border-radius: 5px !important;
        border-color: #d7dfec !important;
        box-shadow: none !important;
    }

        .app-form-card .k-checkbox:checked {
            background-color: #1274AC !important;
            border-color: #1274AC !important;
        }

        .app-form-card .k-checkbox:focus {
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12) !important;
        }
/* =========================
COMMON AMOUNT BOX
========================= */

.app-amount-box {
    background-color: #e0e0e0;
    border: 1px solid #bcd7ff;
    border-radius: 12px;
    padding: 12px 16px;
    display: inline-block;
    min-width: 180px;
    margin-top: 22px;
    width: 220px;
}

    .app-amount-box span {
        font-size: 13px;
        font-weight: 600;
        color: #1f3b64;
    }

    .app-amount-box h3 {
        margin: 4px 0 0;
        color: #0b3b82;
        font-weight: 800;
    }

/*
    Drop-Down On Each List Page On Top
*/


/*
    Search Box
*/
.app-grid .k-grid-search,
.app-grid .k-grid-search .k-input,
.app-grid .k-grid-search .k-input-inner,
.app-grid .k-grid-search .k-input-md {
    border-radius: 16px !important;
    width: 200px !important;
}
/*
    Help Button
*/
.help-btn {
    min-height: 38px;
    padding: 7px 14px !important;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bottombar {
    width: 100% !important;
    background-color: #fafafa !important;
    border-top: 1px solid #ddd !important;
    padding: 4px !important;
    margin-top: 20px;
    margin-bottom: 2px; /* space below */
}
.status-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 4px !important;
}
   .myfieldset {
    margin: 2px;
    border: 1px solid #ECECEC;
    padding: 8px;
    border-radius: 4px;
}

.mylegend {
    padding: 2px;
}

h1:focus {
    outline: none;
}

 .btn-link {
    color: #0071c1;
}
.GridActiveStatus {
    background-color: #1274AC;
    color: white;
    border-radius: 25px;
    width: 120px;
    height: 30px;
    font-size: 12px;
    padding: 8px;
}

.GridInActiveStatus {
    background-color: red;
    color: white;
    border-radius: 25px;
    width: 120px;
    height: 30px;
    font-size: 12px;
    padding: 8px;
}
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 0.3rem;
    /*padding-top: 1.1rem;*/
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }
.demo-notification {
    position: absolute;
    z-index: 100;
}

    .demo-notification .k-notification {
        width: 320px;
    }

.stock-info-message {
    font-size: 16px;
    font-weight: bold;
    padding-left: 6px;
    padding-top: 5px;
    margin: 0;
}
.notif {
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 10px;
}

a.myalink {
    color: #1274AC !important;
}
a.mysearchlink {
    color: #1274AC !important;
}

/*a.mysearchlink:hover {
    color: white !important;
}
   */
    /*a:visited {
        color: #1274AC !important;
    }*/

    /* mouse over link */
    /*a:hover {
        color: #1274AC !important;
    }*/

    /* selected link */
    /*a:active {
        color: #1274AC !important;
    }*/


.logoutbutton
{
    color: #1274AC !important;
 }

.ButtonMargin {
    margin-top: 3px;
    margin-left: 2px;
    margin-right: 2px;
    width: 110px;
    height: 80px;
   
    word-wrap: break-word !important; /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    white-space: normal !important;
    vertical-align: central;
    background-color: #1274AC !important;
    color:white !important;
  
}
/*.DeshboardButtonMargin {
    margin-top: 3px;
    margin-left: 2px;
    margin-right: 2px;
    width: 210px;
    height: 100px;
    word-wrap: break-word !important;*/ /* Internet Explorer 5.5+ */
    /*white-space: -webkit-pre-wrap;*/ /* Newer versions of Chrome/Safari*/
    /*white-space: normal !important;
    vertical-align: central;
    background-color: #1274AC !important;
    color: white !important;
}*/

/*.mytoolbar {
    position: fixed;
    background-color: #fafafa;
    padding-top: 10px;
}*/


.mymenu {
    background-color: white !important;
    width: 100%;
    text-align: center;
    font-size: small;
    font-weight: bold;
    /*border-bottom: 1px solid #FFCC99;*/
}
label {
    color:#4A4A4A !important;
}

.k-menu-link {
    color:#4A4A4A !important;
}
    .k-menu-link:hover {
        background-color: #e9f1f7 !important; /* Adjust this color as needed */
    }
k-menu-group .k-item > .k-link:active, .k-menu-group .k-item > .k-link.k-active, .k-menu-group .k-item > .k-link.k-selected, .k-menu.k-context-menu .k-item > .k-link:active, .k-menu.k-context-menu .k-item > .k-link.k-active, .k-menu.k-context-menu .k-item > .k-link.k-selected {
    background-color: #e9f1f7 !important;
}


/*
    .lookupButton {
    height: 30px;
    width: 80px;
}

    .lookupButton:hover {
        color: gray;
        height: 30px;
        width: 80px;
    }
*/


.myNumericTextbox .k-input-inner,
.myCombobox .k-input-inner {
    text-align: right;
}

.k-grid-header th {
      font-weight: bold !important;
  
}

.k-grid-footer td, .k-group-footer td, .k-grouping-row td, .k-grid-footer .k-table-td, .k-group-footer .k-table-td, .k-grouping-row .k-table-td {
    font-weight: bold;
    text-align: right !important;
   
}

.k-grid th.GridCol-align-right {
    text-align: right;
}
/* sortable headers */
th.GridCol-align-right .k-cell-inner > .k-link {
    justify-content: right;
}

.k-grid th.GridCol-align-center {
    text-align: center;
}
/* sortable headers */
th.GridCol-align-center .k-cell-inner > .k-link {
    justify-content: center;
}


.MultiColHeader {
    padding: 8px 12px;
    font-weight: bold;
}

/*.searchButton:hover {
    color: white !important;
    background-color: dimgray !important;
    border: 1px solid black !important;
}

.searchButton:active {
    color: white !important;
    background-color: dimgray !important;
    border: 1px solid black !important;
}

.searchButton:focus {
    color: white !important;
    background-color: dimgray !important;
    border: 1px solid black !important;
}*/

/*
.searchButton {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;

    background-color: #1274AC !important;
    color: white !important;
    border: 1px solid #1274AC !important;
    border-radius: 10px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    .searchButton .k-icon {
        color: white !important;
        transition: color 0.2s ease;
        font-size: 16px;
        font-weight:bold;
        vertical-align: middle;
    }
    .searchButton:hover,
    .searchButton:focus,
    .searchButton:active {
        background-color: white !important;
        color: #1274AC !important;
        border: 1px solid #1274AC !important;
        transform: scale(1.03);
        outline: none;
    }

        .searchButton:hover .k-icon,
        .searchButton:focus .k-icon,
        .searchButton:active .k-icon {
            color: #1274AC !important;
        }

    .searchButton:focus-visible {
        outline: 2px solid #1274AC;
        outline-offset: 2px;
    }*/
.searchButton {
    background-color: #1274AC !important;
    color: white !important;
    border: 1px solid #1274AC !important;
    border-radius: 6px;
    font-weight: 500;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

    .searchButton .k-icon {
        color: white !important;
        transition: color 0.2s ease;
        font-size: 16px;
        vertical-align: middle;
    }

    .searchButton:hover,
    .searchButton:focus,
    .searchButton:active {
        background-color: white !important;
        color: #1274AC !important;
        border: 1px solid #1274AC !important;
        transform: scale(1.03);
        outline: none;
    }

        .searchButton:hover .k-icon,
        .searchButton:focus .k-icon,
        .searchButton:active .k-icon {
            color: #1274AC !important;
        }

    .searchButton:focus-visible {
        outline: 2px solid #1274AC;
        outline-offset: 2px;
    }



.lookupButton {
    background-color: #1274AC !important;
    color: white !important;
    border: 1px solid #1274AC !important;
    border-radius: 6px;
    font-weight: 500;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

    .lookupButton .k-icon {
        color: white !important;
        transition: color 0.2s ease;
        font-size: 16px;
        vertical-align: middle;
    }

    .lookupButton:hover,
    .lookupButton:focus,
    .lookupButton:active {
        background-color: white !important;
        color: #1274AC !important;
        border: 1px solid #1274AC !important;
        transform: scale(1.03);
        outline: none;
    }

        .lookupButton:hover .k-icon,
        .lookupButton:focus .k-icon,
        .lookupButton:active .k-icon {
            color: #1274AC !important;
        }

    .lookupButton:focus-visible {
        outline: 2px solid #1274AC;
        outline-offset: 2px;
    }

/*

.lookupButton:hover {
    color: white !important;
    background-color: dimgray !important;
    border: 1px solid black !important;
}

.lookupButton:active {
    color: white !important;
    background-color: dimgray !important;
    border: 1px solid black !important;
}

.lookupButton:focus {
    color: white !important;
    background-color: dimgray !important;
    border: 1px solid black !important;
}*/
/*.SaveBackButton:hover {
    color: white !important;
    background-color: dimgray !important;
    border: 1px solid black !important;
}
.SaveBackButton .k-icon {
    color: #1274AC;*/ /* or any color you want */
/*}

.SaveBackButton:hover .k-icon {
    color: white !important;
    background-color: dimgray !important;
}
.SaveBackButton:active {
    color: white !important;
    background-color: dimgray !important;
    border: 1px solid black !important;
}

.SaveBackButton:focus {
    color: white !important;
    background-color: dimgray !important;
    border: 1px solid black !important;
}*/

/* Default State */
.SaveBackButton {
    background-color: #ffffff;
    color: #1274AC;
    border: 1px solid #1274AC;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* spacing between icon and text */
    padding: 6px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

    /* Icon default */
    .SaveBackButton .k-icon {
        color: #1274AC !important;
        transition: color 0.2s ease;
    }

    /* Hover, Focus, Active states */
    .SaveBackButton:hover,
    .SaveBackButton:focus,
    .SaveBackButton:active {
        background-color: dimgray !important;
        color: #ffffff !important;
        border: 1px solid #333 !important;
        outline: none;
    }

        /* Icon on interaction */
        .SaveBackButton:hover .k-icon,
        .SaveBackButton:focus .k-icon,
        .SaveBackButton:active .k-icon {
            color: #ffffff !important;
        }


/*

.MyToolBarButtonDefault {
    background-color: #1274AC !important;
    color: #fff !important;
    border: 1px solid #0f6697;
    border-radius: 6px;
    font-weight: 500;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

    .MyToolBarButtonDefault:hover {
        background-color: #0f6697 !important;
        border-color: #0b5279;
        box-shadow: 0 4px 10px rgba(18, 116, 172, 0.25);
        transform: translateY(-1px);
    }

    .MyToolBarButtonDefault:active {
        background-color: #0b5279 !important;
        border-color: #094766;
        box-shadow: 0 2px 5px rgba(18, 116, 172, 0.18);
        transform: translateY(0);
    }

    .MyToolBarButtonDefault:focus,
    .MyToolBarButtonDefault:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(18, 116, 172, 0.25);
    }


    .MyToolBarButtonDefault .k-icon {
        color: white !important;
    }*/




/*.MyToolBarButtonAction {
    background-color: #fafafa !important;
   
    border: 1px solid #1274AC;
    border-radius: 6px;
    font-weight: 500;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.MyToolBarButtonAction .k-icon {
    color: #1274AC;
    transition: color 0.2s ease;
    font-size: 16px;
    vertical-align: middle;
}*/
 /*Base button style*/ 
/*.MyToolBarButton {
    background-color: #fafafa !important;
    color: #1274AC;
    border: 1px solid #1274AC;
    border-radius: 6px !important;
    font-weight: 500;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.MyToolBarButton .k-icon {
        color: #1274AC;
        transition: color 0.2s ease;
        font-size: 16px;
        vertical-align: middle;
    }

    .MyToolBarButton:hover,
    .MyToolBarButton:focus,
    .MyToolBarButton:active {
        background-color: #1274AC !important;
        color: white !important;
        border: 1px solid #1274AC !important;
        transform: scale(1.03);
        outline: none;
    }

        .MyToolBarButton:hover .k-icon,
        .MyToolBarButton:focus .k-icon,
        .MyToolBarButton:active .k-icon {
            color: white !important;
        }

    .MyToolBarButton:focus-visible {
        outline: 2px solid #1274AC;
        outline-offset: 2px;
    }
*/

.MyCommandButton {
    background-color: #1274AC !important;
    color: white !important;
    border: 1px solid #1274AC !important;
    border-radius: 10px !important;
    font-weight: 500;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

    .MyCommandButton .k-icon {
        color: white !important;
        transition: color 0.2s ease;
        font-size: 16px;
        vertical-align: middle;
    }

    .MyCommandButton:hover,
    .MyCommandButton:focus,
    .MyCommandButton:active {
        background-color: white !important;
        color: #1274AC !important;
        border: 1px solid #1274AC !important;
        transform: scale(1.03);
        outline: none;
    }

        .MyCommandButton:hover .k-icon,
        .MyCommandButton:focus .k-icon,
        .MyCommandButton:active .k-icon {
            color: #1274AC !important;
        }

    .MyCommandButton:focus-visible {
        outline: 2px solid #1274AC;
        outline-offset: 2px;
    }

.MyToolBarDeleteButton {
   background-color: #fafafa !important;
   border-radius: 10px !important;
   font-weight: 600;
   padding: 7px 14px !important;
   display: inline-flex;
   align-items : center;
}
    .MyToolBarDeleteButton .k-icon {
    color: #1274AC; /* or any color you want */
}
.MyToolBarDeleteButton:hover {
    background-color: #1274AC !important;
    color: #fff !important;
    border-color: #1274AC !important;
}

    .MyToolBarDeleteButton:hover .k-icon {
        color: white !important;
        background-color: #1274AC !important;
    }
.button-glow {
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease-in-out;
}

    .button-glow:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
    }
/*.k-button .k-icon {
    color: var(--kendo-primary-color, #008000);*/ /* Use theme variable */
/*}*/
.sidebarmsg {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    background-color: #f3f2f7;
    color: rgba(0, 0, 0, 0.75);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    border: 1px solid #8f8a8a;
}

    .sidebarmsg a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: rgba(0, 0, 0, 0.75);
        display: block;
        transition: 0.3s;
    }

        .sidebarmsg a:hover {
            color: rgba(0, 0, 0, 0.45);
        }

    .sidebarmsg .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }


.nested-dropdown {
    display: none;
    position: absolute;
    background-color: var(--primary-color);
    border: 1px solid #ccc;
    z-index: 1000;
    padding: 5px;
    margin-top: 5px;
    min-width: 150px;
}

    .nested-dropdown .dropdown-item {
        display: block;
        padding: 5px 10px;
        text-align: left;
        background: none;
        border: none;
        text-decoration: none;
        color: #fff;
        cursor: pointer;
        width: 100%;
    }

        .nested-dropdown .dropdown-item:hover {
            background-color: #f0f0f0;
            color: #424242;
        }

.user-auth-box {
    background-color: #e9f1f7;
    padding: 6px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(18, 116, 172, 0.1);
    transition: background-color 0.3s ease;
}

.user-auth-box:hover {
    background-color: #e6f3fc;
}

.user-name-link {
    font-size: 1rem;
    color: #1274AC !important;
}

.logoutbutton {
    transition: background-color 0.2s ease;
}

.logoutbutton:hover {
    background-color: #e63946;
    color: #fff;
    border-color: #e63946;
}



.k-checkbox {
    width: 18px !important;
    height: 18px !important;
    border-color:dimgrey !important;
 
    transition: background-color 0.2s, border-color 0.2s;
}

    /* Checked state */
    .k-checkbox:checked,
    .k-checkbox.k-checked {
     
        border-color: dimgrey !important;
    }

    /* The checkmark symbol inside the checkbox */
    .k-checkbox::after {
        border-color: #fff !important; /* white checkmark */
        border-width: 2px;
        transform: scale(1.2); /* slightly enlarge checkmark */
    }
@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }
}



    /*.k-grid .k-grid-header {
    background-color: #f4f9fd !important;*/ /* slightly lighter */
    /*}

.k-grid .k-header {
    background-color: #f4f9fd !important;
    border-bottom: none !important;
    color: black !important;*/ /* for readable contrast */
    /*}*/

.status-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: #f8f9fa;
    border-top: 1px solid #ddd;
    font-size: 13px;
    z-index: 100;
}

.status-text {
    font-weight: 500;
}

.log-container {
    font-family: Consolas, monospace;
    font-size: 12px;
    max-height: 100%;
    overflow-y: auto;
}

.log-line {
    padding: 2px 0;
    border-bottom: 1px dashed #eee;
}

:root {
    --app-primary: #1274AC;*/ /* your theme */
    /*--app-tabs-bg: #e6f3fc;*/ /* sky-blue bar */
    /*--app-border: #D6DBE3;
    --app-text: #334155;
}

/* Frame */
.app-tabs.k-tabstrip,
.app-tabs .k-tabstrip {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    overflow: hidden;
}

/* Header bar background */
.app-tabs .k-tabstrip-items-wrapper,
.app-tabs .k-tabstrip-items {
    background: var(--app-tabs-bg) !important;
    border-bottom: 1px solid var(--app-border);
}

    /* Tabs */
    .app-tabs .k-tabstrip-items .k-item,
    .app-tabs .k-tabstrip-items .k-tabstrip-item {
        margin: 0;
        border: 0;
    }

    /* Tab button */
    .app-tabs .k-tabstrip-items .k-link {
        padding: 12px 18px;
        font-weight: 600;
        color: var(--app-text);
        background: transparent;
        border: 0;
        border-radius: 0;
    }

        /* Hover */
        .app-tabs .k-tabstrip-items .k-link:hover {
            background: rgba(255,255,255,0.55);
        }

    /* Active tab (works across Kendo/Telerik class variations) */
    .app-tabs .k-tabstrip-items .k-active .k-link,
    .app-tabs .k-tabstrip-items .k-state-active .k-link,
    .app-tabs .k-tabstrip-items .k-selected .k-link {
        background: #fff !important;
        color: var(--app-primary) !important;
        position: relative;
    }

        /* Active indicator line (top) */
        .app-tabs .k-tabstrip-items .k-active .k-link::after,
        .app-tabs .k-tabstrip-items .k-state-active .k-link::after,
        .app-tabs .k-tabstrip-items .k-selected .k-link::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 3px;
            background: var(--app-primary);
        }

/* Content area */
.app-tabs .k-content,
.app-tabs .k-tabstrip-content {
    background: #fff;
    padding: 16px;
}

/* Optional: remove default focus outline if theme adds ugly ring */
.app-tabs .k-tabstrip-items .k-link:focus {
    outline: none;
    box-shadow: none;
}

.k-badge.k-badge-solid.k-badge-error {
    background-color: var(--kendo-color-error, #d32f2f) !important;
    border-color: var(--kendo-color-error, #d32f2f) !important;
    color: #fff !important;
}

.k-window.k-window-primary .k-window-titlebar {
    color: var(--kendo-color-on-app-surface, #424242) !important;
    background-color: var(--kendo-color-surface, #fafafa) !important;
}

.nav-user img {
    height: 36px;
    width: 36px;
}

.dashboard-page {
    background: #fbfbfb;
    padding: 0px !important;
}

.k-tilelayout {
    background-color: #fbfbfb;
}
.k-menu:not(.k-context-menu) > .k-item:focus, .k-menu:not(.k-context-menu) > .k-item.k-focus {
    box-shadow: inset 0 0 0 0 var(--kendo-color-border-alt, rgba(0, 0, 0, 0));
}

.list-group-item{
    border:none;
    padding: 8px 0;
    font-size: 14px;
}

.list-group-item i{
    font-size:13px;
    margin-right: 8px;
}

    .list-group-item a {
        color: #4A4A4A;
    }

.list-group-item:hover{
    background-color: #f3f4f6;
    padding-left:12px;
    color:#2563eb;
}

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

.lookup-header-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    margin-bottom: 8px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.06);
}

.lh-left {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 320px;
}

.lh-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    background: #eef2ff;
    border: 1px solid #dbe3ff;
}

.lh-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 2px;
}

.lh-right {
    display: grid;
    gap: 6px;
    min-width: 360px;
}

.smallteamMate img {
    width: 37px;
    height: 37px;
    border-radius: 50%;
}

/* Tile content spacing */
.shortcuts-tile .k-card-body,
.shortcuts-tile .k-tilelayout-item-body {
    padding: 12px;
}

/* Responsive “launcher” layout */
.shortcuts-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(15, minmax(110px, 1fr)); /* desktop like your image row */
    align-items: start;
}

/* Each shortcut button looks like a tile */
.shortcut-btn {
    width: 100%;
    height: 86px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    padding: 0;
}

    .shortcut-btn:hover {
        box-shadow: 0 4px 10px rgba(0,0,0,.10);
    }

    .shortcut-btn .k-button-text,
    .shortcut-btn .k-button-text > * {
        width: 100%;
    }

/* Center icon + label like the screenshot */
.shortcut-inner {
    height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 10px 8px;
}

.shortcut-icon-wrap i {
    font-size: 28px;
    line-height: 1;
    opacity: .9;
}

.shortcut-label {
    font-size: 11px;
    line-height: 1.1;
    color: rgba(0,0,0,.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Responsiveness --- */
@media (min-width: 1652px) {
    .shortcuts-grid {
        grid-template-columns: repeat(10, minmax(110px, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1651px) {
    .shortcuts-grid {
        grid-template-columns: repeat(6, minmax(110px, 1fr));
    }
}

@media (max-width: 767px) {
    .shortcuts-grid {
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }

    .shortcut-btn, .shortcut-inner {
        height: 82px;
    }

    .shortcut-icon-wrap i {
        font-size: 26px;
    }
}

@media (max-width: 420px) {
    .shortcuts-grid {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
    }
}


.grid-status {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

    .grid-status::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
    }

    .grid-status.Available::before {
        background-color: #22c55e;
    }

    .grid-status.Cancelled::before {
        background-color: #ef4444;
    }

    .grid-status.InWork::before {
        background-color: #f59e0b;
    }

    .grid-status.StandBy::before {
        background-color: #3b82f6;
    }


    .window-content-height {
        max-height: 80vh;
        overflow: auto;
        padding-right: 12px;
    }

.Myk-popup {
    border-radius: 9999px;
}

#floating-action-button {
    z-index: 9999;
}

/* List Page style*/
.listpage-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.listpage-card {
    background: #fff;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    padding: 22px 28px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 115px;
}

    .listpage-card:hover {
        box-shadow: 0 12px 30px rgba(15, 23, 42, .10);
        transform: translateY(-2px);
        transition: all .2s ease;
    }

.listpage-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .listpage-icon span,
    .listpage-icon .k-icon,
    .listpage-icon .k-font-icon {
        font-size: 32px !important;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }

    .listpage-icon.blue {
        background: #eaf2ff;
        color: #0d6efd;
    }

    .listpage-icon.green {
        background: #eaf8e9;
        color: #159947;
    }

    .listpage-icon.purple-bg {
        background: #f0e8ff;
        color: #6d28d9;
    }

    .listpage-icon.orange-bg {
        background: #fff0e6;
        color: #f05a1a;
    }

    .listpage-icon.active-bg {
        background: #7bd88f;
        color: white !important;
    }

        .listpage-icon.active-bg .k-icon {
            color: white !important;
        }

    .listpage-icon.inactive-bg {
        background: #ffeaea;
        color: #dc3545;
    }

    .listpage-icon.homeTprofit {
        background: #fee9e9;
        color: #ef3d40;
    }

.listpage-card > div:last-child {
    flex: 1;
}

.listpage-card span {
    color: #64748b;
    display: block;
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 500;
}

.listpage-card strong {
    display: block;
    color: #0d6efd;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.listpage-card.success strong {
    color: #159947;
}

.listpage-card.purple strong {
    color: #06315a;
}

.listpage-card.orange strong {
    color: #f05a1a;
}


@media (max-width: 1200px) {
    .listpage-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .listpage-summary-grid {
        grid-template-columns: 1fr;
    }

    .listpage-card {
        padding: 18px;
    }

    .listpage-icon {
        width: 62px;
        height: 62px;
        min-width: 62px;
    }

        .listpage-icon span,
        .listpage-icon .k-icon,
        .listpage-icon .k-font-icon {
            font-size: 28px !important;
        }
}



/* ==================================================
   HOME DASHBOARD KPI CARDS
   These classes will not affect listpage-card styles
================================================== */

.home-kpi-section {
    width: 100%;
}

.home-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}


/* Common card */

.home-kpi-card {
    --kpi-color: #0d6efd;
    --kpi-light-color: #eaf2ff;
    --kpi-shadow-color: rgba(13, 110, 253, 0.12);
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    padding: 20px 22px;
    min-height: 115px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .home-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--kpi-light-color);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08), 0 8px 20px var(--kpi-shadow-color);
    }


    /* Card colors */

    /* Total Profit */
    .home-kpi-card.profit {
        --kpi-color: #ea1018;
        --kpi-light-color: #fee9e9;
        --kpi-shadow-color: rgba(234, 16, 24, 0.12);
    }

    /* New Orders */
    .home-kpi-card.orders {
        --kpi-color: #0d6efd;
        --kpi-light-color: #eaf2ff;
        --kpi-shadow-color: rgba(13, 110, 253, 0.12);
    }

    /* New Invoices */
    .home-kpi-card.invoices {
        --kpi-color: #159947;
        --kpi-light-color: #eaf8e9;
        --kpi-shadow-color: rgba(21, 153, 71, 0.12);
    }

    /* New Customers */
    .home-kpi-card.customers {
        --kpi-color: #f05a1a;
        --kpi-light-color: #fff0e6;
        --kpi-shadow-color: rgba(240, 90, 26, 0.12);
    }

    /* New Vendors */
    .home-kpi-card.vendors {
        --kpi-color: #6d28d9;
        --kpi-light-color: #f0e8ff;
        --kpi-shadow-color: rgba(109, 40, 217, 0.12);
    }


/* Icon circle */

.home-kpi-icon {
    width: 66px;
    height: 66px;
    min-width: 66px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kpi-light-color);
    color: var(--kpi-color);
    transition: transform 0.2s ease;
}

.home-kpi-card:hover .home-kpi-icon {
    transform: scale(1.04);
}


/* Telerik icon */

.home-kpi-icon .k-icon,
.home-kpi-icon .k-font-icon {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 30px !important;
    color: inherit !important;
}


/* Content */

.home-kpi-content {
    flex: 1;
    min-width: 0;
}

.home-kpi-title {
    display: block;
    margin-bottom: 6px;
    color: #6d798e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.home-kpi-value {
    display: block;
    color: var(--kpi-color);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Trend */

.home-kpi-trend {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

    .home-kpi-trend.up {
        color: #159947;
    }

    .home-kpi-trend.down {
        color: #ea1018;
    }


/* Responsive */

@media (max-width: 1500px) {
    .home-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .home-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .home-kpi-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-kpi-card {
        min-height: 100px;
        padding: 18px;
    }

    .home-kpi-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

        .home-kpi-icon .k-icon,
        .home-kpi-icon .k-font-icon {
            width: 27px;
            height: 27px;
            line-height: 27px;
            font-size: 27px !important;
        }

    .home-kpi-value {
        font-size: 21px;
    }
}
/* ==================================================
   Financial DASHBOARD KPI CARDS
   These classes will not affect listpage-card styles
================================================== */


.financial-kpi-section {
    width: 100%;
}

.financial-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}


/* Common Card */

.financial-kpi-card {
    --kpi-color: #0d6efd;
    --kpi-light-color: #eaf2ff;
    --kpi-shadow-color: rgba(13, 110, 253, 0.12);
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 115px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .financial-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--kpi-light-color);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08), 0 8px 20px var(--kpi-shadow-color);
    }


    /* Total Income */

    .financial-kpi-card.income {
        --kpi-color: #159947;
        --kpi-light-color: #eaf8ef;
        --kpi-shadow-color: rgba(21, 153, 71, 0.12);
    }


    /* Total Expense */

    .financial-kpi-card.expense {
        --kpi-color: #ea1018;
        --kpi-light-color: #fee9e9;
        --kpi-shadow-color: rgba(234, 16, 24, 0.12);
    }


    /* Net Profit */

    .financial-kpi-card.net-profit {
        --kpi-color: #16a34a;
        --kpi-light-color: #e8f8ee;
        --kpi-shadow-color: rgba(22, 163, 74, 0.12);
    }


    /* Cash & Bank Balance */

    .financial-kpi-card.cash-balance {
        --kpi-color: #2563eb;
        --kpi-light-color: #eaf2ff;
        --kpi-shadow-color: rgba(37, 99, 235, 0.12);
    }


    /* Total Liabilities */

    .financial-kpi-card.liabilities {
        --kpi-color: #f05a1a;
        --kpi-light-color: #fff0e6;
        --kpi-shadow-color: rgba(240, 90, 26, 0.12);
    }


/* Icon Circle */

.financial-kpi-icon {
    width: 66px;
    height: 66px;
    min-width: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kpi-color);
    background: var(--kpi-light-color);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.financial-kpi-card:hover .financial-kpi-icon {
    transform: scale(1.04);
}


/* Telerik Icon */

.financial-kpi-icon .k-icon,
.financial-kpi-icon .k-font-icon {
    width: 30px;
    height: 30px;
    color: inherit !important;
    font-size: 30px !important;
    line-height: 30px;
}


/* Content */

.financial-kpi-content {
    flex: 1;
    min-width: 0;
}

.financial-kpi-title {
    display: block;
    margin-bottom: 6px;
    color: #6d798e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.financial-kpi-value {
    display: block;
    color: var(--kpi-color);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Trend */

.financial-kpi-trend {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

    .financial-kpi-trend .k-icon,
    .financial-kpi-trend .k-font-icon {
        font-size: 12px !important;
    }

    .financial-kpi-trend.up {
        color: #159947;
    }

    .financial-kpi-trend.down {
        color: #ea1018;
    }


/* Responsive */

@media (max-width: 1500px) {
    .financial-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .financial-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .financial-kpi-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .financial-kpi-card {
        min-height: 100px;
        padding: 18px;
    }

    .financial-kpi-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

        .financial-kpi-icon .k-icon,
        .financial-kpi-icon .k-font-icon {
            width: 27px;
            height: 27px;
            font-size: 27px !important;
            line-height: 27px;
        }

    .financial-kpi-value {
        font-size: 21px;
    }
}


/* ==================================================
   SALES DASHBOARD KPI CARDS
   These classes will not affect listpage-card styles
================================================== */


.sales-kpi-section {
    width: 100%;
}

.sales-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}


/* Common Card */

.sales-kpi-card {
    --kpi-color: #0d6efd;
    --kpi-light-color: #eaf2ff;
    --kpi-shadow-color: rgba(13, 110, 253, 0.12);
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 115px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .sales-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--kpi-light-color);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08), 0 8px 20px var(--kpi-shadow-color);
    }


    /* Net Sales */

    .sales-kpi-card.net-sales {
        --kpi-color: #0d6efd;
        --kpi-light-color: #eaf2ff;
        --kpi-shadow-color: rgba(13, 110, 253, 0.12);
    }


    /* Gross Profit */

    .sales-kpi-card.gross-profit {
        --kpi-color: #159947;
        --kpi-light-color: #eaf8ef;
        --kpi-shadow-color: rgba(21, 153, 71, 0.12);
    }


    /* Orders */

    .sales-kpi-card.orders {
        --kpi-color: #9333ea;
        --kpi-light-color: #f3e8ff;
        --kpi-shadow-color: rgba(147, 51, 234, 0.12);
    }


    /* Awaiting Order Value */

    .sales-kpi-card.awaiting-orders {
        --kpi-color: #f05a1a;
        --kpi-light-color: #fff0e6;
        --kpi-shadow-color: rgba(240, 90, 26, 0.12);
    }


    /* Collection Rate */

    .sales-kpi-card.collection-rate {
        --kpi-color: #0d9488;
        --kpi-light-color: #e7f8f6;
        --kpi-shadow-color: rgba(13, 148, 136, 0.12);
    }


    /* Outstanding Receivables */

    .sales-kpi-card.receivables {
        --kpi-color: #ea1018;
        --kpi-light-color: #fee9e9;
        --kpi-shadow-color: rgba(234, 16, 24, 0.12);
    }


/* Icon Circle */

.sales-kpi-icon {
    width: 66px;
    height: 66px;
    min-width: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kpi-color);
    background: var(--kpi-light-color);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.sales-kpi-card:hover .sales-kpi-icon {
    transform: scale(1.04);
}


/* Telerik Icon */

.sales-kpi-icon .k-icon,
.sales-kpi-icon .k-font-icon {
    width: 30px;
    height: 30px;
    color: inherit !important;
    font-size: 30px !important;
    line-height: 30px;
}


/* Content */

.sales-kpi-content {
    flex: 1;
    min-width: 0;
}

.sales-kpi-title {
    display: block;
    margin-bottom: 6px;
    color: #6d798e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.sales-kpi-value {
    display: block;
    color: var(--kpi-color);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Trend */

.sales-kpi-trend {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

    .sales-kpi-trend .k-icon,
    .sales-kpi-trend .k-font-icon {
        font-size: 12px !important;
    }

    .sales-kpi-trend.up {
        color: #159947;
    }

    .sales-kpi-trend.down {
        color: #ea1018;
    }


/* Responsive */

@media (max-width: 1700px) {
    .sales-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .sales-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .sales-kpi-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sales-kpi-card {
        min-height: 100px;
        padding: 18px;
    }

    .sales-kpi-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

        .sales-kpi-icon .k-icon,
        .sales-kpi-icon .k-font-icon {
            width: 27px;
            height: 27px;
            font-size: 27px !important;
            line-height: 27px;
        }

    .sales-kpi-value {
        font-size: 21px;
    }
}

/* ==================================================
   PURCHASE DASHBOARD KPI CARDS
   These classes will not affect listpage-card styles
================================================== */


.purchase-kpi-section {
    width: 100%;
}

.purchase-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}


/* Common Card */

.purchase-kpi-card {
    --kpi-color: #0d6efd;
    --kpi-light-color: #eaf2ff;
    --kpi-shadow-color: rgba(13, 110, 253, 0.12);
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 115px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .purchase-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--kpi-light-color);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08), 0 8px 20px var(--kpi-shadow-color);
    }


    /* Total Purchase Amount */

    .purchase-kpi-card.purchase-amount {
        --kpi-color: #0d6efd;
        --kpi-light-color: #eaf2ff;
        --kpi-shadow-color: rgba(13, 110, 253, 0.12);
    }


    /* Purchase Orders */

    .purchase-kpi-card.purchase-orders {
        --kpi-color: #159947;
        --kpi-light-color: #eaf8ef;
        --kpi-shadow-color: rgba(21, 153, 71, 0.12);
    }


    /* GRN / Goods Received */

    .purchase-kpi-card.goods-received {
        --kpi-color: #8b5cf6;
        --kpi-light-color: #f3e8ff;
        --kpi-shadow-color: rgba(139, 92, 246, 0.12);
    }


    /* Vendor Count */

    .purchase-kpi-card.vendor-count {
        --kpi-color: #f05a1a;
        --kpi-light-color: #fff0e6;
        --kpi-shadow-color: rgba(240, 90, 26, 0.12);
    }


    /* Pending Payments */

    .purchase-kpi-card.pending-payments {
        --kpi-color: #ea1018;
        --kpi-light-color: #fee9e9;
        --kpi-shadow-color: rgba(234, 16, 24, 0.12);
    }


    /* Average Purchase Value */

    .purchase-kpi-card.average-purchase {
        --kpi-color: #0d9488;
        --kpi-light-color: #e7f8f6;
        --kpi-shadow-color: rgba(13, 148, 136, 0.12);
    }


/* Icon Circle */

.purchase-kpi-icon {
    width: 66px;
    height: 66px;
    min-width: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kpi-color);
    background: var(--kpi-light-color);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.purchase-kpi-card:hover .purchase-kpi-icon {
    transform: scale(1.04);
}


/* Telerik Icon */

.purchase-kpi-icon .k-icon,
.purchase-kpi-icon .k-font-icon {
    width: 30px;
    height: 30px;
    color: inherit !important;
    font-size: 30px !important;
    line-height: 30px;
}


/* Content */

.purchase-kpi-content {
    flex: 1;
    min-width: 0;
}

.purchase-kpi-title {
    display: block;
    margin-bottom: 6px;
    color: #6d798e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.purchase-kpi-value {
    display: block;
    color: var(--kpi-color);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Trend */

.purchase-kpi-trend {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

    .purchase-kpi-trend .k-icon,
    .purchase-kpi-trend .k-font-icon {
        font-size: 12px !important;
    }

    .purchase-kpi-trend.up {
        color: #159947;
    }

    .purchase-kpi-trend.down {
        color: #ea1018;
    }


/* Responsive */

@media (max-width: 1700px) {
    .purchase-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .purchase-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .purchase-kpi-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .purchase-kpi-card {
        min-height: 100px;
        padding: 18px;
    }

    .purchase-kpi-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

        .purchase-kpi-icon .k-icon,
        .purchase-kpi-icon .k-font-icon {
            width: 27px;
            height: 27px;
            font-size: 27px !important;
            line-height: 27px;
        }

    .purchase-kpi-value {
        font-size: 21px;
    }
}
/* ==================================================
   INVENTORY DASHBOARD KPI CARDS
   These classes will not affect listpage-card styles
================================================== */


.inventory-kpi-section {
    width: 100%;
}

.inventory-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}


/* Common Card */

.inventory-kpi-card {
    --kpi-color: #0d6efd;
    --kpi-light-color: #eaf2ff;
    --kpi-shadow-color: rgba(13, 110, 253, 0.12);
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 115px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .inventory-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--kpi-light-color);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08), 0 8px 20px var(--kpi-shadow-color);
    }


    /* Total Items */

    .inventory-kpi-card.total-items {
        --kpi-color: #2563eb;
        --kpi-light-color: #eaf2ff;
        --kpi-shadow-color: rgba(37, 99, 235, 0.12);
    }


    /* Total Stock Quantity */

    .inventory-kpi-card.stock-quantity {
        --kpi-color: #159947;
        --kpi-light-color: #eaf8ef;
        --kpi-shadow-color: rgba(21, 153, 71, 0.12);
    }


    /* Total Stock Value */

    .inventory-kpi-card.stock-value {
        --kpi-color: #f59e0b;
        --kpi-light-color: #fff6df;
        --kpi-shadow-color: rgba(245, 158, 11, 0.12);
    }


    /* Low Stock Items */

    .inventory-kpi-card.low-stock {
        --kpi-color: #8b5cf6;
        --kpi-light-color: #f3e8ff;
        --kpi-shadow-color: rgba(139, 92, 246, 0.12);
    }


    /* Out of Stock Items */

    .inventory-kpi-card.out-of-stock {
        --kpi-color: #ea1018;
        --kpi-light-color: #fee9e9;
        --kpi-shadow-color: rgba(234, 16, 24, 0.12);
    }


    /* Average Item Cost */

    .inventory-kpi-card.average-item-cost {
        --kpi-color: #0d9488;
        --kpi-light-color: #e7f8f6;
        --kpi-shadow-color: rgba(13, 148, 136, 0.12);
    }


/* Icon Circle */

.inventory-kpi-icon {
    width: 66px;
    height: 66px;
    min-width: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kpi-color);
    background: var(--kpi-light-color);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.inventory-kpi-card:hover .inventory-kpi-icon {
    transform: scale(1.04);
}


/* Telerik Icon */

.inventory-kpi-icon .k-icon,
.inventory-kpi-icon .k-font-icon {
    width: 30px;
    height: 30px;
    color: inherit !important;
    font-size: 30px !important;
    line-height: 30px;
}


/* Content */

.inventory-kpi-content {
    flex: 1;
    min-width: 0;
}

.inventory-kpi-title {
    display: block;
    margin-bottom: 6px;
    color: #6d798e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.inventory-kpi-value {
    display: block;
    color: var(--kpi-color);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Trend */

.inventory-kpi-trend {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

    .inventory-kpi-trend .k-icon,
    .inventory-kpi-trend .k-font-icon {
        font-size: 12px !important;
    }

    .inventory-kpi-trend.up {
        color: #159947;
    }

    .inventory-kpi-trend.down {
        color: #ea1018;
    }


/* Responsive */

@media (max-width: 1700px) {
    .inventory-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .inventory-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .inventory-kpi-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .inventory-kpi-card {
        min-height: 100px;
        padding: 18px;
    }

    .inventory-kpi-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

        .inventory-kpi-icon .k-icon,
        .inventory-kpi-icon .k-font-icon {
            width: 27px;
            height: 27px;
            font-size: 27px !important;
            line-height: 27px;
        }

    .inventory-kpi-value {
        font-size: 21px;
    }
}

/* =========================================================
   OPEN / POSTED / ALL KPI CARDS
   Unique prefix: openpostedall
   ========================================================= */

.openpostedall-kpi-section {
    width: 100%;
    margin: 14px 0 16px;
}

.openpostedall-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.openpostedall-kpi-card {
    --openpostedall-accent: #2477f5;
    --openpostedall-soft: #e7f0ff;
    --openpostedall-border: #bfd6ff;
    --openpostedall-value: #1264d8;
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "caption caption";
    align-items: center;
    column-gap: 13px;
    row-gap: 9px;
    min-width: 0;
    min-height: 118px;
    padding: 14px 14px 13px;
    background: #ffffff;
    border: 1px solid var(--openpostedall-border);
    border-radius: 11px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}


    /* Colored bottom line */

    .openpostedall-kpi-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--openpostedall-accent);
        transition: height 0.2s ease;
    }


    /* Hover effect */

    .openpostedall-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--openpostedall-accent);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.05);
    }

        .openpostedall-kpi-card:hover::after {
            height: 4px;
        }


    /* Selected filter card */

    .openpostedall-kpi-card.is-active {
        border-color: var(--openpostedall-accent);
        background: linear-gradient( 135deg, var(--openpostedall-soft) 0%, #ffffff 48%, #ffffff 100% );
        box-shadow: 0 0 0 1px var(--openpostedall-accent), 0 8px 20px rgba(15, 23, 42, 0.10);
    }

        .openpostedall-kpi-card.is-active::after {
            height: 4px;
        }


    /* Keyboard accessibility */

    .openpostedall-kpi-card:focus-visible {
        outline: 3px solid color-mix( in srgb, var(--openpostedall-accent) 25%, transparent );
        outline-offset: 2px;
    }


/* =========================================================
   ICON
   ========================================================= */

.openpostedall-kpi-icon {
    grid-area: icon;
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--openpostedall-soft);
    color: var(--openpostedall-accent);
    font-size: 25px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

    .openpostedall-kpi-icon .k-icon {
        font-size: 25px;
    }

.openpostedall-kpi-card:hover .openpostedall-kpi-icon {
    transform: scale(1.04);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.openpostedall-kpi-content {
    grid-area: content;
    min-width: 0;
}

.openpostedall-kpi-title {
    display: block;
    margin-bottom: 5px;
    color: #334155;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.openpostedall-kpi-value {
    display: block;
    color: var(--openpostedall-value);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.35px;
}


/* Amount values */

.openpostedall-amount-value {
    white-space: nowrap;
    font-size: clamp(18px, 1.4vw, 22px);
}


/* Currency text */

.openpostedall-kpi-currency {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================================
   BOTTOM DESCRIPTION
   ========================================================= */

.openpostedall-kpi-caption {
    grid-area: caption;
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 400;
    text-align: center;
}


/* =========================================================
   POSTED AMOUNT CHECK BADGE
   ========================================================= */

.openpostedall-icon-with-status {
    overflow: visible;
}

.openpostedall-icon-status {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: var(--openpostedall-accent);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.15);
}

    .openpostedall-icon-status .k-icon {
        font-size: 16px;
    }


/* =========================================================
   CARD 1: OPEN TRANSACTIONS
   Blue
   ========================================================= */

.openpostedall-open-transactions {
    --openpostedall-accent: #2477f5;
    --openpostedall-soft: #e7f0ff;
    --openpostedall-border: #bdd5ff;
    --openpostedall-value: #1264d8;
}


/* =========================================================
   CARD 2: OPEN AMOUNT
   Green
   ========================================================= */

.openpostedall-open-amount {
    --openpostedall-accent: #22b12c;
    --openpostedall-soft: #e8f8e5;
    --openpostedall-border: #bce8b7;
    --openpostedall-value: #1ba52a;
}


/* =========================================================
   CARD 3: POSTED TRANSACTIONS
   Purple
   ========================================================= */

.openpostedall-posted-transactions {
    --openpostedall-accent: #6242c7;
    --openpostedall-soft: #eee9ff;
    --openpostedall-border: #d8cdfb;
    --openpostedall-value: #5737b9;
}


/* =========================================================
   CARD 4: POSTED AMOUNT
   Orange
   ========================================================= */

.openpostedall-posted-amount {
    --openpostedall-accent: #ff7a00;
    --openpostedall-soft: #fff0e1;
    --openpostedall-border: #ffd0a5;
    --openpostedall-value: #f56b00;
}


/* =========================================================
   CARD 5: TOTAL TRANSACTIONS
   Teal
   ========================================================= */

.openpostedall-total-transactions {
    --openpostedall-accent: #0c9fb2;
    --openpostedall-soft: #e5f7f9;
    --openpostedall-border: #b9e9ef;
    --openpostedall-value: #078d9e;
}


/* =========================================================
   CARD 6: TOTAL AMOUNT
   Navy blue
   ========================================================= */

.openpostedall-total-amount {
    --openpostedall-accent: #284a80;
    --openpostedall-soft: #e8eef7;
    --openpostedall-border: #cad6e8;
    --openpostedall-value: #173d7a;
}


    /* Solid navy icon for Total Amount */

    .openpostedall-total-amount .openpostedall-kpi-icon {
        background: #284a80;
        color: #ffffff;
    }


    /* Total Amount active card */

    .openpostedall-total-amount.is-active {
        background: linear-gradient( 135deg, #eef3fa 0%, #ffffff 50%, #ffffff 100% );
    }


/* =========================================================
   OPTIONAL LOADING STATE
   ========================================================= */

.openpostedall-kpi-card.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

    .openpostedall-kpi-card.is-loading .openpostedall-kpi-value {
        color: #94a3b8;
    }


/* =========================================================
   RESPONSIVE: LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {
    .openpostedall-kpi-grid {
        gap: 10px;
    }

    .openpostedall-kpi-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 112px;
        padding: 13px 11px 12px;
        column-gap: 10px;
        row-gap: 8px;
    }

    .openpostedall-kpi-icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

        .openpostedall-kpi-icon .k-icon {
            font-size: 22px;
        }

    .openpostedall-kpi-title {
        font-size: 11px;
    }

    .openpostedall-kpi-value {
        font-size: 20px;
    }

    .openpostedall-amount-value {
        font-size: clamp(16px, 1.35vw, 20px);
    }

    .openpostedall-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   RESPONSIVE: TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {
    .openpostedall-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .openpostedall-kpi-card {
        min-height: 118px;
    }

    .openpostedall-kpi-title {
        font-size: 12px;
    }

    .openpostedall-kpi-value {
        font-size: 22px;
    }

    .openpostedall-amount-value {
        font-size: 21px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 700px) {
    .openpostedall-kpi-section {
        margin: 10px 0 14px;
    }

    .openpostedall-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .openpostedall-kpi-card {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 112px;
        padding: 12px 10px;
        column-gap: 10px;
    }

    .openpostedall-kpi-icon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

        .openpostedall-kpi-icon .k-icon {
            font-size: 21px;
        }

    .openpostedall-kpi-title {
        font-size: 11px;
    }

    .openpostedall-kpi-value {
        font-size: 20px;
    }

    .openpostedall-amount-value {
        font-size: 18px;
    }

    .openpostedall-kpi-caption {
        font-size: 9.5px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
    .openpostedall-kpi-grid {
        grid-template-columns: 1fr;
    }

    .openpostedall-kpi-card {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 108px;
        padding: 13px 14px;
    }

    .openpostedall-kpi-icon {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

        .openpostedall-kpi-icon .k-icon {
            font-size: 23px;
        }

    .openpostedall-kpi-title {
        font-size: 12px;
    }

    .openpostedall-kpi-value {
        font-size: 22px;
    }

    .openpostedall-amount-value {
        font-size: 21px;
    }

    .openpostedall-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .openpostedall-kpi-card,
    .openpostedall-kpi-icon,
    .openpostedall-kpi-card::after {
        transition: none;
    }

        .openpostedall-kpi-card:hover {
            transform: none;
        }

            .openpostedall-kpi-card:hover .openpostedall-kpi-icon {
                transform: none;
            }
}

/* =========================================================
   JOURNAL VOUCHER KPI CARDS
   Unique prefix: jv-kpi
   ========================================================= */

.jv-kpi-section {
    width: 100%;
    margin: 14px 0 16px;
}

.jv-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.jv-kpi-card {
    --jv-accent: #4b5d79;
    --jv-soft: #eef2f7;
    --jv-border: #d7e0eb;
    --jv-value: #334866;
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "caption caption";
    align-items: center;
    column-gap: 13px;
    row-gap: 9px;
    min-width: 0;
    min-height: 118px;
    padding: 14px 14px 13px;
    background: #ffffff;
    border: 1px solid var(--jv-border);
    border-radius: 11px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}


    /* Colored bottom line */

    .jv-kpi-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--jv-accent);
        transition: height 0.2s ease;
    }


    /* Hover */

    .jv-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--jv-accent);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.05);
    }

        .jv-kpi-card:hover::after {
            height: 4px;
        }


    /* Active filter card */

    .jv-kpi-card.is-active {
        border-color: var(--jv-accent);
        background: linear-gradient( 135deg, var(--jv-soft) 0%, #ffffff 48%, #ffffff 100% );
        box-shadow: 0 0 0 1px var(--jv-accent), 0 8px 20px rgba(15, 23, 42, 0.10);
    }

        .jv-kpi-card.is-active::after {
            height: 4px;
        }


    /* Keyboard focus */

    .jv-kpi-card:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.22);
        outline-offset: 2px;
    }


/* =========================================================
   ICON
   ========================================================= */

.jv-kpi-icon {
    grid-area: icon;
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--jv-soft);
    color: var(--jv-accent);
    font-size: 25px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

    .jv-kpi-icon .k-icon {
        font-size: 25px;
    }

.jv-kpi-card:hover .jv-kpi-icon {
    transform: scale(1.04);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.jv-kpi-content {
    grid-area: content;
    min-width: 0;
}

.jv-kpi-title {
    display: block;
    margin-bottom: 5px;
    color: #334155;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jv-kpi-value {
    display: block;
    color: var(--jv-value);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.35px;
}


/* Debit, credit and difference values */

.jv-kpi-amount-value {
    white-space: nowrap;
    font-size: clamp(18px, 1.4vw, 22px);
}


/* Currency */

.jv-kpi-currency {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================================
   BOTTOM DESCRIPTION
   ========================================================= */

.jv-kpi-caption {
    grid-area: caption;
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 400;
    text-align: center;
}


/* =========================================================
   CARD 1: TOTAL JV
   Slate / Navy
   Suggested icon: FileTxt or File
   ========================================================= */

.jv-kpi-total-jv {
    --jv-accent: #4b5d79;
    --jv-soft: #eef2f7;
    --jv-border: #d7e0eb;
    --jv-value: #1e3a6d;
}


/* =========================================================
   CARD 2: OPEN JV
   Blue
   Suggested icon: FolderOpen
   ========================================================= */

.jv-kpi-open-jv {
    --jv-accent: #2563eb;
    --jv-soft: #eaf1ff;
    --jv-border: #bfd3ff;
    --jv-value: #1d4ed8;
}


/* =========================================================
   CARD 3: POSTED JV
   Green
   Suggested icon: CheckCircle
   ========================================================= */

.jv-kpi-posted-jv {
    --jv-accent: #16a34a;
    --jv-soft: #e9f8ed;
    --jv-border: #bee8c9;
    --jv-value: #15803d;
}


/* =========================================================
   CARD 4: TOTAL DEBIT
   Amber / Orange
   Suggested icon: ArrowDown
   ========================================================= */

.jv-kpi-total-debit {
    --jv-accent: #d97706;
    --jv-soft: #fff3df;
    --jv-border: #f8d5a4;
    --jv-value: #c66a04;
}


/* =========================================================
   CARD 5: TOTAL CREDIT
   Purple
   Suggested icon: ArrowUp
   ========================================================= */

.jv-kpi-total-credit {
    --jv-accent: #7c3aed;
    --jv-soft: #f1eaff;
    --jv-border: #dac7ff;
    --jv-value: #6d28d9;
}


/* =========================================================
   CARD 6: DIFFERENCE
   Teal when balanced
   Suggested icon: Calculator
   ========================================================= */

.jv-kpi-difference {
    --jv-accent: #0f766e;
    --jv-soft: #e4f5f3;
    --jv-border: #b9e1dd;
    --jv-value: #0f766e;
}


    /* =========================================================
   DIFFERENCE: UNBALANCED STATE
   Add class "is-unbalanced" when Difference is not zero
   ========================================================= */

    .jv-kpi-difference.is-unbalanced {
        --jv-accent: #dc2626;
        --jv-soft: #fef2f2;
        --jv-border: #fecaca;
        --jv-value: #dc2626;
    }

        .jv-kpi-difference.is-unbalanced .jv-kpi-caption {
            color: #b91c1c;
            font-weight: 500;
        }


    /* Optional balanced state */

    .jv-kpi-difference.is-balanced {
        --jv-accent: #0f766e;
        --jv-soft: #e4f5f3;
        --jv-border: #b9e1dd;
        --jv-value: #0f766e;
    }
/* Non-clickable JV cards */

.jv-kpi-card.jv-kpi-static {
    cursor: default;
}

    .jv-kpi-card.jv-kpi-static:hover {
        transform: none;
        border-color: var(--jv-border);
        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.04);
    }

        .jv-kpi-card.jv-kpi-static:hover::after {
            height: 3px;
        }

        .jv-kpi-card.jv-kpi-static:hover .jv-kpi-icon {
            transform: none;
        }

/* =========================================================
   OPTIONAL SOLID ICON STYLES
   ========================================================= */

/* Solid green icon for Posted JV */

.jv-kpi-posted-jv .jv-kpi-icon {
    background: #16a34a;
    color: #ffffff;
}


/* Keep Difference icon soft teal */

.jv-kpi-difference .jv-kpi-icon {
    background: var(--jv-soft);
    color: var(--jv-accent);
}


/* Red icon when Difference is not zero */

.jv-kpi-difference.is-unbalanced .jv-kpi-icon {
    background: #dc2626;
    color: #ffffff;
}


/* =========================================================
   OPTIONAL LOADING STATE
   ========================================================= */

.jv-kpi-card.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

    .jv-kpi-card.is-loading .jv-kpi-value {
        color: #94a3b8;
    }


/* =========================================================
   RESPONSIVE: LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {

    .jv-kpi-grid {
        gap: 10px;
    }

    .jv-kpi-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 112px;
        padding: 13px 11px 12px;
        column-gap: 10px;
        row-gap: 8px;
    }

    .jv-kpi-icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

        .jv-kpi-icon .k-icon {
            font-size: 22px;
        }

    .jv-kpi-title {
        font-size: 11px;
    }

    .jv-kpi-value {
        font-size: 20px;
    }

    .jv-kpi-amount-value {
        font-size: clamp(16px, 1.35vw, 20px);
    }

    .jv-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   RESPONSIVE: TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {

    .jv-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .jv-kpi-card {
        min-height: 118px;
    }

    .jv-kpi-title {
        font-size: 12px;
    }

    .jv-kpi-value {
        font-size: 22px;
    }

    .jv-kpi-amount-value {
        font-size: 21px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 700px) {

    .jv-kpi-section {
        margin: 10px 0 14px;
    }

    .jv-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .jv-kpi-card {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 112px;
        padding: 12px 10px;
        column-gap: 10px;
    }

    .jv-kpi-icon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

        .jv-kpi-icon .k-icon {
            font-size: 21px;
        }

    .jv-kpi-title {
        font-size: 11px;
    }

    .jv-kpi-value {
        font-size: 20px;
    }

    .jv-kpi-amount-value {
        font-size: 18px;
    }

    .jv-kpi-caption {
        font-size: 9.5px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .jv-kpi-grid {
        grid-template-columns: 1fr;
    }

    .jv-kpi-card {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 108px;
        padding: 13px 14px;
    }

    .jv-kpi-icon {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

        .jv-kpi-icon .k-icon {
            font-size: 23px;
        }

    .jv-kpi-title {
        font-size: 12px;
    }

    .jv-kpi-value {
        font-size: 22px;
    }

    .jv-kpi-amount-value {
        font-size: 21px;
    }

    .jv-kpi-caption {
        font-size: 10px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .jv-kpi-card,
    .jv-kpi-icon,
    .jv-kpi-card::after {
        transition: none;
    }

        .jv-kpi-card:hover {
            transform: none;
        }

            .jv-kpi-card:hover .jv-kpi-icon {
                transform: none;
            }
}

/* =========================================================
   INQUIRY LIST KPI CARDS
   Unique prefix: inquiry-kpi
   ========================================================= */

.inquiry-kpi-section {
    width: 100%;
    margin: 14px 0 16px;
}

.inquiry-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.inquiry-kpi-card {
    --inquiry-accent: #2477f5;
    --inquiry-soft: #e7f0ff;
    --inquiry-border: #bfd6ff;
    --inquiry-value: #1264d8;
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "caption caption";
    align-items: center;
    column-gap: 13px;
    row-gap: 10px;
    min-width: 0;
    min-height: 126px;
    padding: 15px 14px 14px;
    background: #ffffff;
    border: 1px solid var(--inquiry-border);
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 9px 22px rgba(15, 23, 42, 0.045);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}


    /* Colored bottom line */

    .inquiry-kpi-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--inquiry-accent);
        transition: height 0.2s ease;
    }


    /* Hover */

    .inquiry-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--inquiry-accent);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.05);
    }

        .inquiry-kpi-card:hover::after {
            height: 4px;
        }


    /* Active filter card */

    .inquiry-kpi-card.is-active {
        border-color: var(--inquiry-accent);
        background: linear-gradient( 135deg, var(--inquiry-soft) 0%, #ffffff 48%, #ffffff 100% );
        box-shadow: 0 0 0 1px var(--inquiry-accent), 0 8px 20px rgba(15, 23, 42, 0.10);
    }

        .inquiry-kpi-card.is-active::after {
            height: 4px;
        }


    /* Keyboard focus */

    .inquiry-kpi-card:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.22);
        outline-offset: 2px;
    }


/* =========================================================
   ICON
   ========================================================= */

.inquiry-kpi-icon {
    grid-area: icon;
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
/*    border: 3px solid rgba(255, 255, 255, 0.82);*/
    border-radius: 50%;
    background: var(--inquiry-soft);
    color: var(--inquiry-accent);
    font-size: 25px;
/*    box-shadow: 0 0 0 1px var(--inquiry-border), 0 3px 8px rgba(15, 23, 42, 0.06);*/
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

    .inquiry-kpi-icon .k-icon {
        font-size: 25px;
    }

.inquiry-kpi-card:hover .inquiry-kpi-icon {
    transform: scale(1.04);
}


/* =========================================================
   CONTENT
   ========================================================= */

.inquiry-kpi-content {
    grid-area: content;
    min-width: 0;
}

.inquiry-kpi-title {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inquiry-kpi-value {
    display: block;
    color: var(--inquiry-value);
    font-size: 23px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.35px;
}


/* Amount values */

.inquiry-kpi-amount-value {
    white-space: nowrap;
    font-size: clamp(18px, 1.4vw, 23px);
}


/* Currency */

.inquiry-kpi-currency {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================================
   BOTTOM DESCRIPTION
   ========================================================= */

.inquiry-kpi-caption {
    grid-area: caption;
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 400;
    text-align: center;
    justify-self:center;
}


/* =========================================================
   CARD 1: OPEN
   Blue
   Icon: FolderOpen
   ========================================================= */

.inquiry-kpi-open {
    --inquiry-accent: #2477f5;
    --inquiry-soft: #e7f0ff;
    --inquiry-border: #bfd6ff;
    --inquiry-value: #1264d8;
}


/* =========================================================
   CARD 2: OPEN AMOUNT
   Green
   Icon: Calculator
   ========================================================= */

.inquiry-kpi-open-amount {
    --inquiry-accent: #16a34a;
    --inquiry-soft: #e9f8ed;
    --inquiry-border: #bee8c9;
    --inquiry-value: #159447;
}


/* =========================================================
   CARD 3: ACCEPTED
   Purple
   Icon: CheckCircle
   ========================================================= */

.inquiry-kpi-accepted {
    --inquiry-accent: #7c3aed;
    --inquiry-soft: #f1eaff;
    --inquiry-border: #dac7ff;
    --inquiry-value: #6d28d9;
}


/* =========================================================
   CARD 4: ACCEPTED AMOUNT
   Amber / Orange
   Icon: Dollar
   ========================================================= */

.inquiry-kpi-accepted-amount {
    --inquiry-accent: #f59e0b;
    --inquiry-soft: #fff5df;
    --inquiry-border: #fbd89a;
    --inquiry-value: #d97706;
}


/* =========================================================
   CARD 5: TOTAL
   Deep Blue
   Icon: SelectAll
   ========================================================= */

.inquiry-kpi-total {
    --inquiry-accent: #1264c5;
    --inquiry-soft: #e7f1ff;
    --inquiry-border: #bfd7f7;
    --inquiry-value: #0759b8;
}


/* =========================================================
   CARD 6: TOTAL AMOUNT
   Teal
   Icon: Calculator
   ========================================================= */

.inquiry-kpi-total-amount {
    --inquiry-accent: #0f9fa8;
    --inquiry-soft: #e3f7f7;
    --inquiry-border: #b8e8e8;
    --inquiry-value: #078d96;
}


/* =========================================================
   OPTIONAL SOLID ICON STYLES
   Use only when you want stronger icon emphasis
   ========================================================= */

/*
.inquiry-kpi-accepted .inquiry-kpi-icon {
    background: #7c3aed;
    color: #ffffff;
}

.inquiry-kpi-total-amount .inquiry-kpi-icon {
    background: #0f9fa8;
    color: #ffffff;
}
*/


/* =========================================================
   OPTIONAL LOADING STATE
   ========================================================= */

.inquiry-kpi-card.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

    .inquiry-kpi-card.is-loading .inquiry-kpi-value {
        color: #94a3b8;
    }


/* =========================================================
   RESPONSIVE: LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {

    .inquiry-kpi-grid {
        gap: 10px;
    }

    .inquiry-kpi-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 118px;
        padding: 13px 11px 12px;
        column-gap: 10px;
        row-gap: 8px;
    }

    .inquiry-kpi-icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

        .inquiry-kpi-icon .k-icon {
            font-size: 22px;
        }

    .inquiry-kpi-title {
        font-size: 11px;
    }

    .inquiry-kpi-value {
        font-size: 20px;
    }

    .inquiry-kpi-amount-value {
        font-size: clamp(16px, 1.35vw, 20px);
    }

    .inquiry-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   RESPONSIVE: TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {

    .inquiry-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .inquiry-kpi-card {
        min-height: 122px;
    }

    .inquiry-kpi-title {
        font-size: 12px;
    }

    .inquiry-kpi-value {
        font-size: 22px;
    }

    .inquiry-kpi-amount-value {
        font-size: 21px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 700px) {

    .inquiry-kpi-section {
        margin: 10px 0 14px;
    }

    .inquiry-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .inquiry-kpi-card {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 116px;
        padding: 12px 10px;
        column-gap: 10px;
    }

    .inquiry-kpi-icon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

        .inquiry-kpi-icon .k-icon {
            font-size: 21px;
        }

    .inquiry-kpi-title {
        font-size: 11px;
    }

    .inquiry-kpi-value {
        font-size: 20px;
    }

    .inquiry-kpi-amount-value {
        font-size: 18px;
    }

    .inquiry-kpi-caption {
        font-size: 9.5px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .inquiry-kpi-grid {
        grid-template-columns: 1fr;
    }

    .inquiry-kpi-card {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 110px;
        padding: 13px 14px;
    }

    .inquiry-kpi-icon {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

        .inquiry-kpi-icon .k-icon {
            font-size: 23px;
        }

    .inquiry-kpi-title {
        font-size: 12px;
    }

    .inquiry-kpi-value {
        font-size: 22px;
    }

    .inquiry-kpi-amount-value {
        font-size: 21px;
    }

    .inquiry-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .inquiry-kpi-card,
    .inquiry-kpi-icon,
    .inquiry-kpi-card::after {
        transition: none;
    }

        .inquiry-kpi-card:hover {
            transform: none;
        }

            .inquiry-kpi-card:hover .inquiry-kpi-icon {
                transform: none;
            }
}

/* =========================================================
   QUOTE LIST KPI CARDS
   Unique prefix: quote-kpi

   Cards:
   1. Open
   2. Accepted
   3. Expired
   4. Lost
   5. Cancelled
   6. Total
   ========================================================= */

.quote-kpi-section {
    width: 100%;
    margin: 14px 0 16px;
}

.quote-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.quote-kpi-card {
    --quote-accent: #2477f5;
    --quote-soft: #e7f0ff;
    --quote-border: #bfd6ff;
    --quote-value: #1264d8;
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "caption caption";
    align-items: center;
    column-gap: 13px;
    row-gap: 10px;
    min-width: 0;
    min-height: 126px;
    padding: 15px 14px 14px;
    background: #ffffff;
    border: 1px solid var(--quote-border);
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 9px 22px rgba(15, 23, 42, 0.045);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}


    /* Colored bottom line */

    .quote-kpi-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--quote-accent);
        transition: height 0.2s ease;
    }


    /* Hover effect */

    .quote-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--quote-accent);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.05);
    }

        .quote-kpi-card:hover::after {
            height: 4px;
        }


    /* Active selected card */

    .quote-kpi-card.is-active {
        border-color: var(--quote-accent);
        background: linear-gradient( 135deg, var(--quote-soft) 0%, #ffffff 48%, #ffffff 100% );
        box-shadow: 0 0 0 1px var(--quote-accent), 0 8px 20px rgba(15, 23, 42, 0.10);
    }

        .quote-kpi-card.is-active::after {
            height: 4px;
        }


    /* Keyboard focus */

    .quote-kpi-card:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.22);
        outline-offset: 2px;
    }


/* =========================================================
   ICON
   ========================================================= */

.quote-kpi-icon {
    grid-area: icon;
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--quote-soft);
    color: var(--quote-accent);
    font-size: 25px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

    .quote-kpi-icon .k-icon {
        font-size: 25px;
    }

.quote-kpi-card:hover .quote-kpi-icon {
    transform: scale(1.04);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.quote-kpi-content {
    grid-area: content;
    min-width: 0;
}

.quote-kpi-title {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quote-kpi-value {
    display: block;
    color: var(--quote-value);
    font-size: 23px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.35px;
}


/* Optional amount values */

.quote-kpi-amount-value {
    white-space: nowrap;
    font-size: clamp(18px, 1.4vw, 23px);
}


/* Optional currency */

.quote-kpi-currency {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================================
   BOTTOM DESCRIPTION
   ========================================================= */

.quote-kpi-caption {
    grid-area: caption;
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 400;
    text-align: center;
    justify-self:center;
}


/* =========================================================
   CARD 1: OPEN
   Blue
   Icon: FolderOpen
   ========================================================= */

.quote-kpi-open {
    --quote-accent: #2477f5;
    --quote-soft: #e7f0ff;
    --quote-border: #bfd6ff;
    --quote-value: #1264d8;
}


/* =========================================================
   CARD 2: ACCEPTED
   Green
   Icon: CheckCircle
   ========================================================= */

.quote-kpi-accepted {
    --quote-accent: #16a34a;
    --quote-soft: #e9f8ed;
    --quote-border: #bee8c9;
    --quote-value: #15803d;
}


/* =========================================================
   CARD 3: EXPIRED
   Orange
   Icon: Clock
   ========================================================= */

.quote-kpi-expired {
    --quote-accent: #f97316;
    --quote-soft: #fff1e7;
    --quote-border: #ffd1b3;
    --quote-value: #ea580c;
}


/* =========================================================
   CARD 4: LOST
   Red
   Icon: XCircle
   ========================================================= */

.quote-kpi-lost {
    --quote-accent: #ef4444;
    --quote-soft: #fef0f0;
    --quote-border: #fecaca;
    --quote-value: #dc2626;
}


/* =========================================================
   CARD 5: CANCELLED
   Slate / Dark Gray
   Icon: Cancel
   ========================================================= */

.quote-kpi-cancelled {
    --quote-accent: #64748b;
    --quote-soft: #eef1f5;
    --quote-border: #d6dde6;
    --quote-value: #475569;
}


/* =========================================================
   CARD 6: TOTAL
   Purple
   Icon: SelectAll
   ========================================================= */

.quote-kpi-total {
    --quote-accent: #7c3aed;
    --quote-soft: #f1eaff;
    --quote-border: #dac7ff;
    --quote-value: #6d28d9;
}


/* =========================================================
   OPTIONAL SOLID ICON STYLES

   Uncomment these only when solid icons are required.
   ========================================================= */

/*
.quote-kpi-accepted .quote-kpi-icon {
    background: #16a34a;
    color: #ffffff;
}

.quote-kpi-lost .quote-kpi-icon {
    background: #ef4444;
    color: #ffffff;
}

.quote-kpi-total .quote-kpi-icon {
    background: #7c3aed;
    color: #ffffff;
}
*/


/* =========================================================
   OPTIONAL LOADING STATE
   ========================================================= */

.quote-kpi-card.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

    .quote-kpi-card.is-loading .quote-kpi-value {
        color: #94a3b8;
    }


/* =========================================================
   RESPONSIVE: LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {

    .quote-kpi-grid {
        gap: 10px;
    }

    .quote-kpi-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 118px;
        padding: 13px 11px 12px;
        column-gap: 10px;
        row-gap: 8px;
    }

    .quote-kpi-icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

        .quote-kpi-icon .k-icon {
            font-size: 22px;
        }

    .quote-kpi-title {
        font-size: 11px;
    }

    .quote-kpi-value {
        font-size: 20px;
    }

    .quote-kpi-amount-value {
        font-size: clamp(16px, 1.35vw, 20px);
    }

    .quote-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   RESPONSIVE: TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {

    .quote-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .quote-kpi-card {
        min-height: 122px;
    }

    .quote-kpi-title {
        font-size: 12px;
    }

    .quote-kpi-value {
        font-size: 22px;
    }

    .quote-kpi-amount-value {
        font-size: 21px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 700px) {

    .quote-kpi-section {
        margin: 10px 0 14px;
    }

    .quote-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .quote-kpi-card {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 116px;
        padding: 12px 10px;
        column-gap: 10px;
    }

    .quote-kpi-icon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

        .quote-kpi-icon .k-icon {
            font-size: 21px;
        }

    .quote-kpi-title {
        font-size: 11px;
    }

    .quote-kpi-value {
        font-size: 20px;
    }

    .quote-kpi-amount-value {
        font-size: 18px;
    }

    .quote-kpi-caption {
        font-size: 9.5px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .quote-kpi-grid {
        grid-template-columns: 1fr;
    }

    .quote-kpi-card {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 110px;
        padding: 13px 14px;
    }

    .quote-kpi-icon {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

        .quote-kpi-icon .k-icon {
            font-size: 23px;
        }

    .quote-kpi-title {
        font-size: 12px;
    }

    .quote-kpi-value {
        font-size: 22px;
    }

    .quote-kpi-amount-value {
        font-size: 21px;
    }

    .quote-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .quote-kpi-card,
    .quote-kpi-icon,
    .quote-kpi-card::after {
        transition: none;
    }

        .quote-kpi-card:hover {
            transform: none;
        }

            .quote-kpi-card:hover .quote-kpi-icon {
                transform: none;
            }
}

/* =========================================================
   SALES ORDER KPI CARDS
   Unique prefix: sorder-kpi

   Cards:
   1. Open
   2. Confirmed
   3. Completed
   4. On Hold
   5. Cancelled
   6. Total
   ========================================================= */

.sorder-kpi-section {
    width: 100%;
    margin: 14px 0 16px;
}

.sorder-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.sorder-kpi-card {
    --sorder-accent: #2477f5;
    --sorder-soft: #e7f0ff;
    --sorder-border: #bfd6ff;
    --sorder-value: #1264d8;
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "caption caption";
    align-items: center;
    column-gap: 13px;
    row-gap: 10px;
    min-width: 0;
    min-height: 126px;
    padding: 15px 14px 14px;
    background: #ffffff;
    border: 1px solid var(--sorder-border);
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 9px 22px rgba(15, 23, 42, 0.045);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}


    /* Colored bottom line */

    .sorder-kpi-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--sorder-accent);
        transition: height 0.2s ease;
    }


    /* Hover effect */

    .sorder-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--sorder-accent);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.05);
    }

        .sorder-kpi-card:hover::after {
            height: 4px;
        }


    /* Active selected card */

    .sorder-kpi-card.is-active {
        border-color: var(--sorder-accent);
        background: linear-gradient( 135deg, var(--sorder-soft) 0%, #ffffff 48%, #ffffff 100% );
        box-shadow: 0 0 0 1px var(--sorder-accent), 0 8px 20px rgba(15, 23, 42, 0.10);
    }

        .sorder-kpi-card.is-active::after {
            height: 4px;
        }


    /* Keyboard focus */

    .sorder-kpi-card:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.22);
        outline-offset: 2px;
    }


/* =========================================================
   ICON
   ========================================================= */

.sorder-kpi-icon {
    grid-area: icon;
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
/*    border: 3px solid rgba(255, 255, 255, 0.82);*/
    border-radius: 50%;
    background: var(--sorder-soft);
    color: var(--sorder-accent);
/*    box-shadow: 0 0 0 1px var(--sorder-border), 0 3px 8px rgba(15, 23, 42, 0.06);*/
    font-size: 25px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;

}

    .sorder-kpi-icon .k-icon {
        font-size: 25px;
    }

.sorder-kpi-card:hover .sorder-kpi-icon {
    transform: scale(1.04);
}


/* =========================================================
   CONTENT
   ========================================================= */

.sorder-kpi-content {
    grid-area: content;
    min-width: 0;
}

.sorder-kpi-title {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sorder-kpi-value {
    display: block;
    color: var(--sorder-value);
    font-size: 23px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.35px;
}


/* Optional amount values */

.sorder-kpi-amount-value {
    white-space: nowrap;
    font-size: clamp(18px, 1.4vw, 23px);
}


/* Optional currency */

.sorder-kpi-currency {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================================
   BOTTOM DESCRIPTION
   ========================================================= */

.sorder-kpi-caption {
    grid-area: caption;
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 400;
    text-align: left;
}


/* =========================================================
   CARD 1: OPEN
   Blue
   Suggested icon: FolderOpen
   ========================================================= */

.sorder-kpi-open {
    --sorder-accent: #2477f5;
    --sorder-soft: #e7f0ff;
    --sorder-border: #bfd6ff;
    --sorder-value: #1264d8;
}


/* =========================================================
   CARD 2: CONFIRMED
   Green
   Suggested icon: CheckCircle
   ========================================================= */

.sorder-kpi-confirmed {
    --sorder-accent: #22b12c;
    --sorder-soft: #e9f8e8;
    --sorder-border: #bee8ba;
    --sorder-value: #199528;
}


/* =========================================================
   CARD 3: COMPLETED
   Teal
   Suggested icon: FileTxt or CheckOutline
   ========================================================= */

.sorder-kpi-completed {
    --sorder-accent: #0fa9a1;
    --sorder-soft: #e5f7f5;
    --sorder-border: #b9e9e4;
    --sorder-value: #078d87;
}


/* =========================================================
   CARD 4: ON HOLD
   Orange
   Suggested icon: Clock
   ========================================================= */

.sorder-kpi-onhold {
    --sorder-accent: #f59e0b;
    --sorder-soft: #fff4e2;
    --sorder-border: #fbd59d;
    --sorder-value: #e97c00;
}


/* Alternative class when your markup uses on-hold */

.sorder-kpi-on-hold {
    --sorder-accent: #f59e0b;
    --sorder-soft: #fff4e2;
    --sorder-border: #fbd59d;
    --sorder-value: #e97c00;
}


/* =========================================================
   CARD 5: CANCELLED
   Red
   Suggested icon: Cancel
   ========================================================= */

.sorder-kpi-cancelled {
    --sorder-accent: #ef4444;
    --sorder-soft: #fef0f0;
    --sorder-border: #fecaca;
    --sorder-value: #dc2626;
}


/* =========================================================
   CARD 6: TOTAL
   Purple
   Suggested icon: SelectAll
   ========================================================= */

.sorder-kpi-total {
    --sorder-accent: #7c3aed;
    --sorder-soft: #f1eaff;
    --sorder-border: #dac7ff;
    --sorder-value: #6d28d9;
}


/* =========================================================
   OPTIONAL LOADING STATE
   ========================================================= */

.sorder-kpi-card.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

    .sorder-kpi-card.is-loading .sorder-kpi-value {
        color: #94a3b8;
    }


/* =========================================================
   RESPONSIVE: LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {

    .sorder-kpi-grid {
        gap: 10px;
    }

    .sorder-kpi-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 118px;
        padding: 13px 11px 12px;
        column-gap: 10px;
        row-gap: 8px;
    }

    .sorder-kpi-icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

        .sorder-kpi-icon .k-icon {
            font-size: 22px;
        }

    .sorder-kpi-title {
        font-size: 11px;
    }

    .sorder-kpi-value {
        font-size: 20px;
    }

    .sorder-kpi-amount-value {
        font-size: clamp(16px, 1.35vw, 20px);
    }

    .sorder-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   RESPONSIVE: TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {

    .sorder-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .sorder-kpi-card {
        min-height: 122px;
    }

    .sorder-kpi-title {
        font-size: 12px;
    }

    .sorder-kpi-value {
        font-size: 22px;
    }

    .sorder-kpi-amount-value {
        font-size: 21px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 700px) {

    .sorder-kpi-section {
        margin: 10px 0 14px;
    }

    .sorder-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sorder-kpi-card {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 116px;
        padding: 12px 10px;
        column-gap: 10px;
    }

    .sorder-kpi-icon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

        .sorder-kpi-icon .k-icon {
            font-size: 21px;
        }

    .sorder-kpi-title {
        font-size: 11px;
    }

    .sorder-kpi-value {
        font-size: 20px;
    }

    .sorder-kpi-amount-value {
        font-size: 18px;
    }

    .sorder-kpi-caption {
        font-size: 9.5px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .sorder-kpi-grid {
        grid-template-columns: 1fr;
    }

    .sorder-kpi-card {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 110px;
        padding: 13px 14px;
    }

    .sorder-kpi-icon {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

        .sorder-kpi-icon .k-icon {
            font-size: 23px;
        }

    .sorder-kpi-title {
        font-size: 12px;
    }

    .sorder-kpi-value {
        font-size: 22px;
    }

    .sorder-kpi-amount-value {
        font-size: 21px;
    }

    .sorder-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sorder-kpi-card,
    .sorder-kpi-icon,
    .sorder-kpi-card::after {
        transition: none;
    }

        .sorder-kpi-card:hover {
            transform: none;
        }

            .sorder-kpi-card:hover .sorder-kpi-icon {
                transform: none;
            }
}


/* =========================================================
   PURCHASE REQUISITION KPI CARDS
   Unique prefix: preq-kpi

   Cards:
   1. Open
   2. Open Amount
   3. Transferred To PO
   4. Transferred Amount
   5. Total
   6. Total Amount
   ========================================================= */

.preq-kpi-section {
    width: 100%;
    margin: 14px 0 16px;
}

.preq-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.preq-kpi-card {
    --preq-accent: #2477f5;
    --preq-soft: #e7f0ff;
    --preq-border: #bfd6ff;
    --preq-value: #1264d8;
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "caption caption";
    align-items: center;
    column-gap: 13px;
    row-gap: 10px;
    min-width: 0;
    min-height: 126px;
    padding: 15px 14px 14px;
    background: #ffffff;
    border: 1px solid var(--preq-border);
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 9px 22px rgba(15, 23, 42, 0.045);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}


    /* Colored bottom line */

    .preq-kpi-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--preq-accent);
        transition: height 0.2s ease;
    }


    /* Hover effect */

    .preq-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--preq-accent);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.05);
    }

        .preq-kpi-card:hover::after {
            height: 4px;
        }


    /* Selected filter card */

    .preq-kpi-card.is-active {
        border-color: var(--preq-accent);
        background: linear-gradient( 135deg, var(--preq-soft) 0%, #ffffff 48%, #ffffff 100% );
        box-shadow: 0 0 0 1px var(--preq-accent), 0 8px 20px rgba(15, 23, 42, 0.10);
    }

        .preq-kpi-card.is-active::after {
            height: 4px;
        }


    /* Keyboard focus */

    .preq-kpi-card:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.22);
        outline-offset: 2px;
    }


/* =========================================================
   ICON
   ========================================================= */

.preq-kpi-icon {
    grid-area: icon;
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
/*    border: 3px solid rgba(255, 255, 255, 0.82);*/
    border-radius: 50%;
    background: var(--preq-soft);
    color: var(--preq-accent);
/*    box-shadow: 0 0 0 1px var(--preq-border), 0 3px 8px rgba(15, 23, 42, 0.06);*/
    font-size: 25px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

    .preq-kpi-icon .k-icon {
        font-size: 25px;
    }

.preq-kpi-card:hover .preq-kpi-icon {
    transform: scale(1.04);
}


/* =========================================================
   CONTENT
   ========================================================= */

.preq-kpi-content {
    grid-area: content;
    min-width: 0;
}

.preq-kpi-title {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preq-kpi-value {
    display: block;
    color: var(--preq-value);
    font-size: 23px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.35px;
}


/* Amount values */

.preq-kpi-amount-value {
    white-space: nowrap;
    font-size: clamp(18px, 1.4vw, 23px);
}


/* Currency */

.preq-kpi-currency {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================================
   BOTTOM DESCRIPTION
   ========================================================= */


.preq-kpi-caption {
    grid-area: caption;
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 400;
    text-align: center;
    justify-self: center;
}

/* =========================================================
   CARD 1: OPEN
   Blue
   Icon: FolderOpen
   ========================================================= */

.preq-kpi-open {
    --preq-accent: #2477f5;
    --preq-soft: #e7f0ff;
    --preq-border: #bfd6ff;
    --preq-value: #1264d8;
}


/* =========================================================
   CARD 2: OPEN AMOUNT
   Green
   Icon: Wallet / Calculator
   ========================================================= */

.preq-kpi-open-amount {
    --preq-accent: #22b12c;
    --preq-soft: #e9f8e8;
    --preq-border: #bee8ba;
    --preq-value: #199528;
}


/* =========================================================
   CARD 3: TRANSFERRED TO PO
   Purple
   Icon: Cart
   ========================================================= */

.preq-kpi-transferred-to-po {
    --preq-accent: #7c3aed;
    --preq-soft: #f1eaff;
    --preq-border: #dac7ff;
    --preq-value: #6d28d9;
}


/* Optional shorter class */

.preq-kpi-transferred {
    --preq-accent: #7c3aed;
    --preq-soft: #f1eaff;
    --preq-border: #dac7ff;
    --preq-value: #6d28d9;
}


/* =========================================================
   CARD 4: TRANSFERRED AMOUNT
   Teal
   Icon: Dollar
   ========================================================= */

.preq-kpi-transferred-amount {
    --preq-accent: #0fa9a1;
    --preq-soft: #e5f7f5;
    --preq-border: #b9e9e4;
    --preq-value: #078d87;
}


/* =========================================================
   CARD 5: TOTAL
   Indigo / Violet
   Icon: Grid / SelectAll
   ========================================================= */

.preq-kpi-total {
    --preq-accent: #6d4ee8;
    --preq-soft: #f0edff;
    --preq-border: #d7ceff;
    --preq-value: #5b3fd3;
}


/* =========================================================
   CARD 6: TOTAL AMOUNT
   Green
   Icon: Calculator
   ========================================================= */

.preq-kpi-total-amount {
    --preq-accent: #16a34a;
    --preq-soft: #e9f8ed;
    --preq-border: #bee8c9;
    --preq-value: #15803d;
}


/* =========================================================
   OPTIONAL LOADING STATE
   ========================================================= */

.preq-kpi-card.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

    .preq-kpi-card.is-loading .preq-kpi-value {
        color: #94a3b8;
    }


/* =========================================================
   RESPONSIVE: LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {

    .preq-kpi-grid {
        gap: 10px;
    }

    .preq-kpi-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 118px;
        padding: 13px 11px 12px;
        column-gap: 10px;
        row-gap: 8px;
    }

    .preq-kpi-icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

        .preq-kpi-icon .k-icon {
            font-size: 22px;
        }

    .preq-kpi-title {
        font-size: 11px;
    }

    .preq-kpi-value {
        font-size: 20px;
    }

    .preq-kpi-amount-value {
        font-size: clamp(16px, 1.35vw, 20px);
    }

    .preq-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   RESPONSIVE: TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {

    .preq-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .preq-kpi-card {
        min-height: 122px;
    }

    .preq-kpi-title {
        font-size: 12px;
    }

    .preq-kpi-value {
        font-size: 22px;
    }

    .preq-kpi-amount-value {
        font-size: 21px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 700px) {

    .preq-kpi-section {
        margin: 10px 0 14px;
    }

    .preq-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .preq-kpi-card {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 116px;
        padding: 12px 10px;
        column-gap: 10px;
    }

    .preq-kpi-icon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

        .preq-kpi-icon .k-icon {
            font-size: 21px;
        }

    .preq-kpi-title {
        font-size: 11px;
    }

    .preq-kpi-value {
        font-size: 20px;
    }

    .preq-kpi-amount-value {
        font-size: 18px;
    }

    .preq-kpi-caption {
        font-size: 9.5px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .preq-kpi-grid {
        grid-template-columns: 1fr;
    }

    .preq-kpi-card {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 110px;
        padding: 13px 14px;
    }

    .preq-kpi-icon {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

        .preq-kpi-icon .k-icon {
            font-size: 23px;
        }

    .preq-kpi-title {
        font-size: 12px;
    }

    .preq-kpi-value {
        font-size: 22px;
    }

    .preq-kpi-amount-value {
        font-size: 21px;
    }

    .preq-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .preq-kpi-card,
    .preq-kpi-icon,
    .preq-kpi-card::after {
        transition: none;
    }

        .preq-kpi-card:hover {
            transform: none;
        }

            .preq-kpi-card:hover .preq-kpi-icon {
                transform: none;
            }
}

/* =========================================================
   PURCHASE ORDER KPI CARDS
   Unique prefix: porder-kpi

   Cards:
   1. Open
   2. Received
   3. Invoiced
   4. Cancelled
   5. Total
   6. Total Amount
   ========================================================= */

.porder-kpi-section {
    width: 100%;
    margin: 14px 0 16px;
}

.porder-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.porder-kpi-card {
    --porder-accent: #2477f5;
    --porder-soft: #e7f0ff;
    --porder-border: #bfd6ff;
    --porder-value: #1264d8;
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "caption caption";
    align-items: center;
    column-gap: 13px;
    row-gap: 10px;
    min-width: 0;
    min-height: 126px;
    padding: 15px 14px 14px;
    background: #ffffff;
    border: 1px solid var(--porder-border);
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 9px 22px rgba(15, 23, 42, 0.045);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}


    /* Colored bottom line */

    .porder-kpi-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--porder-accent);
        transition: height 0.2s ease;
    }


    /* Hover effect */

    .porder-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--porder-accent);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.05);
    }

        .porder-kpi-card:hover::after {
            height: 4px;
        }


    /* Active selected card */

    .porder-kpi-card.is-active {
        border-color: var(--porder-accent);
        background: linear-gradient( 135deg, var(--porder-soft) 0%, #ffffff 48%, #ffffff 100% );
        box-shadow: 0 0 0 1px var(--porder-accent), 0 8px 20px rgba(15, 23, 42, 0.10);
    }

        .porder-kpi-card.is-active::after {
            height: 4px;
        }


    /* Keyboard focus */

    .porder-kpi-card:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.22);
        outline-offset: 2px;
    }


/* =========================================================
   ICON
   ========================================================= */

.porder-kpi-icon {
    grid-area: icon;
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
/*    border: 3px solid rgba(255, 255, 255, 0.82);*/
    border-radius: 50%;
    background: var(--porder-soft);
    color: var(--porder-accent);
/*    box-shadow: 0 0 0 1px var(--porder-border), 0 3px 8px rgba(15, 23, 42, 0.06);*/
    font-size: 25px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

    .porder-kpi-icon .k-icon {
        font-size: 25px;
    }

.porder-kpi-card:hover .porder-kpi-icon {
    transform: scale(1.04);
}


/* =========================================================
   CONTENT
   ========================================================= */

.porder-kpi-content {
    grid-area: content;
    min-width: 0;
}

.porder-kpi-title {
    display: block;
    margin-bottom: 6px;
    color: #334155;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.porder-kpi-value {
    display: block;
    color: var(--porder-value);
    font-size: 23px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.35px;
}


/* Amount values */

.porder-kpi-amount-value {
    white-space: nowrap;
    font-size: clamp(18px, 1.4vw, 23px);
}


/* Currency */

.porder-kpi-currency {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================================
   BOTTOM DESCRIPTION
   ========================================================= */

.porder-kpi-caption {
    grid-area: caption;
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 400;
    text-align: center;
    justify-self:center;
}


/* =========================================================
   CARD 1: OPEN
   Blue
   Icon: FolderOpen
   ========================================================= */

.porder-kpi-open {
    --porder-accent: #2477f5;
    --porder-soft: #e7f0ff;
    --porder-border: #bfd6ff;
    --porder-value: #1264d8;
}


/* =========================================================
   CARD 2: RECEIVED
   Green
   Icon: CheckCircle
   ========================================================= */

.porder-kpi-received {
    --porder-accent: #22b12c;
    --porder-soft: #e9f8e8;
    --porder-border: #bee8ba;
    --porder-value: #199528;
}


/* =========================================================
   CARD 3: INVOICED
   Purple
   Icon: FileTxt / Invoice
   ========================================================= */

.porder-kpi-invoiced {
    --porder-accent: #8b3ff1;
    --porder-soft: #f2eaff;
    --porder-border: #dac7ff;
    --porder-value: #7130d7;
}


/* =========================================================
   CARD 4: CANCELLED
   Red / Orange-Red
   Icon: Cancel
   ========================================================= */

.porder-kpi-cancelled {
    --porder-accent: #f04424;
    --porder-soft: #feebe7;
    --porder-border: #fac8be;
    --porder-value: #e03618;
}


/* =========================================================
   CARD 5: TOTAL
   Indigo
   Icon: SelectAll
   ========================================================= */

.porder-kpi-total {
    --porder-accent: #4f46d8;
    --porder-soft: #ececff;
    --porder-border: #ceccfa;
    --porder-value: #4338ca;
}


/* =========================================================
   CARD 6: TOTAL AMOUNT
   Green
   Icon: Calculator
   ========================================================= */

.porder-kpi-total-amount {
    --porder-accent: #16a34a;
    --porder-soft: #e9f8ed;
    --porder-border: #bee8c9;
    --porder-value: #15803d;
}


/* =========================================================
   OPTIONAL LOADING STATE
   ========================================================= */

.porder-kpi-card.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

    .porder-kpi-card.is-loading .porder-kpi-value {
        color: #94a3b8;
    }


/* =========================================================
   RESPONSIVE: LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {

    .porder-kpi-grid {
        gap: 10px;
    }

    .porder-kpi-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 118px;
        padding: 13px 11px 12px;
        column-gap: 10px;
        row-gap: 8px;
    }

    .porder-kpi-icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

        .porder-kpi-icon .k-icon {
            font-size: 22px;
        }

    .porder-kpi-title {
        font-size: 11px;
    }

    .porder-kpi-value {
        font-size: 20px;
    }

    .porder-kpi-amount-value {
        font-size: clamp(16px, 1.35vw, 20px);
    }

    .porder-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   RESPONSIVE: TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {

    .porder-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .porder-kpi-card {
        min-height: 122px;
    }

    .porder-kpi-title {
        font-size: 12px;
    }

    .porder-kpi-value {
        font-size: 22px;
    }

    .porder-kpi-amount-value {
        font-size: 21px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 700px) {

    .porder-kpi-section {
        margin: 10px 0 14px;
    }

    .porder-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .porder-kpi-card {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 116px;
        padding: 12px 10px;
        column-gap: 10px;
    }

    .porder-kpi-icon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

        .porder-kpi-icon .k-icon {
            font-size: 21px;
        }

    .porder-kpi-title {
        font-size: 11px;
    }

    .porder-kpi-value {
        font-size: 20px;
    }

    .porder-kpi-amount-value {
        font-size: 18px;
    }

    .porder-kpi-caption {
        font-size: 9.5px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .porder-kpi-grid {
        grid-template-columns: 1fr;
    }

    .porder-kpi-card {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 110px;
        padding: 13px 14px;
    }

    .porder-kpi-icon {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

        .porder-kpi-icon .k-icon {
            font-size: 23px;
        }

    .porder-kpi-title {
        font-size: 12px;
    }

    .porder-kpi-value {
        font-size: 22px;
    }

    .porder-kpi-amount-value {
        font-size: 21px;
    }

    .porder-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .porder-kpi-card,
    .porder-kpi-icon,
    .porder-kpi-card::after {
        transition: none;
    }

        .porder-kpi-card:hover {
            transform: none;
        }

            .porder-kpi-card:hover .porder-kpi-icon {
                transform: none;
            }
}

/* =========================================================
   ACCOUNT LIST KPI CARDS
   Unique prefix: account-kpi

   Cards:
   1. Total Accounts
   2. Active Accounts
   3. Inactive Accounts
   4. Total Debit
   5. Total Credit
   6. Total Balance
   ========================================================= */

.account-kpi-section {
    width: 100%;
    margin: 14px 0 16px;
}

.account-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.account-kpi-card {
    --account-accent: #2477f5;
    --account-soft: #e7f0ff;
    --account-border: #bfd6ff;
    --account-value: #1264d8;
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "caption caption";
    align-items: center;
    column-gap: 13px;
    row-gap: 9px;
    min-width: 0;
    min-height: 118px;
    padding: 14px 14px 13px;
    background: #ffffff;
    border: 1px solid var(--account-border);
    border-radius: 11px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}


    /* =========================================================
   COLORED BOTTOM LINE
   ========================================================= */

    .account-kpi-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--account-accent);
        transition: height 0.2s ease;
    }


    /* =========================================================
   HOVER EFFECT
   ========================================================= */

    .account-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--account-accent);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.05);
    }

        .account-kpi-card:hover::after {
            height: 4px;
        }


    /* =========================================================
   ACTIVE FILTER CARD
   ========================================================= */

    .account-kpi-card.is-active {
        border-color: var(--account-accent);
        background: linear-gradient( 135deg, var(--account-soft) 0%, #ffffff 48%, #ffffff 100% );
        box-shadow: 0 0 0 1px var(--account-accent), 0 8px 20px rgba(15, 23, 42, 0.10);
    }

        .account-kpi-card.is-active::after {
            height: 4px;
        }


    /* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

    .account-kpi-card:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.22);
        outline-offset: 2px;
    }


/* =========================================================
   ICON
   ========================================================= */

.account-kpi-icon {
    grid-area: icon;
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--account-soft);
    color: var(--account-accent);
    font-size: 25px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

    .account-kpi-icon .k-icon {
        font-size: 25px;
    }

.account-kpi-card:hover .account-kpi-icon {
    transform: scale(1.04);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.account-kpi-content {
    grid-area: content;
    min-width: 0;
}

.account-kpi-title {
    display: block;
    margin-bottom: 5px;
    color: #334155;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-kpi-value {
    display: block;
    color: var(--account-value);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.35px;
}


/* =========================================================
   AMOUNT VALUES
   ========================================================= */

.account-kpi-amount-value {
    white-space: nowrap;
    font-size: clamp(18px, 1.4vw, 22px);
}


/* =========================================================
   CURRENCY
   ========================================================= */

.account-kpi-currency {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================================
   BOTTOM DESCRIPTION
   ========================================================= */

.account-kpi-caption {
    grid-area: caption;
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 400;
    text-align: center;
}


/* =========================================================
   CARD 1: TOTAL ACCOUNTS
   Blue
   ========================================================= */

.account-kpi-total-accounts {
    --account-accent: #2477f5;
    --account-soft: #e7f0ff;
    --account-border: #bdd5ff;
    --account-value: #1264d8;
}


/* =========================================================
   CARD 2: ACTIVE ACCOUNTS
   Green
   ========================================================= */

.account-kpi-active-accounts {
    --account-accent: #16a34a;
    --account-soft: #e9f8ed;
    --account-border: #bee8c9;
    --account-value: #15803d;
}


/* =========================================================
   CARD 3: INACTIVE ACCOUNTS
   Orange
   ========================================================= */

.account-kpi-inactive-accounts {
    --account-accent: #f97316;
    --account-soft: #fff0e7;
    --account-border: #ffd2b8;
    --account-value: #ea580c;
}


/* =========================================================
   CARD 4: TOTAL DEBIT
   Purple
   ========================================================= */

.account-kpi-total-debit {
    --account-accent: #7c3aed;
    --account-soft: #f1eaff;
    --account-border: #dac7ff;
    --account-value: #6d28d9;
}


/* =========================================================
   CARD 5: TOTAL CREDIT
   Cyan / Teal
   ========================================================= */

.account-kpi-total-credit {
    --account-accent: #0891b2;
    --account-soft: #e5f7fa;
    --account-border: #bae7ee;
    --account-value: #07839f;
}


/* =========================================================
   CARD 6: TOTAL BALANCE
   Pink
   ========================================================= */

.account-kpi-total-balance {
    --account-accent: #db2777;
    --account-soft: #fceaf3;
    --account-border: #f5c7dc;
    --account-value: #db2777;
}


    /* =========================================================
   POSITIVE BALANCE
   Green
   ========================================================= */

    .account-kpi-total-balance.is-positive {
        --account-accent: #16a34a;
        --account-soft: #e9f8ed;
        --account-border: #bee8c9;
        --account-value: #15803d;
    }


    /* =========================================================
   NEGATIVE BALANCE
   Red
   ========================================================= */

    .account-kpi-total-balance.is-negative {
        --account-accent: #dc2626;
        --account-soft: #fef2f2;
        --account-border: #fecaca;
        --account-value: #dc2626;
    }


/* =========================================================
   NON-CLICKABLE CARDS

   Apply account-kpi-static to:
   Total Debit
   Total Credit
   Total Balance
   ========================================================= */

.account-kpi-card.account-kpi-static {
    cursor: default;
}

    .account-kpi-card.account-kpi-static:hover {
        transform: none;
        border-color: var(--account-border);
        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.04);
    }

        .account-kpi-card.account-kpi-static:hover::after {
            height: 3px;
        }

        .account-kpi-card.account-kpi-static:hover .account-kpi-icon {
            transform: none;
        }


/* =========================================================
   OPTIONAL LOADING STATE
   ========================================================= */

.account-kpi-card.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

    .account-kpi-card.is-loading .account-kpi-value {
        color: #94a3b8;
    }


/* =========================================================
   RESPONSIVE: LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {

    .account-kpi-grid {
        gap: 10px;
    }

    .account-kpi-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 112px;
        padding: 13px 11px 12px;
        column-gap: 10px;
        row-gap: 8px;
    }

    .account-kpi-icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

        .account-kpi-icon .k-icon {
            font-size: 22px;
        }

    .account-kpi-title {
        font-size: 11px;
    }

    .account-kpi-value {
        font-size: 20px;
    }

    .account-kpi-amount-value {
        font-size: clamp(16px, 1.35vw, 20px);
    }

    .account-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   RESPONSIVE: TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1100px) {

    .account-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .account-kpi-card {
        min-height: 118px;
    }

    .account-kpi-title {
        font-size: 12px;
    }

    .account-kpi-value {
        font-size: 22px;
    }

    .account-kpi-amount-value {
        font-size: 21px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 700px) {

    .account-kpi-section {
        margin: 10px 0 14px;
    }

    .account-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .account-kpi-card {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 112px;
        padding: 12px 10px;
        column-gap: 10px;
    }

    .account-kpi-icon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

        .account-kpi-icon .k-icon {
            font-size: 21px;
        }

    .account-kpi-title {
        font-size: 11px;
    }

    .account-kpi-value {
        font-size: 20px;
    }

    .account-kpi-amount-value {
        font-size: 18px;
    }

    .account-kpi-caption {
        font-size: 9.5px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .account-kpi-grid {
        grid-template-columns: 1fr;
    }

    .account-kpi-card {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 108px;
        padding: 13px 14px;
    }

    .account-kpi-icon {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

        .account-kpi-icon .k-icon {
            font-size: 23px;
        }

    .account-kpi-title {
        font-size: 12px;
    }

    .account-kpi-value {
        font-size: 22px;
    }

    .account-kpi-amount-value {
        font-size: 21px;
    }

    .account-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .account-kpi-card,
    .account-kpi-icon,
    .account-kpi-card::after {
        transition: none;
    }

        .account-kpi-card:hover {
            transform: none;
        }

            .account-kpi-card:hover .account-kpi-icon {
                transform: none;
            }
}

/* =========================================================
   VENDOR LIST KPI CARDS
   Unique prefix: vendor-kpi

   Cards:
   1. Total Vendor
   2. Active Vendor
   3. In Active Vendor
   4. On Hold
   5. Total Balance
   ========================================================= */

.vendor-kpi-section {
    width: 100%;
    margin: 14px 0 16px;
}

.vendor-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.vendor-kpi-card {
    --vendor-accent: #2477f5;
    --vendor-soft: #e7f0ff;
    --vendor-border: #bfd6ff;
    --vendor-value: #1264d8;
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "icon caption";
    align-items: center;
    column-gap: 14px;
    row-gap: 5px;
    min-width: 0;
    min-height: 126px;
    padding: 16px 16px 15px;
    background: #ffffff;
    border: 1px solid var(--vendor-border);
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}


    /* =========================================================
   COLORED BOTTOM LINE
   ========================================================= */

    .vendor-kpi-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--vendor-accent);
        transition: height 0.2s ease;
    }


    /* =========================================================
   HOVER EFFECT
   ========================================================= */

    .vendor-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--vendor-accent);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.05);
    }

        .vendor-kpi-card:hover::after {
            height: 4px;
        }


    /* =========================================================
   ACTIVE FILTER CARD
   ========================================================= */

    .vendor-kpi-card.is-active {
        border-color: var(--vendor-accent);
        background: linear-gradient( 135deg, var(--vendor-soft) 0%, #ffffff 48%, #ffffff 100% );
        box-shadow: 0 0 0 1px var(--vendor-accent), 0 8px 20px rgba(15, 23, 42, 0.10);
    }

        .vendor-kpi-card.is-active::after {
            height: 4px;
        }


    /* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

    .vendor-kpi-card:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.22);
        outline-offset: 2px;
    }


/* =========================================================
   ICON
   ========================================================= */

.vendor-kpi-icon {
    grid-area: icon;
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--vendor-soft);
    color: var(--vendor-accent);
    font-size: 29px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

    .vendor-kpi-icon .k-icon {
        font-size: 29px;
    }

.vendor-kpi-card:hover .vendor-kpi-icon {
    transform: scale(1.04);
}


/* =========================================================
   CONTENT
   ========================================================= */

.vendor-kpi-content {
    grid-area: content;
    min-width: 0;
    align-self: end;
}

.vendor-kpi-title {
    display: block;
    margin-bottom: 5px;
    color: #1e293b;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vendor-kpi-value {
    display: block;
    color: var(--vendor-value);
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.35px;
}


/* =========================================================
   AMOUNT VALUE
   ========================================================= */

.vendor-kpi-amount-value {
    white-space: nowrap;
    font-size: clamp(18px, 1.45vw, 24px);
}


/* =========================================================
   CURRENCY
   ========================================================= */

.vendor-kpi-currency {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.vendor-kpi-caption {
    grid-area: caption;
    display: block;
    align-self: start;
    width: 100%;
    color: #64748b;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   CARD 1: TOTAL VENDOR
   Blue
   Suggested icon: Group / Building
   ========================================================= */

.vendor-kpi-total-vendor {
    --vendor-accent: #2477f5;
    --vendor-soft: #e7f0ff;
    --vendor-border: #bdd5ff;
    --vendor-value: #1264d8;
}


/* =========================================================
   CARD 2: ACTIVE VENDOR
   Green
   Suggested icon: UserCheck / CheckCircle
   ========================================================= */

.vendor-kpi-active-vendor {
    --vendor-accent: #16a34a;
    --vendor-soft: #e9f8ed;
    --vendor-border: #bee8c9;
    --vendor-value: #15803d;
}


/* =========================================================
   CARD 3: IN ACTIVE VENDOR
   Red
   Suggested icon: UserCancel / Cancel
   ========================================================= */

.vendor-kpi-inactive-vendor {
    --vendor-accent: #ef4444;
    --vendor-soft: #fef0f0;
    --vendor-border: #fecaca;
    --vendor-value: #dc2626;
}


/* Alternative class spelling */

.vendor-kpi-in-active-vendor {
    --vendor-accent: #ef4444;
    --vendor-soft: #fef0f0;
    --vendor-border: #fecaca;
    --vendor-value: #dc2626;
}


/* =========================================================
   CARD 4: ON HOLD
   Orange
   Suggested icon: Clock
   ========================================================= */

.vendor-kpi-onhold {
    --vendor-accent: #f97316;
    --vendor-soft: #fff0e7;
    --vendor-border: #ffd2b8;
    --vendor-value: #ea580c;
}


/* Alternative class spelling */

.vendor-kpi-on-hold {
    --vendor-accent: #f97316;
    --vendor-soft: #fff0e7;
    --vendor-border: #ffd2b8;
    --vendor-value: #ea580c;
}


/* =========================================================
   CARD 5: TOTAL BALANCE
   Purple
   Suggested icon: Wallet / Calculator
   ========================================================= */

.vendor-kpi-total-balance {
    --vendor-accent: #7c3aed;
    --vendor-soft: #f1eaff;
    --vendor-border: #dac7ff;
    --vendor-value: #6d28d9;
}


    /* =========================================================
   OPTIONAL POSITIVE BALANCE
   ========================================================= */

    .vendor-kpi-total-balance.is-positive {
        --vendor-accent: #16a34a;
        --vendor-soft: #e9f8ed;
        --vendor-border: #bee8c9;
        --vendor-value: #15803d;
    }


    /* =========================================================
   OPTIONAL ZERO BALANCE
   ========================================================= */

    .vendor-kpi-total-balance.is-zero {
        --vendor-accent: #7c3aed;
        --vendor-soft: #f1eaff;
        --vendor-border: #dac7ff;
        --vendor-value: #6d28d9;
    }


    /* =========================================================
   OPTIONAL NEGATIVE BALANCE

   Keep purple to match your screenshot.
   ========================================================= */

    .vendor-kpi-total-balance.is-negative {
        --vendor-accent: #7c3aed;
        --vendor-soft: #f1eaff;
        --vendor-border: #dac7ff;
        --vendor-value: #6d28d9;
    }


/* =========================================================
   NON-CLICKABLE CARDS

   Apply vendor-kpi-static to Total Balance if it is not a
   filter card.
   ========================================================= */

.vendor-kpi-card.vendor-kpi-static {
    cursor: default;
}

    .vendor-kpi-card.vendor-kpi-static:hover {
        transform: none;
        border-color: var(--vendor-border);
        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.04);
    }

        .vendor-kpi-card.vendor-kpi-static:hover::after {
            height: 3px;
        }

        .vendor-kpi-card.vendor-kpi-static:hover .vendor-kpi-icon {
            transform: none;
        }


/* =========================================================
   OPTIONAL LOADING STATE
   ========================================================= */

.vendor-kpi-card.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

    .vendor-kpi-card.is-loading .vendor-kpi-value {
        color: #94a3b8;
    }


/* =========================================================
   RESPONSIVE: LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {

    .vendor-kpi-grid {
        gap: 10px;
    }

    .vendor-kpi-card {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 118px;
        padding: 13px 12px;
        column-gap: 11px;
        row-gap: 5px;
    }

    .vendor-kpi-icon {
        width: 54px;
        height: 54px;
        font-size: 25px;
    }

        .vendor-kpi-icon .k-icon {
            font-size: 25px;
        }

    .vendor-kpi-title {
        font-size: 12px;
    }

    .vendor-kpi-value {
        font-size: 22px;
    }

    .vendor-kpi-amount-value {
        font-size: clamp(17px, 1.35vw, 22px);
    }

    .vendor-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL LAPTOP / TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .vendor-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .vendor-kpi-card {
        min-height: 122px;
    }

    .vendor-kpi-title {
        font-size: 12px;
    }

    .vendor-kpi-value {
        font-size: 22px;
    }

    .vendor-kpi-amount-value {
        font-size: 21px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 700px) {

    .vendor-kpi-section {
        margin: 10px 0 14px;
    }

    .vendor-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .vendor-kpi-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 114px;
        padding: 12px 10px;
        column-gap: 10px;
    }

    .vendor-kpi-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

        .vendor-kpi-icon .k-icon {
            font-size: 22px;
        }

    .vendor-kpi-title {
        font-size: 11px;
    }

    .vendor-kpi-value {
        font-size: 20px;
    }

    .vendor-kpi-amount-value {
        font-size: 18px;
    }

    .vendor-kpi-caption {
        font-size: 9.5px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .vendor-kpi-grid {
        grid-template-columns: 1fr;
    }

    .vendor-kpi-card {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 112px;
        padding: 13px 14px;
    }

    .vendor-kpi-icon {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }

        .vendor-kpi-icon .k-icon {
            font-size: 24px;
        }

    .vendor-kpi-title {
        font-size: 12px;
    }

    .vendor-kpi-value {
        font-size: 22px;
    }

    .vendor-kpi-amount-value {
        font-size: 21px;
    }

    .vendor-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .vendor-kpi-card,
    .vendor-kpi-icon,
    .vendor-kpi-card::after {
        transition: none;
    }

        .vendor-kpi-card:hover {
            transform: none;
        }

            .vendor-kpi-card:hover .vendor-kpi-icon {
                transform: none;
            }
}

/* =========================================================
   CUSTOMER LIST KPI CARDS
   Unique prefix: customer-kpi

   Cards:
   1. Total Customer
   2. Active Customer
   3. Inactive Customer
   4. On Hold
   5. Total Balance
   ========================================================= */

.customer-kpi-section {
    width: 100%;
    margin: 14px 0 16px;
}

.customer-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.customer-kpi-card {
    --customer-accent: #2477f5;
    --customer-soft: #e7f0ff;
    --customer-border: #bfd6ff;
    --customer-value: #1264d8;
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "icon caption";
    align-items: center;
    column-gap: 14px;
    row-gap: 5px;
    min-width: 0;
    min-height: 126px;
    padding: 16px 16px 15px;
    background: #ffffff;
    border: 1px solid var(--customer-border);
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}


    /* =========================================================
   COLORED BOTTOM LINE
   ========================================================= */

    .customer-kpi-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--customer-accent);
        transition: height 0.2s ease;
    }


    /* =========================================================
   HOVER EFFECT
   ========================================================= */

    .customer-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--customer-accent);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.05);
    }

        .customer-kpi-card:hover::after {
            height: 4px;
        }


    /* =========================================================
   ACTIVE FILTER CARD
   ========================================================= */

    .customer-kpi-card.is-active {
        border-color: var(--customer-accent);
        background: linear-gradient( 135deg, var(--customer-soft) 0%, #ffffff 48%, #ffffff 100% );
        box-shadow: 0 0 0 1px var(--customer-accent), 0 8px 20px rgba(15, 23, 42, 0.10);
    }

        .customer-kpi-card.is-active::after {
            height: 4px;
        }


    /* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

    .customer-kpi-card:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.22);
        outline-offset: 2px;
    }


/* =========================================================
   ICON
   ========================================================= */

.customer-kpi-icon {
    grid-area: icon;
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--customer-soft);
    color: var(--customer-accent);
    font-size: 29px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

    .customer-kpi-icon .k-icon {
        font-size: 29px;
    }

.customer-kpi-card:hover .customer-kpi-icon {
    transform: scale(1.04);
}


/* =========================================================
   CONTENT
   ========================================================= */

.customer-kpi-content {
    grid-area: content;
    min-width: 0;
    align-self: end;
}

.customer-kpi-title {
    display: block;
    margin-bottom: 5px;
    color: #1e293b;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-kpi-value {
    display: block;
    color: var(--customer-value);
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.35px;
}


/* =========================================================
   AMOUNT VALUE
   ========================================================= */

.customer-kpi-amount-value {
    white-space: nowrap;
    font-size: clamp(18px, 1.45vw, 24px);
}


/* =========================================================
   CURRENCY
   ========================================================= */

.customer-kpi-currency {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.customer-kpi-caption {
    grid-area: caption;
    display: block;
    align-self: start;
    width: 100%;
    color: #64748b;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   CARD 1: TOTAL CUSTOMER
   Blue
   ========================================================= */

.customer-kpi-total-customer {
    --customer-accent: #2477f5;
    --customer-soft: #e7f0ff;
    --customer-border: #bdd5ff;
    --customer-value: #1264d8;
}


/* Optional plural class */

.customer-kpi-total-customers {
    --customer-accent: #2477f5;
    --customer-soft: #e7f0ff;
    --customer-border: #bdd5ff;
    --customer-value: #1264d8;
}


/* =========================================================
   CARD 2: ACTIVE CUSTOMER
   Green
   ========================================================= */

.customer-kpi-active-customer {
    --customer-accent: #16a34a;
    --customer-soft: #e9f8ed;
    --customer-border: #bee8c9;
    --customer-value: #15803d;
}


/* Optional plural class */

.customer-kpi-active-customers {
    --customer-accent: #16a34a;
    --customer-soft: #e9f8ed;
    --customer-border: #bee8c9;
    --customer-value: #15803d;
}


/* =========================================================
   CARD 3: INACTIVE CUSTOMER
   Red
   ========================================================= */

.customer-kpi-inactive-customer {
    --customer-accent: #ef4444;
    --customer-soft: #fef0f0;
    --customer-border: #fecaca;
    --customer-value: #dc2626;
}


/* Optional alternate class */

.customer-kpi-in-active-customer {
    --customer-accent: #ef4444;
    --customer-soft: #fef0f0;
    --customer-border: #fecaca;
    --customer-value: #dc2626;
}


/* Optional plural class */

.customer-kpi-inactive-customers {
    --customer-accent: #ef4444;
    --customer-soft: #fef0f0;
    --customer-border: #fecaca;
    --customer-value: #dc2626;
}


/* =========================================================
   CARD 4: ON HOLD
   Orange
   ========================================================= */

.customer-kpi-onhold {
    --customer-accent: #f97316;
    --customer-soft: #fff0e7;
    --customer-border: #ffd2b8;
    --customer-value: #ea580c;
}


/* Optional class spelling */

.customer-kpi-on-hold {
    --customer-accent: #f97316;
    --customer-soft: #fff0e7;
    --customer-border: #ffd2b8;
    --customer-value: #ea580c;
}


/* =========================================================
   CARD 5: TOTAL BALANCE
   Purple
   ========================================================= */

.customer-kpi-total-balance {
    --customer-accent: #7c3aed;
    --customer-soft: #f1eaff;
    --customer-border: #dac7ff;
    --customer-value: #6d28d9;
}


    /* Positive balance */

    .customer-kpi-total-balance.is-positive {
        --customer-accent: #16a34a;
        --customer-soft: #e9f8ed;
        --customer-border: #bee8c9;
        --customer-value: #15803d;
    }


    /* Zero balance */

    .customer-kpi-total-balance.is-zero {
        --customer-accent: #7c3aed;
        --customer-soft: #f1eaff;
        --customer-border: #dac7ff;
        --customer-value: #6d28d9;
    }


    /* Negative balance */

    .customer-kpi-total-balance.is-negative {
        --customer-accent: #dc2626;
        --customer-soft: #fef2f2;
        --customer-border: #fecaca;
        --customer-value: #dc2626;
    }


/* =========================================================
   NON-CLICKABLE CARD

   Apply customer-kpi-static to Total Balance when it does
   not filter the customer list.
   ========================================================= */

.customer-kpi-card.customer-kpi-static {
    cursor: default;
}

    .customer-kpi-card.customer-kpi-static:hover {
        transform: none;
        border-color: var(--customer-border);
        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.04);
    }

        .customer-kpi-card.customer-kpi-static:hover::after {
            height: 3px;
        }

        .customer-kpi-card.customer-kpi-static:hover .customer-kpi-icon {
            transform: none;
        }


/* =========================================================
   OPTIONAL LOADING STATE
   ========================================================= */

.customer-kpi-card.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

    .customer-kpi-card.is-loading .customer-kpi-value {
        color: #94a3b8;
    }


/* =========================================================
   RESPONSIVE: LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {

    .customer-kpi-grid {
        gap: 10px;
    }

    .customer-kpi-card {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 118px;
        padding: 13px 12px;
        column-gap: 11px;
        row-gap: 5px;
    }

    .customer-kpi-icon {
        width: 54px;
        height: 54px;
        font-size: 25px;
    }

        .customer-kpi-icon .k-icon {
            font-size: 25px;
        }

    .customer-kpi-title {
        font-size: 12px;
    }

    .customer-kpi-value {
        font-size: 22px;
    }

    .customer-kpi-amount-value {
        font-size: clamp(17px, 1.35vw, 22px);
    }

    .customer-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL LAPTOP / TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .customer-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .customer-kpi-card {
        min-height: 122px;
    }

    .customer-kpi-title {
        font-size: 12px;
    }

    .customer-kpi-value {
        font-size: 22px;
    }

    .customer-kpi-amount-value {
        font-size: 21px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 700px) {

    .customer-kpi-section {
        margin: 10px 0 14px;
    }

    .customer-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .customer-kpi-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 114px;
        padding: 12px 10px;
        column-gap: 10px;
    }

    .customer-kpi-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

        .customer-kpi-icon .k-icon {
            font-size: 22px;
        }

    .customer-kpi-title {
        font-size: 11px;
    }

    .customer-kpi-value {
        font-size: 20px;
    }

    .customer-kpi-amount-value {
        font-size: 18px;
    }

    .customer-kpi-caption {
        font-size: 9.5px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .customer-kpi-grid {
        grid-template-columns: 1fr;
    }

    .customer-kpi-card {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 112px;
        padding: 13px 14px;
    }

    .customer-kpi-icon {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }

        .customer-kpi-icon .k-icon {
            font-size: 24px;
        }

    .customer-kpi-title {
        font-size: 12px;
    }

    .customer-kpi-value {
        font-size: 22px;
    }

    .customer-kpi-amount-value {
        font-size: 21px;
    }

    .customer-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .customer-kpi-card,
    .customer-kpi-icon,
    .customer-kpi-card::after {
        transition: none;
    }

        .customer-kpi-card:hover {
            transform: none;
        }

            .customer-kpi-card:hover .customer-kpi-icon {
                transform: none;
            }
}

/* =========================================================
   ITEM LIST KPI CARDS
   Unique prefix: item-kpi

   Cards:
   1. Total Items
   2. Active Items
   3. Inactive Items
   4. Total Stock
   5. Stock Value
   ========================================================= */

.item-kpi-section {
    width: 100%;
    margin: 14px 0 16px;
}

.item-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.item-kpi-card {
    --item-accent: #2477f5;
    --item-soft: #e7f0ff;
    --item-border: #bfd6ff;
    --item-value: #1264d8;
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-areas:
        "icon content"
        "icon caption";
    align-items: center;
    column-gap: 14px;
    row-gap: 5px;
    min-width: 0;
    min-height: 126px;
    padding: 16px 16px 15px;
    background: #ffffff;
    border: 1px solid var(--item-border);
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}


    /* Colored side line like your screenshot */

    .item-kpi-card::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        background: var(--item-accent);
        transition: width 0.2s ease;
    }


    /* Hover effect */

    .item-kpi-card:hover {
        transform: translateY(-2px);
        border-color: var(--item-accent);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.05);
    }

        .item-kpi-card:hover::after {
            width: 4px;
        }


    /* Active filter card */

    .item-kpi-card.is-active {
        border-color: var(--item-accent);
        background: linear-gradient( 135deg, var(--item-soft) 0%, #ffffff 48%, #ffffff 100% );
        box-shadow: 0 0 0 1px var(--item-accent), 0 8px 20px rgba(15, 23, 42, 0.10);
    }

        .item-kpi-card.is-active::after {
            width: 4px;
        }


    /* Keyboard accessibility */

    .item-kpi-card:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.22);
        outline-offset: 2px;
    }


/* =========================================================
   ICON
   ========================================================= */

.item-kpi-icon {
    grid-area: icon;
    position: relative;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--item-soft);
    color: var(--item-accent);
    font-size: 29px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

    .item-kpi-icon .k-icon {
        font-size: 29px;
    }

.item-kpi-card:hover .item-kpi-icon {
    transform: scale(1.04);
}


/* =========================================================
   CONTENT
   ========================================================= */

.item-kpi-content {
    grid-area: content;
    min-width: 0;
    align-self: end;
}

.item-kpi-title {
    display: block;
    margin-bottom: 5px;
    color: #1e293b;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-kpi-value {
    display: block;
    color: var(--item-value);
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.35px;
}


/* Amount and stock values */

.item-kpi-amount-value {
    white-space: nowrap;
    font-size: clamp(18px, 1.45vw, 24px);
}


/* Currency */

.item-kpi-currency {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.item-kpi-caption {
    grid-area: caption;
    display: block;
    align-self: start;
    width: 100%;
    color: #64748b;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   CARD 1: TOTAL ITEMS
   Blue
   ========================================================= */

.item-kpi-total-items {
    --item-accent: #2477f5;
    --item-soft: #e7f0ff;
    --item-border: #bdd5ff;
    --item-value: #1264d8;
}


/* =========================================================
   CARD 2: ACTIVE ITEMS
   Green
   ========================================================= */

.item-kpi-active-items {
    --item-accent: #16a34a;
    --item-soft: #e9f8ed;
    --item-border: #bee8c9;
    --item-value: #15803d;
}


/* =========================================================
   CARD 3: INACTIVE ITEMS
   Red
   ========================================================= */

.item-kpi-inactive-items {
    --item-accent: #ef4444;
    --item-soft: #fef0f0;
    --item-border: #fecaca;
    --item-value: #dc2626;
}


/* Alternative spelling */

.item-kpi-in-active-items {
    --item-accent: #ef4444;
    --item-soft: #fef0f0;
    --item-border: #fecaca;
    --item-value: #dc2626;
}


/* =========================================================
   CARD 4: TOTAL STOCK
   Teal / Cyan
   ========================================================= */

.item-kpi-total-stock {
    --item-accent: #0f9fa8;
    --item-soft: #e3f7f7;
    --item-border: #b8e8e8;
    --item-value: #078d96;
}


/* =========================================================
   CARD 5: STOCK VALUE
   Purple
   ========================================================= */

.item-kpi-stock-value {
    --item-accent: #7c3aed;
    --item-soft: #f1eaff;
    --item-border: #dac7ff;
    --item-value: #6d28d9;
}


/* =========================================================
   NON-CLICKABLE CARDS

   Apply item-kpi-static to Total Stock and Stock Value when
   they do not filter the item list.
   ========================================================= */

.item-kpi-card.item-kpi-static {
    cursor: default;
}

    .item-kpi-card.item-kpi-static:hover {
        transform: none;
        border-color: var(--item-border);
        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.04);
    }

        .item-kpi-card.item-kpi-static:hover::after {
            width: 3px;
        }

        .item-kpi-card.item-kpi-static:hover .item-kpi-icon {
            transform: none;
        }


/* =========================================================
   OPTIONAL LOADING STATE
   ========================================================= */

.item-kpi-card.is-loading {
    pointer-events: none;
    opacity: 0.68;
}

    .item-kpi-card.is-loading .item-kpi-value {
        color: #94a3b8;
    }


/* =========================================================
   RESPONSIVE: LARGE LAPTOP
   ========================================================= */

@media (max-width: 1400px) {

    .item-kpi-grid {
        gap: 10px;
    }

    .item-kpi-card {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 118px;
        padding: 13px 12px;
        column-gap: 11px;
        row-gap: 5px;
    }

    .item-kpi-icon {
        width: 54px;
        height: 54px;
        font-size: 25px;
    }

        .item-kpi-icon .k-icon {
            font-size: 25px;
        }

    .item-kpi-title {
        font-size: 12px;
    }

    .item-kpi-value {
        font-size: 22px;
    }

    .item-kpi-amount-value {
        font-size: clamp(17px, 1.35vw, 22px);
    }

    .item-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL LAPTOP / TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .item-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .item-kpi-card {
        min-height: 122px;
    }

    .item-kpi-title {
        font-size: 12px;
    }

    .item-kpi-value {
        font-size: 22px;
    }

    .item-kpi-amount-value {
        font-size: 21px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 700px) {

    .item-kpi-section {
        margin: 10px 0 14px;
    }

    .item-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .item-kpi-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 114px;
        padding: 12px 10px;
        column-gap: 10px;
    }

    .item-kpi-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

        .item-kpi-icon .k-icon {
            font-size: 22px;
        }

    .item-kpi-title {
        font-size: 11px;
    }

    .item-kpi-value {
        font-size: 20px;
    }

    .item-kpi-amount-value {
        font-size: 18px;
    }

    .item-kpi-caption {
        font-size: 9.5px;
    }
}


/* =========================================================
   RESPONSIVE: SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .item-kpi-grid {
        grid-template-columns: 1fr;
    }

    .item-kpi-card {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 112px;
        padding: 13px 14px;
    }

    .item-kpi-icon {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }

        .item-kpi-icon .k-icon {
            font-size: 24px;
        }

    .item-kpi-title {
        font-size: 12px;
    }

    .item-kpi-value {
        font-size: 22px;
    }

    .item-kpi-amount-value {
        font-size: 21px;
    }

    .item-kpi-caption {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .item-kpi-card,
    .item-kpi-icon,
    .item-kpi-card::after {
        transition: none;
    }

        .item-kpi-card:hover {
            transform: none;
        }

            .item-kpi-card:hover .item-kpi-icon {
                transform: none;
            }
}

.mychart-title {
    position: relative;
    display: inline-block;
    padding-left: 12px;
    color: #1f2937;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

    

/*form view Pages*/
.all-view {
    padding: 12px;
}

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

    .view-header h4 {
        margin: 0;
        font-weight: 700;
        color: #1274AC;
    }

.doc-no {
    color: #6b7280;
    font-size: 13px;
}

.view-card,
.payment-card,
.total-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.view-card {
    padding: 16px;
    margin-bottom: 14px;
}

.view-field label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 4px;
}

.view-field span {
    display: block;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 6px;
    background: #f8fafc;
    color: #111827;
    font-weight: 500;
}

.summary-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-top: 14px;
}

.payment-card {
    width: 420px;
    padding: 12px;
}

.total-card {
    width: 320px;
    padding: 12px;
}

    .payment-card div,
    .total-card div {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid #f1f5f9;
    }

        .payment-card div:last-child,
        .total-card div:last-child {
            border-bottom: none;
        }

    .payment-card label,
    .total-card label {
        color: #6b7280;
        font-weight: 600;
    }

    .payment-card span,
    .total-card span {
        font-weight: 700;
    }

.grand-total {
    font-size: 18px;
    color: #1274AC;
}

@media (max-width: 768px) {
    .summary-section {
        flex-direction: column;
    }

    .payment-card,
    .total-card {
        width: 100%;
    }
}

.summary-grid {
    display: grid;
    gap: 12px;
    margin: 18px 0;
}

.summary-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.summary-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.summary-grid-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.summary-grid .listpage-card {
    min-width: 0;
    height: 112px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    border: 1px solid #e5edf7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(25, 42, 70, 0.04);
    transition: all 0.2s ease;
}

.summary-grid .card-clickable {
    cursor: pointer;
}

    .summary-grid .card-clickable:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(25, 42, 70, 0.10);
        border-color: #b9d6f2;
    }

.summary-grid .active-summary-card {
    border-color: #0d6efd;
    box-shadow: 0 8px 22px rgba(13, 110, 253, 0.15);
}

.summary-grid .listpage-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-grid .listpage-card > div:last-child {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.summary-grid .listpage-card span {
    display: block;
    font-size: 13px;
    color: #50627a;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-grid .listpage-card strong {
    display: block;
    margin-top: 8px;
    font-size: clamp(18px, 1.25vw, 25px);
    line-height: 28px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet */
@media (max-width: 1200px) {
    .summary-grid-4,
    .summary-grid-5,
    .summary-grid-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .summary-grid-4,
    .summary-grid-5,
    .summary-grid-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .summary-grid .listpage-card {
        height: 96px;
        padding: 12px;
    }

    .summary-grid .listpage-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .summary-grid .listpage-card strong {
        font-size: 18px;
    }
}

/* Small Mobile */
@media (max-width: 420px) {
    .summary-grid-4,
    .summary-grid-5,
    .summary-grid-6 {
        grid-template-columns: 1fr !important;
    }
}


.app-chart-tooltip {
    min-width: 140px;
    padding: 9px 12px;
    color: #ffffff;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
}

.app-chart-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

    .app-chart-tooltip-row + .app-chart-tooltip-row {
        margin-top: 4px;
    }

.app-chart-tooltip strong,
.app-chart-tooltip span {
    color: #ffffff;
}


/* Quick Links */
.quick-link-section {
    width: 100%;
    padding: 4px 0 16px;
}

/* Section heading */
.quicklinks-wrap {
    width: 100%;
    padding: 4px 0 10px;
}

.ql-section + .ql-section {
    margin-top: 18px;
}

/*  .ql-section-title {
        margin-bottom: 12px;
        color: #1f2937;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
    } */
.ql-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    color: #1f2937;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: 0.1px;
}

    /* Blue vertical accent */
    .ql-section-title::before {
        content: "";
        width: 4px;
        height: 16px;
        flex: 0 0 4px;
        background: #2563eb;
        border-radius: 999px;
    }
/* Grid */

.ql-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 190px));
    justify-content: start;
    gap: 10px;
}

/* Card */

.ql-card {
    width: 100%;
    min-width: 0;
    min-height: 76px;
    padding: 9px 11px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .ql-card:hover {
        border-color: #bfdbfe;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.07);
        transform: translateY(-2px);
    }

    .ql-card:focus-visible {
        outline: 2px solid #bfdbfe;
        outline-offset: 2px;
    }

/*
        Column 1: icon
        Column 2: count
        Column 3: Open badge

        Second row:
        label uses columns 2 and 3
    */

.ql-card-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 11px;
    row-gap: 4px;
    align-items: center;
    width: 100%;
    min-width: 0;
}

/* Icon */

.ql-icon-box {
    grid-column: 1;
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    color: #2563eb;
}

    .ql-icon-box .k-svg-icon {
        width: 20px;
        height: 20px;
        color: #2563eb;
    }

/*
    If the CSS is inside Component.razor.css, use:

    ::deep .ql-icon-box .k-svg-icon {
        width: 20px;
        height: 20px;
        color: #2563eb;
    }
    */

/* Count at top-center */

.ql-count {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

/* Open at top-right */

.ql-status {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ql-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 23px;
    padding: 0 9px;
    background: #dbeafe;
    border-radius: 999px;
    color: #2563eb;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* Label uses space under count and Open */

.ql-text {
    grid-column: 2 / 4;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive */

@media (max-width: 1100px) {
    .ql-grid {
        grid-template-columns: repeat(2, minmax(0, 190px));
    }
}

@media (max-width: 650px) {
    .ql-grid {
        grid-template-columns: 1fr;
    }

    .ql-card {
        max-width: 190px;
    }
}
.hometile-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
}

.homemodule-icon {
    font-size: 18px;
    color: #1274ac;
}
.custom-tooltip.k-tooltip,
.custom-tooltip .k-tooltip {
    background: #ffffff;
    color: #1f2937;
    /*         border: 1px solid #1274ac; */
    border-radius: 8px;
    /*         box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18); */
    padding: 0;
    overflow: hidden;
}

.custom-tooltip .k-tooltip-content {
    background: #ffffff;
    color: #1f2937;
    padding: 0;
}

.custom-tooltip .k-callout {
    color: #ffffff;
}

/* Main Container */
.custom-tooltip-content {
    width: 100%;
    min-width: 360px;
    background: #ffffff;
}

/* Header */
.custom-tooltip-header {
    padding: 10px 14px;
    background: #f3f8fc;
    color: #0f5f8c;
    /*         border-bottom: 1px solid #d7e6ef; */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1px;
}

/* Table */
.custom-tooltip-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .custom-tooltip-table td {
        padding: 8px 6px;
        /*             border-bottom: 1px solid #edf1f4; */
        font-size: 13px;
        line-height: 1.45;
    }

    .custom-tooltip-table tr:last-child td {
        border-bottom: none;
    }

/* Labels */
.custom-tooltip-label {
    width: 110px;
    padding-left: 14px !important;
    color: #5f6b76;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: top;
}

/* Separator */
.custom-tooltip-separator {
    width: 12px;
    text-align: center;
    color: #7b8792;
    vertical-align: top;
}

/* Values */
.custom-tooltip-value {
    padding-right: 14px !important;
    color: #1f2937;
    font-weight: 500;
    overflow-wrap: anywhere;
    vertical-align: top;
}

/* Optional emphasis */
.custom-tooltip-primary {
    color: #0f6fa8;
    font-weight: 700;
}

.custom-tooltip-amount {
    text-align: left;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.custom-tooltip-description {
    color: #475569;
    white-space: normal;
    word-break: break-word;
}

.custom-tooltip-description-label {
    padding-top: 10px !important;
}