:root {
    --fb: #4267B2;
    --tw: #000000;
    --lin: #0077B5;
    --ins: #C13584;
    --primaryClicked: var(--ep-primary-active);
}

    :root.theme-default .dxbs-sc-time-cell.bg-light.non-working-hour-cell {
        background-color: var(--calendarCellDisabledBG) !important;
    }

.cnt-panel-body .timeln-item {
    cursor: pointer;
}

.sl-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.locked-img {
    width: 24px;
}

.ep-fieldset.wh-group-checkbox .ep-checkbox.label-right {
    margin-top: 0;
    margin-bottom: 0;
}

.ep-fieldset.wh-group-checkbox .flex-item-1 {
    max-height: 24px;
}

.ep-fieldset.wh-group-checkbox.wh-auto-height .flex-item-1 {
    max-height: unset;
}

.btn-custom-svg svg {
    width: 24px;
    height: 24px;
}

.btn-custom-svglarge svg {
    width: 48px;
    height: 48px;
}

.centered {
    text-align: center;
}

.wh-footerSum-template {
    text-align: right;
}

.wh-noborder {
    border: none;
}

.wh-color-primary {
    color: var(--ep-primary);
}

.wh-color-dark {
    color: var(--textDark);
}

.wh-color-primaryFaded {
    color: var(--ep-primary-subtle);
}

.wh-centered {
    text-align: center;
}

.wh-hidden-header .k-grid-header {
    display: none;
}

li.listeditor-item.-inactive {
    opacity: 0.5;
}

.wh-min-height {
    min-height: 250px !important;
}

.wh-mt-caption {
    margin-top: 1.5rem;
}

.wh-mt-caption-minus {
    margin-top: -1rem;
}

.wh-margins{
    margin-top : 1%;
    margin-bottom : 1%; 
}

.k-button.wh-mt-caption {
    float: right;
}

.wh-float-right {
    float: right;
}

.wh-mr-1rem {
    margin-right: 1rem !important;
}

.wh-hidden {
    display: none !important;
}

/* Logo */

.about-form-logo-area {
    margin: 0 2rem 0 2rem;
}

    .about-form-logo-area .main-logo {
        aspect-ratio: 200/200;
    }

    .about-form-logo-area .secondary-logo {
        aspect-ratio: 200/47
    }

    .about-form-logo-area .main-logo {
        fill: #050306;
    }

    .about-form-logo-area .secondary-logo {
        fill: #050306;
    }

.dark-mode .about-form-logo-area .main-logo {
    fill: #fff;
}

.dark-mode .about-form-logo-area .secondary-logo {
    fill: #fff;
}

/* End Logo */

.whtext-bold {
    font-weight: bold;
}

.wh-masterpage-summaryview {
    border: none;
    background: none;
}

    .wh-masterpage-summaryview .ep-panel__body {
        padding: .5rem .5rem 0.5rem 0;
    }

.wh-masterpage-editview {
    border: none;
}

    .wh-masterpage-editview .ep-panel__body {
        padding: 0;
    }

.wh-container-general-padding {
    padding: var(--generalPadding) !important;
}

.ep-tab.ep-layout.wh-child-container-mr-1rem .ep-tab__host {
    margin-right: 1rem;
}

.cnt-panel-container {
    box-shadow: rgba(99, 99, 99, 0.15) 0px 1px 5px 0px;
    border-radius: 0.7rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* --panelBG is not a token anywhere, so this was invalid at computed-value
       time and fell back to transparent. Over a white page nobody saw it; on a
       dark skin the expanded panel showed the page behind it. */
    background-color: var(--ep-panel-bg);
}

