/* Styles the displayed selected value */
    .custom-status-filter .ant-select-selection-item {
        color: #4C4C4C !important;
        font-weight: 600 !important;
        font-style: normal !important;
    }

    /* Optional: Style the dropdown items */
    .custom-status-filter .ant-select-item-option-content {
        color: #4C4C4C;
        font-style: normal !important;
    }

    /* Optional: Style the dropdown hover state */
    .custom-status-filter .ant-select-item-option:hover .ant-select-item-option-content {
        font-weight: 600;
        font-style: normal !important;
    }

/* Move required asterisk after label text */
.required-after .ant-form-item-label > label::before {
    display: none !important;
}

.required-after .ant-form-item-label > label::after {
    display: inline-block;
    margin-left: 4px;
    color: #D8232A;
    font-size: 16px;
    line-height: 0;
    content: '*' !important;
}

/* If you want this for all required form items globally */
.ant-form-item-required .ant-form-item-label > label::before {
    display: none !important;
}

.ant-form-item-required .ant-form-item-label > label::after {
    display: inline-block;
    margin-left: 4px;
    color: #D8232A;
    font-size: 16px;
    line-height: 0;
    content: '*' !important;
    font-weight: 500 !important;
}


/* Modal Container */
.custom-confirmation-modal .ant-modal-content {
    border-radius: 16px !important;
    padding: 24px !important;
}

