/* OVERWRITE BUTTON OUTLINED BORDER & TEXT COLOR */
.ant-btn.ant-btn-variant-outlined {
    border-color: #000000 !important;
    color: #000000 !important;
}
/* =========================================================
   Sidebar Component Styles
   Base: 16px → all measurements in rem
   Sidebar is a full-height overlay drawer (temporary variant)
   ========================================================= */

/* Drawer Paper */
.dui-sidebar .MuiDrawer-paper {
    top: 0 !important;
    height: 100vh !important;
    width: auto !important;
    min-width: 18rem;
    max-width: 100vw;
    background-color: var(--Background-base, #f5f5f5) !important;
    border-right: none !important;
    box-shadow: 0.25rem 0.25rem 0.25rem 0 #00000040 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10001 !important; /* above topbar (9999) */
    box-sizing: border-box;
}

/* On small screens, drawer takes ~75% width (leaves visible overlay gap) */
@media (max-width: 37.4375rem) {
    /* 599px */
    .dui-sidebar .MuiDrawer-paper {
        width: 75vw !important;
        min-width: unset;
    }
}

/* Backdrop overlay */
.dui-sidebar .MuiBackdrop-root,
.dui-sidebar-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
}

/* Header Bar */
.dui-sidebar-header-bar {
    width: calc(100% - 1.5rem);
    height: 3.75rem; /* 60px */
    margin: 1rem 0.75rem 1rem 0.75rem;
    border-radius: 0.5rem; /* 8px */
    background: var(--Background-tertiary, #ebebeb);
    box-shadow: 0 0.25rem 0.25rem 0 #00000040;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    gap: 0.5rem;
    flex-shrink: 0;
    box-sizing: border-box;
}

.dui-sidebar-close-label {
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 400;
    font-size: 1rem; /* 16px */
    color: #000000;
    white-space: nowrap;
}

.dui-sidebar-header-spacer {
    flex: 1;
}

/* Back / Forward Buttons */
.dui-sidebar-nav-btn {
    width: 3rem; /* 48px */
    height: 1.875rem; /* 30px */
    background: #d40511 !important;
    border: none !important;
    border-radius: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    outline: none !important;
    padding: 0 !important;
    overflow: visible;
    transition: background-color 0.2s ease;
}

.dui-sidebar-nav-btn:hover {
    background: #b8040e !important;
}
.dui-sidebar-nav-btn:active {
    background: #8f030b !important;
}

/* Service Point in Header */
.dui-sidebar-header-sp {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
}

.dui-sidebar-header-sp-name {
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dui-sidebar-header-sp-country {
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    color: #000000;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Language Switcher */
.dui-sidebar-language-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0.25rem 0.375rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
}

.dui-sidebar-language-switcher:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.dui-sidebar-language-text {
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 150%;
    color: #000000;
    white-space: nowrap;
}

/* Menu List */
.dui-sidebar-list {
    flex: 1;
    /*padding-top: 1rem !important;*/
    overflow-y: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dui-sidebar-list::-webkit-scrollbar {
    display: none;
}

/*  Service Point Location Item (first in list)  */
.dui-sidebar-sp-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0.75rem 2rem; /* left: 48px — aligned with header bar */
    width: 100%;
    box-sizing: border-box;
}

.dui-sidebar-sp-item-info {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.dui-sidebar-sp-item-name {
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16.25rem;
}

.dui-sidebar-sp-item-country {
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #000000;
    white-space: nowrap;
    flex-shrink: 0;
}

.dui-sidebar-sp-arrow-btn {
    width: auto !important;
    height: auto;
    min-width: auto;
    /*background: #D40511 !important;
  border: none !important;
  border-radius: 50%;*/
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    outline: none !important;
    overflow: visible;
    padding: 0 !important;
    transition: background-color 0.2s ease;
    color: #ffffff !important;
    margin-right: 1rem !important;
}

/*.dui-sidebar-sp-arrow-btn:hover  { background: #b8040e !important; }
.dui-sidebar-sp-arrow-btn:active { background: #8f030b !important; }*/

.dui-sidebar-sp-arrow-btn svg {
    color: #ffffff;
    stroke: #ffffff !important;
    fill: none !important;
}

/* Gray divider between regions */
.dui-sidebar-divider {
    margin: 0 3rem !important;
    border-color: #d9d9d9 !important;
}

/* Shorter gray divider between districts */
.dui-sidebar-divider-district {
    margin: 0 3rem 0 4rem !important;
    border-color: #d9d9d9 !important;
}

/* Service point tree — region label */
.dui-sidebar-sp-region-label {
    padding: 0.625rem 1rem 0.25rem 3rem;
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #000000;
    width: 100%;
    box-sizing: border-box;
}

/* Service point tree — district label */
.dui-sidebar-sp-district-label {
    padding: 0.375rem 1rem 0.25rem 4rem;
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    color: #555555;
    width: 100%;
    box-sizing: border-box;
}

/* Service point tree — clickable service point */
.dui-sidebar-sp-service-item {
    padding-left: 5rem !important;
    padding-right: 1rem !important;
    color: #000000;
    background-color: transparent;
}

.dui-sidebar-sp-service-item.active {
    color: #d40511 !important;
    font-weight: bold !important;
}

.dui-sidebar-sp-service-item.active .MuiListItemText-primary {
    color: #d40511 !important;
    font-weight: bold !important;
}

.dui-sidebar-sp-service-item:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Language search input wrapper */
.dui-sidebar-lang-search {
    padding: 0.75rem 3rem 0.75rem 3rem;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Flag emoji in language list */
.dui-sidebar-lang-flag {
    margin-right: 0.75rem;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/*  Menu Items  */
.dui-sidebar-menu-item {
    background-color: transparent;
    color: #000000;
    justify-content: flex-start;
    padding-left: 2rem !important; /* 48px — aligned with header bar left edge */
    padding-right: 1rem !important;
}

.dui-sidebar-menu-item.active {
    color: #d40511 !important;
    font-weight: bold !important;
}

.dui-sidebar-menu-item.active .MuiListItemText-primary {
    color: #d40511 !important;
    font-weight: bold !important;
}

.dui-sidebar-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    font-weight: bold !important;
}

.dui-sidebar-menu-item:hover .MuiListItemText-primary {
    font-weight: bold !important;
}

/* Group (parent) items — not interactive */
.dui-sidebar-menu-item--group,
.dui-sidebar-subitem--group {
    pointer-events: none !important;
    cursor: default !important;
    width: 100%;
    box-sizing: border-box;
}

.dui-sidebar-menu-item--group:hover,
.dui-sidebar-subitem--group:hover {
    background-color: transparent !important;
}

.dui-sidebar-menu-item--group .MuiListItemText-primary,
.dui-sidebar-subitem--group .MuiListItemText-primary {
    font-weight: 400 !important;
    color: #000000 !important;
}

/*  Sub-items  */
.dui-sidebar-subitem {
    padding-left: 4.5rem !important; /* 48px base + 24px indent = 72px */
    background-color: transparent;
    color: inherit;
}

.dui-sidebar-subitem.active {
    background-color: transparent !important;
    color: #d40511 !important;
    font-weight: bold !important;
}

.dui-sidebar-subitem.active .MuiListItemText-primary {
    color: #d40511 !important;
    font-weight: bold !important;
}

.dui-sidebar-subitem:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/*  Bottom User Section  */
.dui-sidebar-user-section {
    flex-shrink: 0;
    margin: 1rem 0.75rem 1rem 0.75rem; /* bottom 12px, left 48px */
    width: auto; /* 321px */
    height: 6.6875rem; /* 107px */
    background: #ffcc00;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    box-sizing: border-box;
}

.dui-sidebar-user-name-row {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 0;
}

.dui-sidebar-username {
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 700;
    font-size: 1rem; /* 16px */
    line-height: 150%;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 13rem;
}

.dui-sidebar-user-role {
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 150%;
    color: #000000;
    white-space: nowrap;
    flex-shrink: 0;
}

.dui-sidebar-logos-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.dui-sidebar-logo-bottom {
    flex: 0 1 auto;
    max-width: 40%;
    max-height: 1.75rem; /* 28px */
    height: 40%;
    width: 40%;
    -o-object-fit: contain;
       object-fit: contain;
}

.dui-sidebar-retailnova-logo {
    flex: 0 1 auto;
    max-width: 55%;
    max-height: 2rem; /* 32px */
    height: auto;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.dui-sidebar-version {
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 400;
    font-size: 0.625rem; /* 10px */
    line-height: 150%;
    color: #000000;
    text-align: right;
    width: 100%;
}

/* Logout divider */
.dui-sidebar-logout-divider {
    margin: 0.5rem 0.75rem !important;
    border-color: #d9d9d9 !important;
}

/* Logout button */
.dui-sidebar-logout-btn {
    padding-left: 2rem !important;
    padding-right: 1rem !important;
    color: #000000 !important;
    background-color: transparent;
}

.dui-sidebar-logout-btn .MuiListItemText-primary {
    color: #000000 !important;
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 400;
}

.dui-sidebar-logout-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}
/* =========================================================
   TopBar Component Styles
   Base: 16px → all measurements in rem
   ========================================================= */

.dui-topbar {
    position: fixed;
    left: 2.5rem; /* 40px */
    right: 2.5rem;
    width: auto;
    height: 3.75rem; /* 60px */
    padding: 0.125rem; /* 2px */
    background: var(--Background-tertiary, #ebebeb);
    box-sizing: border-box;
    box-shadow: 0px 0.25rem 0.25rem 0px #00000040; /* 4px 4px */
    border-radius: 0.5rem; /* 8px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
    z-index: 9999;
    top: 2.1875rem; /* 35px */
}

/* On small screens reduce side margins so the bar doesn't get cramped */
@media (max-width: 37.4375rem) {
    /* 599px */
    .dui-topbar {
        left: 0.75rem;
        right: 0.75rem;
    }
}

@media (min-width: 37.5rem) {
    /* 600px — sm */
    .dui-topbar {
        left: 3rem; /* 48px */
        right: 3rem;
    }
}

@media (min-width: 56.25rem) {
    /* 900px — md */
    .dui-topbar {
        left: 4rem; /* 64px */
        right: 4rem;
    }
    /* 900px */
    .dui-topbar {
        top: 5.4375rem; /* 87px */
        margin-top: 0.5rem; /* -1px */
    }
}

/*  Left Section  */
.dui-topbar-left-section {
    display: flex;
    align-items: center;
    gap: 1rem; /* 16px */
    padding-left: 1.25rem; /* 20px */
    min-width: 0;
    flex: 1;
    overflow: visible;
}

@media (min-width: 56.25rem) {
    .dui-topbar-left-section {
        gap: 1.25rem; /* 20px */
        padding-left: 1.5rem; /* 24px */
    }
}

/*  Right Section  */
.dui-topbar-right-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem; /* 24px */
    padding-right: 1.25rem; /* 20px */
    flex-shrink: 0;
}

@media (min-width: 56.25rem) {
    .dui-topbar-right-section {
        padding-right: 1.5rem; /* 24px */
    }
}

/*  Menu / Sidebar Toggle Button  */
.dui-topbar-menu-button {
    /*background: #D40511 !important;*/
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    width: 3rem; /* 48px */
    height: 1.875rem; /* 30px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem !important; /* 4px */
    transition: background-color 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
    flex-shrink: 0;
}

.dui-topbar-menu-button:hover {
    background-color: #b8040e !important;
}

.dui-topbar-menu-button:active {
    background-color: #8f030b !important;
    box-shadow: 0 0 0 0.125rem rgba(212, 5, 17, 0.3) !important; /* 2px */
}

.dui-topbar-menu-button:focus-visible {
    background-color: #b8040e !important;
    box-shadow: 0 0 0 0.125rem rgba(212, 5, 17, 0.3) !important;
}

.dui-topbar-menu-button:focus {
    border: none !important;
    outline: none !important;
}

/*  Service Point (name + country inline)  */
.dui-topbar-service-point {
    display: flex;
    align-items: center;
    gap: 0.375rem; /* 6px */
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}

.dui-topbar-service-point-name {
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    line-height: 150%;
    letter-spacing: 0;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dui-topbar-service-point-country {
    font-family: 'Delivery', 'Verdana', sans-serif;
    font-weight: 400;
    font-size: 1rem; /* 16px */
    line-height: 150%;
    letter-spacing: 0;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dui-topbar-language-control {
    width: 11rem;
    margin-top: 0 !important;
    flex-shrink: 0;
    position: relative;
    z-index: 10001;
}

/*  Logo  */
.dui-topbar-logo {
    height: 1.5625rem; /* 25px */
    width: auto;
}

/*  Alert / Bell Section  */
.dui-topbar-alert-section {
    position: relative;
    display: flex;
    align-items: center;
}

.dui-topbar-bell-icon {
    width: 1.875rem; /* 30px */
    height: 1.875rem; /* 30px */
    font-size: 1.25rem !important; /* 20px */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/*  TopBar visibility modifiers  */
.auth-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
}

.dui-topbar.banner-hidden {
    transform: translateY(-3.25rem) !important; /* -52px */
    transition: transform 0.3s ease-in-out !important;
}

@media (max-width: 56.1875rem) {
    /* 899px */
    .dui-topbar.banner-hidden {
        transform: translateY(0) !important;
    }
}

.dui-topbar.marquee-hidden {
    transform: translateY(-2.1875rem) !important; /* -35px */
    transition: transform 0.3s ease-in-out !important;
}

.dui-topbar.banner-hidden.marquee-hidden {
    transform: translateY(-5.4375rem) !important; /* -87px */
    transition: transform 0.3s ease-in-out !important;
}

@media (max-width: 56.1875rem) {
    .dui-topbar.marquee-hidden {
        transform: translateY(-2.1875rem) !important;
    }

    .dui-topbar.banner-hidden.marquee-hidden {
        transform: translateY(-2.1875rem) !important;
    }
}

/*  Dropdown Menu (page title topbar)  */
.dui-topbar-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem; /* 8px */
    background-color: #ffffff;
    border: 0.0625rem solid #e0e0e0; /* 1px */
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1); /* 4px 6px */
    min-width: 12.5rem; /* 200px */
    z-index: 99999;
    padding: 0.5rem 0; /* 8px */
}

.dui-topbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    width: 100%;
    padding: 0.75rem 1rem; /* 12px 16px */
    background: transparent;
    border: none;
    border-radius: 0;
    color: #333333;
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dui-topbar-dropdown-item:hover {
    background-color: #f5f5f5;
}

.dui-topbar-dropdown-icon {
    font-size: 1.25rem !important; /* 20px */
    color: #666666 !important;
}

.dui-topbar-dropdown-item:hover .dui-topbar-dropdown-icon {
    color: #333333 !important;
}

/*  Hamburger Icon  */
.dui-topbar-hamburger-icon {
    width: 1.5625rem; /* 25px */
    height: 1.5625rem;
}

/* Hide country label on very small screens to preserve bell space */
@media (max-width: 25rem) {
    /* 400px */
    .dui-topbar-service-point-country {
        display: none;
    }
}

/* In main layout, let TopBar follow its fixed parent container instead of viewport-fixed offsets. */
.dui-topbar.main-layout-topbar {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
}

.dui-topbar.main-layout-topbar.banner-hidden,
.dui-topbar.main-layout-topbar.marquee-hidden,
.dui-topbar.main-layout-topbar.banner-hidden.marquee-hidden {
    transform: none !important;
}
.ant-picker-outlined {
    width: 100%;
}
/* CUSTOMER MODAL STYLE */
/* OVERWRITE THE POPUP MODAL TO TOP */
.ant-modal {
    top: 1.25rem !important;
}

/* OVERWRITE THE POPUP MODAL CONTAINER BORDER COLOR */
.ant-modal .ant-modal-container {
    border: 0.125rem solid #000000 !important;
}

/* OVERWRITE CLOSE BUTTON STYLE */
.ant-modal .ant-modal-close {
    color: var(--ant-color-primary) !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    top: 0.875rem !important;
    right: 1.25rem !important;
}

/* OVERWRITE CLOSE ICON SIZE*/
.ant-modal-close svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* OVERWRITE MODAL TITLE STYLE */
.ant-modal .ant-modal-title {
    align-content: center !important;
    text-align: center !important;
}

/* OVERWRITE MODAL MASK BACKGROUND COLOR */
.ant-modal-root .ant-modal-mask {
    background-color: #00000066 !important;
    /* background-image: linear-gradient(to top, #18181b 0, rgba(21, 21, 22, 0.2) 100%) !important; */
}

/* OVERWRITE MODAL MASK BLUR EFFECT */
.ant-modal-root .ant-modal-mask.ant-modal-mask-blur {
    backdrop-filter: none !important;
}