/* my css start */
        .dashboard-card>h2,
        .dashboard-card>h3 {
            padding: 5px 0px;
        }

        main.container.mx-auto.p-4.md\:p-6.lg\:p-8 {
            padding: 2rem 10rem;
        }

        header.bg-white.shadow-lg.sticky.top-0.z-30 {
            padding: 0 10%;
        }

        .flex-1.text-center {
            text-align: start;
        }

        .kpi-box.bg-\[\#fff0f8\].col-span-2 {
            padding: 8px 20px;
        }

        p.kpi-title {
            font-size: 13px;
            padding-bottom: 5px;
        }

        p#kpiTotalSales,
        p#kpiBankReceives,
        p#kpiTCS,
        p#kpiTDS,
        p#kpiTotalTCS_TDS,
        p#kpiTotalSettlement,
        p#kpiPackagingCost,
        p#kpiTotalAdCost,
        p#kpiTotalOrders,
        p#kpiDelivered,
        p#kpiShipped,
        p#kpiExchanged,
        p#kpiCancelled {
            font-size: 18px;
            font-weight: 800;
            color: #000;
        }

        p#kpiTotalPurchaseAmount,
        p#kpiTotalProductCost,
        p#kpiNetProfit,
        p#kpiReturnRate {
            font-size: 18px;
            font-weight: 800;
            color: rgb(199 6 81);
        }

        p#kpiTotalClaimedAmount,
        p#kpiShippedPendingAmt,
        p#kpiTotalReturnCost,
        p#kpiRTO,
        p#kpiReturns {
            font-size: 18px;
            font-weight: 800;
            color: #d88900;
        }

        p#kpiProfitLossPerDispatch {
            font-size: 18px;
            font-weight: 800;
            color: rgb(33 180 0);
        }

        .md\:col-span-6.dashboard-card,
        .md\:col-span-3.dashboard-card,
        .md\:col-span-2.dashboard-card,
        .md\:col-span-4.dashboard-card {
            padding: 30px 30px;
            background-color: #fff;
            border: solid;
            border-width: 1px;
            border-color: #f7f7f7;
            border-radius: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .unit-economics-table td:first-child {
            font-size: 14px;
            padding: 5px 5px;
            font-weight: 400;
            color: #4e4e4e;
        }

        .unit-economics-table td:last-child {
            font-size: 14px;
            text-align: center;
            padding: 5px 5px;
            font-weight: 400;
            color: #4e4e4e;
        }

        th.table-header {
            text-align: start;
            padding: 5px 5px;
            font-size: 14px;
            font-weight: 600;

        }

        td.table-cell.text-\[rgb\(199.\36 .\38 1\)\].font-semibold,
        td#ueNetProfitPercent,
        td#ueNetProfit {
            font-size: 16px;
            font-weight: 800;
            color: rgb(199 6 81);
        }

        td.table-cell {
            font-size: 14px;
            padding: 5px 5px;
            font-weight: 400;
            color: #4e4e4e;
        }

        button#updateAllProductsBtn,
        button#processFilesBtn {
            background-color: #c70651;
            border-radius: 5px;
            color: #fff;
        }

        div#orderStatusChartContainer {
            padding-top: 50px;
        }

        /* my css end */
        /* my css mobile start */

        /* -------- Tablet Styles (max-width: 1024px) -------- */
        @media (max-width: 1024px) {
            main.container.mx-auto.p-4.md\:p-6.lg\:p-8 {
                padding: 2rem 4rem;
            }

            div#orderStatusChartContainer {
                padding-top: 0px;
            }

            header.bg-white.shadow-lg.sticky.top-0.z-30 {
                padding: 0 5%;
            }

            .md\:col-span-6.dashboard-card,
            .md\:col-span-3.dashboard-card,
            .md\:col-span-2.dashboard-card,
            .md\:col-span-4.dashboard-card {
                padding: 20px;
            }

            .kpi-box.bg-\[\#fff0f8\].col-span-2 {
                padding: 6px 15px;
            }

            td.table-cell,
            .unit-economics-table td:first-child,
            .unit-economics-table td:last-child {
                font-size: 13px;
                padding: 4px;
            }

            td.table-cell.text-\[rgb\(199.\36 .\38 1\)\].font-semibold,
            td#ueNetProfitPercent,
            td#ueNetProfit {
                font-size: 15px;
            }

            button#updateAllProductsBtn,
            button#processFilesBtn {
                font-size: 14px;
                padding: 6px 12px;
            }
        }

        /* -------- Mobile Styles (max-width: 768px) -------- */
        @media (max-width: 768px) {
            main.container.mx-auto.p-4.md\:p-6.lg\:p-8 {
                padding: 1rem;
            }

            header.bg-white.shadow-lg.sticky.top-0.z-30 {
                padding: 0 3%;
            }

            .flex-1.text-center {
                text-align: center;
            }

            .md\:col-span-6.dashboard-card,
            .md\:col-span-3.dashboard-card,
            .md\:col-span-2.dashboard-card,
            .md\:col-span-4.dashboard-card {
                padding: 15px;
            }

            .kpi-box.bg-\[\#fff0f8\].col-span-2 {
                padding: 5px 10px;
            }

            p.kpi-title {
                font-size: 12px;
            }

            p#kpiTotalSales,
            p#kpiBankReceives,
            p#kpiTCS,
            p#kpiTDS,
            p#kpiTotalTCS_TDS,
            p#kpiTotalSettlement,
            p#kpiPackagingCost,
            p#kpiTotalAdCost,
            p#kpiTotalOrders,
            p#kpiDelivered,
            p#kpiShipped,
            p#kpiExchanged,
            p#kpiCancelled,
            p#kpiTotalPurchaseAmount,
            p#kpiTotalProductCost,
            p#kpiNetProfit,
            p#kpiReturnRate,
            p#kpiTotalClaimedAmount,
            p#kpiShippedPendingAmt,
            p#kpiTotalReturnCost,
            p#kpiRTO,
            p#kpiReturns,
            p#kpiProfitLossPerDispatch {
                font-size: 16px;
            }

            th.table-header {
                font-size: 13px;
            }

            td.table-cell,
            .unit-economics-table td:first-child,
            .unit-economics-table td:last-child {
                font-size: 12px;
                padding: 4px;
            }

            td.table-cell.text-\[rgb\(199.\36 .\38 1\)\].font-semibold,
            td#ueNetProfitPercent,
            td#ueNetProfit {
                font-size: 14px;
            }

            button#updateAllProductsBtn,
            button#processFilesBtn {
                font-size: 13px;
                padding: 6px 10px;
            }
        }


        /* my css mobile start */
        .hamburger-menu {
            display: none;
        }

        @media (max-width: 768px) {
            .hamburger-menu {
                display: block;
            }
        }

        .chart-container {
            height: 320px;
            position: relative;
        }

        #orderStatusChartContainer {
            min-width: 280px;
            max-width: 100%;
            height: 300;
            margin: 0 auto;
        }

        .filter-dropdown {
            @apply mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-[rgb(199,6,81)] focus:border-[rgb(199,6,81)] sm:text-sm rounded-md shadow-sm;
            /* Bright Purple focus */
        }