/* Header */
.custom-confirmation-modal .ant-modal-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.custom-confirmation-modal .ant-modal-title {
    color: #000 !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

/* Form Items */
.reason-label .ant-form-item-label > label {
    font-weight: 500 !important;
    color: #1E1E1E !important;
    font-size: 16px !important;
}

.reason-label .ant-form-item-label > label::after {
    content: " *";
    color: #D8232A;
    font-weight: 500 !important;
}

.reason-options .ant-radio-wrapper {
    display: block !important;
    margin-bottom: 8px !important;
}

.comment-label .ant-form-item-label > label {
    padding-top: 4px !important;
    font-weight: 500 !important;
    color: #1E1E1E !important;
}

/* Comment label container */
.comment-label .ant-form-item-label {
    padding-bottom: 4px !important;
}

/* Main "Comment" text styling */
.comment-label-text {
    font-weight: 600 !important;
    color: rgba(0, 0, 0, 0.85) !important; /* Ant Design dark text */
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    display: inline-flex;
    align-items: baseline;
    padding-top: 4px !important; /* Adjust vertical alignment */
}

/* Style for requirement text */
.requirement-text {
    color: #757575 !important;
    font-weight: normal;
    padding-left:4px !important;
}
/* Custom required asterisk */
.required-asterisk {
    color: #D8232A;
    font-size: 16px;
    padding-left: 6px;
    font-weight: 500 !important;
}
/* Remove Ant Design's default required asterisk */
.custom-textarea-item .ant-form-item-label > label::before {
    margin-top: 2px !important;
    display: none !important;
    font-weight: 500 !important;
    color: #1E1E1E !important;
    font-size: 16px !important;
}
/* Show Ant Design's required validation only when needed */
.custom-textarea-item .ant-form-item-required .ant-form-item-label > label::after {
    margin-top: 2px !important;
    display: none !important;
    font-weight: 500 !important;
    color: #1E1E1E !important;
}

/* TextArea styling */
.custom-textarea .ant-input {
    border-radius: 8px !important;
    border: 1px solid #757575 !important;
    padding: 8px 12px !important;
   
    overflow: hidden !important; /* Hide scrollbars */
    resize: none !important; /* Disable resizing */
}
/* TextArea */
/* Target the wrapper element */
.custom-textarea .ant-input-affix-wrapper {
    border-radius: 8px !important;
    border-color: #757575 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 65px !important;
}

/* Target the actual textarea inside */
.custom-textarea .ant-input-affix-wrapper .ant-input {
    border-radius: 8px !important;
    border: none !important;
}

/* Focus states */
.custom-textarea .ant-input-affix-wrapper-focused {
    border-color: #757575 !important;
    box-shadow: 0 0 0 2px rgba(117, 117, 117, 0.2) !important;
}

/* Character counter */
.custom-textarea .ant-input-textarea-show-count::after {
    color: #8c8c8c !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    display: block !important;
    text-align: right !important;
}

/* Placeholder text */
.custom-textarea .ant-input::placeholder {
    color: #B3B3B3 !important;
    font-style: italic;
    font-size: 16px !important;
}
/* Validation Messages */
.validation-message {
    color: #ff4d4f !important;
    font-size: 14px !important;
    margin-top: 1px !important;
}

/* Footer Buttons */
/*.custom-confirmation-modal .ant-modal-footer {
    border-top: none !important;
    padding-top: 0 !important;
    text-align: right !important;
}*/

/* Close Button */
.custom-confirmation-modal .ant-modal-close-x {
    width: 19.713px !important;
    height: 20px !important;
    font-size: 25px !important;
    line-height: 40px !important;
    color: #5B6465 !important;
    aspect-ratio: 19.71/20.00;
}
.custom-confirmation-modal .ant-modal-close {
    top: 0px !important;
    right: 17px !important;
    color: #5B6465 !important;
    width: 44px !important;
    height: 44px !important;
}

/* Custom Select Styling */
.rounded-select .ant-select-selector {
    border-radius: 36px !important;
    border: 1px solid #E7E7E9 !important;
    background: #FFF !important;
    height: 36px !important;
    align-items: center !important;
    color: #4C4C4C !important;
}

/* Dropdown Arrow Color */
.rounded-select .ant-select-arrow {
    color: #4C4C4C !important;
}

/* Focus/Hover States */
.rounded-select .ant-select-focused .ant-select-selector,
.rounded-select .ant-select-selector:hover {
    border-color: #E7E7E9 !important;
    box-shadow: none !important;
}

/* Dropdown Menu Styling */
.rounded-select .ant-select-dropdown {
    border-radius: 12px !important;
    border: 1px solid #E7E7E9 !important;
}

/* Dropdown Items */
.rounded-select .ant-select-item {
    color: #4C4C4C !important;
}

.rounded-select .ant-select-item-option-selected {
    background-color: #F8F8F8 !important;
}

.rounded-select .ant-select-item-option-active {
    background-color: #F0F0F0 !important;
}

/* Main Container */
.category-item-container {
    display: flex;
    height: 100%;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #E6E6E6 !important;
}

/* Equal height columns */
.equal-height-row {
    height: 100%;
    margin: 0 !important;
}

/* Category Column */
.category-col {
    background: #FAFAFA;
    border-right: 1px solid #e8e8e8;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.item-col {
    padding-left: 5px;
    padding-right: 5px;
}

.category-header {
    color: #5B6465;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding:12px;
}


.category-list {
    flex: 1;
    overflow-y: auto;
}

.category-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

    .category-item.selected {
        background: #e6f7ff;
        font-weight: 500;
    }

.offline-badge {
    float: right;
    color: #ff4d4f;
    font-size: 12px;
}

/* Items Column */
.items-col {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.items-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.items-controls {
    display: flex;
    gap: 8px;
}

.search-input {
    width: 200px;
}

.items-list {
    flex: 1;
    overflow-y: auto;
}

.item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

    .item.offline .item-status {
        color: #ff4d4f;
        font-size: 12px;
    }

/* Responsive */
@media (max-width: 992px) {
    .equal-height-row {
        flex-direction: column;
    }

    .category-col, .items-col {
        width: 100% !important;
    }
}








/* Rounded corners for the card */
.custom-rounded-card .ant-card {
    border-radius: 16px !important; /* Adjust radius as needed */
    overflow: hidden; /* Ensures child elements respect rounded corners */
    background-color: #FAFAFA !important;
}

/* Custom rounded corners (16px) for Cards */
.custom-rounded-card .ant-card {
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Ensure Tables inside Cards take full height */
.custom-rounded-card .ant-table-container {
    height: 100% !important;
}

/* Main table container */
.rounded-table .ant-table-container {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid #E0E0E0 !important;
    border-top: none !important;
}

/* Header cells */
.rounded-table .ant-table-thead > tr > th {
    background: #FAFAFA !important;
    color: #000000 !important;
    font-weight: 600 !important;
    border-top: none !important;
}
.custom-store-name {
    font-weight: 600;
}
/* Style for all comment lines */
.comment-line {
    white-space: normal;
    word-break: break-word;
}

/* Style for the first line (selected option) */
.comment-line:first-child {
    font-weight: 400;
    color: #000000; 
}
/* Style for the second line (user comment) */
.comment-line:nth-child(2) {
    color: rgba(0, 0, 0, 0.60) !important; 
    font-weight: 400;
    font-size:11px !important;
}

.ant-checkbox-wrapper .ant-checkbox-inner {
    border-radius:4px !important;
    border-color: #757575 !important;
}

/* For hover state */
.ant-checkbox-wrapper:hover .ant-checkbox-inner {
    border-radius: 4px !important;
    border-color: #757575 !important;
}

/* In your site-wide CSS file */
.custom-select .ant-select-selection-placeholder {
    color: #4C4C4C !important;
    opacity: 1 !important;
}

/* Inactive menu items (text + icons) */
.hj-custom-menu .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-active),
.hj-custom-menu .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-active) .anticon,
.hj-custom-menu .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-active) .hj-menu-header {
    color: #757575 !important;
}

