html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: @(isDark ? "#121212" : "#ffffff");
    color: @(isDark ? "#eaeaea" : "#000000");
}
/*  Dark mode styling */

body.appdark {
    background-color: #121212;
    color: #eaeaea;
}

    /* Header / Navbar Dark Mode */
    body.appdark header,
    body.appdark .navbar,
    body.appdark .dx-toolbar,
    body.appdark .homeshop-card,
    body.appdark .bg-white, body.appdark .bg-light, body.appdark .list-group-item {
        background-color: #1e1e1e !important;
        color: #ffffff !important;
        border-color: #333 !important;
    }


    body.appdark .bi,
    body.appdark .bi-share, body.appdark .price, body.appdark .count-input {
        color: #ffffff !important;
    }
    /* Links & icons in header */
    body.appdark header a,
    body.appdark .navbar a,
    body.appdark .dx-toolbar .dx-button .dx-button-text {
        color: #ffffff !important;
    }

    /* Inputs / dropdowns dark background */
    body.appdark .dx-textbox,
    body.appdark .dx-selectbox,
    body.appdark .dx-numberbox,
    body.appdark .dx-datebox,
    body.appdark .card, body.appdark .cart-strip, body.appdark .coupntheme {
        background-color: #1e1e1e !important;
        border-color: #333 !important;
        color: #fff !important;
    }

    /* Light mode (default) adjustments */
    /*    body:not(.appdark) header,
        body:not(.appdark) .navbar,
        body:not(.appdark) .dx-toolbar {
            background-color: #f8f9fa;
            color: #000;
        } */
    /* Fix muted / strikethrough text in dark mode */
    body.appdark .text-muted {
        color: #bbbbbb !important; /* brighter muted gray for dark background */
    }

    body.appdark .text-decoration-line-through {
        text-decoration-color: #bbbbbb !important; /* visible strikethrough line */
    }

/* breadcrumb css */
/* === DevExtreme Breadcrumb (auto theme accent) === */
/* === DevExtreme Breadcrumb === */
.dx-breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Slash separator */
.dx-breadcrumb-item + .dx-breadcrumb-item::before {
    content: "/" !important;
    padding: 0 0.45rem !important;
    color: var(--dx-color-border, currentColor) !important;
    opacity: 0.6;
}

/* Link colors adapt */
.dx-breadcrumb-item .dx-link {
    color: var(--dx-color-accent, #007bff) !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}

    .dx-breadcrumb-item .dx-link:hover {
        color: var(--dx-color-accent-hover, var(--dx-color-accent, #339af0)) !important;
    }

/* Active item */
.dx-breadcrumb-item-active {
    color: var(--dx-color-text, var(--dx-color-accent, #0056b3)) !important;
    font-weight: 500 !important;
}

/* Dark theme overrides */
/*   body.appdark .dx-breadcrumb-item .dx-link {
            color: var(--dx-color-accent, #ffa726) !important;
        } */

body.appdark .dx-breadcrumb-item .dx-link:hover {
    color: var(--dx-color-accent-hover, #ffcc80) !important;
}

body.appdark .dx-breadcrumb-item-active {
    color: #fff3e0 !important;
}