.cnt-panel-header,
.cnt-panel-header {
    font-size: 1rem;
    font-weight: 600;
    padding: var(--generalPadding) 1rem;
    background-color: var(--toolbarBG);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .cnt-panel-header .header-btn,
    .cnt-panel-header .header-btn {
        cursor: pointer;
        width: 26px;
        height: 26px;
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .1s ease-in background;
    }

        .cnt-panel-header .header-btn:hover {
            background: var(--shade90);
        }

.cnt-panel-body {
    padding: 0;
    overflow: auto;
    background-color: var(--ep-panel-bg);
}

.modal-window .cnt-panel-body {
    height: 100%;
}


.cnt-panel-body .ep-listeditor {
    display: flex;
    overflow: auto;
    padding: 1rem;
    gap: 1rem;
}

.cnt-panel-body .timeln-list {
    background: none;
    padding: 1rem;
}

.cnt-addresses {
    margin-bottom: 1rem;
}

.cnt-timeline {
    height: 100%;
}

    .cnt-timeline .cnt-panel-body {
        height: calc(100% - 3rem);
    }

.modal-window {
    position: fixed !important;
    background-color: rgba(0, 0, 0, 0.75);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20004;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: all 0.3s;
    padding: 3% !important;
    box-sizing: border-box;
    height: 100vh;
    min-height: 100vh;
}

    .modal-window .ep-listeditor {
        display: grid;
    }

.wh-tab-page.modal-window .ep-layout-item.flex-container {
    padding: 14px;
    background-color: white;
}

.dark-mode .modal-window {
    background-color: rgba(0, 0, 0, 0.8);
}

/*#region QR Code*/
.crmworkarea-redduerows {
    background-image: linear-gradient(to left, #ffb3bf, #fff5f6);
}

.crmworkarea-grayduerows {
    background-image: linear-gradient(to left, #BFBFBF, #f2f2f2);
}

.qr-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.qr-card {
    width: min(100%, 420px);
    max-width: 100%;
    padding: 2rem;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.qr-logo {
    display: block;
    width: 100px;
    height: 30px;
    margin: 0 auto 1rem auto;
}

.qr-description {
    margin-bottom: 0.35rem;
    font-size: 1.2rem;
    color: #6b7280;
}

.qr-amount {
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
}

.qr-code-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 260px;
    margin: 0 auto 1rem auto;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.qr-description-after {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    color: #6b7280;
}

.qr-waiting-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.qr-waiting-message {
    font-size: 1rem;
    color: #6b7280;
    text-align: center;
}

.qr-waiting-spinner {
    width: 32px;
    height: 32px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid var(--ep-primary);
    border-radius: 50%;
    animation: qr-spin 0.9s linear infinite;
}

@keyframes qr-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/*#endregion QR Code*/

/*Financial Data*/
.dropdown {
    margin: 0;
    list-style: none;
}

    .dropdown li {
        position: relative;
        cursor: pointer;
    }

        .dropdown li:hover a:hover {
            color: var(--ep-primary);
        }

        .dropdown li .menu_button {
            color: var(--buttonColor);
            border-radius: var(--borderRadius);
            text-align: center;
            text-decoration: none;
            display: block;
        }

        .dropdown li a {
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            display: block;
            padding: 10px;
        }

        .dropdown li ul {
            position: absolute;
            top: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
            display: none;
            line-height: normal;
            background-color: #333;
        }

            .dropdown li ul li a {
                text-align: left;
                color: #cccccc;
                font-size: 14px;
                padding: 10px;
                display: block;
                white-space: nowrap;
            }

            .dropdown li ul li ul {
                left: 100%;
                top: 0;
            }

ul li:hover > ul {
    display: block;
}

.fd-infofield {
    height: 75px;
    background-color: var(--ep-primary);
    color: white;
    margin: 5px;
    text-align: center;
    position: relative;
    box-shadow: 2px 2px 5px rgba(99, 99, 99, 0.9);
}

    .fd-infofield.fd-q.fd-q-items {
        height: 100px;
        margin: 1px;
    }

.fd-infofield-value {
    font-size: 26px;
    text-align: end;
    padding-top: 6px;
    padding-right: 10px;
}

.fd-infofield.fd-q.fd-q-items .fd-infofield-value {
    font-size: 16px;
    padding: 5px;
}

.fd-infofield-caption {
    font-size: 13px;
    padding: 10px;
    text-align: start;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.fd-infofield.fd-q.fd-q-items .fd-infofield-caption {
    font-size: 13px;
    padding: 5px;
}

.fd-infofield.fd-q.fd-q-items-wh {
    height: 45px;
}

    .fd-infofield.fd-q.fd-q-items-wh .fd-infofield-caption {
        font-size: 11px;
    }

    .fd-infofield.fd-q.fd-q-items-wh .fd-infofield-value {
        font-size: 16px;
    }


.fd-infofield-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: auto;
    margin-top: auto;
}

.fd-crminfofield-filter-caption,
.fd-crminfofield-selected-caption {
    flex: 1;
    margin-right: auto;
    text-align: start
}

.fd-crminfofield-filter-caption {
    font-size: 14px;
    font-weight: bold;
}

fd-crminfofield-selected-caption {
    font-size: 10px !important;
    font-weight: lighter;
}

.fd-crminfofield-filter-value,
.fd-crminfofield-selected-value {
    flex: 0;
    margin-left: auto;
}

.fieldinfo-crm:hover {
    background-color: var(--ep-primary-hover);
    cursor: pointer;
    transition: .5s;
}
/*.sidenav {
    width: 250px;
    position: fixed;
    z-index: 1;
    right: -270px;
    overflow-x: hidden;
    transition: 1s;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--mainBG);
}*/
.sidenav {
    overflow: hidden;
    padding: 0;
    flex-grow: 0;
}

    .sidenav:not(.expanded) {
        display: none;
    }

    .sidenav.expanded {
        overflow-y: auto;
        padding: var(--generalPadding);
        flex-basis: 280px;
    }

    .sidenav.sidenav-medium.expanded {
        overflow-y: auto;
        flex-basis: 530px;
    }

    .sidenav.sidenav-large.expanded {
        overflow-y: auto;
        flex-basis: 780px;
    }

.themestyle-classic .sidenav:not(.expanded) {
    padding: 0;
    border: none;
}

.fd-content {
    margin: 0;
}

.fd-content.with-filters{
    margin: 0;
}

.overflow-hidden {
    overflow: hidden;
}

.qfd-trigger-btn button {
    position: fixed;
    width: 45px;
    height: 45px;
    bottom: 40px;
    right: 60px;
    background-color: var(--ep-primary);
    color: #FFF;
    border-radius: 50% !important;
    text-align: center;
    box-shadow: 1px 1px 5px #999;
    z-index: 3000;
    border-width: 2px;
}

    .qfd-trigger-btn button:hover {
        color: var(--ep-primary);
        border-color: var(--ep-primary);
    }

.fd-q-whname {
    padding-left: 6px;
    font-weight: bold;
    font-size: 11px;
}

.fd-infofield.fd-q.fd-q-items-wh {
    height: 45px;
    background-color: transparent;
    color: black;
    border: 1px solid var(--ep-primary);
}

ul.leaders {
    max-width: 37em;
    padding: 0;
    overflow-x: hidden;
    list-style: none;
    margin: 5px;
    padding-left: 10px;
}

    ul.leaders li {
        margin: 3px;
    }

        ul.leaders li:before {
            float: left;
            width: 0;
            white-space: nowrap;
            content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
        }

    ul.leaders span:first-child {
        padding-right: 0.33em;
        background-color: var(--shade90);
        font-size: 12px;
    }

    ul.leaders span + span {
        float: right;
        padding-left: 0.33em;
        background-color: var(--shade90);
        font-size: 13px;
    }

        ul.leaders span + span:before {
            padding-right: 0.15em;
        }

.fd-panel-hdr {
    width: 100%;
}

.fd-panel-hdr-data {
    width: 100%;
}

span.fd-panel-hdr-total {
    color: var(--ep-primary-active);
    font-size: 11px;
}

    span.fd-panel-hdr-total.left-total {
        float: left;
    }

    span.fd-panel-hdr-total.right-total {
        float: right;
        margin-right: 20px;
    }

.fd-panel-container.fd-q-items .ep-panel__title {
    width: 100%;
}

.-open > .ep-panel__content {
    max-height: 10000px;
}

.ep-chart {
    height: 100%;
}

/* =Card*/
.wp-contactcard {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-shadow: rgba(99, 99, 99, 0.15) 0px 2px 8px 0px;
    padding: 1rem;
    border-radius: .7rem;
    margin: 1rem;
    margin-top: 0;
    background: var(--cardBG);
}

.card__divider {
    height: 1px;
    width: 100%;
    background: var(--borderColor);
}

.card__header {
    font-size: 1.1rem;
    font-weight: 600;
    align-self: flex-start;
}

.contact__icon {
    background: var(--shade40);
    width: 6rem;
    height: 6rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    color: #fff;
}

.contact__title {
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
    color: var(--textDark);
    text-align: center;
}

.contact__subtitle {
    margin: 0 0 .5rem 0;
    font-size: 1.1rem;
    color: var(--textDefault);
    text-align: center;
}

.contact__tin {
    margin: 0;
    font-size: 1rem;
    color: var(--textLight);
    text-align: center;
    font-weight: 300;
}

.social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 1rem;
}

    .social-list a {
        background: var(--buttonBG);
        width: 2rem;
        height: 2rem;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        text-decoration: none;
        transition: .1s all ease-in;
    }

        .social-list a:hover {
            background: var(--shade100);
            opacity: .7;
        }

    .social-list .fb a {
        background: var(--fb);
        color: #fff;
    }

    .social-list .tw a {
        background: var(--tw);
        color: #fff;
    }

    .social-list .lin a {
        background: var(--lin);
        color: #fff;
    }

    .social-list .ins a {
        background: var(--ins);
        color: #fff;
    }

.dark-mode .social-list a {
    opacity: .7;
}

    .dark-mode .social-list a:hover {
        opacity: 1;
    }

.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .contact-list li {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

.contact-list__icon {
    background: var(--shade60);
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    text-decoration: none;
    transition: .1s all ease-in;
}

.contact-list a {
    text-decoration: none;
    color: var(--ep-primary)
}

    .contact-list a:hover {
        text-decoration: underline;
    }

.dark-mode .contact__icon {
    background: var(--buttonBG);
}

.fd-crm-overview-container {
    display: flex;
    height: 125px;
    padding: 1rem;
}

.fd-crm-allitems-card {
    display: flex;
    width: 25%;
    height: 100%;
    justify-content: start;
    align-items: center;
    border-radius: 10px;
    color: var(--textDefault);
    background-color: var(--buttonBG);
}

    .fd-crm-allitems-card:hover {
        background-color: var(--buttonHoverBG);
        cursor: pointer;
    }

    .fd-crm-allitems-card > .title:hover {
        background-color: var(--buttonHoverBG);
        cursor: pointer;
    }

    .fd-crm-allitems-card.selected {
        background-color: var(--ep-secondary) !important;
        color: var(--buttonBG);
    }

.fd-crm-allitems-container {
    border-radius: 50%;
    height: 30px;
    margin: .5rem 1.25rem;
    width: 30px;
    justify-content: center;
    display: flex;
    align-items: center;
}

    .fd-crm-allitems-container > i {
        font-size: 24px;
        color: var(--ep-primary) !important;
    }

    .fd-crm-allitems-container:hover > i {
        font-size: 24px;
        color: var(--buttonBG) !important;
    }

.fd-crm-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fd-crm-column-40 {
    margin-right: 3rem;
    flex: 40%;
}

.fd-crm-column-60 {
    margin-left: 3rem;
    flex: 60%;
}

.fd-crm-row {
    flex: 1;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

.fd-crm-allinfo-container > .title {
    color: var(--textDefault);
    font-size: large;
    font-weight: lighter;
    margin-top: auto;
}

.fd-crm-allinfo-container > .value {
    color: var(--textDefault);
    font-size: 22px;
    text-align: start;
    font-weight: lighter;
    margin-top: auto;
}

.fd-crm-allinfo-container {
    margin: 0.25rem 1rem;
    display: flex;
    flex-direction: row;
    align-items: start;
    height: 100%;
}

.fd-crm-subcategory-container {
    margin: 0rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    height: calc(100% - 3rem);
    width: 33.33%;
}

    .fd-crm-subcategory-container > .title {
        color: var(--textDefault);
        background-color: var(--buttonBG);
        font-size: 14px;
        padding: 0.25rem 0.75rem;
        border-radius: .5rem;
        font-weight: 400;
        transition: .125s all;
        margin-top: auto;
    }

        .fd-crm-subcategory-container > .title.selected {
            background-color: var(--ep-secondary) !important;
            color: var(--buttonBG);
        }

        .fd-crm-subcategory-container > .title:hover {
            background-color: var(--buttonHoverBG);
            cursor: pointer;
        }

    .fd-crm-subcategory-container > .value {
        color: var(--buttonBG);
        font-size: 18px;
        font-weight: 500;
        text-align: start;
        margin-top: auto;
    }

.fd-crm-row-60 {
    flex: 60%;
}

.fd-crm-row-40 {
    flex: 40%;
    margin-left: 1rem;
    margin-right: 1rem;
}

.fd-crm-box {
    flex-grow: 1;
    display: flex;
    text-align: center;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}

.fd-crm-box-60 {
    flex: 60% !important;
}

.fd-crm-box-40 {
    flex: 40% !important;
    flex-direction: row;
}

.fd-crm-box-all {
    width: 50%;
    justify-content: center;
    align-items: start;
}

.fd-crm-box-50 {
    flex: 50% !important;
    flex-direction: row;
    justify-content: space-between;
}

.fd-crm-category-card {
    height: calc(100% - 1rem);
    min-width: 76px;
    width: 33.33%;
    border-radius: 8px;
    transition: 0.5s all;
    justify-content: center;
    background-color: var(--ep-primary);
    align-items: center;
    flex-direction: column;
    display: flex;
}

    .fd-crm-category-card > .value {
        font-size: 18px;
        margin-top: auto;
        margin-bottom: auto;
        color: var(--buttonBG);
    }

    .fd-crm-category-card > .title {
        font-size: 14px;
        margin-top: auto;
        margin-bottom: 0.125rem;
        color: var(--buttonBG);
    }

.fd-crm-subcategory-container.last {
    display: flex;
    justify-content: end;
    align-items: end;
}

.fd-crm-subcategory-container.middle {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fd-crm-vertical-line-split {
    width: 2px;
    height: calc(100% - 2rem);
    background-color: #00000022;
    margin: 1rem auto 1rem auto;
}

.diagram-node {
    text-align: center;
    white-space: pre;
}

.ep-splitterpane.ep-layout.flex-container {
    height: 100%;
}

/*SCHEDULER*/
/* Hot Fix For Scheduler Scroll*/
.ep-dx-scheduler {
    height: 100%;
}

dxbl-scheduler .dxbs-sc-resource-hr {
    font-size: var(--txtSizeLarge);
}

.dxbl-toolbar.dxbl-toolbar-adaptive > .dxbl-btn-toolbar > div:nth-child(5) {
    display: none;
}

.dxsc-cell-content-hidden {
    height: inherit;
    overflow: hidden;
}

dxbl-scheduler > div.dxsc-main-container > dxbl-view > div.dxbs-sc-scroll-container {
    overflow: auto;
}

    dxbl-scheduler > div.dxsc-main-container > dxbl-view > div.dxbs-sc-scroll-container::-webkit-scrollbar {
        display: none;
    }

.dxbs-sc-dayview {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* height: 100%; */
    min-height: 0;
}
/*SCHEDULER*/


.access-rights-lock.ep-grid-column-viewtemplate {
    width: 100%;
    height: 100%;
}

.wh-icon-template {
    width: 100%;
    height: 100%;
}

.wh-show-more-less-btn {
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
}

    .wh-show-more-less-btn.-closed {
        margin-top: -1.5rem;
    }

.wh-show-more-less-pnl {
    border: none;
    margin-bottom: 0;
}

    .wh-show-more-less-pnl .ep-panel__body.flex-container.direction-column.flex-item-1 {
        padding: 0;
    }

    .wh-show-more-less-pnl.panel-body__ps-1 .ep-panel__body.flex-container.direction-column.flex-item-1 {
        padding-left: 1rem;
    }

.wh-tab-content-no-padding .wh-tab-page {
    padding: 0;
}

    .wh-tab-content-no-padding .wh-tab-page .k-grid {
        border-width: 1px 0 0 0;
    }

.fd-crm-category-card i {
    color: #fff;
    font-size: 3rem;
}

.fd-filters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.fd-filter {
    cursor: pointer;
    background: var(--buttonBG);
    color: var(--buttonColor);
    border-radius: 100px;
    padding: 0 .8rem;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap: 1rem;
    transition: .1s ease-in background;
}

    .fd-filter:hover {
        background: var(--buttonHoverBG);
    }

.fd-filter__title {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.fd-filter__num {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    background: var(--buttonColor);
    color: #fff;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
    font-size: .8em;
    line-height: 1;
    opacity: .5;
    font-weight: 700;
    box-sizing: border-box;
    padding: 0 5px;
}

.fd-filter.-selected,
.fd-filter.-selected:hover {
    background: var(--ep-primary);
    color: #fff;
}

    .fd-filter.-selected .fd-filter__num {
        background: #fff;
        color: var(--ep-primary);
        opacity: 1;
    }

.dark-mode .fd-filter__num {
    color: var(--buttonBG);
}

.fd-cards.-crm {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.fd-card {
    background: var(--cardBG);
    border-radius: .5rem;
    flex: 1;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
    border: 1px solid var(--borderColor);
    position: relative;
}

    .fd-card .value {
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 1;
        margin: 0;
    }

    .fd-card .title {
        font-size: 1rem;
        font-weight: 500;
        color: var(--textGray);
    }

    .fd-card i {
        font-size: 3.5rem;
        position: absolute;
        right: 1rem;
        top: 1rem;
    }

    .fd-card.-draft i {
        color: var(--ep-info);
    }

    .fd-card.-closed i {
        color: var(--ep-success);
    }

    .fd-card.-inprogress i {
        color: var(--ep-warning);
    }


/*.fd-card.-draft { background: var(--ep-info); }
.fd-card.-closed { background: var(--ep-success); }
.fd-card.-inprogress { background: var(--ep-warning); }*/
.fd-progressbar {
    height: 3px;
    width: 100%;
    border-radius: .5rem;
    background: var(--shade60);
    margin-top: 1rem;
    display: flex;
    align-items: center;
}

.fd-progressvalue {
    height: 100%; /*filter: saturate(0); opacity: .25;*/
}

.fd-card .fd-progressvalue.-draft {
    background: var(--ep-info);
}

.fd-card .fd-progressvalue.-closed {
    background: var(--ep-success);
}

.fd-card .fd-progressvalue.-inprogress {
    background: var(--ep-warning);
}

.fd-card.-draft .fd-progressvalue.-draft {
    background: var(--ep-info);
    filter: saturate(1);
    opacity: 1;
    height: 8px;
    border-radius: .5rem;
}

.fd-card.-closed .fd-progressvalue.-closed {
    background: var(--ep-success);
    filter: saturate(1);
    opacity: 1;
    height: 8px;
    border-radius: .5rem;
}

.fd-card.-inprogress .fd-progressvalue.-inprogress {
    background: var(--ep-warning);
    filter: saturate(1);
    opacity: 1;
    height: 8px;
    border-radius: .5rem;
}



.carousel-inner {
    display: flex;
    flex-direction: column;
}

.carousel-item {
    display: none;
}

    .carousel-item.active {
        display: block;
    }

/*.qs-categories-card {
    border: 0;
    background-color: var(--buttonBG);
    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
    height: 90px;
    transition: background-color 0.3s ease;
}*/

.qs-price-card {
    border: 0;
    background-color: var(--buttonBG);
    padding: 0.5rem;
}

/*.card:hover {
    background-color: #333;
}*/

.card-title {
    font-size: larger;
    color: var(--textDefault);
    font-weight: 600;
}

.qs-item-card-title {
    font-size: medium;
    color: var(--textDefault);
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
}

.qs-numeric-quantity {
    width: 70px;
}

.qs-numeric-quantity .ep-label {
    display: none;
}

.card-text {
    font-size: medium;
    color: var(--textDefault);
    font-weight: 300;
    margin-top: auto;
    padding-left: .225rem;
    padding-bottom: .125rem;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--buttonHoverBG);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover .card-overlay {
    opacity: 1;
}

.card-body {
    display: flex;
    flex-direction: column;
    padding: 0.875rem;
    z-index: 1;
}

.qs-parent-categories-fs {
    opacity: 1;
    display: block;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

    .qs-parent-categories-fs.has-active-parent-category-fs {
        opacity: 0;
        z-index: -1;
        display: none;
    }

.qs-children-categories-fs {
    opacity: 0;
    display: none;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}

    .qs-children-categories-fs.has-active-parent-category-fs {
        opacity: 1;
        display: block;
        z-index: 1;
    }

.qs-back-button {
    margin-bottom: 1.5rem !important;
}



.qs-item-card .card-title {
    font-size: larger;
    color: var(--textDefault);
    font-weight: 600;
}

.qs-item-card .card-text {
    font-size: medium;
    color: var(--textDefault);
    font-weight: 300;
    margin-top: auto;
    padding-left: .225rem;
    padding-bottom: .125rem;
}

.qs-item-card:hover > .card-overlay {
    opacity: 1;
}

.qs-item-card > .card-body {
    display: flex;
    flex-direction: column;
    padding: 0.875rem;
    z-index: 1;
}

.qs-item-button {
    position: relative;
    border: 0;
    height: 48px;
    width: 48px;
    padding: .5rem;
    overflow: hidden;
    color: var(--textDefault);
    border-radius: .33rem;
    background-color: var(--ep-primary-subtle);
    transition: all 0.3s ease;
}

    .qs-item-button:hover {
        height: 51.84px;
        width: 51.84px;
    }

.qs-item-button-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--buttonHoverBG);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.qs-item-button:hover > .qs-item-button-overlay {
    opacity: .5;
}

.qs-item-quantity {
    color: var(--textDefault);
    opacity: 0.8;
}

.qs-item-price {
    color: var(--textDefault);
    font-size: medium;
    opacity: 0.8;
}

.qs-items-fs {
    opacity: 0;
    display: none;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}

    .qs-items-fs.has-active-child-category-fs {
        opacity: 1;
        display: block;
        z-index: 1;
    }


div.layout-wrapper.sidebar-hoverable.sidebar-pinned > div.layout-main > div > div.content.--with-toolbar.--with-pagenav > div.main-panel.-form > div > div > div > div:nth-child(2) > div > div > div.ep-layout.flex-container.can-wrap.flex-item-1.-overflow.ep-row > div > div > div > div.k-toolbar.telerik-blazor.k-grid-toolbar.k-toolbar-md > div > div > div > input {
    margin: 0px !important;
    flex: 0 0 auto;
    width: 83.33333333%;
}


.qs-grid-item-card {
    height: 80px;
}


.info-column-buttons:hover {
    background-color: var(--buttonHoverBG);
}


.info-column-buttons {
    transition: all 0.5s ease;
}


.default-text-color {
    color: var(--textDefault) !important
}


    .default-text-color * {
        color: var(--textDefault) !important
    }

.mxd-payment-button {
    background-color: var(--buttonBG) !important;
    border-width: medium;
    border-color: var(--buttonBorder);
    /*display: -webkit-box;*/
    /*-webkit-box-orient: vertical;*/
    overflow: hidden;
    /*-webkit-line-clamp: 3;*/
    /*text-overflow: ellipsis;*/
    height: 100px !important;
    width: 100px !important;
    border-radius: 5% !important;
}

.credit-card-icon-color {
    color: var(--ep-info);
}

.cash-icon-color {
    color: var(--ep-success);
}

.credit-card-row-template-card {
    background-color: var(--buttonBG);
}

.timesheets-row-template-card {
    background-color: transparent;
}

.ep-statcard {
    height: 100%;
}

.costing-undo-green-gradient {
    background-image: linear-gradient(to right, transparent, #049a10);
}

.costing-undo-green-yellow-gradient {
    background-image: linear-gradient(to right, transparent, #c3fa47);
}

/*#region Aade myData */

.aade-panel.ep-panel {
    border: 0;
}

.aade-panel .ep-panel__body {
    padding: 0;
}

.aade-panel .k-splitter-flex .k-pane:not(.k-pane-static) {
    flex-basis: 500px !important; /*prevents the panel to collapse on load*/
}

.aade-invoice-action {
    box-shadow: rgba(0, 0, 0, 0.16) 0 1px 3px;
    background: var(--cardBG);
    height: 100px;
    border: 1px solid var(--borderColor);
    border-radius: .5rem;
    overflow: hidden;
}

    .aade-invoice-action.active {
        pointer-events: auto;
        cursor: pointer;
    }

    .aade-invoice-action.inactive {
        pointer-events: none;
        cursor: default;
    }

.aade-card-header {
    background: var(--buttonBG);
    color: var(--buttonColor);
}

.aade-badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: 80%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .2rem;
    background-color: var(--ep-primary);
}

.aade-rounded-pill {
    border-radius: 50rem !important;
}

.aade-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}

.aade-card {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 12rem;
    background: var(--cardBG);
    border-radius: .5rem;
    padding: 1rem 1rem 0.1rem 1rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0 4px 12px 0;
    border: 1px solid var(--borderColor);
    position: relative;
    height: 9rem;
    display: flex;
    flex-direction: column;
}

    .aade-card .value {
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 1;
        margin: 0;
        flex-grow: 1;
    }

    .aade-card .title {
        font-size: 1rem;
        font-weight: 500;
        color: var(--textGray);
        margin-top: auto;
    }

    .aade-card i {
        font-size: 3.5rem;
        position: absolute;
        right: 1rem;
        top: 1rem;
    }

    .aade-card.-pending i {
        color: var(--ep-info);
    }

    .aade-card.-failed i {
        color: var(--ep-warning);
    }

    .aade-card.-error i {
        color: var(--ep-danger);
    }

    .aade-card.-completed i {
        color: var(--ep-success);
    }


/*#region Aade Grid Row Color */

.aade-panel .k-multiselect-focusable .k-row-edited .k-table-td {
    font-weight: 700;
}

/*.k-colorful .k-grid .k-table-row.aade-status-completed > .k-table-td:not(.k-grid-content-sticky), 
.k-colorful .k-grid .k-table-row.aade-status-failed > .k-table-td:not(.k-grid-content-sticky),
.k-colorful .k-grid .k-table-row.aade-status-incompatible > .k-table-td:not(.k-grid-content-sticky){
    color: #fff;
}

.k-colorful .k-grid .k-table-row.aade-status-completed > .k-table-td:not(.k-grid-content-sticky) a,
.k-colorful .k-grid .k-table-row.aade-status-failed > .k-table-td:not(.k-grid-content-sticky) a,
.k-colorful .k-grid .k-table-row.aade-status-incompatible > .k-table-td:not(.k-grid-content-sticky) a,
.k-colorful .k-grid .k-table-row.aade-status-completed > .k-table-td:not(.k-grid-content-sticky) i,
.k-colorful .k-grid .k-table-row.aade-status-failed > .k-table-td:not(.k-grid-content-sticky) i,
.k-colorful .k-grid .k-table-row.aade-status-incompatible > .k-table-td:not(.k-grid-content-sticky) i {
    color: var(--ep-danger-subtle);
}*/

.aade-status-pending {
    background-image: linear-gradient(to right, #df9111, #df7111);
}

.aade-status-completed {
    background-image: linear-gradient(to right, #76e397, var(--ep-success));
}

.aade-status-failed {
    background-image: linear-gradient(to right, #f29daf, var(--ep-danger));
}

.aade-status-incompatible {
    background-image: linear-gradient(to right, #f5eb7d, var(--ep-warning));
}

.aade-status-nottransmitted {
    background-image: linear-gradient(to right, transparent, #112fdf);
    height: 25px;
}

.aade-status-offlineprinted {
    background-image: linear-gradient(to right, transparent, #ffe021);
    height: 25px;
}

.aade-status-pdfnotsent {
    background-image: linear-gradient(to right, transparent, #734e2e);
    height: 25px;
}

.aade-status-nosynopsis {
    background-image: linear-gradient(to right, transparent, #ed0c0c);
    height: 25px;
}

.aade-status-classifications {
    background-image: linear-gradient(to right, transparent, #f47916);
    height: 25px;
}

.aade-status-completed2 {
    background-image: linear-gradient(to right, transparent, #049a10);
    height: 25px;
}

.aade-status-massive-pending {
    background-image: linear-gradient(to right, transparent, #df7111);
}

.aade-status-massive-failed {
    background-image: linear-gradient(to right, transparent, #ed0c0c);
}

.aade-status-massive-incompatible {
    background-image: linear-gradient(to right, transparent, #fff000);
}

.aade-status-massive-match {
    background-image: linear-gradient(to right, transparent, #90ee90);
}

.aade-status-massive-rejected {
    background-image: linear-gradient(to right, transparent, #db7093);
}

.aade-status-form-control-pending {
    background-image: linear-gradient(to left, #df7111, transparent);
    /* font-weight: bold; */
}

.aade-status-form-control-completed {
    background-image: linear-gradient(to left, #90ee90, transparent);
    /* font-weight: bold; */
}

.aade-status-form-control-failed {
    background-image: linear-gradient(to left, #ed0c0c, transparent);
    /* font-weight: bold; */
}

.aade-status-form-control-incompatible {
    background-image: linear-gradient(to left, #fff000, transparent);
    /* font-weight: bold; */
}

.aade-statusmemo-container {
    flex-wrap: wrap;
    color: #0a0c0d;
}

    .aade-statusmemo-container > *:not(:last-child) {
        margin-right: 1rem;
    }

.aade-hyperlink-sticky {
    text-align: center;
}

.aade-table-td {
    color: black;
}

.aade-esend-diffs {
    background-color: rgba(209, 84, 119, 0.5) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    outline-color: white !important;
    font-weight: bold;
}

.aade-esend-no-diffs {
    background-color: rgba(140, 220, 160, 0.5) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    outline-color: white !important;
    font-weight: bold;
}

.aade-esend-diffs-null {
    background-color: none;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    outline-color: white !important;
}

.aade-deviation {
    background: linear-gradient(to right, rgba(255, 100, 100, 0.6), rgba(255, 100, 100, 0)) !important; /*fading red*/
    font-weight: bold;
}

.aade-omission {
    background: linear-gradient(to right, rgba(255, 140, 0, 0.7), rgba(255, 140, 0, 0)) !important; /*fading orange*/
    font-weight: bold;
}

.aade-received {
    background: linear-gradient(to right, rgba(0, 120, 255, 0.7), rgba(0, 120, 255, 0)) !important; /*fading blue*/
    font-weight: bold;
}


.aade-deviation-bold-no-border {
    font-weight: bold !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    outline-color: white !important;
}

.aade-deviation-no-border {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    outline-color: white !important;
}

.aade-column-control-with-buttons-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

.aade-column-control-with-buttons-wrapper .k-textbox {
    flex: 1 1 auto;
    min-width: 0; /* critical to allow shrinking inside a flex container */
}

.aade-column-control-with-buttons-wrapper .k-button {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-shrink: 0;
}


.aade-column-control-with-buttons-wrapper .k-button .fa,
.aade-column-control-with-buttons-wrapper .k-button i {
   font-size: 0.9rem;
   line-height: 1;
}

.aade-row-fit,
.aade-row-fit > td,
.aade-row-fit > .k-table-td {
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
  vertical-align: middle;
}

.aade-row-fit > td,
.aade-row-fit > .k-table-td {
   padding: 0.05rem 0.5rem !important;
   white-space: nowrap;
}

.aade-row-fit .k-input,
.aade-row-fit input,
.aade-row-fit .k-textbox,
.aade-row-fit .k-dropdown-wrap,
.aade-row-fit .k-numerictextbox,
.aade-row-fit .k-button,
.aade-row-fit .ep-treelist .ep-grid-column-viewtemplate {
   height: 1.4rem !important;
   min-height: 1.4rem !important;
   line-height: 1.4rem !important;
   padding: 0 !important;
   box-sizing: border-box;
}

.aade-row-fit .k-button,
.aade-row-fit button,
.aade-row-fit .aade-inline-action-btn {
   height: 1.4rem !important;
   min-width: 1.6rem !important;
   padding: 0.05rem 0.35rem !important;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
}

.aade-row-fit .aade-column-control-with-buttons-wrapper {
   gap: 0.35rem;
   padding: 0;
   align-items: center;
}

.aade-parent-row .k-checkbox,
.aade-parent-row input[type="checkbox"],
.aade-parent-row .k-table-td .k-checkbox,
.aade-parent-row .k-table-td.k-selection-cell,
.aade-parent-row .k-grid .k-selection-cell {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* If the selection cell leaves empty space, collapse it */
.aade-parent-row > .k-table-td.k-selection-cell,
.aade-parent-row > td.k-selection-cell {
    width: 1px !important;
    padding: 0 !important;
}

/* keep inputs/buttons compact in parent rows (optional) */
.aade-parent-row .aade-column-control-with-buttons-wrapper,
.aade-parent-row .k-input,
.aade-parent-row .k-button {
    align-items: center;
    height: 1.6rem;
}
/* Hide select-all checkbox only for treelists that have the aade-treelist-no-selectall class */
.aade-treelist-no-selectall .k-grid-header .k-selection-cell,
.aade-treelist-no-selectall table.k-table thead th.k-selection-cell,
.aade-treelist-no-selectall .k-grid-header .k-checkbox,
.aade-treelist-no-selectall table.k-table thead th.k-selection-cell input[type="checkbox"],
.aade-treelist-no-selectall .k-grid-header .k-checkbox-wrap {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Collapse header selection cell so it doesn't leave empty space */
.aade-treelist-no-selectall .k-grid-header .k-selection-cell {
    width: 1px !important;
    padding: 0 !important;
}


.k-numerictextbox
.k-input
.aade-esend-diffs
.k-focus
.telerik-blazor
.k-input-solid
.k-rounded-md
.k-input-md {
    font-weight: bold;
}

.aade-esend-classifications-diffs {
    background-color: rgba(209, 84, 119, 0.5) !important;
    font-weight: bold;
}

.aade-esend-classifications-no-diffs {
    background-color: rgba(140, 220, 160, 0.5) !important;
    font-weight: bold;
}

.aade-inline-icon-start {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 0.5rem
}

.aade-inline-icon-end {
    display: flex;
    align-items: flex-end;
    width: 100%;
    gap: 0.5rem
}

.aade-control-end-icon {
    position: relative;
    left: 0;
    top: 50%;
    color: var(--ep-primary)
}


.aade-description-label {
    flex: 1;
    white-space: normal;
    word-wrap: break-word;
}


.mydatasetup-document-series-duplicate {
    background-image: linear-gradient(to left, var(--ep-warning), transparent);
}

.mydatasetup-classification-has-classtype {
    background-image: linear-gradient(to left, var(--ep-success), transparent);
}

.mydatasetup-classification-detail-is-deleted {
    text-decoration: line-through;
    color: var(--ep-danger);
}

/*#endregion Aade Grid Row Color */

/* open items */
.openitem-status-partial {
    background-image: linear-gradient(#CAE7F4CC,#87CEEBCC);
}

.openitem-status-open {
    background-image: linear-gradient(#CFF8CFCC,#90EE90CC);
}

.openitem-status-closed {
    background-image: linear-gradient( #FCE0E4CC,#FFC0CBCC);
}

.openitem-status-inadvance {
    background-image: linear-gradient(#F0ECECCC, #D3D3D3CC);
}

.openitem-icons-container {
    justify-content: space-between;
}

    .openitem-icons-container > * {
        padding: 0px 5px;
    }

.open-item-icon > * {
    padding-right: 3px;
}

.k-colorful .k-grid .k-table-row.k-selected.openitem-status-partial > .k-table-td:not(.k-grid-content-sticky) {
    font-weight: 500;
    color: #444444;
    background-image: linear-gradient(#CAE7F4CC,#87CEEBCC);
}

.k-colorful .k-grid .k-table-row.k-selected.openitem-status-open > .k-table-td:not(.k-grid-content-sticky) {
    font-weight: 500;
    color: #444444;
    background-image: linear-gradient(#CFF8CFCC,#90EE90CC);
}

.k-colorful .k-grid .k-table-row.k-selected.openitem-status-closed > .k-table-td:not(.k-grid-content-sticky) {
    font-weight: 500;
    color: #444444;
    background-image: linear-gradient( #FCE0E4CC,#FFC0CBCC);
}

.k-colorful .k-grid .k-table-row.k-selected.openitem-status-inadvance > .k-table-td:not(.k-grid-content-sticky) {
    font-weight: 500;
    color: #444444;
    background-image: linear-gradient(#F0ECECCC, #D3D3D3CC);
}

.k-colorful .k-grid .k-table-row.k-selected.openitem-status-partial > td:first-child,
.k-colorful .k-grid .k-table-row.k-selected.openitem-status-open > td:first-child,
.k-colorful .k-grid .k-table-row.k-selected.openitem-status-closed > td:first-child,
.k-colorful .k-grid .k-table-row.k-selected.openitem-status-inadvance > td:first-child {
    border-left: 3px solid #444444;
}
/*#endregion open items */

/*#region crm workarea*/
.crmworkarea-redduerows {
    background-image: linear-gradient(to left, #ffb3bf, #fff5f6);
}

.crmworkarea-grayduerows {
    background-image: linear-gradient(to left, #BFBFBF, #f2f2f2);
}
/*#endregion crm workarea*/

/* multiselect grid with focus */
.k-multiselect-focusable .k-grid table.k-table .k-table-row.k-selected-bold td {
    background-color: hsl(var(--ep-primaryH), var(--ep-primaryS), 60%);
}
/*#endregion multiselect grid with focus */

div.-component-page {
    width: 100%;
}

    div.-component-page div.toolbar {
        position: initial;
        width: 100%;
    }

        /* Toolbar List, Save, Add, Delete Buttons */
        div.-component-page div.toolbar > .toolbar__secondary div.k-toolbar.ep-toolbar-inner,
        div.-component-page:not(.show-savebutton) div.toolbar > .toolbar__main div.k-toolbar.ep-toolbar-inner > button.ep-savebutton,
        div.-component-page:not(.show-savebutton) div.toolbar > .toolbar__main div.k-toolbar.ep-toolbar-inner > button.ep-savebutton > span,
        div.-component-page div.toolbar > .toolbar__main div.k-toolbar.ep-toolbar-inner > button.ep-savebutton + button,
        div.-component-page div.toolbar > .toolbar__main div.k-toolbar.ep-toolbar-inner > button.ep-savebutton + button > span,
        div.-component-page div.toolbar > .toolbar__main div.k-toolbar.ep-toolbar-inner > button.ep-savebutton ~ button:nth-child(4),
        div.-component-page div.toolbar > .toolbar__main div.k-toolbar.ep-toolbar-inner > button.ep-savebutton ~ button:nth-child(4) > span {
            visibility: hidden;
            min-width: 0;
            max-width: 0;
            padding: 0;
            margin: 0;
        }

div.-component-page__show-savebutton div.toolbar > .toolbar__secondary div.k-toolbar.ep-toolbar-inner > button:nth-child(1),
div.-component-page__show-savebutton div.toolbar > .toolbar__secondary div.k-toolbar.ep-toolbar-inner > button:nth-child(1) > span,
div.-component-page__show-savebutton div.toolbar > .toolbar__main div.k-toolbar.ep-toolbar-inner > button.ep-savebutton + button,
div.-component-page__show-savebutton div.toolbar > .toolbar__main div.k-toolbar.ep-toolbar-inner > button.ep-savebutton + button > span,
div.-component-page__show-savebutton div.toolbar > .toolbar__main div.k-toolbar.ep-toolbar-inner > button.ep-savebutton ~ button:nth-child(4),
div.-component-page__show-savebutton div.toolbar > .toolbar__main div.k-toolbar.ep-toolbar-inner > button.ep-savebutton ~ button:nth-child(4) > span {
    visibility: hidden;
    min-width: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
}

/*#endregion Aade myData */

.qse-scan-area-wrapper {
    background-color: var(--buttonBG);
    box-shadow: rgba(99, 99, 99, 0.15) 0px 1px 5px 0px;
    border-radius: 0.7rem;
    overflow: hidden !important;
    height: 40px;
    width: 95% !important;
    z-index: 100;
}


.qse-extra-class {
    width: 100% !important;
    height: 100%;
}

    .qse-extra-class .ep-textbox__input {
        width: 100% !important;
    }

    .qse-extra-class .ep-button {
        width: 42px;
    }

    .qse-extra-class .k-button {
        width: 100%;
        height: 100%;
    }


    .qse-extra-class .wh-scancode-icon {
        font-size: 1.8em;
    }


    .qse-extra-class .k-textbox {
        height: 100%;
    }

    .qse-extra-class .ep-control__wrapper {
        height: 100%;
    }


    .qse-extra-class .ep-control__buttons {
        height: 100%;
    }

.qse-black-panel {
    background-color: #191919;
    height: 180px !important;
    border: 2px solid #ccc !important;
    border-radius: .5rem;
    box-shadow: rgba(99, 99, 99, 0.15) 0px 1px 5px 0px;
}

.k-progressbar-indeterminate {
    background-color: var(--ep-primary);
}
/*=LCD Panel*/
.qs-lcd-panel {
    background: hsl(var(--ep-primaryH) 20% 20%);
    box-shadow: inset 0px 0px 10px 0px #242427;
    border-radius: var(--borderRadius);
    border: 1px solid var(--borderColor);
    cursor: pointer;
    transition: .1s opacity ease-in;
}

.theme-default .qs-lcd-panel {
    background: hsl(var(--ep-secondaryH) 20% 20%);
}

.qs-lcd-panel:hover {
    opacity: .9;
}

.qs-lcd-panel__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    gap: 2rem;
    min-height: 62px;
    color: hsl(210deg 10% 95%);
    font-size: 1.5rem;
    font-weight: 600;
    font-family: monospace;
}

.qs-lcd-panel__item {
    font-weight: 300;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: auto;
}

.qs-lcd-panel__quantity {
    flex-shrink: 0;
}

    .qs-lcd-panel__quantity > i {
        opacity: .5;
    }

.qs-lcd-panel__totalValue {
    flex-shrink: 0;
}

.qs-lcd-panel__total {
    font-weight: 300;
    opacity: .5;
}

.qs-lcd-panel__nodata {
    opacity: .5;
}

.qs-lcd-panel.-expanded .qs-lcd-panel__body {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1rem;
    text-align: right;
    line-height: 1.2;
}

.qs-lcd-panel.-expanded .qs-lcd-panel__item {
    white-space: normal;
    font-size: 1.4em;
    margin-right: 0;
}

.qs-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
}

.qs-breadcrumbs {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.qs-breadcrumb__item {
    color: var(--ep-primary);
    background: #fff;
    padding: .3rem .8rem;
    border-radius: 20px;
    cursor: pointer;
}

.theme-default .qs-breadcrumb__item {
    color: var(--ep-secondary);
}

.dark-mode .qs-breadcrumb__item {
    background: #1e253b
}

.qs-breadcrumb__item.-active {
    color: #fff;
    background: var(--ep-primary);
}

.theme-default .qs-breadcrumb__item.-active {
    background: var(--ep-secondary);
}

/*CAROUSEL*/
.carousel-panel__body {
    position: relative;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    transition: all 0.2s;
    will-change: transform;
    user-select: none;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    padding-bottom: .5rem;
    background: var(--qsPanelBG);
    padding: 1rem 1rem .5rem 1rem;
    border-radius: var(--borderRadius);
    border: 1px solid var(--qsPanelBG);
}

    .carousel-panel__body.-active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }

.modal-window .carousel-panel {
    box-shadow: rgba(99, 99, 99, 0.15) 0px 1px 5px 0px;
    border-radius: var(--borderRadius);
    height: 100%;
    width: 80%;
    overflow: hidden;
    background-color: var(--ep-panel-bg);
    display: flex;
    flex-direction: column;
    -webkit-animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.modal-window .carousel-panel__header {
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    padding: var(--generalPadding) 1rem;
    background-color: var(--toolbarBG);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.5rem;
}

.modal-window .carousel-panel__body {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    cursor: default;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    flex-direction: column;
    padding: 1rem;
}

.carousel-card {
    background-color: var(--qsCardBG);
    padding: 0.5rem;
    transition: background-color 0.3s ease; /* box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 6px; */
    flex-basis: 200px;
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: var(--borderRadius);
    border: 1px solid var(--borderColor);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
    transition: .1s ease-in;
    min-height: 82px;
}

.carousel-card {
    background-color: hsla(var(--ep-primaryH), var(--ep-primaryS), 70%, .2);
    border-color: hsla(var(--ep-primaryH), var(--ep-primaryS), 70%, .2);
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
    transition: .1s ease-in;
    min-height: 76px;
}

.theme-default .carousel-card {
    background-color: hsla(var(--ep-secondaryH), var(--ep-secondaryS), 70%, .2);
    border-color: hsla(var(--ep-secondaryH), var(--ep-secondaryS), 70%, .2);
}

.carousel-card i {
    color: var(--ep-primary);
}

.theme-default .carousel-card i {
    color: var(--ep-secondary);
}

.carousel-card:hover {
    background-color: hsla(var(--ep-primaryH), var(--ep-primaryS), 70%, .1 );
    box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 6px;
    transform: scale(1.05);
}

.theme-default .carousel-card:hover {
    background-color: hsla(var(--ep-secondaryH), var(--ep-secondaryS), 70%, .1 );
}

/*.carousel-card.-active { background-color: var(--ep-primary); color: #fff; }*/
/*.theme-default .carousel-card.-active { background-color: var(--ep-secondary); }*/
/*.carousel-card.-active .carousel-card__title { color: #fff; }*/
.carousel-card.-active {
    outline: 3px solid var(--ep-primary);
    outline-offset: 2px;
}

.carousel-card__title {
    font-size: 1em;
    color: var(--textStrong);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.carousel-panel__header,
.qs-invattr__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.carousel-panel__title,
.qs-invattr__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ep-primary);
}

/* Lines Panel */
:root {
    --qsPanelBG: #e8eff7;
    --qsCardBG: #fff;
}

.dark-mode {
    --qsPanelBG: #212136;
    --qsCardBG: #333349;
}

.qs-lines-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1rem;
    padding: 1rem;
    background: var(--qsPanelBG);
    border-radius: var(--borderRadius);
}

.ep-grid-toolbar .qs-scancode {
    order: -1;
    flex: 1 1 auto;
    padding-right: 10rem;
}

.qs-scancode .ep-textbox__input {
    flex: 1;
}

.qs-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    overflow: auto;
}

.qs-listview.k-listview {
    overflow: auto;
    gap: 1rem;
    background: none;
    flex: 1;
}

    .qs-listview.k-listview .k-listview-content {
        display: flex;
        gap: 1rem;
        flex-flow: column nowrap;
    }

.qs-empty-list {
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-weight: 300;
    font-size: 1.5rem;
    padding: 0 5rem;
}

.qs-list-item {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    border-radius: var(--borderRadius);
    padding: 0.5rem;
    align-items: center;
    font-size: 1.1rem;
    gap: .5rem;
    background: var(--qsCardBG);
    border: 2px solid var(--qsCardBG);
    color: var(--textStrong);
    transition: .1s ease-in;
    overflow: auto;
    flex-shrink: 0;
}

    .qs-list-item.-active {
        border-color: var(--ep-primary);
        background-color: var(--qsCardBG);
    }

    .qs-list-item:hover {
        box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 6px;
        background-color: hsla(var(--ep-primaryH), var(--ep-primaryS), 100%, .8);
    }

.theme-default .qs-list-item:hover {
    background-color: hsla(var(--ep-secondaryH), var(--ep-secondaryS), 100%, .8);
}

.dark-mode .qs-list-item {
    background-color: hsla(var(--ep-secondaryH), var(--ep-secondaryS), 30%, .2);
}

    .dark-mode .qs-list-item:hover {
        background-color: hsla(var(--ep-secondaryH), var(--ep-secondaryS), 20%, .2);
    }

.qs-list-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 1rem;
}

.qs-list-item__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

.qs-list-item h2 {
    font-size: 1em;
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
    margin-right: auto;
    cursor: pointer;
    color: var(--ep-primary);
}

.theme-default .qs-list-item h2 {
    color: var(--ep-secondary);
}

.qs-list-item h2:hover {
    text-decoration: underline;
}

.qs-list-item__del-btn {
    font-size: 1em;
    cursor: pointer;
    transition: .1s all ease-in;
}

    .qs-list-item__del-btn:hover {
        color: var(--ep-danger);
    }

.qs-list-item__info-btn {
    font-size: 1em;
    cursor: pointer;
    transition: .1s all ease-in;
}
    .qs-list-item__info-btn:hover {
        color: var(--ep-primary);
    }

.qs-list-item__attributes-btn {
    font-size: 1em;
    cursor: pointer;
    transition: .1s all ease-in;
}

    .qs-list-item__attributes-btn:hover {
        color: var(--ep-orange);
    }

.qs-list-item__scale-btn {
    font-size: 1em;
    cursor: pointer;
    transition: .1s all ease-in;
}

    .qs-list-item__scale-btn:hover {
        color: var(--ep-orange);
    }

.qs-list-item__quantity {
    display: flex;
    gap: .5rem;
    align-items: center;
}

    .qs-list-item__quantity .fa-xmark {
        opacity: .5
    }

/* =dials*/
.qs-list-item__dials {
    display: flex;
    gap: .2rem;
    align-items: center;
    background: var(--buttonBG);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    color: var(--buttonColor);
}

.qs-list-item__dial-btn {
    font-size: 2rem;
    padding: 5px;
    cursor: pointer;
    line-height: 1;
    transition: .1s all ease-in;
}

    .qs-list-item__dial-btn:hover {
        color: var(--textStrong);
        background: var(--buttonHoverBG);
    }

.qs-list-item__dials input {
    width: 50px;
    padding: 0 2px;
    height: 2rem;
    border: none;
    box-sizing: border-box;
    text-align: center;
    border-radius: var(--borderRadius);
    background: var(--inputBG);
}

    .qs-list-item__dials input::-webkit-outer-spin-button,
    .qs-list-item__dials input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    /* Chrome, Safari, Edge, Opera */
    .qs-list-item__dials input[type=number] {
        -moz-appearance: textfield;
    }
    

.qs-list-item__totalValue {
    flex-shrink: 0;
    flex-basis: 100px;
    text-align: right;
    font-weight: 500;
}

.qs-list-item__total {
    opacity: .5;
    font-weight: 400;
}

/*=totals*/
.qs-totals {
    background: var(--qsCardBG);
    padding: 1rem;
    border-radius: 10px;
    margin-top: auto;
}

.qs-totals__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    border-top: 2px dashed var(--textStrong);
    color: var(--textStrong);
    padding-top: .3rem;
    margin-top: 1rem;
}

.qs-totals__vat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--textDefault);
    margin-top: .3rem;
}

.qs-totals__discount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--textDefault);
    margin-top: .3rem;
}

.qs-totals strong {
    font-size: 1.5em;
    font-weight: 600;
}

/*=Carousel QuickSales*/
.qs-carousel-buttons {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-bottom: 1rem;
}

.qs-categories-panel__header {
    display: none;
}

.qs-categories-panel__body {
    position: relative;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    transition: all 0.2s;
    will-change: transform;
    user-select: none;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    padding-bottom: .5rem;
    background: var(--qsPanelBG);
    padding: 1rem 1rem .5rem 1rem;
    border-radius: var(--borderRadius);
    border: 1px solid var(--qsPanelBG);
}

    .qs-categories-panel__body.-active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }

/* =fake modal */
.modal-window .qs-categories-panel {
    box-shadow: rgba(99, 99, 99, 0.15) 0px 1px 5px 0px;
    border-radius: var(--borderRadius);
    height: 100%;
    width: 80%;
    overflow: hidden;
    background-color: var(--ep-panel-bg);
    display: flex;
    flex-direction: column;
    -webkit-animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.modal-window .qs-categories-panel__header {
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    padding: var(--generalPadding) 1rem;
    background-color: var(--toolbarBG);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.5rem;
}

.modal-window .qs-categories-panel__body {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    cursor: default;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    flex-direction: column;
    padding: 1rem;
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

.qs-sub-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

/* =Cards */
.qs-categories-card,
.qs-item-card {
    background-color: var(--qsCardBG);
    padding: 0.5rem;
    transition: background-color 0.3s ease; /* box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 6px; */
    flex-basis: 200px;
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: var(--borderRadius);
    border: 1px solid var(--borderColor);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
    transition: .1s ease-in;
    min-height: 82px;
}

.qs-item-card {
    background-color: hsla(var(--ep-primaryH), var(--ep-primaryS), 70%, .2);
    border-color: hsla(var(--ep-primaryH), var(--ep-primaryS), 70%, .2);
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
    transition: .1s ease-in;
    min-height: 76px;
}

.theme-default .qs-item-card {
    background-color: hsla(var(--ep-secondaryH), var(--ep-secondaryS), 70%, .2);
    border-color: hsla(var(--ep-secondaryH), var(--ep-secondaryS), 70%, .2);
}

.qs-item-card i {
    color: var(--ep-primary);
}

.theme-default .qs-item-card i {
    color: var(--ep-secondary);
}

.qs-categories-card:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 6px;
    transform: scale(1.05);
}

.qs-item-card:hover {
    background-color: hsla(var(--ep-primaryH), var(--ep-primaryS), 70%, .1 );
    box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 6px;
    transform: scale(1.05);
}

.theme-default .qs-item-card:hover {
    background-color: hsla(var(--ep-secondaryH), var(--ep-secondaryS), 70%, .1 );
}

.qs-item-card.-backbtn {
    background-color: var(--qsCardBG);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--ep-primary)
}

    .qs-item-card.-backbtn:hover {
        background-color: var(--ep-primary);
        color: #fff;
        box-shadow: none;
    }

.theme-default .qs-item-card.-backbtn:hover {
    background-color: var(--ep-secondary);
}

.qs-item-card.-backbtn:hover i {
    color: #fff;
}

.qs-items {
    display: flex;
    gap: 1rem;
    padding-bottom: .5rem;
    flex-wrap: wrap;
}

.qs-categories-card__title,
.qs-item-card__title {
    font-size: 1em;
    color: var(--textStrong);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    word-break: break-word;
    height: 5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.qs-categories-card.-active {
    background-color: var(--ep-primary);
    color: #fff;
}

.theme-default .qs-categories-card.-active {
    background-color: var(--ep-secondary);
}

.qs-categories-card.-active .qs-categories-card__title {
    color: #fff;
}

/*Acc MyData Cards*/
.myData-cardBody {
    background: var(--cardBG);
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0 4px 12px 0;
}


.btn.MyData-btn-sq.btn-secondary {
    width: 115px !important;
    height: 115px !important;
    font-size: 12px;
    border: 1px solid var(--borderColor);
    padding: 17px 5px;
    font-weight: 500;
    color: #484848;
    margin-right: 10px;
    margin-bottom: 5px;
    line-height: 12px;
}

.myDataH6 {
    font-size: 16px;
    font-weight: bold;
    color: var(--bs-gray);
    margin-top: 10px;
    transform: translateY(16px);
    letter-spacing: 0.3px;
}

.myData-cnt-p {
    font-size: 14px;
    width: 100%;
    text-align: center;
    color: var(--textGray);
    margin-bottom: 17px;
    font-weight: 500;
}

.myData-cnt-div {
    width: 65px;
    display: block;
    height: 50px;
    border: 1px solid var(--borderColor);
    border-radius: 3px;
    margin-top: -16px;
    text-align: center;
    padding: 12px 0;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
}

.MyData-btn-sq {
    width: 100px !important;
    height: 100px !important;
    font-size: 11px;
    border: 1px solid var(--borderColor);
    padding: 12px;
    font-weight: 600;
}

    .MyData-btn-sq i {
        font-size: 26px;
        display: inline-block;
        margin-bottom: 5px;
        margin-top: 5px;
    }

.MyData-btn-colGroup {
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
}

/*Acc MyData Cards*/

.cell-disabled {
    background-color: #cfcdcd;
}

.inv-attributes-grid:not(.inv-attributes-combinations) .k-grid td.k-table-td[data-col-index]:not([data-col-index="0"]):not([data-col-index="1"]) {
    padding: .123rem !important;
}

.inv-attributes-combinations .k-grid td.k-table-td {
    padding: 0;
}

    .inv-attributes-combinations .k-grid td.k-table-td .invattr1-cell {
        padding: .6rem;
        box-sizing: border-box;
    }

.inv-attributes-grid:not(.inv-attributes-combinations) .k-grid td.k-table-td[data-col-index="1"] {
    padding: 0;
}

.inv-attributes-grid .k-grid td.k-table-td .attr-status {
    padding: .5rem;
    display: flex;
    align-items: center;
    border-radius: 4px;
    box-sizing: border-box;
}

    .inv-attributes-grid .k-grid td.k-table-td .attr-status.attr-status__blockpurchases {
        background-color: #e57373;
        border: 1px solid #d32f2f;
    }

    .inv-attributes-grid .k-grid td.k-table-td .attr-status.attr-status__available {
        background-color: #76ea85;
        border: 1px solid #049a10;
    }

    .inv-attributes-grid .k-grid td.k-table-td .attr-status.attr-status__unavailable {
        background-color: #817d7d;
        border: 1px solid #0c0c0c;
    }

    .inv-attributes-grid .k-grid td.k-table-td .attr-status.attr-status__blocksales {
        background-color: #ed9a9a;
        border: 1px solid #ff5e5e;
    }

.inv-attributes-grid .k-grid td.k-table-td .icon {
    margin-right: 8px;
}

.inv-attributes-grid .k-grid td.k-table-td .attr-status__blockpurchases .icon,
.inv-attributes-grid .k-grid td.k-table-td .attr-status__blocksales .icon,
.inv-attributes-grid .k-grid td.k-table-td .attr-status__unavailable .icon {
    color: #b71c1c;
}

.inv-attributes-grid .k-grid td.k-table-td .attr-status__available .icon {
    color: #07bd15;
}

.inv-attributes-grid .k-grid td.k-table-td .attr-status__blocksales .text,
.inv-attributes-grid .k-grid td.k-table-td .attr-status__blockpurchases .text,
.inv-attributes-grid .k-grid td.k-table-td .attr-status__available .text {
    color: #212121;
}

.inv-attributes-grid .k-grid td.k-table-td .attr-status__unavailable .text {
    color: #fff;
}

.qs-invattr-numeric-input {
    width: 10rem;
}

.qs-list-item__dials .qs-invattr-numeric-input input:focus-visible {
    outline: none;
}

.col-summary {
    background-color: #d6d62d;
    box-sizing: border-box;
}

.btnMrgnTop20 {
    margin-top: 20px;
}

div.btn-zoom-hide div.ep-control__buttons > div:nth-child(2) {
    display: none;
}

.SetHeightAuto {
    height: auto;
}

.k-grid th.center-wrap {
    justify-content: center;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
}

    .k-grid th.center-wrap .k-column-title {
        white-space: normal;
    }

.ep-wizard .k-wizard {
    flex: 1;
}

/*ACTIVE USERS*/
.active-users-link {
    color: #4B34D4;
    cursor: pointer;
    text-align: right;
    font-size: small;
    margin-top: 0.5rem;
    margin-bottom: -0.5rem;
}

    .active-users-link:hover {
        color: darkblue;
    }
/* COLOR LEGEND*/
.colorlegend-container {
    position: relative;
}

.colorlegend-info {
    display: inline-block;
    font-size: 1.5rem;
    padding-left: 1rem;
}

    .colorlegend-info:hover + .colorlegend-list {
        visibility: visible;
        opacity: 1;
        background-color: var(--mainBG);
    }

.colorlegend-list {
    position: absolute;
    max-height: 30rem;
    z-index: 999;
    left: 3rem;
    bottom: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}

.colorlegend-item {
    padding: .2rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.colorlegend-item__color {
    height: 1rem;
    width: 2rem;
}

.px12-right-padding {
    padding-right: 12px;
}

/* CONTEXT MENU */
.context-menu-center {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1001 !important;
}

    .context-menu-center li {
        font-size: 2rem !important;
        padding: 1rem;
        border-bottom: 1px solid var(--borderColor);
    }

        .context-menu-center li:hover,
        .context-menu-center li:hover span.k-menu-link {
            font-size: 2rem !important;
            background: var(--ep-primary) !important;
            color: #fff !important;
        }

        .context-menu-center li span {
            outline: none !important;
            box-shadow: none !important;
        }

.context-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
/*Doc F2 Styles*/

/*************Original Version*******************/
/*.tf_prefix_cstm {
    background-color: #9ad0ea;*/
    /* flex: 0.5; */
    /* padding-right: 5px; */
    /* padding-left: 5px; */
    /*padding: 4px 5px 0 5px;*/
    /* display: block; */
    /*height: 100%;
    width: 100%;
    text-align: center;*/
    /* border-right: 1px solid; */
    /* padding-top: 4px; */
    /*margin-right: 7px;
    color: black;
}*/
/***********************************************/
.tf_prefix_cstm {
    background-color: #9ad0ea;
    padding: 0px 5px 0 5px;
    display: flex;
    height: 100%;
    width: 100%;
    text-align: center;

    margin-right: 7px;
    color: black;
    align-items: center;
    justify-content: center;
}

.tf_label_1row_fcode {
    height: 25px;
    margin-top: 0px;
}

    .tf_label_1row_fcode label {
        background-color: #9ad0ea;
        height: 30px;
        padding: 2px 0 0 8px;
    }

        .tf_label_1row_fcode label.ep-numeric__label.ep-label.k-label {
            flex: 0.3;
            margin-bottom: 5px;
            margin-right: .2rem;
            min-width: 40px;
        }


.tf_label_1row_fcode_mltSlct {
    height: 25px;
    margin-top: 0px;
}

    .tf_label_1row_fcode_mltSlct label {
        background-color: #9ad0ea;
        height: 30px;
        padding: 1px 2px 0 4px;
    }

        .tf_label_1row_fcode_mltSlct label.ep-multiselect__label.ep-label.k-label {
            flex: 0.071;
            margin-right: 0.19rem;
            height: 2em;
            margin-left: -4px;
            text-align: center;
        }

.tf_label_1row_fcode_cstm {
    height: 25px;
    margin-top: 0px;
}

    .tf_label_1row_fcode_cstm label {
        background-color: #9ad0ea;
        height: 30px;
        padding: 4px 7px 0 8px;
    }

        .tf_label_1row_fcode_cstm label.ep-label.k-label {
            flex: 0.3;
            margin-bottom: 5px;
            margin-right: .2rem;
            min-width: 40px;
        }

.tf_label_1row_fcode_pl10 {
    height: 25px;
    margin-top: 0px;
    padding-left: 10px;
}

    .tf_label_1row_fcode_pl10 label {
        background-color: #9ad0ea;
        height: 30px;
        padding: 2px 0 0 8px;
    }

        .tf_label_1row_fcode_pl10 label.ep-numeric__label.ep-label.k-label {
            flex: 0.3;
            margin-bottom: 5px;
            margin-right: .2rem;
            min-width: 40px;
        }

.tf_mid_label {
    min-width: 50px;
    text-align: center;
    padding-right: 10px;
}

.tf_mid_label_mtm17 {
    min-width: 40px;
    text-align: center;
    padding-right: 18px;
    margin-left: 5px;
    margin-top: -11px;
    font-size: 12px;
}

.tf_mid_label_pr8 {
    min-width: 40px;
    text-align: center;
    padding-right: 8px;
    margin-left: 5px;
    margin-top: -11px;
    font-size: 12px;
}

.tf_mid_signes_label {
    padding-right: 10px;
    margin-top: 26px;
}

.tf_mid_signes_prorata_label {
    padding-right: 10px;
    text-align: center;
}

.tf_first_label_4rowl {
    display: block;
    margin-top: -9px;
    margin-right: 10px;
    border-right: 1px solid #6d7fa5;
    padding-top: 22px;
    padding-bottom: 22px;
    padding-right: 5px;
    text-align: center;
    font-size: 11px;
}

.tf_first_label_2rowl {
    display: block;
    margin-top: 22px;
    margin-right: 26px;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    font-size: 12px;
}

.tf_centered_header_label_2rows p, .tf_centered_header_label p {
    text-align: center;
    font-weight: 600;
    margin-bottom: 0;
}

.tf_centered_header_label {
    padding: 10px 0;
    height: 50px;
}

.tf_centered_header_label_2rows {
    height: 50px;
}

.tf_standard_pre_fcode_label {
    text-align: center;
    font-size: 12px;
    line-height: 13px;
    padding: 0 4px;
}
.tf_label_extra_bold {
    font-weight: 700;
}

.tf_xs_pre_fcode_label {
    text-align: center;
    font-size: 8px;
    line-height: 8px;
    padding: 0 4px;
}

.tf_total_sum_header {
    font-weight: bold;
    text-align: center;
    padding-left: 100px;
}

.tf_triangle-right_2rows {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-left: 20px solid #555;
    border-bottom: 30px solid transparent;
    margin-left: 5px;
    /*margin-top: -2px;*/
    margin-right: 5px;
}

.tf_triangle-right_3rows {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 20px solid #555;
    border-bottom: 40px solid transparent;
    margin-left: 5px;
    margin-top: 2px;
    margin-right: 5px;
}

.tf_chckbx_margin {
    margin: 0 10px;
}

.tf_control_wrapper {
    margin-top: -7px;
}

    .tf_control_wrapper > .ep-control__wrapper {
        /*max-width: 45%;*/
        flex: 1 1 0;
    }

    .tf_control_wrapper > .ep-label > span {
        /*word-break: break-all;*/
        white-space: normal;
        text-align: center;
        line-height: 12px;
        font-weight: 400;
        font-size: 0.75rem;
    }

    .tf_control_wrapper.label-above .ep-label {
        height: 2rem;
        width: 100%;
    }

/*    .tf_control_wrapper.label-above .ep-label > span {
        height: 1.5rem;
        width: 100%;
        font-weight: 700;
        font-size: 0.9rem;
    }*/

.tf_control_label_above_bold .ep-label {
    height: 1.5rem;
    width: 100%;
    font-weight: 700;
    font-size: 0.9rem;
}
.tf_control_label_above_bold .ep-label span{
    text-align:center;
}

.tf_prorata_title {
    font-weight: 600;
    text-decoration: underline;
}
.tf_calc_fldset {
    margin: 20px 0;
    padding-top: 20px;
}

.tf_mt20 {
    margin-top: 20px;
}

.tf_mt8 {
    margin-top: 8px;
}
.tf-mb16 {
    margin-bottom: 16px;
}
.tf-mb10 {
    margin-bottom: 10px !important;
}
.tf-min-height {
    min-height: 90px !important;
}
/*.tf-flex-container > .flex-container.direction-column{
    row-gap: 0.3em;
}*/

.tf_tableb-d {
    display: flex;
    align-content: stretch;
    justify-content: center;
}
.dv_tooltip .k-tooltip {
    background-color: var(--ep-primary); /* background */
    color: #ffffff; /* text color */
    border-radius: 4px;
}

.dv_tooltip .k-tooltip .k-callout {
    color: var(--ep-primary);
 }

.dv_tl_row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 2px;
}

    .dv_tl_row label {
        font-weight: bold;
        width: 100px; /* adjust to your longest label */
        text-align: left;
    }

    .dv_tl_row span {
        flex: 1;
        text-align: left; /* or right if you prefer */
    }
/*Docs Create Controls*/
.dc-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}

.dc-card {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 12rem;
    background: var(--cardBG);
    border-radius: .5rem;
    padding: 1rem 1rem 0.1rem 1rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0 4px 12px 0;
    border: 1px solid var(--borderColor);
    position: relative;
    height: 7rem;
    display: flex;
    flex-direction: column;
}

    .active, .dc-card:hover {
        border-color: var(--ep-primary-active);
        cursor: pointer;
    }

    .dc-card:active {
        border-color: var(--ep-primary-active);
    }

    .dc-card .value {
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 1;
        margin: 0;
        flex-grow: 1;
    }

    .dc-card .title {
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--textGray);
        margin-top: auto;
    }

    .dc-card i {
        font-size: 3.5rem;
        position: absolute;
        right: 1rem;
        top: 1.3rem;
    }

    .dc-card.-pending i {
        color: var(--ep-info);
    }

    .dc-card.-failed i {
        color: var(--ep-warning);
    }

    .dc-card.-error i {
        color: var(--ep-danger);
    }

    .dc-card.-completed i {
        color: var(--ep-success);
    }

    .dc-card.-disabled {
        opacity: 0.5; /* faded look */
        pointer-events: none; /* not clickable */
        user-select: none; /* no text selection */
        cursor: not-allowed; /* disabled cursor */
    }

.dc-docbtn {
    box-shadow: rgba(0, 0, 0, 0.16) 0 1px 3px;
    background: var(--cardBG);
    height: 100px;
    border: 1px solid var(--borderColor);
    border-radius: .5rem;
    overflow: hidden;
}

    .dc-docbtn.active {
        pointer-events: auto;
        cursor: pointer;
    }

    .dc-docbtn.inactive {
        pointer-events: none;
        cursor: default;
    }

    .dc-docbtn:hover {
        border-color: var(--ep-primary-active);
        cursor: pointer;
    }

.tf-browse-cstm-link {
    color: var(--ep-link-color);
    text-decoration: none;
}

    .tf-browse-cstm-link:hover {
        color: var(--ep-link-color);
        text-decoration: underline;
    }

/* CONTEXT MENU --/> */
/* MEDIA QUERIES*/
@media(max-width: 1415px) {
    .ep-grid-toolbar .qs-scancode {
        padding: 0;
    }
}

/* AI BANNER */
.custom-dialog.-flex-ai {
    --ep-primary: #ed1c24;
    font-family: 'Open Sans', Arial, sans-serif !important;
}

.custom-dialog {
    /* border-radius: 20px; */
    /* width: 900px; */
    /* height: 500px; */
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    /* margin: 100px auto; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2rem;
    /* box-sizing: border-box; */
}

    .custom-dialog.-flex-ai {
        background: #fff url(../Img/flex-ai-bg.png) no-repeat 100% 100%;
        gap: 2rem;
        height: 100%;
    }

.custom-dialog__header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: flex-start;
}

.custom-dialog.-flex-ai h2.ai-moto {
    margin: 0;
    line-height: 1.2;
    font-size: 1.8rem;
    color: var(--textStrong);
}

.custom-dialog.-flex-ai .logo svg {
    width: 180px;
    aspect-ratio: 529/253;
}

.custom-dialog__body {
    padding-right: 300px;
}

    .custom-dialog__body p {
        margin: 1rem 0;
        color: var(--textStrong);
    }

.custom-dialog.-flex-ai strong {
    color: var(--ep-primary);
}

.custom-dialog.-flex-ai a {
    color: var(--ep-primary);
    text-decoration: underline;
}

.custom-dialog.-flex-ai .singular-logo {
    aspect-ratio: 328.4/85.5;
    height: 45px;
}

.custom-dialog__footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-right: 230px;
    box-sizing: border-box;
    align-items: flex-end;
}

    .custom-dialog__footer label {
        font-size: .8em;
    }

    .custom-dialog__footer .button-section {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

.blazor-dialog-content-wrapper-windowed:has(.-flex-ai) {
    height: 500px !important;
    background-color: transparent;
    border-color: transparent;
    border-radius: 20px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

    .blazor-dialog-content-wrapper-windowed:has(.-flex-ai) .blazor-dialog-content {
        height: 100%;
    }

.blazor-dialog-footer.drawer__footer .drawer__navigation-buttons-wrapper {
    display: flex;
    flex: 1;
    justify-content: space-between;
    background-color: var(--panelFooterBG);
}

.blazor-dialog-footer.drawer__footer .drawer__navigation-buttons {
    display: flex;
}

.blazor-dialog-footer.drawer__footer .drawer__close-buttons {
    display: flex;
}

.ep-drawer:has(.ai-assistant) .drawer__header {
    display: none;
}

.ep-drawer:has(.ai-assistant) .drawer__body {
    padding: 0;
    overflow: auto;
    display: flex;
}

.ep-drawer iframe.ai-assistant {
    flex: 1;
}

/* =DASHBOARD */

.ep-layout.ep-dashboardHost .flex-container { gap: var(--general-gap-2x); }

.ep-card.-dashboard { display: flex; flex-direction: column; background: var(--ep-color-surface-alt); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-sm); max-height: 100%; }
    .ep-card.-fullheight { height: 100%; }
    .ep-card__body { padding: var(--generalPadding); flex: 1; overflow-y: auto; min-height: 0; }
.ep-card__header h2 { margin: 0; font-size: 1.2rem; font-weight: 400; padding: var(--generalPadding); }

.ep-shortcut-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--general-gap-sm); }

/* HORIZONTAL SHORTCUTS*/
.ep-shortcut-list.-horizontal { flex-direction: row; flex-wrap: wrap; }
.ep-shortcut-list.-horizontal li { flex: 1; min-width: 200px; }

.ep-shortcut { background: #f3f4f6; display: flex; border-radius: var(--border-radius-md); padding: .3rem .5rem; gap: .5rem; border: 1px solid var(--borderColor); color: var(--textDefault); align-items: center; transition: .1s ease-in-out all; position: relative; line-height: 1.2; }
    .ep-shortcut:hover { background: #fafbfc; color: var(--textStrong) }
    .ep-shortcut::before { content: ""; background: #fff; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; border-radius: var(--border-radius-md); opacity: 0; transition: .1s ease-in-out all; }
    .ep-shortcut:hover::before { opacity: .2; }
.ep-shortcut__icon { height: 25px; width: 25px; display: flex; background: transparent; justify-content: center; align-items: center; border-radius: var(--border-radius-md); font-size: 1em; }
.ep-shortcut__arrow { margin-left: auto; }

.ep-shortcut__title {
    font-size: 13px;
}

/* LARGE SHORTCUTS */
.ep-shortcut-list.-large { gap: var(--general-gap); }
.ep-shortcut-list.-large .ep-shortcut { padding: .5rem; }
.ep-shortcut-list.-large .ep-shortcut__icon { height: 35px; width: 35px; font-size: 1.2em; }

/* MINIMAL SHORTCUTS */
.ep-shortcut-list.-minimal:not(.-horizontal) { gap: 0; }
.ep-shortcut-list.-minimal:not(.-horizontal) li:not(:last-child) { border-bottom: 1px solid var(--borderColor); }
.ep-shortcut-list.-minimal:not(.-horizontal) .ep-shortcut { background: none; border-radius: 0; padding: 0; gap: .5rem; border: none; color: var(--textDefault); align-items: center; height: 100%; min-height: 35px; }
.ep-shortcut-list.-minimal:not(.-horizontal) .ep-shortcut:hover { cursor: pointer; color: var(--textStrong); }

.ep-shortcut-list.-minimal.-large:not(.-horizontal) .ep-shortcut { min-height: 50px; }

.ep-shortcut.-primary   .ep-shortcut__icon { background: var(--ep-primary-subtle);   color: var(--ep-primary); }
.ep-shortcut.-secondary .ep-shortcut__icon { background: var(--ep-secondary-subtle); color: var(--ep-secondary); }
.ep-shortcut.-tertiary  .ep-shortcut__icon { background: var(--ep-tertiary-subtle);  color: var(--ep-tertiary); }
.ep-shortcut.-blue      .ep-shortcut__icon { background: var(--ep-blue-subtler);     color: var(--ep-blue); }
.ep-shortcut.-purple    .ep-shortcut__icon { background: var(--ep-purple-subtler);   color: var(--ep-purple); }
.ep-shortcut.-cyan      .ep-shortcut__icon { background: var(--ep-cyan-subtler);     color: var(--ep-cyan-bolder); }
.ep-shortcut.-green     .ep-shortcut__icon { background: var(--ep-green-subtler);    color: var(--ep-green-bold); }
.ep-shortcut.-red       .ep-shortcut__icon { background: var(--ep-red-subtler);      color: var(--ep-red); }
.ep-shortcut.-yellow    .ep-shortcut__icon { background: var(--ep-yellow-subtler);   color: var(--ep-yellow-bolder); }
.ep-shortcut.-orange    .ep-shortcut__icon { background: var(--ep-orange-subtler);   color: var(--ep-orange-bold); }

/* SQUARE SHORTCUTS*/
.ep-shortcut-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--general-gap); width: 100%;  }
    .ep-shortcut-grid li { aspect-ratio: 1; }
    .ep-shortcut-grid .ep-shortcut { width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; gap: 1em; text-align: center; }
    .ep-shortcut-grid .ep-shortcut__arrow { display: none; }
    .ep-shortcut-grid .ep-shortcut__icon { font-size: 2.5em; width: auto; height: auto; position: relative; }

.ep-shortcut-grid .ep-shortcut.-primary   { background: var(--ep-primary-subtle); color: var(--textStrong); }
.ep-shortcut-grid .ep-shortcut.-secondary { background: var(--ep-secondary-subtle); color: var(--textStrong); }
.ep-shortcut-grid .ep-shortcut.-tertiary  { background: var(--ep-tertiary-subtle); color: var(--textStrong); }
.ep-shortcut-grid .ep-shortcut.-blue      { background: var(--ep-blue-subtler); color: var(--textStrong); }
.ep-shortcut-grid .ep-shortcut.-purple    { background: var(--ep-purple-subtler); color: var(--textStrong); }
.ep-shortcut-grid .ep-shortcut.-cyan      { background: var(--ep-cyan-subtler); color: var(--textStrong); }
.ep-shortcut-grid .ep-shortcut.-green     { background: var(--ep-green-subtler); color: var(--textStrong); }
.ep-shortcut-grid .ep-shortcut.-red       { background: var(--ep-red-subtler); color: var(--textStrong); }
.ep-shortcut-grid .ep-shortcut.-yellow    { background: var(--ep-yellow-subtler); color: var(--textStrong); }
.ep-shortcut-grid .ep-shortcut.-orange    { background: var(--ep-orange-subtler); color: var(--textStrong); }

/* DARK MODE SHORTCUTS */
.dark-mode .ep-shortcut,
.dark-mode .ep-shortcut-grid .ep-shortcut { background: hsl(240, 21%, 21%); }
    .dark-mode .ep-shortcut:hover { background: hsl(240, 21%, 18%); }
    .dark-mode .ep-shortcut::before { background: hsl(240, 21%, 0%); }

    .dark-mode .ep-shortcut .ep-shortcut__icon { background: none; }

.k-menu.k-menu-horizontal.line-actions-dropdown {
    padding: 0;
    justify-content: center;
}

.line-actions-dropdown .k-link.k-menu-link {
    padding: 0;
}

.line-actions-dropdown span.k-menu-expand-arrow {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   =WELCOME CARD (GenericGreetingComponent)
   Variants:  .ep-card.-dashboard.simple   |  .ep-card.-dashboard.advanced
   Modes:     .ep-card.-dashboard.light    |  .ep-card.-dashboard.dark
   ══════════════════════════════════════════════════════════════════════ */

/* Override ep-card flex with grid for the two-column layout */
.ep-card.-dashboard.simple,
.ep-card.-dashboard.advanced {
    display: grid;
    overflow: hidden;
    position: relative;
}

.ep-card.-dashboard.simple   { grid-template-columns: 1fr 280px; grid-template-rows: 1fr; min-height: 190px; }
.ep-card.-dashboard.advanced { grid-template-columns: 1fr 240px; grid-template-rows: 1fr auto; min-height: 220px; }

.ep-wc-left {
    padding: 2rem 2rem 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.ep-wc-right { display: flex; align-items: flex-end; justify-content: center; position: relative; z-index: 1; overflow: visible; position: absolute; right: 3rem; top: 50%; transform: translateY(-50%); }

.ep-wc-illustration { display: block; width: 350px; height: auto; overflow: visible; }
.ep-card.-dashboard.simple .ep-wc-illustration { width: 250px; }

/* SVG surface-color variables — set per mode so SVG fill="var(...)" adapts without JS */
.ep-card.-dashboard.light {
    --ep-wc-panel-bg:     rgba(255,255,255,0.85);
    --ep-wc-screen-bg:    rgba(255,255,255,0.55);
    --ep-wc-panel-stroke: var(--borderColor);
}

.ep-card.-dashboard.dark {
    --ep-wc-panel-bg:     rgba(255,255,255,0.06);
    --ep-wc-screen-bg:    rgba(255,255,255,0.03);
    --ep-wc-panel-stroke: var(--borderColor);
}

/* ── Backgrounds ──────────────────────────────────────────────────────── */
.ep-card.-dashboard.simple.light,
.ep-card.-dashboard.advanced.light { background: var(--ep-color-surface-alt);  }

.ep-card.-dashboard.simple.dark,
.ep-card.-dashboard.advanced.dark { background: linear-gradient( 135deg, color-mix(in srgb, var(--ep-primary) 30%, #0f0c1e) 0%, #0f172a 45%, #0f172a 55%, color-mix(in srgb, var(--ep-primary) 20%, #0f172a) 100% ) }

.theme-default .ep-card.-dashboard.simple.dark,
.theme-default .ep-card.-dashboard.advanced.dark { background: linear-gradient( 135deg, color-mix(in srgb, var(--ep-secondary) 30%, #0f0c1e) 0%, #0f172a 45%, #0f172a 55%, color-mix(in srgb, var(--ep-secondary) 20%, #0f172a) 100% ) }


/* ── Typography ───────────────────────────────────────────────────────── */
.ep-card.-dashboard .ep-wc-name { font-size: 2rem; font-weight: 600; line-height: 1.2; color: var(--textStrong); }
.ep-card.-dashboard.dark .ep-wc-name { color: #fff; }

.ep-wc-subtext { margin: 0; font-size: 0.875rem; font-weight: 400; color: var(--textLight); }
.ep-card.-dashboard.dark .ep-wc-subtext { color: #9fb2c6; }

/* ── Stats ────────────────────────────────────────────────────────────── */
.ep-wc-stats { display: flex; align-items: flex-start; max-width: 480px; }

.ep-card.-dashboard.simple .ep-wc-stats   { gap: 0; }
.ep-card.-dashboard.advanced .ep-wc-stats { gap: 1rem; }

.ep-wc-stat { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; padding-right: 1.5rem; }

.ep-wc-stat-divider + .ep-wc-stat { padding-left: 1.5rem; padding-right: 0; }

.ep-wc-stat__label { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--textLight); }

.ep-card.-dashboard.dark .ep-wc-stat__label { color: #9fb2c6; }

.ep-wc-stat__value { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--textStrong); }

/* Simple: vertical divider */
.ep-wc-stat-divider {
    width: 1.5px;
    align-self: stretch;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--ep-primary) 22%, transparent);
}

.ep-card.-dashboard.dark .ep-wc-stat-divider { background: rgba(255,255,255,0.1); }

/* Advanced: elevated stat cards */
.ep-card.-dashboard.advanced .ep-wc-stat.-card {
    background: color-mix(in srgb, var(--ep-primary) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--ep-primary) 18%, transparent);
    border-radius: var(--border-radius-md, 8px);
    padding: 0.9rem 1.2rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
    flex: 1;
}

.ep-card.-dashboard.advanced .ep-wc-stat.-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.ep-card.-dashboard.advanced.dark .ep-wc-stat.-card {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}

.ep-card.-dashboard.advanced .ep-wc-stat.-card .ep-wc-stat__value {
    font-size: 1.65rem;
    color: var(--ep-primary);
}

.ep-card.-dashboard.advanced.dark .ep-wc-stat.-card .ep-wc-stat__value {
    color: color-mix(in srgb, var(--ep-primary) 80%, #fff);
}

/* ── Trend badges ─────────────────────────────────────────────────────── */
.ep-badge { display: inline-flex; align-items: center; gap: 3px; padding: 0.35rem 0.5rem; border-radius: var(--border-radius-lg); font-size: 0.7rem; font-weight: 600; width: fit-content; line-height: 1; }

.ep-card.-dashboard.light .ep-badge.-up   { background: var(--ep-success-subtle, #ecfdf5); color: var(--ep-success, #12b76a); }
.ep-card.-dashboard.light .ep-badge.-down { background: var(--ep-danger-subtle,  #fef3f2); color: var(--ep-danger,  #f04438); }
.ep-card.-dashboard.dark  .ep-badge.-up   { background: rgba(18,183,106,0.18); color: #34d399; }
.ep-card.-dashboard.dark  .ep-badge.-down { background: rgba(240,68,56,0.15);  color: #f87171; }

/* ── Advanced: date chip ──────────────────────────────────────────────── */
.ep-wc-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--border-radius-lg);
    font-size: 0.875rem;
    font-weight: 400;
    width: fit-content;
    margin-bottom: 1rem;
}

.ep-card.-dashboard.advanced.light .ep-wc-date-chip {
    background: var(--shade96);
    border: 1px solid var(--borderColor);
    color: var(--textLight);
}

.ep-card.-dashboard.advanced.dark .ep-wc-date-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #9fb2c6; }

.ep-wc-greeting-label { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ep-primary); margin-bottom: 0rem; }

/* ── Advanced: footer — spans full card width below the grid ──────────── */
.ep-wc-footer { grid-column: 1 / -1; }

.ep-wc-footer__divider { border: none; border-top: 1px solid var(--borderColor); margin: 0; }

.ep-card.-dashboard.advanced.dark .ep-wc-footer__divider { border-top-color: rgba(255,255,255,0.5); }

.ep-wc-footer__content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 2rem; }

.ep-wc-footer__fiscal { font-size: 0.8rem; color: var(--textLight); }
.ep-card.-dashboard.dark .ep-wc-footer__fiscal { color: #9fb2c6; }


/* ── Force dark appearance when the app is in dark-mode ──────────────── */
/* Overrides the .light variant so it renders identically to .dark       */
.dark-mode .ep-card.-dashboard.simple.light,
.dark-mode .ep-card.-dashboard.advanced.light { --ep-wc-panel-bg: rgba(255,255,255,0.06); --ep-wc-screen-bg: rgba(255,255,255,0.03); --ep-wc-panel-stroke: rgba(255,255,255,0.12); background: linear-gradient( 135deg, color-mix(in srgb, var(--ep-primary) 30%, #0f0c1e) 0%, #0f172a 45%, #0f172a 55%, color-mix(in srgb, var(--ep-primary) 20%, #0f172a) 100% ); }

.theme-default.dark-mode .ep-card.-dashboard.simple.light,
.theme-default.dark-mode .ep-card.-dashboard.advanced.light { --ep-wc-panel-bg: rgba(255,255,255,0.06); --ep-wc-screen-bg: rgba(255,255,255,0.03); --ep-wc-panel-stroke: rgba(255,255,255,0.12); background: linear-gradient( 135deg, color-mix(in srgb, var(--ep-secondary) 30%, #0f0c1e) 0%, #0f172a 45%, #0f172a 55%, color-mix(in srgb, var(--ep-secondary) 20%, #0f172a) 100% ); }

.dark-mode .ep-card.-dashboard.light .ep-wc-name         { color: #f1f5f9; }
.dark-mode .ep-card.-dashboard.light .ep-wc-subtext      { color: #94a3b8; }
.dark-mode .ep-card.-dashboard.light .ep-wc-stat__label  { color: #64748b; }
.dark-mode .ep-card.-dashboard.light .ep-wc-stat__value  { color: #f1f5f9; }
.dark-mode .ep-card.-dashboard.light .ep-wc-stat-divider { background: rgba(255,255,255,0.1); }

.dark-mode .ep-card.-dashboard.advanced.light .ep-wc-stat.-card {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}
.dark-mode .ep-card.-dashboard.advanced.light .ep-wc-stat.-card .ep-wc-stat__value {
    color: color-mix(in srgb, var(--ep-primary) 80%, #fff);
}

.dark-mode .ep-card.-dashboard.light .ep-badge.-up   { background: rgba(18,183,106,0.18); color: #34d399; }
.dark-mode .ep-card.-dashboard.light .ep-badge.-down { background: rgba(240,68,56,0.15);  color: #f87171; }

.dark-mode .ep-card.-dashboard.advanced.light .ep-wc-date-chip {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: var(--textDefault);
}
.dark-mode .ep-card.-dashboard.advanced.light .ep-wc-footer__divider { border-top-color: rgba(255,255,255,0.5); }
.dark-mode .ep-card.-dashboard.light .ep-wc-footer__fiscal { color: var(--textDefault); }



/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ep-card.-dashboard.simple,
    .ep-card.-dashboard.advanced { grid-template-columns: 1fr; }
    .ep-wc-right { display: none; }
}


/* #region Wizards */
.welcome p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

html.dark-mode .welcome p {
    color: #e6e6e6;
}

/* #rendegion */

.wh-display-flex {
    display: flex;
    gap: 5%;
}

.wh-selected-row {
    background-color: #f6f6f6;
}

.eftpos-card-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding: 12px;
}

.eftpos-card {
    background: #fff;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 12px;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    overflow: hidden;
}

.device-card {
    min-height: 230px;
}

.eftpos-card:hover {
    background: #f9f9f9;
    border-color: #bfdcff;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

.eftpos-card-header {
    background: #dceeff;
    color: #3730ff;
    font-weight: 600;
    margin: -12px -12px 12px -12px;
    padding: 12px;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.eftpos-card-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eftpos-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.eftpos-action-icon {
    cursor: pointer;
    opacity: .72;
    transition: all .15s ease;
    font-size: 14px;
}

.eftpos-action-icon:hover {
    opacity: 1;
    transform: scale(1.08);
    color: var(--ep-primary);
}

.eftpos-action-icon.delete:hover {
    color: var(--ep-primary);
}

.pagetitle__info {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    flex-grow: 0;
    font-size: 1.2rem;
    color: var(--ep-primary);
    margin-left: 1rem;
}

.pagetitle__headings:has(> .pagetitle__info) {
    justify-content: unset;
}

    .pagetitle__headings:has(> .pagetitle__info) h2 {
        margin-left: auto;
    }

.status-icon-success {
    color: #28a745;
}

.status-icon-error {
    color: #dc3545;
}

.wh_colored_column {
    width: 1.3em;
    height: 1.3em;
    border-radius: 100px;
    margin: 0 auto;
}

.wh-tooltip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

    .wh-tooltip::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
        padding: 6px 10px;
        border-radius: 4px;
        background: var(--ep-primary);
        color: white;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 9999;
    }

    .wh-tooltip:hover::after {
        opacity: 1;
        visibility: visible;
    }

.wh-print-actions > .wh-tooltip:first-child::after {
    left: 0;
    transform: none;
}

.wh-print-actions > .wh-tooltip:last-child::after {
    left: auto;
    right: 0;
    transform: none;
}

/* ══════════════════════════════════════════════════════════════════════
   =FINANCIAL DATA TILES (FinancialDataComponent)

   Replaces the .fd-infofield tiles. Two layouts, driven by whether the
   page declares a lead field:
     .fd-tiles.-spotlight   lead tile + grouped satellites
     .fd-tiles.-grid        even grid, no lead

   Tiles sit on --ep-color-surface, NOT --ep-color-surface-alt. The latter
   is the same value as --ep-color-app-surface, which is what the page
   itself is painted with, so a tile using it is exactly the colour of its
   own background and has no shape. --ep-color-surface differs from the
   page in both modes, which is the whole point.

   Every tinted surface is color-mix()'d into --ep-color-surface rather
   than using an --ep-*-subtle token: only --ep-danger-subtle has a
   dark-mode override, so the rest stay pale on a dark card.

   The lead's figure takes the tone at 85% toward the text colour; a
   negative value overrides to danger regardless of the declared tone.

   Not used by the QuickFD drawer - that builds its own .ep-statcard
   markup and does not go through this component.
   ══════════════════════════════════════════════════════════════════════ */

.fd-tiles {
    --fd-tone: var(--ep-secondary);
    --fd-tint: 20%;      /* lead wash */
    --fd-chip-tint: 9%;  /* satellite wash - tuned separately from the lead */
    --fd-chip-max: 35.625%; /* 3/4 of the lead, as a share of the group track */
    display: grid;
    gap: var(--general-gap);
    width: 100%;
}

.dark-mode .fd-tiles { --fd-tint: 40%; --fd-chip-tint: 18%; }

.fd-tiles.-spotlight { grid-template-columns: minmax(12em, .95fr) minmax(0, 2fr); }
.fd-tiles.-grid { grid-template-columns: 1fr; }

.fd-tiles__group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr));
    gap: var(--general-gap-sm);
    min-width: 0;
    /* No chip may grow past 3/4 of the lead.

       The lead track is .95fr and this group 2fr, so lead = .475 x group,
       and 3/4 of the lead is .35625 of the group - that is --fd-chip-max.
       The cap goes on the GROUP, not on .fd-tile: a percentage width on a
       grid item resolves against its own track, which for two chips is half
       the group and would halve the cap with it. Capping the group keeps the
       basis correct however many tracks auto-fit produces.

       1 chip fills 35.6% of the track and 2 fill 71.2%, both leaving space;
       from 3 the cap exceeds the track and never binds. --fd-tile-count is
       set by the component from the satellite count. */
    max-width: calc(var(--fd-tile-count, 6) * var(--fd-chip-max)
                  + (var(--fd-tile-count, 6) - 1) * var(--general-gap-sm));
}

/* No lead to measure against, so nothing to cap. */
.fd-tiles.-grid .fd-tiles__group { max-width: none; }

/* TONES */
.fd-tiles .-tone-neutral { --fd-tone: var(--ep-secondary); }
.fd-tiles .-tone-accent { --fd-tone: var(--ep-primary); }
.fd-tiles .-tone-positive { --fd-tone: var(--ep-success); }
.fd-tiles .-tone-negative { --fd-tone: var(--ep-danger); }
.fd-tiles .-tone-warning { --fd-tone: var(--ep-warning); }

/* NUMERALS - decimals set smaller than the integer part */
.fd-val { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.fd-val__dec { font-size: .6em; font-weight: 600; color: var(--textLight); margin-left: .06em; }

/* ── THE BRACKET ──────────────────────────────────────────────────────
   Runs along the top, turns the corner, stops as the arc completes.
   height == the corner radius means the arc consumes the whole left
   border, so no straight left arm is ever drawn. The +1px on both
   compensates for the -1px offset lifting the stroke onto the card's
   own 1px border. At radius 0 the height floors at the 2px stroke and
   the rule simply ends square.
   ─────────────────────────────────────────────────────────────────── */
.fd-lead::before,
.fd-tile::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    border-top: 3px solid var(--fd-tone);
    border-left: 3px solid var(--fd-tone);
    border-top-left-radius: calc(var(--ep-border-radius, var(--ep-border-radius-md)) + 1px);
    /* Floors at the stroke width so the rule still renders at radius 0. */
    height: max(3px, calc(var(--ep-border-radius, var(--ep-border-radius-md)) + 1px));
    pointer-events: none;
}

/* LEAD TILE */
.fd-lead {
    --fd-tone: var(--ep-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3em;
    min-width: 0;
    padding: var(--generalPadding);
    border: 1px solid color-mix(in srgb, var(--fd-tone) 28%, var(--ep-border-color));
    border-radius: var(--ep-border-radius, var(--ep-border-radius-md));
    background: color-mix(in srgb, var(--fd-tone) var(--fd-tint), var(--ep-color-surface));
}

.fd-lead::before {
    width: 3.2em;
    border-color: color-mix(in srgb, var(--fd-tone) 85%, var(--textStrong));
}

.fd-lead__label {
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.3;
    color: color-mix(in srgb, var(--fd-tone) 55%, var(--textStrong));
}

/* The lead's figure carries the tone, pulled 85% toward the text colour so
   it stays legible on every theme - lime on Emerald is the worst case. */
.fd-lead__value {
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: color-mix(in srgb, var(--fd-tone) 85%, var(--textStrong));
    overflow-wrap: anywhere;
}

/* A debit balance stays red whatever tone the page declared. */
.fd-lead.-negative-value .fd-lead__value { color: color-mix(in srgb, var(--ep-danger) 82%, var(--textStrong)); }

.fd-lead .fd-val__dec { color: color-mix(in srgb, var(--fd-tone) 55%, transparent); }
.fd-lead.-negative-value .fd-val__dec { color: color-mix(in srgb, var(--ep-danger) 55%, transparent); }

/* SATELLITE TILE */
.fd-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15em;
    min-width: 0;
    padding: calc(var(--generalPadding) * .85);
    border-radius: var(--ep-border-radius, var(--ep-border-radius-md));
    /* Mixed into --ep-color-surface, NOT --ep-color-surface-alt: the latter
       equals --ep-color-app-surface, which is the page ground itself
       (#fff light / #151521 dark), so a tile based on it has no shape.
       --ep-color-surface differs from the page in both modes. */
    background: color-mix(in srgb, var(--fd-tone) var(--fd-chip-tint), var(--ep-color-surface));
    border: 1px solid color-mix(in srgb, var(--fd-tone) 32%, var(--ep-border-color));
}

.fd-tile::before { width: 2.2em; }

.fd-tile__label {
    font-size: .8em;
    font-weight: 600;
    line-height: 1.3;
    color: color-mix(in srgb, var(--fd-tone) 45%, var(--textDefault));
}

.fd-tile__value {
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--textStrong);
    overflow-wrap: anywhere;
}

.fd-tile.-negative-value .fd-tile__value { color: var(--ep-danger); }

@media (max-width: 760px) {
    /* Stacked: the group spans the full width and there is no side-by-side
       lead to measure a chip against, so the cap is lifted. */
    .fd-tiles.-spotlight { grid-template-columns: 1fr; }
    .fd-tiles.-spotlight .fd-tiles__group { max-width: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   =CRM ACTION TILES (FinancialDataComponent, whCRMFdFieldInfo)

   Two jobs in one row, kept visually distinct:
     .crm-lead    status summary - total, segmented bar, legend
     .crm-panel   category filter - one button per populated category

   Shares the bracket, tones and tint values with the FD tiles above so
   the two families read as one system. Populated by the five Actions
   Overview pages only.
   ══════════════════════════════════════════════════════════════════════ */

.crm-tiles {
    --fd-tone: var(--ep-secondary);
    --fd-tint: 20%;
    display: flex;
    flex-direction: column;
    gap: var(--general-gap);
    width: 100%;
}

.dark-mode .crm-tiles { --fd-tint: 40%; }

.crm-split {
    display: grid;
    /* Same ratio as .fd-tiles.-spotlight, so the lead lands in the same place
       whichever family of page the user is on. */
    grid-template-columns: minmax(12em, .95fr) minmax(0, 2fr);
    gap: var(--general-gap);
}

/* ── Status summary ─────────────────────────────────────────────────── */
.crm-lead {
    --fd-tone: var(--ep-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .45em;
    min-width: 0;
    padding: var(--generalPadding);
    border: 1px solid color-mix(in srgb, var(--fd-tone) 28%, var(--ep-border-color));
    border-radius: var(--ep-border-radius, var(--ep-border-radius-md));
    background: color-mix(in srgb, var(--fd-tone) var(--fd-tint), var(--ep-color-surface));
}

.crm-lead::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 3.2em;
    border-top: 3px solid color-mix(in srgb, var(--fd-tone) 85%, var(--textStrong));
    border-left: 3px solid color-mix(in srgb, var(--fd-tone) 85%, var(--textStrong));
    border-top-left-radius: calc(var(--ep-border-radius, var(--ep-border-radius-md)) + 1px);
    height: max(3px, calc(var(--ep-border-radius, var(--ep-border-radius-md)) + 1px));
    pointer-events: none;
}

.crm-lead__label {
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.3;
    color: color-mix(in srgb, var(--fd-tone) 55%, var(--textStrong));
}

.crm-lead__value {
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: color-mix(in srgb, var(--fd-tone) 85%, var(--textStrong));
    font-variant-numeric: tabular-nums;
}

/* ── The segmented bar: one bar, drawn once ─────────────────────────── */
.crm-bar {
    display: flex;
    height: .55em;
    gap: 2px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--textGray) 28%, var(--ep-color-surface));
}

.crm-bar i { display: block; min-width: 0; }
.crm-bar .-draft { background: var(--ep-secondary); }
.crm-bar .-inprogress { background: var(--ep-warning); }
.crm-bar .-closed { background: var(--ep-success); }

.crm-barlegend {
    display: flex;
    flex-wrap: wrap;
    gap: .4em 1.1em;
    font-size: .78em;
    color: var(--textLight);
}

.crm-barlegend span { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.crm-barlegend b { color: var(--textStrong); font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-barlegend i { width: .6em; height: .6em; border-radius: 50%; flex: none; }
.crm-barlegend .-draft { background: var(--ep-secondary); }
.crm-barlegend .-inprogress { background: var(--ep-warning); }
.crm-barlegend .-closed { background: var(--ep-success); }

/* ── Category filter ────────────────────────────────────────────────── */
.crm-panel { display: flex; flex-direction: column; gap: var(--general-gap-sm); min-width: 0; }

.crm-sublabel {
    font-size: .74em;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--textGray);
}

.crm-filtergrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
    gap: var(--general-gap-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Grid items default to min-width:auto, which means they refuse to shrink
   below their content's min-content width. A long category name would then
   push its track past 1fr and overflow the panel instead of ellipsising -
   worse as the screen narrows, because the track has less room to give. */
.crm-filtergrid > li {
    min-width: 0;
    display: flex;
}

.crm-filter {
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5em;
    width: 100%;
    /* Flex item of the <li>, so it needs the same min-width:0 release before
       the name inside it is allowed to ellipsise. */
    min-width: 0;
    padding: .5em .7em;
    line-height: 1.3;
    color: var(--textDefault);
    background: var(--ep-color-surface);
    border: 1px solid var(--ep-border-color);
    border-radius: var(--ep-border-radius, var(--ep-border-radius-md));
    transition: border-color .12s, background .12s, color .12s;
}

.crm-filter__name { font-size: .84em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The count never ellipsises - the name gives way first. */
.crm-filter__num { font-size: .84em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--textStrong); flex: none; }

.crm-filter:hover { border-color: var(--ep-primary); color: var(--textStrong); }
.crm-filter:focus-visible { outline: 2px solid var(--ep-primary); outline-offset: 2px; }

.crm-filter[aria-pressed="true"] {
    background: color-mix(in srgb, var(--ep-primary) 14%, var(--ep-color-surface));
    border-color: color-mix(in srgb, var(--ep-primary) 55%, var(--ep-border-color));
    color: color-mix(in srgb, var(--ep-primary) 65%, var(--textStrong));
}

.crm-filter[aria-pressed="true"] .crm-filter__num { color: color-mix(in srgb, var(--ep-primary) 80%, var(--textStrong)); }

.crm-filter.-all { font-weight: 600; }

/* A zero category is still a valid filter - dimmed, not disabled. */
.crm-filter.-zero { opacity: .5; }

@media (max-width: 760px) {
    .crm-split { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════
   =DASHBOARD CARD (.ep-dcard) + DASHBOARD LIST (.dlist)

   .ep-dcard replaces the four rules that used to style
   .ep-card.-dashboard; .dlist replaces the read-only <PGrid/> that every
   dashboard component put inside it. Nothing here is new vocabulary: the
   bracket, the --fd-tone variable, the five tone classes, the uppercase
   tracked label and the colour-mix()-into-surface tints all come from the
   Financial Data tiles above, and the pager buttons are the .crm-filter
   recipe. The two families are meant to read as one system.

   Every tinted surface is color-mix()'d into --ep-color-surface for the
   same reason it is up there: only --ep-danger-subtle has a dark-mode
   override, so a -subtle token would stay pale on a dark card.

   The card keeps --border-radius-lg, which is what .ep-card.-dashboard
   used, so the dashboard silhouette does not change.
   ══════════════════════════════════════════════════════════════════════ */

/* height/flex/min-height are the three declarations the framework's own
   .ep-dashboard-card carries, and they are why WorkareaComponent already fills
   its slot. Without them a card is only as tall as its content, so a row of
   cards ends ragged, an empty card is as tall as a full one, and switching
   between the list and the chart view resizes the card. Filling the slot means
   the tallest card in a row sets the height and the rest match it.

   This is only half the problem: the row is still sized by whichever card has
   the most data, because the layout model has a width (wsLayoutCustomizationInfo.Size)
   and no height. Until it has one, height cannot come from the layout. */
.ep-dcard {
    --fd-tone: var(--ep-secondary);
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    background: var(--ep-color-surface-alt);
    border: 1px solid color-mix(in srgb, var(--fd-tone) 22%, var(--ep-border-color));
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-sm);
}


/* THE BRACKET
   The same construction as .fd-lead::before - runs along the top, turns
   the corner, stops as the arc completes - one size up, because a card is
   bigger than a tile. height == the radius means the arc consumes the
   whole left border, so no straight left arm is ever drawn. At radius 0
   (theme-minimal sets --border-radius-lg to 0) the height floors at the
   stroke width and the rule simply ends square. */
.ep-dcard::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 4.2em;
    border-top: 3px solid color-mix(in srgb, var(--fd-tone) 85%, var(--textStrong));
    border-left: 3px solid color-mix(in srgb, var(--fd-tone) 85%, var(--textStrong));
    border-top-left-radius: calc(var(--border-radius-lg) + 1px);
    height: max(3px, calc(var(--border-radius-lg) + 1px));
    pointer-events: none;
}

/* TONES - identical class names to .fd-tiles, so one habit covers both. */
.ep-dcard.-tone-neutral { --fd-tone: var(--ep-secondary); }
.ep-dcard.-tone-accent { --fd-tone: var(--ep-primary); }
.ep-dcard.-tone-positive { --fd-tone: var(--ep-success); }
.ep-dcard.-tone-warning { --fd-tone: var(--ep-warning); }
.ep-dcard.-tone-negative { --fd-tone: var(--ep-danger); }

/* ── HEADER ─────────────────────────────────────────────────────────── */
.ep-dcard__head {
    display: flex;
    align-items: center;
    gap: .55em;
    flex: none;
    padding: calc(var(--generalPadding) * .8) var(--generalPadding) calc(var(--generalPadding) * .55);
}

.ep-dcard__icon {
    flex: none;
    width: 2.1em;
    height: 2.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ep-border-radius, var(--ep-border-radius-md));
    background: color-mix(in srgb, var(--fd-tone) 14%, var(--ep-color-surface));
    color: color-mix(in srgb, var(--fd-tone) 78%, var(--textStrong));
}

.ep-dcard__titles { display: flex; flex-direction: column; gap: .12em; min-width: 0; }

/* = .fd-lead__label, to the letter. */
.ep-dcard__title {
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.3;
    color: color-mix(in srgb, var(--fd-tone) 55%, var(--textStrong));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ep-dcard__sub {
    font-size: .72em;
    line-height: 1.3;
    color: var(--textLight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ep-dcard__count {
    flex: none;
    padding: .1em .5em;
    border-radius: 999px;
    font-size: .7em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--fd-tone) 70%, var(--textStrong));
    background: color-mix(in srgb, var(--fd-tone) 14%, var(--ep-color-surface));
}

.ep-dcard__tools { margin-left: auto; display: flex; align-items: center; gap: .3em; flex: none; }

/* VIEW SWITCHER - the appearance choice, which until now lived only in
   the layout designer customization dialog. The pressed state is the
   .crm-filter[aria-pressed] recipe. */
.ep-dcard__views {
    display: flex;
    border: 1px solid var(--ep-border-color);
    border-radius: var(--ep-border-radius, var(--ep-border-radius-md));
    overflow: hidden;
    background: var(--ep-color-surface);
}

.ep-dcard__view {
    font: inherit;
    width: 1.9em;
    height: 1.75em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--textLight);
    cursor: pointer;
    transition: background .12s, color .12s;
}

.ep-dcard__view + .ep-dcard__view { border-left: 1px solid var(--ep-border-color); }
.ep-dcard__view:hover { color: var(--textStrong); }
.ep-dcard__view:focus-visible { outline: 2px solid var(--ep-primary); outline-offset: -2px; }

.ep-dcard__view[aria-pressed="true"] {
    background: color-mix(in srgb, var(--ep-primary) 14%, var(--ep-color-surface));
    color: color-mix(in srgb, var(--ep-primary) 70%, var(--textStrong));
}

.ep-dcard__btn {
    font: inherit;
    width: 1.85em;
    height: 1.85em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ep-border-radius, var(--ep-border-radius-md));
    background: transparent;
    color: var(--textGray);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.ep-dcard__btn:hover { color: var(--textStrong); border-color: var(--ep-border-color); background: var(--ep-color-surface); }
.ep-dcard__btn:focus-visible { outline: 2px solid var(--ep-primary); outline-offset: 1px; }

/* A filter that scopes the whole card sits in the header rather than above the
   body, where it pushed the content down and scrolled away with it. */
.ep-dcard__filter { display: inline-flex; width: 10em; min-width: 0; }
.ep-dcard__filter > * { width: 100%; }

/* ── BODY ───────────────────────────────────────────────────────────── */
/* Charts, shortcut grids and anything else get the usual padding and
   scroll here. A .dlist-host is the exception: it owns its own scrolling
   region and pins its own footer, so the body gets out of its way. */
.ep-dcard__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--generalPadding);
}

.ep-dcard__body:has(> .dlist-host) {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════════════
   =DASHBOARD LIST (.dlist)

   One <ul>, laid out with CSS grid. The column tracks come from the same
   wpGridColumn.Width values the grid was given, so a component's column
   declarations carry over untouched: a percentage becomes a proportional
   fr track (a literal percentage overflows once the gap is added),
   anything else is honoured as written.

   No toolbar, no header table, no filter row, no column menus, no
   scroll-sync. Paging is the one grid behaviour kept, and it is Skip/Take
   over a list that is already in memory.
   ══════════════════════════════════════════════════════════════════════ */

/* The gap and the side padding are shared by the header and the rows, and they
   are in rem on purpose. .dlist__head sets font-size: .68em, so an em here
   would resolve against the small header type and land the header's column
   edges a couple of pixels off the row's - visible straight away on a
   right-aligned money column. */
.dlist-host {
    --dl-gap: .85rem;
    --dl-pad-x: .55rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.dlist-host__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 calc(var(--generalPadding) * .6); }

/* Micro column headers - the .crm-sublabel treatment over one hairline,
   rather than a filled header band. */
.dlist__head {
    display: grid;
    grid-template-columns: var(--dl-cols, 1fr);
    column-gap: var(--dl-gap);
    padding: .15em var(--dl-pad-x) .4em;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ep-color-surface-alt);
    border-bottom: 1px solid color-mix(in srgb, var(--ep-border-color) 60%, transparent);
    font-size: .68em;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--textGray);
}

/* A header cell is a wrapper holding the label and, on all but the last column,
   the resize handle. The wrapper is the grid item and the handle's positioning
   context; the label inside is a button when the column can be sorted and a
   span when it cannot, so the two look identical until hovered. */
.dlist__hcell { position: relative; display: flex; min-width: 0; }

.dlist__th {
    display: flex;
    align-items: center;
    gap: .35em;
    flex: 1;
    min-width: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    text-align: left;
}

button.dlist__th { padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
button.dlist__th:hover { color: var(--textDefault); }
button.dlist__th:focus-visible { outline: 2px solid var(--ep-primary); outline-offset: 2px; border-radius: 2px; }

.dlist__hcell.-num .dlist__th { justify-content: flex-end; text-align: right; }
.dlist__hcell.-center .dlist__th { justify-content: center; text-align: center; }
.dlist__th-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The caret is hinted on hover and committed once the column is the sorted
   one, so a row of idle headers stays as quiet as it was before sorting. */
.dlist__caret { flex: none; font-size: .95em; opacity: 0; transition: opacity .12s, color .12s; }
button.dlist__th:hover .dlist__caret,
button.dlist__th:focus-visible .dlist__caret { opacity: .5; }

.dlist__hcell.-sorted .dlist__th { color: color-mix(in srgb, var(--fd-tone) 60%, var(--textStrong)); }
.dlist__hcell.-sorted .dlist__caret { opacity: 1; color: var(--fd-tone); }

/* RESIZE HANDLE
   Sits centred in the column gap rather than inside the cell, so it never eats
   into the label's width and never overlaps the sort button's hit area. The
   grab area is the whole gap; what you see is a hairline.

   The hairline is always drawn. An affordance that only appears once the
   pointer is already on it cannot be found: you have to know it is there to
   discover that it is there. Idle it reads as a column divider, in the same
   border colour as the rules between rows; on hover or drag it turns into the
   primary colour and doubles in weight.

   Pointer only by design - the handle is not focusable, so there are no focus
   styles here and nothing to announce. */
.dlist__resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--dl-gap) / -2 - 1px);
    width: var(--dl-gap);
    cursor: col-resize;
    touch-action: none;
    z-index: 2;
}

.dlist__resizer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    border-radius: 1px;
    background: color-mix(in srgb, var(--ep-border-color) 75%, transparent);
    transition: background .12s, width .12s;
}

.dlist__resizer:hover::before,
.dlist__resizer.-dragging::before {
    width: 2px;
    background: var(--ep-primary);
}

/* While a drag is live the cursor must not flicker as the pointer crosses other
   elements, and a stray text selection would follow the drag across the card. */
body.dlist-resizing,
body.dlist-resizing * { cursor: col-resize !important; user-select: none !important; }

.dlist { list-style: none; margin: 0; padding: .2em 0; display: flex; flex-direction: column; }

.dlist__row {
    position: relative;
    display: grid;
    grid-template-columns: var(--dl-cols, 1fr);
    align-items: center;
    column-gap: var(--dl-gap);
    padding: .42em var(--dl-pad-x);
    border-radius: var(--ep-border-radius, var(--ep-border-radius-md));
    min-width: 0;
    transition: background .12s, box-shadow .12s;
}

/* A hairline between rows, inset to the content and drawn as a pseudo
   element rather than a border: the hover background is rounded and a
   border would cut across its corners. Both the hovered row's rule and
   the one below it are dropped, so the highlight reads as one block. */
.dlist__row + .dlist__row::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--dl-pad-x);
    right: var(--dl-pad-x);
    height: 1px;
    background: color-mix(in srgb, var(--ep-border-color) 55%, transparent);
    transition: opacity .12s;
}

.dlist__row:hover { background: color-mix(in srgb, var(--fd-tone) 8%, transparent); box-shadow: inset 2px 0 0 var(--fd-tone); }
.dlist__row:hover::before,
.dlist__row:hover + .dlist__row::before { opacity: 0; }

.dlist.-clickable .dlist__row { cursor: pointer; }
.dlist.-clickable .dlist__row:focus-visible { outline: 2px solid var(--ep-primary); outline-offset: -2px; }

.dlist__cell {
    font-size: .82em;
    line-height: 1.35;
    color: var(--textDefault);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The first visible column is the row's subject, so it carries the strong
   colour - the equivalent of the lead tile's figure. */
.dlist__cell.-lead { color: var(--textStrong); font-weight: 600; }
.dlist__cell.-num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--textStrong); font-weight: 600; }
.dlist__cell.-center { text-align: center; }

/* A negative figure stays red whatever tone the card declared - the same
   rule as .fd-tile.-negative-value. */
.dlist__cell.-negative-value { color: var(--ep-danger); }

/* Decimals set smaller than the integer part, exactly as in the tiles. */
.dlist .fd-val__dec { font-size: .72em; font-weight: 600; color: var(--textLight); margin-left: .06em; }
.dlist__cell.-negative-value .fd-val__dec { color: color-mix(in srgb, var(--ep-danger) 60%, transparent); }

/* ── EMPTY ──────────────────────────────────────────────────────────── */
.dlist-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: 2.2em 1em;
    text-align: center;
    font-size: .82em;
    color: var(--textLight);
}

.dlist-empty__icon { font-size: 1.9em; color: var(--textGray); line-height: 1; }

/* ── FOOTER + PAGER ─────────────────────────────────────────────────── */
/* Rendered by the list rather than the card, because the list owns the
   page state - but it sits at the bottom of the body and is styled as the
   card's footer. */
.dlist-host__foot {
    display: flex;
    align-items: center;
    gap: var(--general-gap-sm);
    flex: none;
    padding: calc(var(--generalPadding) * .5) var(--generalPadding);
    border-top: 1px solid color-mix(in srgb, var(--ep-border-color) 50%, transparent);
}

.dlist-host__range { font-size: .72em; color: var(--textLight); font-variant-numeric: tabular-nums; }

.ep-pager { margin-left: auto; display: flex; align-items: center; gap: .25em; }

.ep-pager button {
    font: inherit;
    min-width: 1.85em;
    height: 1.85em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .35em;
    font-size: .75em;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    color: var(--textDefault);
    background: var(--ep-color-surface);
    border: 1px solid var(--ep-border-color);
    border-radius: var(--ep-border-radius, var(--ep-border-radius-md));
    transition: border-color .12s, background .12s, color .12s;
}

.ep-pager button:hover:not(:disabled) { border-color: var(--ep-primary); color: var(--textStrong); }
.ep-pager button:focus-visible { outline: 2px solid var(--ep-primary); outline-offset: 1px; }

.ep-pager button[aria-current="page"] {
    font-weight: 700;
    background: color-mix(in srgb, var(--ep-primary) 14%, var(--ep-color-surface));
    border-color: color-mix(in srgb, var(--ep-primary) 55%, var(--ep-border-color));
    color: color-mix(in srgb, var(--ep-primary) 65%, var(--textStrong));
}

.ep-pager button:disabled { opacity: .35; cursor: default; }

/* ── LOADING ────────────────────────────────────────────────────────── */
/* The card used to render an empty body until ComponentInitAsync
   finished, so the dashboard reflowed as each component arrived. */
/* No padding of its own: the skeleton only ever sits in a padded body, because
   the body only goes flush for a .dlist-host and by then there is data. */
.dlist-skel { display: flex; flex-direction: column; gap: .9em; }

.dlist-skel i {
    display: block;
    height: .62em;
    border-radius: 999px;
    background: linear-gradient( 90deg, color-mix(in srgb, var(--textGray) 26%, var(--ep-color-surface)) 0%, color-mix(in srgb, var(--textGray) 13%, var(--ep-color-surface)) 50%, color-mix(in srgb, var(--textGray) 26%, var(--ep-color-surface)) 100% );
    background-size: 200% 100%;
    animation: dlist-shimmer 1.4s ease-in-out infinite;
}

@keyframes dlist-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dlist-skel i { animation: none; }
}

@media (max-width: 760px) {
    .ep-dcard__sub { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   =CHART SERIES PALETTE

   Telerik's chart does not take its colours from CSS directly. It appends
   a hidden probe element per theme slot and reads the computed
   BACKGROUND-COLOR back out:

       queryColor(t) { return this.queryStyle(t).backgroundColor }
       queryStyle(t) { return getComputedStyle(el.querySelector('.k-var--' + t)) }

   The stock theme declares those probes as
   `.k-var--series-1 { background-color: var(--kendo-color-series-a, #ff6358) }`,
   so redefining the six --kendo-color-series-* tokens repaints every chart
   in the app - the nine dashboard ones and the hundred-odd elsewhere -
   without touching a single .razor file. Because they are CSS variables,
   dark mode is a token swap and needs no chart to re-render its options.

   The hues are the app's own accent tokens (--ep-blue, --ep-orange, ...)
   re-stepped for contrast against the card surface. They are NOT taken
   from --ep-primary / --ep-secondary: those change per theme, and on
   Emerald the two land close enough that a two-series chart stops being
   readable. A categorical palette has to stay fixed and stay separable;
   the theme shows through the card, the chrome and the text instead.

   Order is fixed and never cycled - slot 1 is always slot 1, so a series
   keeps its colour when a sibling is filtered out.

   Both sets pass the six checks (lightness band, chroma floor, CVD
   separation, normal-vision floor, contrast) against their own surface:
     light on #fff      - worst adjacent deutan ΔE 17.7, all contrast ≥ 3:1
     dark  on #151521   - worst adjacent deutan ΔE 15.0, all contrast ≥ 3:1
   Dark is a selected set of steps, not a lightened copy of the light one.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --kendo-color-series-a: #b82e77; /* purple */
    --kendo-color-series-b: #c27b0a; /* amber  */
    --kendo-color-series-c: #048ea9; /* cyan   */
    --kendo-color-series-d: #d53d1a; /* red    */
    --kendo-color-series-e: #3535d4; /* blue   */
    --kendo-color-series-f: #21833e; /* green  */
}

:root.dark-mode {
    --kendo-color-series-a: #d0438e;
    --kendo-color-series-b: #bd800f;
    --kendo-color-series-c: #2997ae;
    --kendo-color-series-d: #dd5d40;
    --kendo-color-series-e: #6868f3;
    --kendo-color-series-f: #3ea35c;
}

/* Chart chrome. Overridden on the probes rather than on
   --kendo-color-on-app-surface, which every other Kendo component reads
   too: .k-var--* is read only by the chart's theme service, so the blast
   radius stays inside charts. Without this the axis labels and grid lines
   keep their light-theme values and all but vanish on a dark card. */
.k-var--normal-text-color { background-color: var(--textDefault); }
.k-var--chart-major-lines { background-color: color-mix(in srgb, var(--textDefault) 22%, transparent); }
.k-var--chart-minor-lines { background-color: color-mix(in srgb, var(--textDefault) 10%, transparent); }
.k-var--chart-inactive { background-color: var(--textGray); }


/* ══════════════════════════════════════════════════════════════════════
   =QUICK FINANCIAL DATA DRAWER (.qfd)

   The drawer used to build its own .ep-statcard markup, which is why it
   read as a third family beside the Financial Data tiles and the
   dashboard cards. It now renders <FdTiles/> and .ep-dcard + .dlist, so
   everything below is spacing and one section head - no tile, card, list
   or number styling is restated here.

   The head is deliberately NOT .ep-dcard__head: that one belongs to a
   card and takes its colour from the card's --fd-tone. These sections
   have no frame, because the tiles under them already carry one and a
   border around bordered tiles reads as a double frame.
   ══════════════════════════════════════════════════════════════════════ */

.qfd {
    display: flex;
    flex-direction: column;
    gap: var(--general-gap-2x, 1.25rem);
    width: 100%;
    padding: var(--generalPadding);
}

.qfd__sect { display: flex; flex-direction: column; gap: var(--general-gap-sm); min-width: 0; }

.qfd__head { display: flex; align-items: center; gap: .55em; min-width: 0; }

/* = .ep-dcard__icon, at the tone the sections share (neutral). Written out
   rather than color-mix()'d against --fd-tone, because there is no card
   here to declare one and an undefined --fd-tone makes the whole
   declaration invalid. */
.qfd__icon {
    flex: none;
    width: 1.9em;
    height: 1.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ep-border-radius, var(--ep-border-radius-md));
    background: color-mix(in srgb, var(--ep-secondary) 14%, var(--ep-color-surface));
    color: color-mix(in srgb, var(--ep-secondary) 78%, var(--textStrong));
}

/* = .fd-lead__label and .ep-dcard__title, to the letter. */
.qfd__title {
    min-width: 0;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.3;
    color: color-mix(in srgb, var(--ep-secondary) 55%, var(--textStrong));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The branch card is the one framed thing in the drawer, so it does not
   stretch to the drawer's height the way a dashboard card fills its cell. */
.qfd__card { max-height: none; }

/* Lift the chip cap.

   .fd-tiles__group caps its chips at 3/4 of the lead, which is right on a
   Financial Data page: that page is as wide as the window and two chips
   blown up to half of it would read as three leads. A drawer is a column,
   and there the cap just strands ~18% of the row - measured at 82-84% fill
   from 520px to 900px, whatever the width. Same reason the -grid layout and
   the under-760px rule above already lift it. */
.qfd .fd-tiles__group { max-width: none; }

/* One row, one gap.

   .fd-tiles puts --general-gap between the lead and the satellite group but
   --general-gap-sm between the chips - 1rem against .5rem. On a Financial
   Data page that is deliberate: the lead and the group read as two units set
   side by side. In the drawer the tiles read as a single row, so double space
   to the right of the lead alone looks like a mistake, and it does not match
   the Turnover row right below, which is -grid and uses the small gap
   throughout. Column gap only - the row gap never applies, since -spotlight
   is a single row. */
.qfd .fd-tiles.-spotlight { column-gap: var(--general-gap-sm); }

/* ── DRAWER TITLE BAR ────────────────────────────────────────────────
   Sits inside the drawer's own .drawer__header, in place of the <h2>
   the dialog draws for a string title.

   It keeps that h2's signature - the hairline across the header and the
   3rem primary stub under its left edge - because every other drawer in
   the app has it, and this one should read as the same header carrying
   more, not as a different component. Reproduced here rather than
   inherited: the rules are bound to `h2`, and an h2 holding a flex row
   of chip and name is the wrong element.

   padding-right clears the close button, which .drawer__header pins with
   position: absolute - it is out of flow, so without the reserve a long
   trader name runs underneath it.

   Name over a quiet meta line, which is .ep-dcard__title over
   .ep-dcard__sub - the cards inside this drawer are built that way, and
   the same order of importance holds here: the name is what you read,
   the code is what you quote, the role is context. A chip around the
   code sized itself to the code, which on a trader like
   "TRAD-00000117" made the reference key the loudest thing in the
   header. */
.qfd-hdr {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15em;
    padding-right: 2.5rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--ep-border-color);
}

.qfd-hdr::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 3rem;
    height: 3px;
    background: var(--ep-primary);
}

.qfd-hdr__name {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--textStrong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* = .ep-dcard__sub, so a drawer subtitle and a card subtitle match. */
.qfd-hdr__meta {
    display: flex;
    align-items: center;
    gap: .45em;
    min-width: 0;
    font-size: .75em;
    line-height: 1.3;
    color: var(--textGray);
}

/* The code never shrinks: on a long trader name the name ellipsises and
   the code stays whole, because a half-printed code is no code at all. */
.qfd-hdr__code { flex: none; font-variant-numeric: tabular-nums; }

/* Drawn, not written - see the component's note. */
.qfd-hdr__sep {
    flex: none;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ep-border-color);
}

.qfd-hdr__role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── DRAWER FOOTER ───────────────────────────────────────────────────
   The framework sets `border: none` on .drawer__footer, so the button
   bar floats against the scrolling body with nothing to close it off.
   Matched to the header's hairline, one weight lighter because a footer
   is a boundary, not a title.

   Scoped through :has() to drawers whose body holds a .qfd rather than
   set on .drawer__footer itself, because that rule is every drawer in
   the app and this is not the place to redecide that. Same mechanism as
   .ep-dcard__body:has(> .dlist-host) above. */
.ep-drawer:has(.qfd) .drawer__footer {
    border-top: 1px solid var(--ep-border-color);
}

/* #region ListEditor cards — .-epcard
   ---------------------------------------------------------------------------
   The shared card for ListEditor items: the shell (frame, name bar, delete
   button, add card) plus the content primitives the item components build
   from — .epcard__id, __code, __chips, __chip, __count, __facts, __meta.

   Everything is scoped by the `-epcard` class that EpCard.ItemClass puts on the
   list item, so a ListEditor that has not been migrated is untouched. Used by
   BranchListItemComponent and BankAccountListItemComponent.

   It lives here rather than in a scoped .razor.css because part of it restyles
   elements the control renders itself — the name bar, the delete button, the
   add card — which sit outside the components. Scoped styles also load from
   *.styles.css, which App.razor links BEFORE the framework bundle, so they
   would lose every specificity tie against it. Site.css loads after both. */

.ep-listeditor:has(.listeditor-item.-epcard) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* The card: a hairline and a surface. The shipped shadow is rgba(0,0,0,.16),
   which is invisible on a dark ground, so the edge has to come from a border. */
.ep-listeditor .listeditor-item.-epcard {
    /* The dot beside the name: live by default, grey and hollow when -inactive. */
    --state: var(--ep-success);
    display: flex;
    flex-direction: column;
    background: var(--cardBG);
    border: 1px solid var(--ep-border-color);
    border-radius: var(--ep-border-radius);
    box-shadow: none;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease;
}

/* Inactive is switched off, not half-drawn: the shipped opacity:.5 reads as
   "still loading". The dot in the name bar says it instead — filled when the
   record is live, a hollow ring when it is not.
   The dot answers one question only, "is this on?". It used to take its colour
   from -primary and -hub, which meant a head office and an active branch were
   the same signal in two colours and you could not read either. Being the
   primary one, or a hub, is said by the chips beside the code. */
.ep-listeditor .listeditor-item.-epcard.-inactive {
    --state: var(--textGray);
    opacity: 1;
}

.ep-listeditor .listeditor-item.-epcard:hover {
    border-color: color-mix(in srgb, var(--ep-primary) 55%, var(--ep-border-color));
    box-shadow: var(--ep-box-shadow-sm);
}

.ep-listeditor .listeditor-item.-epcard.-active {
    border-color: var(--ep-primary);
    box-shadow: 0 0 0 1px var(--ep-primary);
}

.ep-listeditor .listeditor-item.-epcard:focus-visible {
    outline: 2px solid var(--ep-primary);
    outline-offset: 2px;
}

/* The name bar, instead of the filled band. */
.ep-listeditor .listeditor-item.-epcard .listeditor-item__header {
    min-height: 0;
    padding: .62rem .8rem .55rem;
    padding-right: 2.1rem;
    border-radius: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ep-border-color) 55%, transparent);
    background: transparent;
    color: var(--textStrong);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
}

.ep-listeditor .listeditor-item.-epcard.-inactive .listeditor-item__header {
    color: var(--textLight);
}

/* ItemHeaderContent is a Func<TItem, String>, so the state marker in front of
   the name can only be drawn in CSS. */
.ep-listeditor .listeditor-item.-epcard .listeditor-item__header-text::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: .5rem;
    border-radius: 50%;
    vertical-align: .08em;
    background: var(--state);
}

.ep-listeditor .listeditor-item.-epcard.-inactive .listeditor-item__header-text::before {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--textGray);
}

/* Visible at rest rather than on hover only, and red when it means it.
   The shipped rule fills it with rgb(255 255 255 / .4) and turns it white. */
.ep-listeditor .listeditor-item.-epcard .listeditor-item__remove {
    position: absolute;
    top: .36rem;
    right: .32rem;
    transform: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--ep-border-radius);
    background: transparent;
    color: var(--textGray);
    font-size: .78rem;
    line-height: 1.45rem;
    opacity: 1;
}

.ep-listeditor .listeditor-item.-epcard .listeditor-item__remove:hover {
    background: color-mix(in srgb, var(--ep-danger) 15%, transparent);
    color: var(--ep-danger);
}

.ep-listeditor .listeditor-item.-epcard .listeditor-item__remove:focus-visible {
    outline: 2px solid var(--ep-danger);
    outline-offset: 1px;
}

.ep-listeditor .listeditor-item.-epcard .listeditor-item__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .68rem .8rem .72rem;
}

/* The framework absolutely positions every fa icon inside a list item body.
   The tile lays its icons out in a grid gutter instead. */
.ep-listeditor .listeditor-item.-epcard .listeditor-item__body i[class*="fa"] {
    position: static;
    color: var(--textLight);
}

/* --- the tile itself ------------------------------------------------------ */

.epcard {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.epcard__id {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 1.45rem;
}

.epcard__code {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--textLight);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Chips sit against the right edge whether or not there is a code beside them,
   so they line up down a column of cards. */
.epcard__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .28rem;
    margin-left: auto;
}

/* No code on the left. The row is still drawn when there is no chip, to keep
   every card in the list the same height, so it only reserves the height of a
   chip rather than a full line. */
.epcard__id.-chipsonly {
    min-height: 1.2rem;
}

/* The warehouse count is a quantity, not a state, so it sits beside the chips
   without a border or a fill. */
.epcard__count {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--textGray);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ep-listeditor .listeditor-item.-epcard .epcard__count i[class*="fa"] {
    font-size: .78rem;
    color: var(--textGray);
}

/* Chips mark the exceptions only — B2B defaults to 1, so a badge for it on
   every card would be decoration. The colours are mixed from the theme tokens
   rather than picked from --ep-*-subtle, which is not redefined in every
   theme's dark block. */
.epcard__chip {
    --c: var(--textGray);
    display: inline-flex;
    align-items: center;
    gap: .28em;
    /* line-height 1 so the box hugs the glyphs and the padding — not the font's
       half-leading — decides where the text sits. Otherwise the theme's line
       height lands the label off-centre in the chip. */
    padding: .22rem .4rem;
    line-height: 1;
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    border-radius: var(--ep-border-radius-sm);
    background: color-mix(in srgb, var(--c) 14%, var(--cardBG));
    color: color-mix(in srgb, var(--c) 72%, var(--textStrong));
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .015em;
    white-space: nowrap;
}

.epcard__chip.-hq { --c: var(--ep-primary); }
.epcard__chip.-hub { --c: var(--ep-warning); }
.epcard__chip.-off { --c: var(--textGray); }
.epcard__chip.-warn { --c: var(--ep-danger); }
.epcard__chip.-ok { --c: var(--ep-success); }

/* Label beside value, for cards whose rows mean nothing unlabelled — the Lotify
   document types. Nothing is pushed to the far edge, so the pair reads as one
   phrase rather than as a sparse table. */
.epcard__pairs {
    display: flex;
    flex-direction: column;
    gap: .34rem;
    margin: 0;
    font-size: .8125rem;
}

.epcard__pairs > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .45rem;
    min-height: 1.18rem;
}

.epcard__pairs .k {
    font-size: .7rem;
    color: var(--textGray);
    white-space: nowrap;
}

.epcard__pairs .v {
    color: var(--textStrong);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.epcard__pairs .v.-none {
    color: var(--textGray);
    font-weight: 400;
}

/* A completion bar, for records that carry a percentage.
   The fill is always the accent, never the card's state colour: the chip beside
   it already says which state the record is in, and "how far along" is the same
   question whatever that state is. Tying the fill to --state left it grey on
   every state but two, which is exactly where progress most needs reading.
   The track takes the card's own hairline colour, so it is as visible as the
   card's border by construction, in both light and dark. */
.epcard__progress {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    color: var(--textLight);
    font-variant-numeric: tabular-nums;
}

.epcard__progress .track {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--ep-border-color);
    overflow: hidden;
}

.epcard__progress .fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ep-primary);
}

.epcard__progress b {
    min-width: 2.6em;
    text-align: right;
    font-weight: 600;
    color: var(--textDefault);
}

.epcard__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.epcard__facts > li {
    display: grid;
    grid-template-columns: .95rem minmax(0, 1fr);
    gap: .5rem;
    align-items: start;
    min-height: 1.18rem;
    color: var(--textDefault);
    font-size: .8125rem;
    line-height: 1.42;
}

.epcard__facts > li > i[class*="fa"] {
    width: .95rem;
    margin-top: .1rem;
    text-align: center;
}

.epcard__facts > li > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A row whose value is worth copying makes room for the button. */
.epcard__facts > li.-copyable {
    grid-template-columns: .95rem minmax(0, 1fr) 1.35rem;
}

.epcard__copy {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: var(--ep-border-radius-sm);
    background: transparent;
    color: var(--textGray);
    font-size: .72rem;
    line-height: 1.3rem;
    text-align: center;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}

.epcard__copy:hover {
    background: color-mix(in srgb, var(--ep-primary) 14%, transparent);
    color: var(--ep-primary);
}

.epcard__copy:focus-visible {
    outline: 2px solid var(--ep-primary);
    outline-offset: 1px;
}

/* Held for a moment after a successful copy, so the click has an answer. */
.epcard__copy.-done,
.epcard__copy.-done:hover {
    background: transparent;
    color: var(--ep-success);
}

.ep-listeditor .listeditor-item.-epcard .epcard__copy i[class*="fa"] {
    position: static;
    color: inherit;
}

.epcard__facts b {
    display: block;
    font-weight: 400;
}

/* The second address line holds its box even when there is no city, so the
   address is always two lines and every card ends at the same height. */
.epcard__facts em {
    display: block;
    min-height: 1.1em;
    font-style: normal;
    font-size: .775rem;
    color: var(--textLight);
    font-variant-numeric: tabular-nums;
}

.epcard__facts a {
    color: inherit;
    text-decoration: none;
}

.epcard__facts a:hover {
    color: var(--ep-primary);
}

.epcard__facts .-none {
    color: var(--textGray);
}

/* Registry numbers, always both rows so the card ends at a fixed height.
   The label truncates rather than wrapping for the same reason — a long
   translation must not add a line to one card and not to the next. */
.epcard__meta {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr;
    gap: .1rem .6rem;
    margin: 0;
    padding-top: .5rem;
    border-top: 1px dashed color-mix(in srgb, var(--ep-border-color) 65%, transparent);
    font-size: .68rem;
    line-height: 1.5;
}

.epcard__meta dt {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--textGray);
}

.epcard__meta dd {
    margin: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--textLight);
    font-variant-numeric: tabular-nums;
}

.epcard__meta dd.-none {
    font-weight: 400;
    color: var(--textGray);
}

.epcard .-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The shipped add card is an SVG data-URI with a hard-coded #e1e5e6 stroke, so
   it stays light grey in every theme and mode. A real dashed border follows the
   token. */
.ep-listeditor:has(.listeditor-item.-epcard) .listeditor-item.-create {
    min-height: 0;
    background-image: none;
    background: color-mix(in srgb, var(--ep-primary) 4%, var(--cardBG));
    border: 1.5px dashed color-mix(in srgb, var(--ep-border-color) 90%, transparent);
    border-radius: var(--ep-border-radius);
    color: var(--textLight);
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.ep-listeditor:has(.listeditor-item.-epcard) .listeditor-item.-create:hover {
    background: color-mix(in srgb, var(--ep-primary) 9%, var(--cardBG));
    border-color: var(--ep-primary);
    color: var(--ep-primary);
}

.ep-listeditor:has(.listeditor-item.-epcard) .listeditor-item.-create .listeditor__action {
    flex-direction: row;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 600;
}

.ep-listeditor:has(.listeditor-item.-epcard) .listeditor-item.-create i[class*="fa"] {
    position: static;
    margin-top: 0;
    font-size: 1.05rem;
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .ep-listeditor .listeditor-item.-epcard {
        transition: none;
    }
}

/* #endregion */

/* #region Summary view cards — .-epsum
   ---------------------------------------------------------------------------
   The three components of a summary view, for traders and for CRM contacts:
   the identity card, the addresses panel and the timeline. Both sets carry
   .-epsum, so one set of rules dresses both and the two screens cannot drift
   apart.

   The layout, the ids and the containers are untouched; only what is drawn
   inside the components changed, so every saved customization still points at
   something that exists.

   Nothing here invents a colour. Tints are color-mix()'d into
   --ep-color-surface rather than reaching for an --ep-*-subtle token, because
   only --ep-danger-subtle is redefined in every theme's dark block and the
   rest would stay pale on a dark card. Edges are hairlines, not shadows: the
   shipped rgba(99,99,99,.15) does not render on a dark ground, which is the
   bug .-epcard already fixed for the ListEditor cards. */

/* ── SHARED: SKELETON, EMPTY, CHIPS, DOT, COPY ────────────────────────
   The skeleton holds the card's height so the page does not reflow as each
   component finishes; the empty state keeps the frame and says so, because a
   card that vanishes reads as a broken customization, not an empty record. */
.tc-skel { display: flex; flex-direction: column; gap: .9rem; padding: .8rem 0; }

.tc-skel i {
    display: block;
    height: .72rem;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--textGray) 18%, var(--ep-color-surface)),
        color-mix(in srgb, var(--textGray) 30%, var(--ep-color-surface)),
        color-mix(in srgb, var(--textGray) 18%, var(--ep-color-surface)));
    background-size: 200% 100%;
    animation: tc-sk 1.4s ease-in-out infinite;
}

@keyframes tc-sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.tc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 2.2rem 1rem; text-align: center; font-size: .82rem; color: var(--textLight); }
.tc-empty__icon { font-size: 1.9rem; color: var(--textGray); line-height: 1; }

/* Same recipe as .epcard__chip, under a name usable outside a ListEditor. */
.tc-chip {
    --c: var(--textGray);
    display: inline-flex;
    align-items: center;
    gap: .28em;
    padding: .22rem .4rem;
    line-height: 1;
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    border-radius: var(--ep-border-radius-sm);
    background: color-mix(in srgb, var(--c) 14%, var(--cardBG));
    color: color-mix(in srgb, var(--c) 72%, var(--textStrong));
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .015em;
    white-space: nowrap;
}

.tc-chip.-ok { --c: var(--ep-success); }
.tc-chip.-off { --c: var(--textGray); }
.tc-chip.-role { --c: var(--ep-secondary); }

/* Filled when the record is live, a hollow ring when it is not. It answers
   that one question, which is why no chip repeats it. */
.tc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ep-success); flex: none; }
.tc-dot.-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--textGray); }

.tc-copy {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: var(--ep-border-radius-sm);
    background: transparent;
    color: var(--textGray);
    font-size: .72rem;
    line-height: 1.3rem;
    text-align: center;
    cursor: pointer;
    flex: none;
    transition: color .12s ease, background .12s ease;
}

.tc-copy:hover { background: color-mix(in srgb, var(--ep-primary) 14%, transparent); color: var(--ep-primary); }
.tc-copy:focus-visible { outline: 2px solid var(--ep-primary); outline-offset: 1px; }
.tc-copy.-done, .tc-copy.-done:hover { background: transparent; color: var(--ep-success); }

.ep-dcard.-epsum .ep-dcard__body { display: flex; flex-direction: column; }
.tc { display: flex; flex-direction: column; flex: 1; gap: .8rem; }
.tc__id { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }

/* 3.5rem and squared, down from the 6rem circle: at a quarter of the page the
   circle was taking a third of the card before a single fact appeared. */
.tc__avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--ep-border-radius-lg, .5rem);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--ep-primary) 80%, var(--textStrong));
    background: color-mix(in srgb, var(--ep-primary) 16%, var(--ep-color-surface));
    border: 1px solid color-mix(in srgb, var(--ep-primary) 34%, var(--ep-border-color));
}

.tc__name { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--textStrong); text-wrap: balance; }
.tc__sub { margin: 0; font-size: .78rem; color: var(--textLight); }
.tc__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.tc__div { height: 1px; background: color-mix(in srgb, var(--ep-border-color) 60%, transparent); }

.tc__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.tc__facts > li { display: grid; grid-template-columns: .95rem minmax(0, 1fr) auto; gap: .5rem; align-items: start; font-size: .8125rem; color: var(--textDefault); line-height: 1.4; }
.tc__facts > li > i[class*="fa"] { width: .95rem; margin-top: .22rem; text-align: center; color: var(--textLight); }
.tc__facts > li > span { min-width: 0; overflow-wrap: anywhere; }
.tc__facts k { display: block; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--textGray); }
.tc__facts b { font-weight: 600; color: var(--textStrong); }
.tc__facts a { color: inherit; text-decoration: none; }
.tc__facts a:hover { color: var(--ep-primary); text-decoration: underline; }
.tc__facts .-none { font-weight: 400; color: var(--textGray); }

/* The row is still drawn so the card keeps its shape, but it steps back: the
   icon dims with the value, and nothing on it invites a click. */
.tc__facts > li.-off > i[class*="fa"] { color: var(--textGray); opacity: .6; }
.tc__facts > li.-off k { color: color-mix(in srgb, var(--textGray) 80%, transparent); }

/* Only the networks that have a value are drawn. The shipped list renders all
   four whatever happens and dims the missing ones with .sl-disabled, so an
   empty record still spends a row on four ghosts. */
.tc__social { display: flex; justify-content: center; gap: .45rem; }

.tc__social a,
.tc__social span {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: var(--ep-border-radius-sm);
    border: 1px solid var(--ep-border-color);
    background: var(--ep-color-surface);
    font-size: .95rem;
    text-decoration: none;
    color: var(--textLight);
    transition: border-color .14s ease, background .14s ease;
}

.tc__social a:hover { border-color: currentColor; background: color-mix(in srgb, var(--ep-primary) 8%, var(--ep-color-surface)); }
.tc__social a:focus-visible { outline: 2px solid var(--ep-primary); outline-offset: 1px; }
.tc__social .-fb { color: var(--fb); }
.tc__social .-in { color: var(--lin); }
.tc__social .-ig { color: var(--ins); }
.tc__social .-tw { color: var(--tw); }

/* Comments. Free — Model.Comments is already loaded — and never seen before,
   because it sits four tabs deep in the edit view. */
.tc__memo {
    padding: .5rem .6rem;
    border-left: 2px solid color-mix(in srgb, var(--ep-warning) 50%, var(--ep-border-color));
    border-radius: 0 var(--ep-border-radius-sm) var(--ep-border-radius-sm) 0;
    background: color-mix(in srgb, var(--ep-warning) 6%, var(--ep-color-surface));
    font-size: .78rem;
    color: var(--textDefault);
}

.tc__memo k { display: block; margin-bottom: .1rem; font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--textGray); }

.tc__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .6rem; margin-top: auto; padding-top: .55rem; border-top: 1px dashed color-mix(in srgb, var(--ep-border-color) 65%, transparent); font-size: .68rem; color: var(--textGray); font-variant-numeric: tabular-nums; }
.tc__foot b { font-weight: 600; color: var(--textLight); }

/* Drawn, but not a link. The row keeps its height on every record so the card
   does not jump as you page through traders, and an absent network reads as
   absent rather than as something you failed to click. */
.tc__social > span {
    cursor: default;
    color: var(--textGray);
    border-color: color-mix(in srgb, var(--ep-border-color) 55%, transparent);
    background: color-mix(in srgb, var(--textGray) 7%, var(--ep-color-surface));
}

/* The brand colour is what says "this one is live", so an unset network drops
   it entirely rather than wearing a faded version of it. */
.tc__social > span.-fb,
.tc__social > span.-in,
.tc__social > span.-ig,
.tc__social > span.-tw { color: var(--textGray); }

.tc__social > span:hover {
    border-color: color-mix(in srgb, var(--ep-border-color) 55%, transparent);
    background: color-mix(in srgb, var(--textGray) 7%, var(--ep-color-surface));
}

/* An empty comment keeps its block for the same reason the socials keep their
   row: the card is the same shape on every record. It loses the amber rule, so
   a glance still separates a note that exists from one that does not. */
.tc__memo.-off {
    border-left-color: color-mix(in srgb, var(--ep-border-color) 70%, transparent);
    background: transparent;
    color: var(--textGray);
}


/* ══════════════════════════════════════════════════════════════════════
   TraderAddressesComponent — the branch cards
   ══════════════════════════════════════════════════════════════════════ */

/* A grid, not the scroller. The shipped .ep-listeditor inside a panel body is
   display:flex; overflow:auto, so you see two branches and scroll for the rest
   on a page whose whole job is looking things up. */
.-epsum .ep-dcard__body .ep-listeditor.-brgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr));
    gap: .65rem;
    padding: .65rem 0 0;
    overflow: visible;
}

.ep-listeditor.-brgrid .listeditor-item { display: flex; flex-direction: column; }
.ep-listeditor.-brgrid .listeditor-item__body { flex: 1; }

.brcard__gln { display: flex; justify-content: flex-end; gap: .35rem; margin-bottom: .1rem; font-size: .66rem; color: var(--textGray); font-variant-numeric: tabular-nums; }
.brcard__gln k { letter-spacing: .04em; text-transform: uppercase; }

/* The notification switches. Padding on all four sides, a real gap between the
   label and the marks, and .35rem between the marks themselves — before this
   they sat hard against the rule above and the card's bottom edge. */
.brcard__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    margin-top: auto;
    padding: .5rem .8rem .6rem;
    border-top: 1px dashed color-mix(in srgb, var(--ep-border-color) 65%, transparent);
}

.brcard__foot k { font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--textGray); }
.tc-chans { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

/* Lit or not: the only question anyone asks of a notification switch. */
.tc-chan {
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 .3rem;
    display: grid;
    place-items: center;
    border-radius: var(--ep-border-radius-sm);
    border: 1px solid color-mix(in srgb, var(--ep-success) 34%, var(--ep-border-color));
    background: color-mix(in srgb, var(--ep-success) 14%, var(--cardBG));
    color: color-mix(in srgb, var(--ep-success) 78%, var(--textStrong));
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.tc-chan.-off { border-color: color-mix(in srgb, var(--ep-border-color) 65%, transparent); background: transparent; color: var(--textGray); }
.ep-listeditor.-brgrid .listeditor-item .tc-chan i[class*="fa"] { position: static; color: inherit; }

/* The card is the dashboard's, unchanged - .ep-dcard, its head, its tinted
   icon box, its count pill, its bracket. These three rules only re-hang what
   the shipped .cnt-panel-body selectors used to give these two panels, now
   that the body is an .ep-dcard__body. */
/* The left card carries the page's left gutter and the gap to the column
   beside it; the two panels only need their own right gutter, or the space
   between the columns would be double. */
.ep-dcard.-epsum { margin: 0 var(--general-gap) var(--general-gap) var(--general-gap); }
.-epsum .ep-dcard { margin: 0 var(--general-gap) var(--general-gap) 0; }
.cnt-timeline.-epsum .ep-dcard { height: 100%; }
.-epsum .ep-dcard__body > .timeln-list { background: none; }

/* A body that holds one list scrolls as one list; the card's own overflow-y
   is what keeps a long timeline inside the panel. */
.modal-window .ep-dcard,
.modal-window .ep-dcard__body { height: 100%; }

/* ── ACTIVITY (TraderTimelineComponent) ──────────────────────────────
   The framework's TimelineHistory draws this, vertical and alternating, the
   way it always did. It owns the dot, the card, the arrow pointing at the
   rail and the badge, and it themes with everything else - which is why the
   hand-rolled rail that briefly replaced it is gone.

   Only two things are added here. */

.-epsum .ep-dcard__body { container-type: inline-size; container-name: tlpanel; }

/* 1. The list sits on the panel, not on its own ground. */
.-epsum .ep-dcard__body .timeln-list { background: none; padding: .6rem .4rem 1rem; }

/* 2. Narrow panels fold the alternating layout onto a single rail.
   The control has no parameter for this and LabelPosition is decided in C#,
   which cannot see how wide the panel ended up - the summary gives it three
   quarters of the page, the modal gives it all of it. A container query can,
   and it collapses to the geometry the control's own -after mode uses, so
   nothing here invents a layout. */
@container tlpanel (max-width: 620px) {

    .-epsum .-vertical.-alternate .timeln-item,
    .-epsum .-vertical.-alternate .timeln-item:nth-child(2n+1) {
        width: 100%;
        margin-left: 0;
        padding-left: calc(var(--ep-dotsize) + 1rem);
        padding-right: 0;
    }

    .-epsum .-vertical.-alternate .timeln-item .timeln__icon,
    .-epsum .-vertical.-alternate .timeln-item:nth-child(2n+1) .timeln__icon {
        left: 0;
        right: initial;
    }

    .-epsum .-vertical.-alternate .timeln-item::before,
    .-epsum .-vertical.-alternate .timeln-item:nth-child(2n+1)::before {
        left: calc(var(--ep-dotsize) / 2);
        right: initial;
    }

    /* The little arrow flips back to the left edge with the card. */
    .-epsum .-vertical.-alternate .timeln-item .timeln__content:before,
    .-epsum .-vertical.-alternate .timeln-item:nth-child(2n+1) .timeln__content:before {
        left: -5px;
        right: initial;
    }
}


/* ── THE DOT AND THE BADGE ────────────────────────────────────────────
   The control draws the dot as a solid saturated circle with a white glyph
   and a hard drop shadow, and the badge as a solid pill of the same colour.
   Six of those down a column is a lot of paint for information that is
   mostly "this is fine".

   Softened to the recipe the rest of the summary uses - a tinted fill, a
   ring in the tone, the glyph in the tone - so the colour still reads at a
   glance but the timeline stops shouting. One variable carries the tone and
   the dot, the ring, the badge and the card's hover edge all read it.

   Scoped to .-epsum: the CRM contact timeline and the trader timeline share
   it, and every other TimelineHistory in the app is left alone. */

.-epsum .ep-timeline { --c: var(--ep-secondary); --ep-dotsize: 2.4rem; }
.-epsum .timeln-item.-success { --c: var(--ep-success); }
.-epsum .timeln-item.-warning { --c: var(--ep-warning); }
.-epsum .timeln-item.-danger { --c: var(--ep-danger); }
.-epsum .timeln-item.-info { --c: var(--ep-info); }

.-epsum .timeln__icon,
.-epsum .timeln-item.-success .timeln__icon,
.-epsum .timeln-item.-warning .timeln__icon,
.-epsum .timeln-item.-danger .timeln__icon,
.-epsum .timeln-item.-info .timeln__icon {
    /* The ring is the panel's own surface, so the dot reads as sitting on
       the rail rather than as a disc with a white outline drawn on it. */
    border: 3px solid var(--ep-color-surface-alt);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 45%, var(--ep-border-color));
    background: color-mix(in srgb, var(--c) 16%, var(--ep-color-surface-alt));
    color: color-mix(in srgb, var(--c) 78%, var(--textStrong));
    font-size: .95rem;
}

/* Hover fills it in - the one moment the saturated colour earns its place. */
.-epsum .timeln-item:hover .timeln__icon,
.-epsum .timeln-item.-success:hover .timeln__icon,
.-epsum .timeln-item.-warning:hover .timeln__icon,
.-epsum .timeln-item.-danger:hover .timeln__icon,
.-epsum .timeln-item.-info:hover .timeln__icon {
    background: color-mix(in srgb, var(--c) 30%, var(--ep-color-surface-alt));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 75%, transparent);
}

/* The document code, as a chip rather than a solid pill - the same recipe as
   .tc-chip on the card beside it. */
.-epsum .timeln__header .badge,
.-epsum .timeln-item.-success .badge,
.-epsum .timeln-item.-warning .badge,
.-epsum .timeln-item.-danger .badge,
.-epsum .timeln-item.-info .badge {
    padding: .2rem .45rem;
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    border-radius: var(--ep-border-radius-sm);
    background: color-mix(in srgb, var(--c) 13%, var(--ep-color-surface-alt));
    color: color-mix(in srgb, var(--c) 72%, var(--textStrong));
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

/* The caption is the thing you read first, so it gets the weight and the
   text colour; the control leaves it at 1rem regular. */
.-epsum .timeln__body { font-size: .9rem; font-weight: 600; color: var(--textStrong); }
.-epsum .timeln__footer { font-size: .78rem; font-style: normal; opacity: 1; color: var(--textGray); font-variant-numeric: tabular-nums; }

/* The card's edge picks up the row's tone instead of the theme accent. */
.-epsum .timeln__content { border-color: color-mix(in srgb, var(--c) 18%, var(--ep-border-color)); }

/* Both halves of a row open the document or the action, so both say so.
   The control leaves the cursor alone, which made a clickable card look
   like a label. */
.-epsum .timeln__content,
.-epsum .timeln__icon { cursor: pointer; }

.-epsum .timeln__content:hover,
.-epsum .timeln__content:hover:before,
.-epsum .timeln-item.-success .timeln__content:hover,
.-epsum .timeln-item.-success .timeln__content:hover:before,
.-epsum .timeln-item.-warning .timeln__content:hover,
.-epsum .timeln-item.-warning .timeln__content:hover:before,
.-epsum .timeln-item.-danger .timeln__content:hover,
.-epsum .timeln-item.-danger .timeln__content:hover:before,
.-epsum .timeln-item.-info .timeln__content:hover,
.-epsum .timeln-item.-info .timeln__content:hover:before {
    border-color: color-mix(in srgb, var(--c) 55%, var(--ep-border-color));
}

@media (prefers-reduced-motion: reduce) {
    .-epsum .timeln__icon, .-epsum .timeln__content { transition: none; }
}

/* The kind filter, in the panel header. Absent, not disabled, when there is
   nothing to filter. */
.tl-pills { display: flex; gap: .25rem; }
.tl-pills button { padding: .2rem .5rem; border: 1px solid transparent; border-radius: var(--ep-border-radius-sm); background: transparent; color: var(--textLight); font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; }
.tl-pills button:hover { color: var(--textStrong); background: color-mix(in srgb, var(--ep-primary) 10%, transparent); }
.tl-pills button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--ep-primary) 34%, transparent); background: color-mix(in srgb, var(--ep-primary) 13%, var(--ep-color-surface-alt)); color: color-mix(in srgb, var(--ep-primary) 72%, var(--textStrong)); }
.tl-pills button:focus-visible { outline: 2px solid var(--ep-primary); outline-offset: 1px; }
.tl-pills + .header-btn { margin-left: .35rem; }

@media (max-width: 1080px) {
    .cnt-panel-body .ep-listeditor.-brgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .tc-skel i { animation: none; }
    .tl__item, .tc-copy, .tc__social a { transition: none; }
}

/* #endregion */