body {
        background: #f5f6fa;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Poppins", sans-serif;
    }

    .login-card {
        width: 950px;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    }

    .left-box {
        padding: 50px;
    }

    .brand-logo {
        width: 180px;
        margin-bottom: 25px;
    }

    .form-control {
        padding: 11px;
        border-radius: 8px;
    }

    .input-group-text {
        border-radius: 8px 0 0 8px;
        cursor: pointer;
    }

    .btn-primary,
    .btn-warning,
    .btn-danger {
        padding: 10px;
        font-weight: 600;
        border-radius: 8px;
    }

    .right-box {
        background: linear-gradient(135deg, #ffffff, #f8f4ff);
        position: relative;
        padding: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .right-box::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('assets/light-particles.png');
        background-size: cover;
        opacity: 0.18;
    }

    .right-box img {
        width: 260px;
        border-radius: 10px;
    }

    .heading-title {
        font-weight: 700;
        color: #2d3436;
    }

    .subtitle-text {
        color: #6c757d;
        font-size: 14px;
        margin-bottom: 30px;
    }

    @media (max-width: 768px) {
        .right-box {
            display: none;
        }
        .left-box {
            padding: 30px;
        }
    }


    /*---------dashboard styles---------*/
    /* -------- Global light layout -------- */
    body {
        background: #f5f7fb;
    }

    .page-content {
        padding: 1.5rem;
    }

    /* Smooth card shadows & rounded edges */
    .card {
        border-radius: 1.3rem !important;
        border: 0 !important;
        background: #ffffff;
    }

    .shadow-xl {
        box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
    }

    /* Chart animation */
    #salesGraph, #purchaseGraph, #profitChart {
        animation: fadeIn 0.7s ease-in-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Icon glow */
    .icon-glow {
        box-shadow: 0 0 0 6px rgba(0,0,0,0.03);
    }

    /* Trend helper */
    .trend-up { color: #198754; }   /* green */
    .trend-down { color: #dc3545; } /* red */

    /* Stats cards */
    .stat-card {
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    }

    /* Latest bills table */
    .table-latest tbody tr:hover {
        background-color: #f8fafc;
    }

    /* Filter section */
    #customRange .form-control {
        min-width: 170px;
    }