@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/*== custom colors ==*/
:root {
    /*    --sz-color: #5A70CD; purple */
    --sz-color: #0A5BD4;
    --sz-gray: #4D4D4D;
    --sz-light-gray: #F6F8FA;
    --sz-gray-button-hover: #e0e0e0;
    --salezbird-tooltip-bg: #ffffff; /* white bubble background */
    --salezbird-tooltip-border: #cfcfcf; /* light grey border */
    --salezbird-tooltip-text: #6b6b6b; /* medium grey text */
    --sz-gray1: #ced4da;
    --sz-gray2: #6B6B6B;
    --sz-gray2-button-hover: #F5F5F5;
}

/*html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}*/
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

html, body {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.button-link {
    text-decoration: unset;
}

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

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

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
}

.title.title-secondary {
    padding-top: 0.313rem;
    padding-bottom: 0;
    color: var(--bs-secondary-color);
}

.title-header-text {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 600;
    letter-spacing: 0rem;
    padding: 0.3125rem 0;
}

.title-content-text {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.5rem;
    letter-spacing: 0rem;
}

.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.block-content {
    width: 31.25rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 100%;
}

/*== Customization ==*/

a {
    text-decoration: none;
}

.cw-160 {
    max-width: 160px;
    width: 100%;
}

.cw-240 {
    max-width: 240px;
    width: 100%;
}

.cw-320 {
    max-width: 320px;
    width: 100%;
}

.cw-400 {
    max-width: 400px;
    width: 100%;
}

.cw-480 {
    max-width: 480px;
    width: 100%;
}

.cw-480-large {
    max-width: 480px;
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    padding: 3px 0 3px 0;
}

.salezbird-textbox-smart {
    background-color: #eef4ff;
    border-color: #c7dbff;
}

.salezbird-textbox-smart input,
.salezbird-textbox-smart .dxbl-text-edit-input,
.salezbird-textbox-smart textarea {
    background-color: transparent;
}

.salezbird-textbox-smart:focus-within {
    background-color: #eef4ff;
    border-color: #9ec1ff;
}

[data-bs-theme="dark"] .salezbird-textbox-smart {
    background-color: #1f2a44;
    border-color: #2f4c7a;
}

[data-bs-theme="dark"] .salezbird-textbox-smart:focus-within {
    background-color: #1f2a44;
    border-color: #3b66b3;
}

.grid-icon-delete {
    width: 16px;
    height: 16px;
    background-image: url("../images/icons/grid-toolbar-delete.svg");
    margin: 0 8px 0 0;
}
.grid-toolbar-new {
    width: 16px;
    height: 16px;
    background-image: url("../images/icons/grid-toolbar-new.svg");
    margin: 0 8px 0 0;
}
.button-icon-add {
    width: 16px;
    height: 16px;
    background-image: url("../images/icons/add.svg");
    margin: 0 0 0 0;
}
.icon-Products {
    width: 16px;
    height: 16px;
    background-image: url("../images/icons/Products.svg");
    margin: 0 0 0 0;
}
.icon-Supplier {
    width: 16px;
    height: 16px;
    background-image: url("../images/icons/user-profile.svg");
    margin: 0 0 0 0;
}
.icon-Invoice {
    width: 16px;
    height: 16px;
    background-image: url("../images/icons/SalesInvoice.svg");
    margin: 0 0 0 0;
}

.salezbird-submenu-indicator {
    float: right;
}
.dx-card {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-radius: 4px;
    background-color: #fff;
    margin: 2px 2px 3px;
    width: 100%;
    height: 100%;
}

/*== Page Standard Style ==*/
h4 {
    font-weight: bold;
}

/*== DxTree - Tree menu style ==*/
.sz-dxtr-nd {
    color: var(--sz-gray);
    margin: 0px 0px 0px 0px;
}

.sz-dxtr-nd2 {
    color: red;
    margin: 0px 0px 0px 0px;
}

.sz-dxtr-nd-i {
    -webkit-text-stroke: 0.8px;
}

/*== Drawer DxTree menu vertical scrollbar ==*/
::-webkit-scrollbar {
    width: 1em;
}

/*== DxGrid - Set Search Text box container size ==*/
.dxbl-grid > .dxbl-grid-top-panel > .dxbl-grid-search-box-container {
    width: 100%;
}

/*== DxGrid - Standard Search container style ==*/
.sz-dxgrd-srch-cntr {
    display: flex;
    gap: 10px;
}

/*== DxGrid - Button Link Style ==*/
.sz-dxgrd-btn-link {
    font-weight: 400;
    font-size: 14px;
    text-underline-offset: 3px;
}
    
/*== DxGrid - grid container style ==*/
.grid-container {
    margin-top: 16px; /* Adjust the value as needed */
}

/*== Login Register box style ==*/
.sb-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    padding-top: 12px
}

/* On small viewport heights, pin content to the top and add breathing room */
@media (max-height: 600px) {
    .sb-login-container {
        align-items: flex-start; /* top-align: prevents "floating up" */
    }
}

/*== Login Register box style ==*/
.sb-register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    padding-top: 12px
}

/* On small viewport heights, pin content to the top and add breathing room */
@media (max-height: 800px) {
    .sb-register-container {
        align-items: flex-start; /* top-align: prevents "floating up" */
    }
}

.sb-login-box {
    background: white;
    border-radius: 15px;
    border: 1px solid #ccc;
    width: 100%;
    max-width: 400px;
    padding: 20px;
    margin: 10px 20px 80px 20px;
}

.small-grey {
    font-size: 13px;
    color: #808080;
}

/*== Label style ==*/
.sb-label {
    font-weight: 400;
    font-size: 15px;
    padding-right: 10px;
}

/*== Validation Error Message ==*/
.sb-validate-err {
    font-weight: 500;
    font-size: 13px;
    color: red;
}

/*== DxButton - Standard button and button icon style ==*/
.sz-dxbtn {
    font-weight: 500;
    font-size: 15px;
}
.sz-dxbtn-i {
    -webkit-text-stroke: 1px;
}

.sb-btn-login {
    font-weight: 500;
    font-size: 16px;
    border-radius: 2px;
    padding: 10px 0 10px 0;
    margin: 10px 0 10px 0;
}

.sz-btn-popup {
    width: 100px;
    height: 35px;
}

/*== Form layout style ==*/
.sz-form-block {
    padding: 10px 0 0 0;
    width: 100%;
}

.sz-textbox-block {
    padding: 10px 0 10px 0;
}

.sz-button-block {
    padding: 10px 0 10px 0;
}

/*== DxButton - Link Hover Style ==*/
.dxbl-btn.dxbl-btn-link, .dxbl-btn.dxbl-btn-outline-link, .dxbl-btn.dxbl-btn-text-link {
    --dxbl-btn-hover-color: var(--sz-color);
}

/*== DxButton - Secondary Style Hover Color - remove extra shading ==*/
.dxbl-btn-standalone.dxbl-btn-text-secondary {
/*    --dxbl-btn-hover-color: var(--sz-color);*/
    --dxbl-btn-hover-background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

/*== DxButton - Secondary Style Color ==*/
.dxbl-btn.dxbl-btn-text-secondary {
    --dxbl-btn-color: var(--sz-gray);
}


/*== Round Panel ==*/
.sz-round-panel {
    border-radius: 15px;
    border: 1px solid #ccc;
    padding: 10px 30px 10px 30px;
    margin-bottom: 20px;
}

/*== Logo ==*/
.logo {
    width: 200px;
    height: 53px;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 2rem;
}

.logo-side {
    width: 170px;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
}

/*== settings button bottom margin ==*/
.sz-bottom-margin {
    margin: 0 0 10px 0;
}

@media (max-width: 768px) {
    .sz-bottom-margin {
        margin: 0 0 80px 0;
    }
}

@media (min-width: 768px) {
    .PC-PopupWindows {
        display: flex;
        min-width: 800px;
        height: 700px;
    }
}

.sb-chart-box {
    background: white;
    border-radius: 15px;
    border: 1px solid #ccc;
    width: 100%;
    /*max-width: 400px;*/
    padding: 20px;
    /*margin: 10px 20px 80px 20px;*/
}

    /*::-webkit-scrollbar-track-piece {
    background: #d6eaf8;
}

::-webkit-scrollbar-thumb {
    background: #0a58ca;
}*/




/* salezbird topbar */
.salezbird-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--sz-light-gray); /* salezbird's light grey */
    color: #24292f;
    padding: 0 16px;
    height: 56px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 14px;
    border-bottom: 1px solid #d0d7de;
    z-index: 1000;
}

.salezbird-topbar-left {
    display: flex;
    align-items: center;
    gap: 0px;
}

.salezbird-logo {
    color: #24292f; /* dark for visibility */
    font-size: 2rem;
    margin-left: 8px;
    margin-right: 16px;
    text-decoration: none;
    margin-top: -10px; /* Adjust this value as needed */
}

.salezbird-search {
    background: #22272e;
    border: 1px solid #444d56;
    border-radius: 6px;
    color: #c9d1d9;
    padding: 4px 12px;
    margin-right: 16px;
    width: 200px;
    font-size: 14px;
}