/* Hover state (optional - keeps color consistent) */
.hj-custom-menu .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-active):hover,
.hj-custom-menu .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-active):hover .anticon,
.hj-custom-menu .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-active):hover .hj-menu-header {
    color: #757575 !important;
}

/*added for Showing dropdown changes*/
.wrap-text {
    white-space: normal;
    word-wrap: break-word;
}  

.custom-dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-dropdown-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.custom-dropdown-menu-item:hover {
    background-color: #F4EBDC;
}
/*Added form category-item responsive*/
/* Base styles for all screens */
.responsive-filter-row {
    margin-bottom: 8px;
}

.responsive-select {
    width: 100% !important;
    max-width: 150px;
}

.responsive-filter-container,
.responsive-sort-container {
    display: flex;
    align-items: center;
}

.responsive-space {
    width: 100%;
}

.responsive-sort-label {
    white-space: nowrap;
    margin-right: 8px;
}

/* Mobile styles (xs) */
@media (max-width: 575.98px) {
    .responsive-filter-row .ant-col {
        margin-bottom: 8px;
    }

    .responsive-filter-container,
    .responsive-sort-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .responsive-select {
        max-width: 100% !important;
    }

    .responsive-sort-label {
        margin-bottom: 4px;
        margin-right: 0;
    }

    .responsive-space {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* Tablet styles (sm-md) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .responsive-select {
        max-width: 130px;
    }
}
/*added form Login Responsive changes*/






/* Login page styling */
.hj-login-logo {
    margin-top: 1rem;
    max-width: 100%;
    height: auto;
}

.bg-login-blue {
    background-color: #1E3A8A;
}

/* Fixed footer styling */
.footer-panel {
    padding-top: 18.5rem;
    /*border-top: 1px solid #f0f0f0;*/
    background: white;
}

/* Carousel styling */
.carousel-half-height {
    height: 100vh;
    width: 100%;
}

.carousel-slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50vh;
    padding: 20px;
}

.hj-carousel-image {
    width: 400px; /* Fixed width */
    height: 400px; /* Fixed height */
    display: block;
    margin: 0 auto; /* Center horizontally */
    object-fit: cover; /* Ensure the image fits within the dimensions */
}

