:root {

    --primary: #4f46e5;
    --primary-light: #6366f1;

    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;

    --bg: #f3f4f6;

    --card: #ffffff;

    --text: #111827;

    --muted: #6b7280;

    --border: #e5e7eb;

    --shadow:
        0 10px 30px rgba(0, 0, 0, .08);
}

/* HEADER */

.header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 35px;

}

.header h1 {

    font-size: 34px;

    font-weight: 800;

}

.header p {

    color: var(--muted);

    margin-top: 6px;

}


.lang-btn {

    background: var(--primary);

    color: white;

    border: none;

    padding: 12px 22px;

    border-radius: 12px;

    cursor: pointer;

    font-size: 16px;

    font-weight: 700;

    transition: .3s;
}


.lang-btn:hover {

    transform: translateY(-3px);

    background: var(--primary-light);

}




/* DASHBOARD CARDS */

.cards-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

    gap: 25px;

}


.card {

    background: var(--card);

    padding: 25px;

    border-radius: 20px;

    box-shadow: var(--shadow);

    transition: .3s;

    text-align: center;

}


.card:hover {

    transform: translateY(-5px);

}


.card h3 {

    color: var(--muted);

    font-size: 16px;

}


.card-value {

    font-size: 24px;

    font-weight: 800;

    margin-top: 18px;

    color: var(--primary);

}




/* SECTION */

.section {

    margin-top: 40px;

}


.section-title {

    margin-bottom: 20px;

}


.section-title h2 {

    font-size: 28px;

}




/* STATS */

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

}


.stat-box {

    background: white;

    padding: 25px;

    border-radius: 18px;

    text-align: center;

    box-shadow: var(--shadow);

}


.stat-box span {

    color: var(--muted);

    display: block;

}


.stat-box strong {

    display: block;

    margin-top: 15px;

    font-size: 24px;

}




/* Behavior */

.behavior-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;

}


.behavior-card {

    background: white;

    padding: 25px;

    border-radius: 18px;

    text-align: center;

    box-shadow: var(--shadow);

}


.behavior-card h3 {

    color: var(--muted);

}


.behavior-number {

    margin-top: 20px;

    font-size: 24px;

    font-weight: 800;

    color: var(--primary);

}


.dominant-box {

    margin-top: 25px;

    background: white;

    padding: 25px;

    border-radius: 18px;

    text-align: center;

    box-shadow: var(--shadow);

}


.dominant-box span {

    color: var(--muted);

}


.dominant-box strong {

    display: block;

    font-size: 24px;

    margin-top: 10px;

    color: var(--success);

}




/* TABLE */

.table-wrapper {

    overflow: auto;

    background: white;

    border-radius: 20px;

    box-shadow: var(--shadow);

}


table {

    width: 100%;

    border-collapse: collapse;

}


thead {

    background: #f9fafb;

}


th {

    padding: 18px;

    text-align: center;

    font-size: 15px;

}


td {

    padding: 20px;

    text-align: center;

    border-top: 1px solid var(--border);

}


.product-image {

    width: 70px;

    height: 70px;

    object-fit: cover;

    border-radius: 12px;

}


.product-name {

    font-weight: 700;

}


.price {

    color: var(--success);

    font-weight: 700;

}




/* STATUS */

.status {

    padding: 8px 16px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 700;

}


.status.available {

    background: #dcfce7;

    color: #166534;

}


.status.out_of_stock {

    background: #fee2e2;

    color: #991b1b;

}


.status.unavailable {

    background: #e5e7eb;

    color: #111827;

}


.status.pending_review {

    background: #fef3c7;

    color: #92400e;

}


.status.insufficient_stock {

    background: #ffedd5;

    color: #9a3412;

}




/* LOADER */

.loader {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background:
        rgba(255, 255, 255, .8);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 999;
}


.spinner {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    border: 7px solid #ddd;

    border-top-color:
        var(--primary);

    animation: spin .8s linear infinite;

}


@keyframes spin {

    to {

        transform:
            rotate(360deg);

    }

}




/* EMPTY */

.empty-state {

    text-align: center;

    margin-top: 60px;

}


.empty-state h2 {

    color: var(--muted);

}





/* MOBILE */

@media(max-width:768px) {

    body {

        padding: 18px;

    }


    .header {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }


    .header h1 {

        font-size: 28px;

    }


    .card-value {

        font-size: 24px;

    }


    .behavior-number {

        font-size: 24px;

    }


    .dominant-box strong {

        font-size: 24px;

    }


    th,
    td {

        padding: 12px;

        font-size: 13px;

    }


    .product-image {

        width: 50px;

        height: 50px;

    }

}