.salezbird-link {
    color: #24292f; /* dark for visibility */
    text-decoration: none;
    margin-right: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

    .salezbird-link:hover {
        background: #eaecef;
    }

.salezbird-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.salezbird-icon-link {
    color: #24292f; /* dark for visibility */
    font-size: 1.3rem;
    margin-right: 8px;
    text-decoration: none;
    position: relative;
}

    .salezbird-icon-link:hover {
        color: #0969da;
    }

.salezbird-profile-menu {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 4px;
}

.salezbird-profile-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #444d56;
    object-fit: cover;
}



/* salezbird topbar nav */
.salezbird-topbar-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 24px;
}

.salezbird-topbar-link {
    color: #333;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.2s;
    font-size: 1rem;
    font-weight: 400;
    background: none;
    border: none;
}

    .salezbird-topbar-link.active,
    .salezbird-topbar-link:hover {
        background: var(--sz-gray-button-hover);
    }

@media (max-width: 768px) {
    .salezbird-topbar-nav {
        display: none !important;
    }
}

/* salezbird dropdown menu */
.salezbird-dropdown-menu {
    position: absolute;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    z-index: 1000;
    min-width: 120px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 6px;
    padding: 4px 0;
}

    .salezbird-dropdown-menu .dropdown-item {
        width: 100%;
        background: none;
        border: none;
        text-align: left;
        padding: 8px 16px;
        font-size: 1rem;
        color: #24292f;
        cursor: pointer;
        transition: background 0.15s;
    }

        .salezbird-dropdown-menu .dropdown-item:hover {
            background: var(--sz-gray-button-hover);
        }



/*salezbird sidebar*/
.salezbird-sidebar {
    position: fixed;
    top: 56px; /* height of your topbar */
    left: 0;
    width: 180px;
    height: calc(100% - 48px);
    background: #fff;
    border-right: none !important; /* remove vertical right border line */
    /* box-shadow: 2px 0 8px rgba(149, 157, 165, 0.2); */ /* remove vertical right border line */
    border-right: 1px solid #e1e4e8;
    display: flex;
    flex-direction: column;
    z-index: 200;
    padding-top: 16px;
    margin-left: 10px;
}

.salezbird-sidebar-link {
    color: #24292f;
    text-decoration: none;
    padding: 10px 24px;
    font-size: 1rem;
    transition: background 0.1s;
    border-radius: 6px;
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: 0rem;
}

    .salezbird-sidebar-link:hover {
        background: var(--sz-light-gray);
    }

    .salezbird-sidebar-link.active {
        background: #eaeef2;
        font-weight: 500;
    }

@media (max-width: 768px) {
    .salezbird-sidebar {
        display: none !important;
    }
}

.salezbird-top-btn {
    background-color: var(--sz-light-gray);
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 2px 8px;
    color: #24292f;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    box-shadow: 0 1px 0 rgba(27,31,35,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .salezbird-top-btn:hover,
    .salezbird-top-btn:focus {
        background-color: #eaeef2;
        border-color: #b6bac0;
        outline: none;
    }

    .salezbird-top-btn:active {
        background-color: #d8dee4;
        border-color: #b6bac0;
    }


.hamburger-icon {
    font-size: 1.1rem;
    display: inline-flex; /* Use flex for centering */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    text-align: center;
    line-height: 1;
}


/* Hide hamburger by default */
.salezbird-hamburger {
    display: none;
}

/* Show hamburger only on screens <= 768px (mobile/tablet) */
@media (max-width: 768px) {
    .salezbird-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}



/* Hamburger sidebar styles */
.salezbird-hamburger-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background: #161b22;
    color: #c9d1d9;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    z-index: 1101;
    padding-top: 20px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: transform 0.2s cubic-bezier(.4,0,.2,1);
    font-size: 1rem;
    overflow-y: auto;
}

.salezbird-hamburger-link {
    color: #c9d1d9;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 6px;
    margin: 0 8px;
    transition: background 0.15s;
    font-weight: 500;
}

    .salezbird-hamburger-link:hover,
    .salezbird-hamburger-link:focus {
        background: #21262d;
        color: #58a6ff;
    }

.salezbird-sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(22,27,34,0.6);
    z-index: 1100;
    display: block;
}

/* Hide sidebar and backdrop by default on desktop */
@media (min-width: 769px) {
    .salezbird-hamburger-sidebar,
    .salezbird-sidebar-backdrop {
        display: none !important;
    }
}

/* Show hamburger button only on mobile */
@media (max-width: 768px) {
    .salezbird-hamburger {
        display: inline-block;
    }
}


/* salezbird body container */
.salezbird-body-container {
    width: 100vw;
    max-width: none;
    margin: 0;
    height: calc(100vh - 56px); /* Adjust for your topbar */
    overflow: auto;
    padding: 0; /* Remove side padding if you want true edge-to-edge */
    box-sizing: border-box;
}

/* Inner content stays centered and max-width */
.salezbird-body-inner {
    max-width: 1400px;
    margin: 0 auto;
    /*padding: 0.5rem 1rem 3rem 200px !important;*/ /* Adjust left padding for sidebar */
    padding: 0.5rem 1.5rem 3rem 1.5rem !important;
    box-sizing: border-box;
    transition: padding 0.2s ease-in-out;
}

@media (min-width: 1400px) {
    .salezbird-body-inner {
        padding: 0.5rem 2.5rem 3rem 2.5rem !important;
    }
}

@media (max-width: 1376px) {
    .salezbird-body-inner {
        padding: 0.5rem 2rem 3rem 2rem !important;
    }
}

@media (max-width: 768px) {
    .salezbird-body-container {
        padding-left: 15px !important;
    }
    .salezbird-body-inner {
        padding: 0.5rem 1rem 3rem 0px !important;
    }
}



/* salezbird profile btn */
.salezbird-profile-btn {
    display: flex;
    align-items: center;
    justify-content: center; /* Add this for horizontal centering */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50px;
    transition: background 0.15s;
    min-width: 40px;
    min-height: 40px;
}

    .salezbird-profile-btn:hover,
    .salezbird-profile-btn:focus {
        background: var(--sz-light-gray);
        outline: none;
    }

.salezbird-profile-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #0A5BD4;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 50%;
    margin-right: 0; /* Ensure no margin on the right */
    user-select: none;
    letter-spacing: 0.5px;
}




/* salezbird profile dropdown */
.salezbird-profile-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    min-width: 200px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 1000;
    padding: 4px 0;
    margin-top: 8px;
}

.salezbird-profile-submenu {
    position: relative;
}

.salezbird-profile-submenu-dropdown {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: 6px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    min-width: 200px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: 4px 0;
    z-index: 1001;
}

@media (max-width: 768px) {
    .salezbird-profile-submenu-dropdown {
        top: 100%;
        right: 0;
        left: auto;
        margin-right: 0;
        margin-top: 6px;
    }
}

.salezbird-profile-submenu-dropdown .dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 30px;
    background: none;
    border: none;
    text-align: left;
    color: #333;
    font-weight: 400;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.salezbird-profile-submenu-dropdown .dropdown-item:hover,
.salezbird-profile-submenu-dropdown .dropdown-item:focus {
    background: var(--sz-gray-button-hover);
    outline: none;
}

[data-bs-theme="dark"] .salezbird-profile-submenu-dropdown {
    background: #161b22;
    border-color: #30363d;
}

[data-bs-theme="dark"] .salezbird-profile-submenu-dropdown .dropdown-item {
    color: #c9d1d9;
}

[data-bs-theme="dark"] .salezbird-profile-submenu-dropdown .dropdown-item:hover,
[data-bs-theme="dark"] .salezbird-profile-submenu-dropdown .dropdown-item:focus {
    background: #21262d;
    color: #58a6ff;
}

    .salezbird-profile-dropdown .dropdown-item {
        display: block;
        width: 100%;
        padding: 10px 30px;
        background: none;
        border: none;
        text-align: left;
        color: #333;
        font-weight: 400;
        font-size: 15px;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }

        .salezbird-profile-dropdown .dropdown-item:hover,
        .salezbird-profile-dropdown .dropdown-item:focus {
            background: var(--sz-gray-button-hover);
            outline: none;
        }

.salezbird-profile-dropdown-header {
    padding: 10px 30px;
    font-weight: 600;
    color: #444;
    font-size: 16px;
    /*background: #f8f9fa;*/ /* Optional: subtle background */
    /*border-bottom: 1px solid #eee;*/ /* Optional: subtle separator */
}


/* salezbird separator */
.salezbird-separator-dropdown {
    margin: 8px 0px 0 0px; /* top, right, bottom, left */
    border-top: 1px solid #e0e0e0;
    height: 0;
}

.salezbird-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1200;
}

.salezbird-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 32px 28px 28px 28px;
    width: 360px;
    max-width: calc(100vw - 32px);
    z-index: 1201;
}

.salezbird-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #666;
}

.salezbird-about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.salezbird-about-content img {
    width: 140px;
    height: auto;
}

.salezbird-about-title {
    font-weight: 600;
    font-size: 18px;
    color: #222;
}

.salezbird-about-version {
    color: #666;
    font-size: 14px;
}

.salezbird-page-separator {
    margin: 8px 0px 16px 0px; /* top, right, bottom, left */
    border-top: 1px solid #e0e0e0;
    height: 0;
}