/* Carousel dots customization */
.ant-carousel .slick-dots {
    bottom: 20px;
}

    .ant-carousel .slick-dots li button {
        background: #FFFFFF;
        opacity: 0.4;
    }

    .ant-carousel .slick-dots li.slick-active button {
        opacity: 1;
        background: #FFFFFF;
    }

@media (max-width: 766px) {
    .hj-carousel-image {
        width: 350px; /* Fixed width */
        height: 320px; /* Fixed height */
        display: block;
        margin: 0 auto; /* Center horizontally */
        object-fit: cover; /* Ensure the image fits within the dimensions */
    }

    .carousel-half-height {
        height: 50vh;
        width: 100%;
    }
    .footer-panel {
        padding-top: 2.5rem;
        /*border-top: 1px solid #f0f0f0;*/
        background: white;
    }
}
/*added for custom fonts 'Block Pro' */

.hj-top-header {
    color: #000;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "HJ Fonts", sans-serif;
    /*color: #472413!important;*/
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    text-transform: uppercase;
}
.hj-store-header {
    color: #000;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "HJ Fonts", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 12px;
    text-transform: uppercase;
}
.hj-store-header_new {
    color: #000;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "HJ Fonts", sans-serif;
   /* font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;*/
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
    text-transform: uppercase;
}
.hj-menu-header {
    color: #472413;
   /* font-feature-settings: 'liga' off, 'clig' off;
    font-family: "HJ Fonts", sans-serif;*/
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 10px;
    /*text-transform: uppercase;*/
}
.hj-normal-text {
    color: #472413;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}
.hj-logout-text {
    color: #D93A1B;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 10px;
    cursor: pointer;
    display: flex;
    margin-bottom: 2px;
}
/*added for checkbox background color*/
/* Custom checkbox styles */
.ant-checkbox-checked .ant-checkbox-inner {
    background-color: #472413 !important;
    border-color: #472413 !important;
}

/* Hover state */
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner {
    border-color: #472413 !important;
}

/*added for radio option background color*/





/*added form tag indicator changes*/
.tag-on {
    display: flex;
    width: 60px;
    height: 22px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 16px;
    border: 1px solid #4BA723;
    background: #4BA723;
    color: #ffffff;
    text-transform: uppercase;
    font-variation-settings: normal;
    text-rendering: auto;
}
.tag-off {
    display: flex;
    width: 60px;
    height: 22px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 16px;
    border: 1px solid #D8232A;
    background: var(--Red, #D8232A);
    color: #ffffff;
    text-transform: uppercase;
    font-style: normal;
}
.switch-on-off {
    display: flex;
    width: 72px;
    height: 22px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    color: #ffffff;
    text-transform: uppercase;
    font-style: normal;
}
.tag-on-old {
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "HJ Fonts", sans-serif;
    display: flex;
    width: 60px;
    height: 22px;
    padding-top: 2px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 16px;
    border: 1px solid #4BA723;
    background: #4BA723;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 12px;
    font-variation-settings: normal;
    text-rendering: auto;
}

.tag-off-old {
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "HJ Fonts", sans-serif;
    display: flex;
    width: 60px;
    height: 22px;
    padding-top: 2px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 16px;
    border: 1px solid #D8232A;
    background: var(--Red, #D8232A);
    color: #ffffff;
    text-transform: uppercase;
    font-size: 12px;
    font-style: normal;
    font-weight: 200;
}
.switch-on-off-old {
    /*font-feature-settings: 'liga' off, 'clig' off;
    font-family: "HJ Fonts", sans-serif;*/
    display: flex;
    width: 72px;
    height: 22px;
    /* padding-top: 3px;*/
    justify-content: center;
    align-items: center;
    /* gap: 6px;*/
    border-radius: 16px;
    color: #ffffff;
    text-transform: uppercase;
    /*font-size: 14px;*/
    font-style: normal;
    /* font-weight: 200;*/
}

/*disable Item card display form offline category*/
/* Disabled input styling */
.disabled-input.ant-input-disabled {
    background-color: #d9d9d9 !important;
    border-color: #d9d9d9 !important;
    color: #bfbfbf !important;
    cursor: not-allowed;
}

/* Disabled search icon */
.disabled-input .ant-input-prefix {
    color: #d9d9d9 !important;
}

/* Disabled clear icon */
.disabled-input .ant-input-suffix .ant-input-clear-icon {
    color: #d9d9d9 !important;
}
/* Grayed out switch styling */
.disabled-switch .ant-switch-inner {
    opacity: 0.5;
}

.disabled-switch .ant-switch-handle::before {
    background-color: #bfbfbf !important;
    color: #bfbfbf !important;
}

.disabled-switch .ant-switch-checked {
    background-color: #d9d9d9 !important;
    border-color: #d9d9d9 !important;
    color: #d9d9d9 !important;
}

.disabled-card {
    background-color: #f0f0f0;
    border-color: #d9d9d9;
}

.disabled-table {
    background-color: #f0f0f0;
}

    .disabled-table .ant-table-row {
        cursor: not-allowed;
    }
/*ant table container width fixed*/
.fixed-width {
    width: 100% !important;
}

/*stop header layout fixed*/
#components-layout-demo-fixed .logo {
    /*  width: 120px; */
    height: 31px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px 24px 16px 0;
    float: left;
}

.site-layout .site-layout-background {
    background: #fff;
}

/*state,Region,District Dropdown changes*/
.icon-logout-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    color: #D93A1B;
    font-size: 14px;
}

/*.icon-logout-btn:hover {
    background-color: rgba(0, 0, 0, 0.04);
}*/
.custom-tag .ant-select-selection-item {
    background-color: #4C4C4C !important; /* Custom background color */
    color: white !important; /* Custom text color */
    border: none !important; /* Remove border */
    border-radius: 16px !important; /* Round corners */
    font-weight: bold;
}
.custom-tag .ant-select-selection-item .anticon-close {
    color: white !important; /* Custom color for the close icon */
    font-weight: bold !important;
}

.custom-dropdown {
    border-radius: 16px !important;
    color: #FFFFFF;
}

.custom-checkbox {
    color: #59595A;
}

.state-counts {
    display: flex;
    gap: 4px;
}

/* Count Styles */
.closed-count {
    color: #d0021b;
}

.open-count {
    color: green; /*#9CCC87; ;*/
}

.total-count {
    color: #989898;
}


/* Header base styles */
.header-style {
    color: #000;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Block Pro";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    text-transform: uppercase;
}

.user-avatar {
    background-color: #F5EBDB;
    font-weight: bold;
    color: #472413;
}

.site-layout-background {
    background: #fff;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.desktop-nav {
    display: block; /* Visible by default */
    margin-left: 40px !important; /* Override any right-pushing margins */
    margin-right: auto;
}

.site-header {
    background: #fff;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content {
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    gap: 20px;
    /*padding: 0 24px;
    height: 64px;*/
}

.header-left {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-left: auto;
}

.clickable-row {
    cursor: pointer;
    border-radius: 10px !important;
}

    .clickable-row:hover {
        background-color: #fafafa !important;
    }

.selected-row {
    cursor: pointer;
    background-color: #F5EBDB !important;
    /*font-weight: bold;*/
}
.hj-card-body .ant-card-body {
    background-color: #FAFAFA !important;
}
.no-header{
    background-color:#FAFAFA !important;
}
.no-header thead {
    display: none;
}

/*.state-counts {
    display: flex;
    gap: 4px;
}*/

/* Count Styles */
/*.closed-count {
    color: #d0021b;
}
*/
/*.total-count {
    color: rgba(0, 0, 0, 0.45);
}
*/

/* Logo styles */
.logo-small {
    display: none;
    height: 50px;
    width: auto;
}

/* User list styles */
.user-list-container {
    min-width: 200px;
    font-size: 12px;
}

::deep .user-list {
    margin: 0;
}

::deep .ant-list-item {
    padding: 0 !important;
    border: none !important;
}

::deep .user-list-item {
    padding: 4px 0;
}

::deep .ant-list-item-meta {
    align-items: center;
}

::deep .ant-list-item-meta-title {
    margin-bottom: 0 !important;
    font-size: 14px;
    line-height: 1.2;
}

::deep .ant-list-item-meta-description {
    font-size: 12px;
    line-height: 1.2;
}

::deep .ant-avatar {
    color: #d0021b;
    background-color: #fff1f0;
    font-weight: bold;
}

/* Menu button */
.menu-button {
    display: none;
    padding: 0 8px;
    font-size: 20px;
}

/* Login message */
.login-message {
    margin: 0;
    padding: 8px 0;
}

/* Responsive styles */
@media screen and (max-width: 768px) {

    .hj-normal-text {
        color: #472413;       
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
    }
    .hj-logout-text {
        color: #D93A1B;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }


    .header-content {
        padding: 0 16px;
    }

    .logo-small {
        display: block;
    }

    .menu-button {
        display: block;
        margin-left: 12px;
    }

    .user-list-container {
        min-width: 250px;
        font-size: inherit
    }

    ::deep .ant-list-item-meta-title {
        font-size: 13px;
    }

    ::deep .ant-list-item-meta-description {
        font-size: 11px;
    }
}

/* Very small screens */
@media screen and (max-width: 380px) {
    .user-list-container {
        min-width: 200px;
        font-size: inherit
    }

    ::deep .ant-list-item-meta-description {
        display: none;
    }
}

/* Ensure proper alignment of list items */
::deep .ant-list-items {
    display: flex;
    justify-content: flex-end;
}

/* Remove default list padding and margins */
::deep .ant-list {
    padding: 0;
    margin: 0;
}
/* Layout container */
.layout-container {
    min-height: 100vh;
}

/* Logo styles */
.logo-container {
    padding: 16px;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
}

.top-header-logo-container {
    /* padding: 2px;
    text-align: left;
    background: rgba(255, 255, 255, 0.1);*/
}

.top-header-logo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    aspect-ratio: 50/50;
}

.logo {
    width: 100px;
    height: auto;
}

.logo-small {
    display: none;
    height: 40px;
    width: auto;
}

/* Header styles */
.site-layout-background {
    background: #fff;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}


.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 100%;
}

/*.user-info {
    margin-right: 24px;
}*/

/* Menu button */
.menu-button {
    display: none;
    margin-left: 8px;
}

/* Desktop sider */
.desktop-sider {
    background: white; /* #001529;*/
}

.mobile-menu-button {
    display: none !important; /* Hidden by default */
}

.fixed-footer {
    padding: 0.5rem;
    height: 50px;
    font-size: 14px;
    line-height: 100%;
    background: #472413;
    border-top: 1px solid #ddd;
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    width: 100%;
    align-content: center;
    text-align: left;
    color: #ffffff;
    z-index: 1000;
}

/* Drawer styles */
::deep .ant-drawer.nav-drawer {
    position: fixed;
}

    ::deep .ant-drawer.nav-drawer .ant-drawer-content {
        background-color: white; /* #001529;*/
    }

    ::deep .ant-drawer.nav-drawer .ant-drawer-content-wrapper {
        width: 200px !important;
    }

    ::deep .ant-drawer.nav-drawer .ant-drawer-body {
        padding: 0;
        background: white; /*#001529 ;*/
    }

    ::deep .ant-drawer.nav-drawer .ant-drawer-header {
        display: none; /* Remove the header completely */
    }

.drawer-content {
    height: 100%;
    background: #001529;
    display: flex;
    flex-direction: column;
}

/* Make sure desktop sider transition is smooth */
::deep .ant-layout-sider {
    transition: all 0.2s ease;
}

::deep .ant-layout {
    transition: all 0.2s ease;
}

/* Responsive breakpoint handling */
@media (max-width: 768px) {
    /* Hide desktop sider */
    .desktop-sider {
        display: none !important;
    }

    /* Show mobile elements */
    .menu-button {
        display: block !important;
    }

    .logo-small {
        display: block;
    }

    /* Adjust header for mobile */
    .header-content {
        padding: 0 16px;
    }

    .hide-on-desktop {
        display: none !important;
    }

    .mobile-menu-button {
        display: block !important; /* Show hamburger */
        margin-left: auto; /* Push to right */
        font-size: 20px;
    }
}

/* Proper z-index for components */
::deep .ant-drawer {
    z-index: 1050;
}

::deep .ant-drawer-mask {
    z-index: 1049;
}

/* Ensure transitions are smooth */
::deep .ant-drawer-content-wrapper {
    transition: transform 0.3s ease !important;
}

/* NavMenu styles within drawer */
::deep .ant-drawer .ant-menu {
    background: #001529;
    color: rgba(255, 255, 255, 0.65);
}

::deep .ant-drawer .ant-menu-item:hover {
    color: #fff;
}

::deep .ant-drawer .ant-menu-item-selected {
    background-color: #000000;
    color: #fff;
}



/*-- new changes form set store time */
@media (max-width: 768px) {
    .actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

        .actions .ant-btn {
            width: 100%;
            margin-bottom: 10px;
        }

    .ant-page-header {
        padding-left: 0;
        padding-right: 0;
    }

    .ant-tag {
        width: auto;
    }

    .ant-select {
        width: auto;
    }
}

@media (min-width: 769px) {
    .actions {
        /*display: flex;*/
        justify-content: space-between;
    }

    /*.ant-tag {
        width: calc(50% - 10px);
    }*/

    .ant-select {
        width: calc(50% - 10px);
    }
}

/*store Cards changes*/
.status-tag {
    font-weight: bold;
    width: 100%;
    border-radius: 10px;
    margin: 4px;
    text-align: center;
}

.icon-online {
    color: #52c41a; /* Green color for online status */
}

.icon-offline {
    color: #f5222d; /* Red color for offline status */
}

.manage-store {
    width: 100%;
}

.log-link {
    margin-top: 1rem;
    display: block;
}

.store-card {
    cursor: pointer;
    width: 100%;
}

.store-header {
    width: 100%;
    border-radius: 16px;
    margin-top: 0.5rem;
}

.status-container {
    display: flex;
    justify-content: flex-end;
    padding: 0.2rem;
}

.switch-container {
    position: absolute;
    margin-top: 0.3rem;
    right: 8px;
    z-index: 1;
}

.address {
    margin-top: 0;
    padding-top: 0;
    font-weight: bold;
}

.stats-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0.5rem 1.5rem;
    margin-top: 0;
}

.stat-item {
    flex: 1;
    min-width: 200px;
}

.stat-value {
    font-size: 12px;
}

.stat-title {
    color: black;
    font-weight: bold;
    font-size: 12px !important;
}

.badge-container {
    /*line-height: 20px !important;*/
    font-weight: 500;
    font-style: normal;
    font-size: 13px !important;
}

.txtb-rounded {
    border-radius: 20px !important;
}

.btn-rounded {
    font-style: normal;
    border-radius: 8px !important;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #D8232A !important;
    height: 48px !important;
    min-width: 127px;
    /* display: flex;*/
}
.btn-rounded-disabled {
    font-style: normal;
    border-radius: 8px !important;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;    
    height: 48px !important;
    min-width: 127px;
}


/* Mobile styles */
@media (max-width: 768px) {
    .status-tag {
        margin: 4px 0;
        padding: 4px 4px;
    }

    .ant-page-header {
        padding: 5px;
    }

    .store-header {
        width: 100%;
        border-radius: 8px;
    }

    .stats-container {
        flex-direction: column;
        gap: 8px;
    }

    .stat-item {
        min-width: 100%;
        margin: 0 !important;
    }

    .address {
        font-size: 14px;
        line-height: 1.4;
    }
}