.salezbird-page-separator-blankline {
    height: 8px; /* Adjust the height as needed */
    width: 100%;
    display: block;
}


/* profile view */
.salezbird-profile-view {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 32px 24px 24px 24px;
    max-width: 800px;
    margin: 16px 0 0 0; /* Remove auto centering, add top margin only */
    box-shadow: none !important;
}


    .salezbird-profile-view > div {
        margin-bottom: 18px;
    }

    .salezbird-profile-view strong {
        min-width: 120px;
        display: inline-block;
        color: #333;
    }

    .salezbird-profile-view .btn {
        min-width: 100px;
    }


.salezbird-profile-edit {
    max-width: 800px;
    width: 100%;
/*    margin: 0 auto;*/
}


/* salezbird btn */
.salezbird-btn {
    background: #0A5BD4;
    color: #fff;
    border: none;
    border-radius: 2px;
    padding: 6px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0px;
}
.salezbird-btn:hover,
.salezbird-btn:focus {
    background: #084aaf;
    color: #fff;
}

.salezbird-btn-sm {
    padding: 4px 10px;
    font-size: 13px;
}

/* Hide the native browser clock picker icon on time inputs */
.sb-time::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.salezbird-btn-cancel {
    background: #e0e0e0; /* Light gray background */
    color: #333; /* Dark text for contrast */
    border: none;
    border-radius: 2px;
    padding: 6px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

    .salezbird-btn-cancel:hover,
    .salezbird-btn-cancel:focus {
        background: #bdbdbd; /* Slightly darker gray on hover */
        color: #222;
    }

.salezbird-btn-delete {
    background: #fdeaea; /* Light red background */
    color: #c82333; /* Bootstrap's danger color for text */
    border: none;
    border-radius: 2px;
    padding: 6px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

    .salezbird-btn-delete:hover,
    .salezbird-btn-delete:focus {
        background: #f8d7da; /* Slightly darker light red on hover */
        color: #a71d2a;
    }

.salezbird-btn-outline {
    background: transparent;
    color: var(--sz-gray2);
    border: 1px solid var(--sz-gray1);
    border-radius: 6px;
    padding: 0.375rem 1rem;
    font-size: 14px;
    font-weight: 400;
    transition: background 0.2s, color 0.2s;
}

    .salezbird-btn-outline:hover {
        background: var(--sz-light-gray);
        color: var(--sz-color);
        border-color: var(--sz-color);
    }

    .salezbird-btn-outline:disabled,
    .salezbird-btn-outline:disabled:hover {
        background: transparent;
        color: var(--sz-gray1);
        border-color: var(--sz-gray1);
        cursor: not-allowed;
        opacity: 0.5;
    }


.salezbird-btn-lg {
    padding: 0.75rem 2rem;
    font-size: 16px;
    font-weight: 600;
}

/* strong */
strong {
    font-weight: 500; /* or 400 for normal, adjust as needed */
}

/* salezbird combobox */
.salezbird-combobox {
/*    min-width: 240px;
    max-width: 480px;*/
}

    .salezbird-combobox:focus,
    .salezbird-combobox:active {
        border-color: #0969da;
    }

/* Small combobox: fixed width inside salezbird-form-row */
.salezbird-combobox-small {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    flex: 0 0 120px !important; /* overrides flex:1 1 0 from .salezbird-textbox/.salezbird-combobox */
}

    .salezbird-combobox-small :focus,
    .salezbird-combobox-small :active {
        border-color: #0969da;
    }

/* salezbird combobox dropdown */
.salezbird-combobox-dropdown,
.salezbird-combobox-dropdown .dxbl-list-box-render-container,
.salezbird-combobox-dropdown .dxbl-list-item {
    font-size: 16px !important; /* Or any size you require */
}


/* salezbird textbox */
.salezbird-textbox {
    min-width: 220px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    padding: 0px 4px; /* more compact look */
    font-size: 1rem;
    background-color: #fff;
    color: #212529;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-top: 4px;
}

    .salezbird-textbox:focus,
    .salezbird-textbox:active {
        border-color: #0969da;
    }

.salezbird-textonly {
    border: none !important;
    background: transparent !important;
    padding-left: 0 !important;
    box-shadow: none !important;
    color: inherit;
    min-height: 38px; /* match input height if needed */
    display: flex;
    align-items: center;
}

/* Make native Bootstrap selects match Salezbird/DevExpress editor height */
select.form-select.salezbird-textbox {
    height: 36px;
    min-height: 36px;
    padding: 2px 8px;
    font-size: 1rem;
}

/* salezbird dateedit */
.salezbird-dateedit,
.salezbird-dateedit .dxbl-dateedit-input,
.salezbird-dateedit input {
    min-width: 140px !important;
    max-width: 220px !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 1rem !important;
}

    .salezbird-dateedit .dxbl-dateedit-input:focus,
    .salezbird-dateedit input:focus {
        border-color: #0969da !important;
        outline: none !important;
    }



/* salezbird chart container */
.salezbird-chart-container {
    width: 100%;
    max-width: 900px;
    margin: 10px 0; /* auto - centering, 0 - remove centering */
    padding: 1.5rem 1rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.salezbird-chart-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.month-nav-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row !important;
}

@media (max-width: 576px) {
    .salezbird-chart-controls {
        flex-direction: column;
        align-items: flex-start;
    }
    .month-nav-row {
        flex-direction: row !important;
        gap: 4px;
    }

}


/* salezbird std panel */
.salezbird-std-panel {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 16px 20px 16px 20px;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    width: 100%;
}

@media (max-width: 576px) {
    .salezbird-std-panel {
        padding: 10px 8px 10px 8px;
        margin-bottom: 12px;
        border-radius: 6px;
    }
    .body-container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .salezbird-page-headline {
        font-size: 16px;
        padding: 4px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

    .salezbird-std-panel legend,
    .salezbird-std-panel-title {
        font-weight: 600;
        font-size: 1.2rem;
        margin-bottom: 12px;
        color: #333;
        display: block;
    }

.salezbird-panel-separator {
    border-bottom: 2px solid #e0e0e0;
    margin: 8px 0 20px 0;
    width: calc(100% + 40px); /* 20px left + 20px right panel padding */
    position: relative;
    left: -20px;
}

@media (max-width: 576px) {
    .salezbird-panel-separator {
        width: calc(100% + 16px); /* 8px left + 8px right panel padding */
        left: -8px;
    }
}


/* accountsettings password row */
.accountsettings-password-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

    .accountsettings-password-row > * {
        flex: 1 1 200px;
        min-width: 0;
    }

.accountsettings-change-password-btn {
    max-width: 220px;
    width: 100%;
    min-width: 120px;
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 600px) {
    .accountsettings-password-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

        .accountsettings-password-row > * {
            flex: unset;
            width: 100%;
        }
}



/* salezbird page headline */
.salezbird-page-headline {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Moves button to the right */
    gap: 2px; /* Optional: adds space between headline and button */
    font-size: 22px;
    font-weight: 600;
    padding: 5px 0 5px 0px;
    color: var(--sz-gray)
}

.salezbird-page-subheadline {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Moves button to the right */
    gap: 1rem; /* Optional: adds space between headline and button */
    font-size: 16px;
    font-weight: 400;
    color: var(--sz-gray)
}


/* salezbird report popup */
.salezbird-report-popup {
    width: 90vw !important;
    height: 90vh !important;
    max-width: 1000px !important;
    max-height: 90vh !important;
}

@media (max-width: 576px) {
    .salezbird-report-popup {
        margin-left: 12px !important;
        width: 95vw !important;
    }
}

/* salezbird popup */
.salezbird-popup {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    border: 1px solid #e0e0e0;
    padding: 24px 24px 16px 24px;
    min-height: 300px;
    color: #212529;
    font-size: 1rem;
    /* Responsive height */
    max-height: 100vh;
    overflow-y: auto;
}


@media (max-width: 576px) {
    .salezbird-popup {
        max-width: 95vw;
    }
}

.salezbird-popup-item {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.25rem;
}

@media (max-width: 576px) {
    .salezbird-popup-item {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0.5rem 0.25rem !important;
    }
}

.salezbird-popup-caption {
    font-weight: 500;
    font-size: 1rem;
    color: #0A5BD4;
    padding-bottom: 0.25rem;
    letter-spacing: 0.01em;
    /* Add more styles as needed for your design */
}

@media (max-width: 576px) {
    .salezbird-popup-caption {
        font-size: 0.95rem;
        padding-bottom: 0.15rem;
    }
}

.salezbird-popup-layout-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.25rem 0;
}

@media (max-width: 576px) {
    .salezbird-popup-layout-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.15rem 0;
    }
}


/* salezbird modal wide */
.modal-dialog.salezbird-modal-wide {
    max-width: 1000px;
    width: 95%;
    padding-left: 16px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 576px) {
    .modal-dialog.salezbird-modal-wide {
        padding-left: 0 !important;
    }
}

.modal,
.modal-dialog,
.modal-content,
.modal-body {
    overflow: visible;
}

.dxbl-popup,
.dxbl-calendar {
    z-index: 3000 !important;
}

/* salezbird grid */
.salezbird-grid {
    min-width: 220px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    font-size: 1rem;
    background-color: #fff;
    color: #212529;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin: 8px 0px;
    white-space: normal;
    --dxbl-grid-font-size: 1rem; /* override default dxbl grid font size*/
    --dxbl-grid-header-font-weight: 400 !important; /* override grid header font weight */
}
.salezbird-grid-short {
    min-width: 220px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    font-size: 12px;
    background-color: #fff;
    color: #212529;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin: 8px 0px;
    white-space: normal;
    --dxbl-grid-font-size: 12px; /* override default dxbl grid font size*/
    --dxbl-grid-header-font-weight: 400 !important; /* override grid header font weight */
}
/* mobile: allow text wrap in grid cells �X do NOT set white-space:nowrap here */

/* lighter, less prominent text for empty grid areas */
.salezbird-empty-grid-text {
    font-weight: 300; /* lighter weight */
    color: var(--sz-gray2);
    font-size: 0.95rem;
    padding: 0.5rem 0;
    opacity: 0.9;
    min-height:28px;
}

/* Reduce empty grid area height (DevExpress Blazor Grid) */
.salezbird-grid-short .dxbl-grid-empty-data-area,
.salezbird-grid-short .dxbl-grid-empty-data-row,
.salezbird-grid-short .dxbl-grid-empty-data-cell,
.salezbird-grid-short .dxbl-grid-empty-data {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.salezbird-grid-selected-row td {
    background-color: #cce5ff !important;
    color: #003d80 !important;
}

/* �w�w Detail page plain-table styling �X matches salezbird-grid look �w�w�w�w�w�w�w */
.salezbird-detail-table {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ced4da;
    font-size: 1rem;
    background-color: #fff;
    color: #212529;
    margin: 8px 0;
    border-collapse: collapse;
}
.salezbird-detail-table th,
.salezbird-detail-table td {
    border: 1px solid #ced4da;
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
}
.salezbird-detail-table thead th {
    background-color: #fff;
    color: #212529;
    font-weight: 400;
    border-bottom: 2px solid #ced4da;
}



/* salezbird form layout */
.salezbird-form-layout .dxbl-fl,
.salezbird-form-layout .dxbl-fl-item,
.salezbird-form-layout .dxbl-fl-col,
.salezbird-form-layout .dxbl-fl-row {
    padding-left: 0 !important;
    margin-left: 0 !important;
}


/* salezbird form row */
.salezbird-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

    .salezbird-form-row label {
        min-width: 120px; /* Adjust as needed */
        margin-right: 12px;
        margin-bottom: 0;
        text-align: left;
    }

        .salezbird-form-row label.salezbird-label-info {
            color: var(--sz-gray);
            background: var(--sz-light-gray);
            border-radius: 4px;
            font-size: 1rem;
        }

    .salezbird-form-row .salezbird-textbox,
    .salezbird-form-row .salezbird-combobox {
        flex: 1 1 0;
    }

/* Helper text under a form-row input.
   MUST be a sibling of .salezbird-form-row, never a child: .salezbird-form-row is
   display:flex, so a hint placed inside it becomes a third flex item squeezed beside
   the input instead of sitting under it. The left margin matches the label column
   (min-width 120px + margin-right 12px) so the hint lines up with the input. */
.salezbird-form-hint {
    margin-left: 132px;
    margin-top: 2px;
    margin-bottom: 4px;
    font-size: 0.85em;
    color: var(--sz-gray, #6c757d);
}


.salezbird-form-row-flex {
    display: flex;
    gap: 32px; /* Adjust spacing between columns as needed */
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}


.salezbird-form-row-inputgroup {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

    .salezbird-form-row-inputgroup .salezbird-textbox {
        flex: 1 1 150px; /* Adjust as needed */
        min-width: 150px;
        width: 100%;
    }

    .salezbird-form-row-inputgroup .salezbird-icon-btn {
        flex-shrink: 0;
        margin-left: 0.5rem;
        padding: 0.25rem 0.75rem;
        font-size: 1.2rem;
    }

/* Right-align a form-row (label + control grouped on the right) */
.salezbird-form-row-right {
    justify-content: flex-end; /* push the group to the right edge */
}

    /* When right-aligned, keep label width but right-align its text */
    .salezbird-form-row-right label {
        min-width: 120px;
        text-align: right;
        margin-right: 12px;
    }

    /* Ensure the fixed field keeps its width and the inner editor fills it */
    .salezbird-form-row-right .salezbird-fixed-field {
        margin-left: 0;
        width: auto;
    }


/* Responsive form row for mobile */
@media (max-width: 768px) {
    .salezbird-form-row-flex {
        flex-direction: column !important;
        gap: 0.5rem;
    }

    .salezbird-form-row {
        width: 100% !important;
        min-width: 0;
        flex: 1 1 100% !important;
        margin-bottom: 0px;
    }

    .salezbird-form-row2 {
        margin-bottom: 6px !important;
    }

    .salezbird-textbox,
    .dx-texteditor-input,
    .dx-spinedit-input {
        width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }

    .salezbird-form-row-inputgroup {
        gap: 0.25rem;
    }

    /* Labels stack above inputs on mobile, so the desktop label-column indent
       would leave the hint floating out to the right. */
    .salezbird-form-hint {
        margin-left: 0;
    }

        .salezbird-form-row-inputgroup .salezbird-icon-btn {
            margin-left: 0.25rem;
            padding: 0.25rem 0.5rem;
            font-size: 1.1rem;
        }
}


/* salezbird card */
.salezbird-card {
    background: #fff;
    border: 1px solid #e3e6ed;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.07);
    padding: 1rem 1.25rem;
    margin-bottom: 0rem;
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    min-height: 140px;
}

    .salezbird-card:hover {
        box-shadow: 0 4px 16px rgba(44, 62, 80, 0.13);
        border-color: #b6c1d2;
    }

    .salezbird-card .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .salezbird-card .badge {
        font-size: 0.85em;
        vertical-align: middle;
    }

    .salezbird-card .card-footer {
        background: none;
        border: none;
        padding: 0.5rem 0 0 0;
        margin-top: auto;
        text-align: right;
    }


/* salezbird memo */
.salezbird-memo {
    min-width: 220px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ced4da;
    padding: 8px;
    font-size: 1rem;
    background-color: #fff;
    color: #212529;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-top: 4px;
    resize: vertical;
    box-sizing: border-box;
}

    .salezbird-memo:focus {
        border-color: #0969da;
        outline: none;
    }


/* salezbird icon btn */
.salezbird-icon-btn {
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: inherit;
    transition: background 0.2s;
    line-height: 1;
    font-size: 1rem; /* General icon size, override as needed */
}

    .salezbird-icon-btn:hover,
    .salezbird-icon-btn:focus {
        background: var(--sz-gray-button-hover);
        outline: none;
    }

    /* General icon alignment for all icons inside the button */
    .salezbird-icon-btn .bi,
    .salezbird-icon-btn .oi,
    .salezbird-icon-btn i,
    .salezbird-icon-btn svg {
        font-size: 1.5em;
        line-height: 1;
        vertical-align: middle;
        display: inline-block;
    }

/* stronger highlight for generated-state icons */
.salezbird-icon-generated {
    color: #16a34a !important; /* strong green */
    text-shadow: 0 0 0.5px currentColor; /* slightly thicker look */
}

/* danger variant �X red trash icon */
.salezbird-icon-btn-danger {
    color: var(--sz-danger, #dc2626);
}

    .salezbird-icon-btn-danger:hover,
    .salezbird-icon-btn-danger:focus {
        background: rgba(220, 38, 38, 0.1);
        color: #b91c1c;
    }

/* optional: add a subtle "badge" background to make it stand out more */
.salezbird-icon-btn.salezbird-icon-generated {
    background: rgba(22, 163, 74, 0.12);
}

    /* hover/focus effect for generated-state */
    .salezbird-icon-btn.salezbird-icon-generated:hover,
    .salezbird-icon-btn.salezbird-icon-generated:focus {
        background: rgba(22, 163, 74, 0.22); /* stronger bg on hover */
    }



/* salezbird workflow container */
.salezbird-workflow-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 60px;
    margin: 10px 0;
    position: relative;
}
@media (max-width: 768px) {
    .salezbird-workflow-container {
        overflow-x: auto;
        flex-wrap: wrap;
        gap: 20px 60px;
        -webkit-overflow-scrolling: touch;
    }
}

.salezbird-workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.salezbird-workflow-arrow {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}
    .salezbird-workflow-arrow line,
    .salezbird-workflow-arrow polygon {
        stroke-width: 1px !important;
        stroke: #7a7a7a;
        fill: #7a7a7a;
    }

/* filter container - top-aligned items   */
.filter-container {
    align-items: flex-start !important;
}

    .filter-container .salezbird-btn-outline {
        height: 34px !important; /* Match .salezbird-combobox or .salezbird-textbox */
        min-height: 34px !important;
        max-height: 34px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.5 !important; /* Match input line-height */
        font-size: 1rem !important; /* Match input font-size */
        margin-top: 4px !important; /* Match .salezbird-textbox margin-top if needed */
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
    }

    .filter-container .salezbird-btn {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.5 !important;
        font-size: 1rem !important;
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
    }

/* Make filter labels wide enough for long languages (e.g., Chinese) and responsive */
.filter-label {
    display: inline-block;
    vertical-align: middle;
    text-align: right; /* <-- right-align the label text on desktop */
    white-space: nowrap; /* prevent wrapping on desktop */
}

/* Keep controls aligned in the filter-item */
.filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile: stack label above control and let label span full width */
@media (max-width: 576px) {
    .filter-item {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .filter-label {
        min-width: 0;
        width: 100%;
        margin-bottom: 0.25rem;
        text-align: left; /* left-align when stacked */
    }

    .filter-item .form-control,
    .filter-item .form-select,
    .filter-item .salezbird-btn {
        width: 100%;
        min-width: 0;
    }

    /* Exception: keep Search + Reset + Info on one row */
    .filter-item.filter-actions {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 8px;
    }

        .filter-item.filter-actions .salezbird-btn-outline {
            width: auto !important;
            white-space: nowrap;
            padding-left: 12px;
            padding-right: 12px;
        }

        .filter-item.filter-actions .salezbird-tooltip__trigger {
            width: auto !important;
            flex: 0 0 auto;
        }
}

/* salezbird footer */
.salezbird-footer {
    color: #555555;
    font-size: 13px;
    font-weight: 400;
}


/* salezbird checkbox */
.salezbird-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    line-height: 1;
    font-size: 1rem;
}




/* Salezbird tooltip �X responsive, accessible, hover/focus/tap-friendly
   Place this block in site.css (variables are expected in :root) */

.salezbird-tooltip {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* Trigger (icon/button) */
.salezbird-tooltip__trigger {
    background: transparent;
    border: 0;
    padding: .25rem;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Bubble */
.salezbird-tooltip__bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(6px);
    background: var(--salezbird-tooltip-bg, #fff);
    color: var(--salezbird-tooltip-text, #6b6b6b);
    border: 1px solid var(--salezbird-tooltip-border, #cfcfcf);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: .35rem .6rem;
    border-radius: 4px;
    white-space: nowrap;
    font-size: .85rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 1200;
    max-width: 600px;
    text-align: center;
}

    /* Two-layer arrow (outer border + inner background) */
    .salezbird-tooltip__bubble::before,
    .salezbird-tooltip__bubble::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
    }

    .salezbird-tooltip__bubble::before {
        top: 100%;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 7px solid var(--salezbird-tooltip-border, #cfcfcf);
    }

    .salezbird-tooltip__bubble::after {
        top: calc(100% + 1px);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid var(--salezbird-tooltip-bg, #fff);
    }

/* Show on hover / focus-within / programmatic .is-open */
.salezbird-tooltip:hover .salezbird-tooltip__bubble,
.salezbird-tooltip:focus-within .salezbird-tooltip__bubble,
.salezbird-tooltip.is-open .salezbird-tooltip__bubble {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Mobile: show below trigger and allow wrapping */
@media (max-width: 576px) {
    .salezbird-tooltip__bubble {
        transform: translateX(-50%) translateY(6px);
        white-space: normal;
        text-align: left;
        left: 80px;
        padding: .5rem .6rem;
        min-width: 50vw;
        max-width: 90vw;
    }

        .salezbird-tooltip__bubble::before {
            top: auto;
            bottom: 100%;
            border-top: none;
            border-bottom: 7px solid var(--salezbird-tooltip-border, #cfcfcf);
        }

        .salezbird-tooltip__bubble::after {
            top: auto;
            bottom: calc(100% + 1px);
            border-top: none;
            border-bottom: 6px solid var(--salezbird-tooltip-bg, #fff);
        }
}

/* Screen-reader only helper */
.salezbird-tooltip__sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* Tooltip anchored to an input/select (always positioned relative to the field wrapper) */
.salezbird-tooltip-field {
    position: relative;
    display: inline-block;
    width: 100%;
}

    /* Variant: left-aligned bubble above the field */
    .salezbird-tooltip-field .salezbird-tooltip__bubble {
        left: 0;
        bottom: calc(100% + 14px);
        transform: translateX(0) translateY(0);
    }

    /* Variant: force bubble visible when wrapper is ".is-open" */
    .salezbird-tooltip-field.is-open .salezbird-tooltip__bubble {
        opacity: 1;
        pointer-events: auto;
    }





/* Salezbird Quick actions */
/* Quick-action section label (module group headings) */
.salezbird-qaction-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 6px;
    margin-top: 4px;
}

/* container: allow wrapping so items go to new row on small screens */
.salezbird-qaction-container {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap; /* changed to wrap */
}

/* each item should be flexible; widths adjusted via media queries below */
.salezbird-qaction-item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.salezbird-qaction-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #dbe7fb;
    background: #fff;
    cursor: pointer;
    transition: box-shadow .12s ease, transform .08s ease;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

    .salezbird-qaction-card:focus,
    .salezbird-qaction-card:hover {
        box-shadow: 0 6px 18px rgba(10, 91, 212, 0.14);
        transform: translateY(-2px);
        outline: none;
    }

.salezbird-qaction-card-icon {
    font-size: 1.6rem;
    color: #0A5BD4;
    margin-bottom: 6px;
}

.salezbird-qaction-card-label {
    font-size: 0.9rem;
    color: #1f2937;
    white-space: nowrap;
}

/* Responsive breakpoints:
       - >= 769px: items keep intrinsic size, will flow in a single row if space.
       - <= 768px: three columns so items wrap in a grid.
       - <= 480px: full-width rows �X icon left, label right, one button per row.
    */
@media (max-width: 768px) {
    .salezbird-qaction-item {
        flex: 0 0 30%;
        max-width: 30%;
    }

    .salezbird-qaction-card-label {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .salezbird-qaction-container {
        flex-direction: column;
        gap: 8px;
    }

    .salezbird-qaction-item {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .salezbird-qaction-card {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        min-width: unset;
        width: 100%;
        padding: 10px 16px;
        gap: 12px;
        text-align: left;
    }

    .salezbird-qaction-card-icon {
        font-size: 1.4rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .salezbird-qaction-card-label {
        font-size: 0.95rem;
        white-space: normal;
    }
}


/* Ensure DevExpress editors inside the fixed wrapper fill it and use border-box */
.salezbird-fixed-field {
    max-width: 300px; /* keep your chosen width */
    width: 100%;
}

    .salezbird-fixed-field,
    .salezbird-fixed-field * {
        box-sizing: border-box;
    }

        /* Target common DevExpress editor wrappers and native inputs */
        .salezbird-fixed-field input,
        .salezbird-fixed-field .dx-texteditor,
        .salezbird-fixed-field .dx-texteditor-input,
        .salezbird-fixed-field .dx-dateedit,
        .salezbird-fixed-field .dx-datebox,
        .salezbird-fixed-field .dx-textbox {
            width: 100% !important;
            max-width: 100% !important;
        }




/* Global placeholder styling for inputs and textareas */
input::placeholder,
textarea::placeholder {
    font-weight: 300; /* lighter weight */
}


/* Required field star */
.required-star {
    color: #d93025; /* red */
    margin-right: 6px;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
}

/* Keep accessibility: hide star from screen readers (aria-hidden used above) */








/* Notifications: top-right fixed area */
.notification-wrapper {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1050; /* above most UI elements (Bootstrap modals use 1050+) */
    pointer-events: none; /* allow clicks to pass through outside the alert */
    width: 500px;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}

.notification-wrapper .alert {
    pointer-events: auto;
}

.notification-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.notification-modal {
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
    margin: 0;
}

/* Make alerts responsive on small screens */
@media (max-width: 576px) {
    .notification-wrapper {
        transform: translate(0%, 0%);
        width: calc(100% - 2rem);
        right: 1rem;
        left: 1rem;
    }
}



/* Add near other form layout rules (end of form-row styles is fine) */
.salezbird-summary-row {
    display: flex;
    gap: 16px;
    row-gap: 4px; /* smaller vertical spacing between wrapped rows */
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap; /* allow wrapping on narrow widths */
}

/* Each item keeps label + control layout like existing .salezbird-form-row */
.salezbird-summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px; /* ensures editors keep reasonable width on desktop */
    box-sizing: border-box;
}

    /* Right-align labels to match existing right-aligned rows on desktop */
    .salezbird-summary-item > label {
        min-width: 160px;
        text-align: right;
        margin-right: 12px;
    }

/* Mobile: stack vertically and make controls full width */
@media (max-width: 576px) {
    .salezbird-summary-row {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        justify-content: flex-start;
    }

    .salezbird-summary-item {
        width: 100%;
        justify-content: flex-start; /* label above control would also work, but keep label inline */
    }

        .salezbird-summary-item > label {
            min-width: 0;
            width: 100%;
            text-align: left;
            margin-bottom: 4px;
        }

        .salezbird-summary-item .salezbird-fixed-field,
        .salezbird-summary-item .salezbird-textbox,
        .salezbird-summary-item input,
        .salezbird-summary-item .dx-spinedit-input {
            width: 100% !important;
            box-sizing: border-box;
        }
}





/* Language selector top bar */
.sb-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 12px;
}

/* Globe icon trigger */
.sb-lang-trigger {
    position: relative;
    border: none;
    background: transparent;
    color: #0A5BD4;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

/* Dropdown menu */
.sb-lang-menu {
    position: absolute;
    right: 0;
    top: 110%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    min-width: 160px;
    z-index: 1000;
    padding: 6px;
}

/* Language option item */
.sb-lang-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
}

    .sb-lang-item:hover {
        background: #f3f4f6;
    }

/* Current selection */
.sb-lang-current {
    font-weight: 600;
    color: #0A5BD4;
}

/* Mobile: center menu under icon and allow wider bubble content if needed */
@media (max-width: 576px) {
    .sb-lang-menu {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        min-width: 200px;
        max-width: 92vw;
    }
}


/* salezbird-image-input */
.salezird-image-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* smaller + lighter icon (keeps button size unchanged) */
.salezbird-icon-muted-sm {
    font-size: 1em !important;
    opacity: 0.55;
}


/* salezbird home kpi */
.salezbird-startbtn {
    margin: 0 auto; /* Centers the button */
    padding: 10px 0 10px 0;
    width: 100%;
    font-weight: 500;
    font-size: 16px;
}

.salezbird-kpi-filter {
    min-height: 38px;
    height: 38px;
    box-sizing: border-box;
    font-size: 1rem;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.salezbird-kpi-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    min-height: 120px; /* Ensures card is not too short when empty */
    padding: 16px; 
}

.salezbird-kpi-title {
    color: #666;
    font-size: 13px;
    margin-bottom: 8px;
}

.salezbird-kpi-value {
    color: #111;
}

.sb-kpi-sub {
    color: #888;
    font-size: 12px;
    margin-top: 6px;
}

.salezbird-kpi-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .sb-kpi-title-row .sb-kpi-title {
        margin-bottom: 0; /* override existing 8px */
    }



/* Settings page: item links without border (but still clickable) */
.salezbird-settings-item {
    display: block;
    padding: 0.375rem 1rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--sz-gray2);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

    .salezbird-settings-item:hover,
    .salezbird-settings-item:focus {
        background: var(--sz-light-gray);
        color: var(--sz-color);
        outline: none;
    }

/* Settings page: slightly larger item title + description */
.salezbird-settings-item-title {
    color: var(--sz-color);
    font-size: 16px;
}

.salezbird-settings-item-desc {
    font-size: 14px;
}

.salezbird-selected-plan {
    border: 2px solid #007bff;
    box-shadow: 0 0 0 2px #007bff33;
    background-color: #f0f8ff;
}

.salezbird-trial-notification {
    background: #fff3cd;
    color: #856404;
    padding: 8px 16px;
    text-align: center;
    font-weight: 500;
    border-bottom: 1px solid #ffeeba;
}

.salezbird-expired-notification {
    background: #fdeaea;
    color: #b71c1c;
    padding: 8px 16px;
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid #f8d7da;
    border-radius: 4px;
    margin: 12px 0;
}

/* Upgrade plan desc */
.plan-desc-fixed {
    min-height: 96px; /* Adjust as needed for your design */
    display: flex;
}




/* MainLayout notification popup */
.notification-popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
    z-index: 2000;
}

.notification-popup {
    position: fixed;
    top: 80px; /* Set top to match the height of the topbar (notification bell area) */
    left: 50%;
    transform: translate(-50%, -30%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.2);
    z-index: 2001;
    min-width: 300px;
    max-width: 90vw;
    padding: 0;
}

.notification-popup-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    font-size: 1rem;
}

.notification-popup-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
}






/* ============================================================
   DARK MODE OVERRIDES
   Bootstrap handles body, forms, tables, etc. via [data-bs-theme=dark].
   Below we override Salezbird-specific custom classes.
   ============================================================ */

[data-bs-theme="dark"] {
    --sz-color: #4d8fef;
    --sz-gray: #e6edf3;
    --sz-light-gray: #161b22;
    --sz-gray-button-hover: #30363d;
    --salezbird-tooltip-bg: #1c2128;
    --salezbird-tooltip-border: #444d56;
    --salezbird-tooltip-text: #e6edf3;
    --sz-gray2: #c3cbd6;
    --sz-gray2-button-hover: #21262d;
    --sz-gray1: #30363d;
}

    /* Topbar */
    [data-bs-theme="dark"] .salezbird-topbar {
        background: #161b22;
        color: var(--sz-gray);
        border-bottom-color: #30363d;
    }

    [data-bs-theme="dark"] .salezbird-topbar-link,
    [data-bs-theme="dark"] .salezbird-link,
    [data-bs-theme="dark"] .salezbird-icon-link {
        color: var(--sz-gray);
    }

        [data-bs-theme="dark"] .salezbird-topbar-link:hover,
        [data-bs-theme="dark"] .salezbird-topbar-link.active {
            background: #21262d;
        }

    /* Dropdown menus */
    [data-bs-theme="dark"] .salezbird-dropdown-menu,
    [data-bs-theme="dark"] .salezbird-profile-dropdown {
        background: #1c2128;
        border-color: #30363d;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }

        [data-bs-theme="dark"] .salezbird-dropdown-menu .dropdown-item,
        [data-bs-theme="dark"] .salezbird-profile-dropdown .dropdown-item {
            color: var(--sz-gray);
        }

            [data-bs-theme="dark"] .salezbird-dropdown-menu .dropdown-item:hover,
            [data-bs-theme="dark"] .salezbird-profile-dropdown .dropdown-item:hover {
                background: #30363d;
            }

    [data-bs-theme="dark"] .salezbird-profile-dropdown-header {
        color: var(--sz-gray);
    }

    /* Sidebar */
    [data-bs-theme="dark"] .salezbird-sidebar {
        background: #0d1117;
        border-right-color: #21262d;
    }

    [data-bs-theme="dark"] .salezbird-sidebar-link {
        color: var(--sz-gray);
    }

        [data-bs-theme="dark"] .salezbird-sidebar-link:hover {
            background: #161b22;
        }

        [data-bs-theme="dark"] .salezbird-sidebar-link.active {
            background: #21262d;
        }

    /* Hamburger sidebar */
    [data-bs-theme="dark"] .salezbird-hamburger-sidebar {
        background: #0d1117;
        color: var(--sz-gray);
    }

    /* Body container */
    [data-bs-theme="dark"] .salezbird-body-container {
        background: #0d1117;
    }

    /* Login box */
    [data-bs-theme="dark"] .sb-login-box {
        background: #161b22;
        border-color: #30363d;
    }

    /* Cards & Panels */
    [data-bs-theme="dark"] .salezbird-card,
    [data-bs-theme="dark"] .salezbird-std-panel,
    [data-bs-theme="dark"] .salezbird-chart-container,
    [data-bs-theme="dark"] .sb-chart-box,
    [data-bs-theme="dark"] .dx-card {
        background: #161b22;
        border-color: #30363d;
        color: var(--sz-gray);
    }

        [data-bs-theme="dark"] .salezbird-card:hover {
            border-color: #444d56;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        }

        [data-bs-theme="dark"] .salezbird-card .card-title {
            color: var(--sz-gray);
        }

    [data-bs-theme="dark"] .salezbird-std-panel-title {
        color: var(--sz-gray);
    }

    /* Popups */
    [data-bs-theme="dark"] .salezbird-popup {
        background: #1c2128;
        border-color: #30363d;
        color: var(--sz-gray);
    }

    /* Textbox & inputs */
    [data-bs-theme="dark"] .salezbird-textbox,
    [data-bs-theme="dark"] .salezbird-memo {
        background-color: #0d1117;
        border-color: #30363d;
        color: var(--sz-gray);
    }

        [data-bs-theme="dark"] .salezbird-textbox:focus,
        [data-bs-theme="dark"] .salezbird-memo:focus {
            border-color: #4d8fef;
        }

    /* Grid */
    [data-bs-theme="dark"] .salezbird-grid {
        background-color: #0d1117;
        border-color: #30363d;
        color: var(--sz-gray);
    }

    [data-bs-theme="dark"] .salezbird-grid-short {
        background-color: #0d1117;
        border-color: #30363d;
        color: var(--sz-gray);
    }

    /* Grid header row �X override DevExpress white default */
    [data-bs-theme="dark"] .salezbird-grid .dxbl-grid-header-row,
    [data-bs-theme="dark"] .salezbird-grid-short .dxbl-grid-header-row {
        background-color: #161b22 !important;
    }
    [data-bs-theme="dark"] .salezbird-grid .dxbl-grid-header-cell,
    [data-bs-theme="dark"] .salezbird-grid-short .dxbl-grid-header-cell {
        background-color: #161b22 !important;
        color: var(--sz-gray) !important;
        border-color: #30363d !important;
    }

    [data-bs-theme="dark"] .salezbird-grid-selected-row td {
        background-color: #1a3a5c !important;
        color: #a8d4ff !important;
    }

    /* Detail page table �X dark mode, matches salezbird-grid */
    [data-bs-theme="dark"] .salezbird-detail-table {
        background-color: #0d1117;
        color: var(--sz-gray);
        border-color: #30363d;
    }
    [data-bs-theme="dark"] .salezbird-detail-table th,
    [data-bs-theme="dark"] .salezbird-detail-table td {
        border-color: #30363d;
        background-color: #0d1117;
        color: var(--sz-gray);
    }
    [data-bs-theme="dark"] .salezbird-detail-table thead th {
        background-color: #161b22;
        color: var(--sz-gray);
        border-bottom-color: #30363d;
    }

    /* Buttons */
    [data-bs-theme="dark"] .salezbird-btn {
        background: #4d8fef;
        color: #fff;
    }

        [data-bs-theme="dark"] .salezbird-btn:hover {
            background: #3a7bd5;
        }

    [data-bs-theme="dark"] .salezbird-btn-cancel {
        background: #30363d;
        color: var(--sz-gray);
    }

        [data-bs-theme="dark"] .salezbird-btn-cancel:hover {
            background: #444d56;
        }

    [data-bs-theme="dark"] .salezbird-btn-outline {
        color: #8b949e;
        border-color: #8b949e;
    }

        [data-bs-theme="dark"] .salezbird-btn-outline:hover {
            background: #21262d;
            color: #4d8fef;
            border-color: #4d8fef;
        }

    /* Separators */
    [data-bs-theme="dark"] .salezbird-separator-dropdown,
    [data-bs-theme="dark"] .salezbird-page-separator,
    [data-bs-theme="dark"] .salezbird-panel-separator {
        border-top-color: #30363d;
    }

    /* Profile view */
    [data-bs-theme="dark"] .salezbird-profile-view {
        background: #161b22;
        border-color: #30363d;
    }

        [data-bs-theme="dark"] .salezbird-profile-view strong {
            color: var(--sz-gray);
        }

    /* KPI cards */
    [data-bs-theme="dark"] .salezbird-kpi-card {
        background: #161b22;
        border-color: #30363d;
    }

    [data-bs-theme="dark"] .salezbird-kpi-title {
        color: #8b949e;
    }

    [data-bs-theme="dark"] .salezbird-kpi-value {
        color: var(--sz-gray);
    }

    /* Quick actions */
    [data-bs-theme="dark"] .salezbird-qaction-card {
        background: #161b22;
        border-color: #30363d;
    }

        [data-bs-theme="dark"] .salezbird-qaction-card:hover {
            box-shadow: 0 6px 18px rgba(77, 143, 239, 0.15);
        }

    [data-bs-theme="dark"] .salezbird-qaction-card-label {
        color: var(--sz-gray);
    }

    /* Icon buttons */
    [data-bs-theme="dark"] .salezbird-icon-btn {
        color: var(--sz-gray);
    }

        [data-bs-theme="dark"] .salezbird-icon-btn:hover {
            background: #30363d;
        }

    /* Top btn (hamburger etc.) */
    [data-bs-theme="dark"] .salezbird-top-btn {
        background-color: #21262d;
        border-color: #30363d;
        color: var(--sz-gray);
    }

        [data-bs-theme="dark"] .salezbird-top-btn:hover {
            background-color: #30363d;
            border-color: #444d56;
        }

    /* Notifications */
    [data-bs-theme="dark"] .salezbird-trial-notification {
        background: #3d2e00;
        color: #f0c000;
        border-bottom-color: #5c4a00;
    }

    [data-bs-theme="dark"] .salezbird-expired-notification {
        background: #3d0000;
        color: #ff6666;
        border-bottom-color: #5c0000;
    }

    /* Settings items */
    [data-bs-theme="dark"] .salezbird-settings-item:hover {
        background: #21262d;
    }

    [data-bs-theme="dark"] .salezbird-settings-item-title {
        color: #4d8fef;
    }

    /* Page headline */
    [data-bs-theme="dark"] .salezbird-page-headline,
    [data-bs-theme="dark"] .salezbird-page-subheadline {
        color: var(--sz-gray);
    }

    /* Round panel */
    [data-bs-theme="dark"] .sz-round-panel {
        border-color: #30363d;
        background: #161b22;
    }

    /* Language selector */
    [data-bs-theme="dark"] .sb-lang-menu {
        background: #1c2128;
        border-color: #30363d;
    }

    [data-bs-theme="dark"] .sb-lang-item:hover {
        background: #21262d;
    }


.salezbird-theme-logo-dark {
    display: none;
}

[data-bs-theme="dark"] .salezbird-theme-logo-light {
    display: none;
}

[data-bs-theme="dark"] .salezbird-theme-logo-dark {
    display: inline-block;
}

/* �w�w Order page (legacy-style layout) �w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w */
.sz-order-fields {
    border-collapse: collapse;
    width: 100%;
}
.sz-order-label {
    white-space: nowrap;
    padding: 4px 10px 4px 0;
    font-size: 1rem;
    color: var(--sz-gray);
    vertical-align: middle;
    width: 1%;              /* shrink label column to its content (table usage) */
    min-width: max-content; /* in flex rows: expand box to full text width */
    flex-shrink: 0;         /* never compress label text in flex rows */
}
.sz-order-custbox {
    max-width: 300px;
    width: 100%;
    min-width: 0;     /* allow shrinking below intrinsic size */
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: bold;
}
.sz-order-combo {
    width: 180px;
}
.sz-order-datepicker {
    width: 200px;
}

/* Two-row picker filter grid: label column auto-sizes to the widest label,
   dropdown fills the remaining width �X both rows share the same column edge. */
.sz-picker-filters {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 8px;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Bold + larger font for the delivery date value (both editable and read-only) */
.sz-delidate-value,
.sz-delidate-value input,
.sz-delidate-value .dxbl-edit-area {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}

.sz-order-notice {
    font-size: 1.1rem;
    font-weight: 700;
    color: #c00;
    padding: 4px 0 4px 2px;
}

/* Force the product detail popup to be truly centred on every screen size.
   DxPopup CssClass is applied to .dxbl-modal (outermost wrapper).
   The overlay grid is the child .dxbl-modal-root; the dialog box is .dxbl-popup inside it.
   The default 1.75rem (28px) popup margin causes the dialog to overflow on narrow screens,
   so we zero it out via the CSS variable and rely on the grid to centre the box. */
.sz-centered-popup {
    --dxbl-popup-margin: 0;
}

.sz-centered-popup > .dxbl-modal-root {
    top: 0 !important;
    left: 0 !important;
    display: grid !important;
    align-items: center !important;
    justify-items: center !important;
}

/* Larger fonts inside the product detail popup body �X
   Use broad selectors (no .dxbl-popup-body intermediary) with !important
   to beat Bootstrap and DevExpress specificity. */
.sz-centered-popup td {
    font-size: 1.05rem !important;
}
.sz-centered-popup .small {
    font-size: 1.05rem !important;
}
.sz-centered-popup .form-control-sm {
    font-size: 1.05rem !important;
    min-height: 2.4rem !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}
.sz-centered-popup .dxbl-popup-header-text {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
}
/* Broad fallback �X targets any element inside the popup header area */
.sz-centered-popup [class*="popup-header"] {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
}
.sz-centered-popup [class*="popup-header"] * {
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* -------------------------------------------------------
   Orders workflow tile colour modifiers (WorkFlowOrders)
   Combined selector beats base .salezbird-qaction-card rule.
   Light mode: very-light pastel tints.
   Dark mode:  darkened tints, icon colours brightened.
   Mobile (<=768px): coloured left border accent on each row.
------------------------------------------------------- */

/* New Order - blue */
.salezbird-qaction-card.qaction-color-blue   { background: #EEF5FF !important; border-color: #bfdbfe !important; }
.salezbird-qaction-card.qaction-color-blue   .salezbird-qaction-card-icon { color: #1a73e8 !important; }

/* Pending Orders - rose/red */
.salezbird-qaction-card.qaction-color-red    { background: #FFF5F5 !important; border-color: #fecaca !important; }
.salezbird-qaction-card.qaction-color-red    .salezbird-qaction-card-icon { color: #e53935 !important; }

/* Picking - warm brown */
.salezbird-qaction-card.qaction-color-brown  { background: #FDF8F2 !important; border-color: #e8c99a !important; }
.salezbird-qaction-card.qaction-color-brown  .salezbird-qaction-card-icon { color: #8D5524 !important; }

/* Picked / Delivering - gold/amber */
.salezbird-qaction-card.qaction-color-gold   { background: #FFFDE7 !important; border-color: #fde68a !important; }
.salezbird-qaction-card.qaction-color-gold   .salezbird-qaction-card-icon { color: #d97706 !important; }

/* Driver Confirmation - orange */
.salezbird-qaction-card.qaction-color-orange { background: #FFF8EE !important; border-color: #fed7aa !important; }
.salezbird-qaction-card.qaction-color-orange .salezbird-qaction-card-icon { color: #f97316 !important; }

/* Delivery Notes - green */
.salezbird-qaction-card.qaction-color-green  { background: #F0FFF4 !important; border-color: #bbf7d0 !important; }
.salezbird-qaction-card.qaction-color-green  .salezbird-qaction-card-icon { color: #16a34a !important; }

/* Order Tracking - violet */
.salezbird-qaction-card.qaction-color-violet { background: #F5F3FF !important; border-color: #ddd6fe !important; }
.salezbird-qaction-card.qaction-color-violet .salezbird-qaction-card-icon { color: #7c3aed !important; }

/* Mobile (<=768px): coloured left border accent */
@media (max-width: 768px) {
    .salezbird-qaction-card.qaction-color-blue   { border-left: 5px solid #1a73e8 !important; }
    .salezbird-qaction-card.qaction-color-red    { border-left: 5px solid #e53935 !important; }
    .salezbird-qaction-card.qaction-color-brown  { border-left: 5px solid #8D5524 !important; }
    .salezbird-qaction-card.qaction-color-gold   { border-left: 5px solid #d97706 !important; }
    .salezbird-qaction-card.qaction-color-orange { border-left: 5px solid #f97316 !important; }
    .salezbird-qaction-card.qaction-color-green  { border-left: 5px solid #16a34a !important; }
    .salezbird-qaction-card.qaction-color-violet { border-left: 5px solid #7c3aed !important; }
}

/* Dark mode: darkened tints with brighter icon accents */
[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-blue   { background: #0d1f3c !important; border-color: #1e40af !important; }
[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-blue   .salezbird-qaction-card-icon { color: #60a5fa !important; }

[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-red    { background: #2c0a0a !important; border-color: #7f1d1d !important; }
[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-red    .salezbird-qaction-card-icon { color: #f87171 !important; }

[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-brown  { background: #231508 !important; border-color: #7c3f00 !important; }
[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-brown  .salezbird-qaction-card-icon { color: #d4a76a !important; }

[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-gold   { background: #1f1a04 !important; border-color: #92400e !important; }
[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-gold   .salezbird-qaction-card-icon { color: #fbbf24 !important; }

[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-orange { background: #1f1208 !important; border-color: #9a3412 !important; }
[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-orange .salezbird-qaction-card-icon { color: #fb923c !important; }

[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-green  { background: #052e16 !important; border-color: #166534 !important; }
[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-green  .salezbird-qaction-card-icon { color: #4ade80 !important; }

[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-violet { background: #1e1036 !important; border-color: #4c1d95 !important; }
[data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-violet .salezbird-qaction-card-icon { color: #a78bfa !important; }

/* Dark mode mobile left border */
@media (max-width: 768px) {
    [data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-blue   { border-left: 5px solid #60a5fa !important; }
    [data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-red    { border-left: 5px solid #f87171 !important; }
    [data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-brown  { border-left: 5px solid #d4a76a !important; }
    [data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-gold   { border-left: 5px solid #fbbf24 !important; }
    [data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-orange { border-left: 5px solid #fb923c !important; }
    [data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-green  { border-left: 5px solid #4ade80 !important; }
    [data-bs-theme="dark"] .salezbird-qaction-card.qaction-color-violet { border-left: 5px solid #a78bfa !important; }
}



/* DataRowTemplate two-line layout (order pages) */
/* Styles for the CellDisplayTemplate mobile column content */
.sb-drt-line1 {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 600;
}
.sb-drt-docno    { flex: 0 0 55%; }
.sb-drt-delidate { flex: 1; text-align: right; color: var(--bs-secondary-color); font-weight: 400; }
.sb-drt-line2 {
    font-size: 0.95rem;
    color: var(--bs-body-color);
    margin-top: 3px;
}

/* Qty stepper: ? [input] + */
.sz-qty-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    height: 2.6rem;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.sz-qty-btn {
    flex: 0 0 2.6rem;
    height: 2.6rem;
    width: 2.6rem;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
}
    .sz-qty-btn:hover, .sz-qty-btn:active { background: var(--sz-gray-button-hover); }
.sz-qty-input {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    height: 2.6rem;
    text-align: center;
    font-size: 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-left: none;
    border-right: none;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: 0 0.25rem;
    box-sizing: border-box;
}
    .sz-qty-input:focus { outline: none; border-color: var(--bs-border-color); box-shadow: none; }

/* Shopping cart mobile two-line layout */
.sb-cart-line1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
}
.sb-cart-name {
    font-weight: 600;
    font-size: 1rem;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sb-cart-qtynum {
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
    font-weight: 400;
    white-space: nowrap;
    flex: 0 0 2.8rem;
    text-align: right;
}
.sb-cart-unit {
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
    font-weight: 400;
    white-space: nowrap;
    flex: 0 0 2.8rem;
    text-align: left;
    padding-left: 0.25rem;
}
.sb-cart-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-primary);
    white-space: nowrap;
    flex: 0 0 5rem;
    text-align: right;
}
.sb-cart-line2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    min-height: 1.6rem;
}
.sb-cart-remark {
    font-size: 0.88rem;
    color: var(--bs-secondary-color);
    font-style: italic;
    flex: 1 1 auto;
}
.sb-cart-actions {
    display: flex;
    gap: 0;
    flex-shrink: 0;
}
/* Toned-down buttons for cart rows */
.sb-cart-btn {
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.15rem 0.35rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}
    .sb-cart-btn .bi { font-size: 1.1em; }
    .sb-cart-btn:hover, .sb-cart-btn:focus { color: #374151; background: var(--sz-gray-button-hover); outline: none; }
.sb-cart-btn-danger { color: #f87171; }
    .sb-cart-btn-danger:hover, .sb-cart-btn-danger:focus { color: #dc2626; background: rgba(220,38,38,0.1); }

/* Dark mode: boost contrast for secondary-color fields and primary price */
[data-bs-theme="dark"] .sb-drt-delidate       { color: #cbd5e1; }
[data-bs-theme="dark"] .sb-cart-qtynum        { color: #cbd5e1; }
[data-bs-theme="dark"] .sb-cart-unit          { color: #cbd5e1; }
[data-bs-theme="dark"] .sb-cart-price         { color: #93c5fd; }
[data-bs-theme="dark"] .sb-cart-remark        { color: #94a3b8; }
[data-bs-theme="dark"] .sb-cart-btn           { color: #94a3b8; }
[data-bs-theme="dark"] .sb-cart-btn:hover,
[data-bs-theme="dark"] .sb-cart-btn:focus     { color: #e2e8f0; background: rgba(255,255,255,0.08); }

/* �w�w Order Tracking page �w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w */
.sz-track-row {
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: background 0.15s;
}
    .sz-track-row:last-child { border-bottom: none; }
    .sz-track-row:hover, .sz-track-row:active { background: var(--sz-gray-button-hover); }

.sz-track-line1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.sz-track-docno {
    font-weight: 600;
    font-size: 0.92rem;
}
.sz-track-line2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}
.sz-track-date { white-space: nowrap; }
.sz-track-ref  { font-style: italic; }

/* Status badges */
.sz-track-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
}
.sz-track-badge-0 { background: #fef9c3; color: #854d0e; }   /* Processing  �V yellow */
.sz-track-badge-1 { background: #dbeafe; color: #1e40af; }   /* Preparing   �V blue   */
.sz-track-badge-2 { background: #ffedd5; color: #9a3412; }   /* On the Way  �V orange */
.sz-track-badge-3 { background: #dcfce7; color: #166534; }   /* Completed   �V green  */

/* Dark mode badge overrides */
[data-bs-theme="dark"] .sz-track-badge-0 { background: #713f12; color: #fef08a; }
[data-bs-theme="dark"] .sz-track-badge-1 { background: #1e3a8a; color: #bfdbfe; }
[data-bs-theme="dark"] .sz-track-badge-2 { background: #7c2d12; color: #fed7aa; }
[data-bs-theme="dark"] .sz-track-badge-3 { background: #14532d; color: #bbf7d0; }

/* �w�w Order Tracking card updates �w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w */
.sz-track-line1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 2px;
}
.sz-track-ref-line {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    font-style: italic;
    margin-bottom: 6px;
}

/* �w�w Pipeline (dot-line) �w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w */
.sz-track-pipeline {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-top: 8px;
}

/* Connector line between dots */
.sz-pip-line {
    flex: 1;
    height: 2px;
    background: #cbd5e1;
    margin-top: 8px;   /* vertically centre with the dot */
    transition: background 0.2s;
}
.sz-pip-line.sz-pip-line-done { background: #7c3aed; }

/* Each step = dot + label stacked */
.sz-pip-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 56px;        /* enough room for label on phone */
}

.sz-pip-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}
.sz-pip-dot.sz-pip-done    { border-color: #7c3aed; background: #7c3aed; }
.sz-pip-dot.sz-pip-current { border-color: #7c3aed; background: #fff;    box-shadow: 0 0 0 3px #ede9fe; }

.sz-pip-label {
    font-size: 0.62rem;
    color: #94a3b8;
    text-align: center;
    margin-top: 3px;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
}
.sz-pip-label.sz-pip-label-done { color: #7c3aed; font-weight: 600; }

/* Dark mode pipeline */
[data-bs-theme="dark"] .sz-pip-line            { background: #334155; }
[data-bs-theme="dark"] .sz-pip-line.sz-pip-line-done { background: #a78bfa; }
[data-bs-theme="dark"] .sz-pip-dot             { border-color: #334155; background: #1e293b; }
[data-bs-theme="dark"] .sz-pip-dot.sz-pip-done { border-color: #a78bfa; background: #a78bfa; }
[data-bs-theme="dark"] .sz-pip-dot.sz-pip-current { border-color: #a78bfa; background: #1e293b; box-shadow: 0 0 0 3px #2e1065; }
[data-bs-theme="dark"] .sz-pip-label           { color: #64748b; }
[data-bs-theme="dark"] .sz-pip-label.sz-pip-label-done { color: #a78bfa; }