/* main content and insight cards */
main{
    margin-top: 1.4rem;
}

main .insights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

main .insights > div {
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .insights > div:hover {
    box-shadow: none;
}

main .insights > div span {
    background: var(--color-primary);
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 2rem;
}

main .insights > div.expenses span{
    background: var(--color-danger);
}

main .insights > div.income span{
    background: var(--color-success);
}

main .insights > div .middle{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

main .insights h3 {
    margin: 1rem 0 0.6rem;
    font-size: 1rem;
}

main .insights .progress {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 50%;
}

main .insights svg {
    width: 7rem;
    height: 7rem;
}

main .insights svg circle {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 14;
    stroke-linecap: round;
    transform: translate(5px, 5px);
}

main .insights .sales svg circle {
    stroke-dashoffset: -30;
    stroke-dasharray: 200;
}

main .insights .expenses svg circle {
    stroke-dashoffset: 20;
    stroke-dasharray: 80;
}

main .insights .income svg circle {
    stroke-dashoffset: 35;
    stroke-dasharray: 110;
}

main .insights .progress .number {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
    
main .insights small {
    margin-top: 1.6rem;
    display: block;
}

/* ============= RECENT ORDERS ============== */
main .table-container{
    margin-top: 2rem;
}

main .table-container h2 {
    margin-bottom: 0.8rem;
}

main .table-container table {
    background: var(--color-white);
    width: 100%;
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .table-container table:hover {
    box-shadow: none
}

main table tbody td {
    height: 2.8rem;
    border-bottom: 1px solid var(--color-light);
    color: var(--color-dark-variant);
}

main table tbody tr:last-child td {
    border: none;
}

main .table-container a {
    text-align: center;
    display: block;
    margin: 1rem auto;
    color: var(--color-primary);
}

/* ================ RIGHT ============ */
.right {
    margin-top: 1.4rem;
}

.right .top {
    display: flex;
    justify-content: end;
    gap: 2rem;
}

.right .top button {
    display: none;
}

.right .top .profile {
    display: flex;
    gap: 2rem;
    text-align: right;
}

/* =================== RECENT UPDATES =========== */
.right .recent-updates {
    margin-top: 1rem;
}

.right .recent-updates h2 {
    margin-bottom: 0.8rem;
}

.right .recent-updates .updates {
    background: var(--color-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

.right .recent-updates .updates:hover {
    box-shadow: none;
}

.right .recent-updates .updates .update {
    display: grid;
    grid-template-columns: 2.6rem auto;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ============== SALES ANALYTICS ============= */
.right .sales-analytics {
    margin-top: 2rem;
}

.right .sales-analytics h2 {
    margin-bottom: 0.8rem;
}

.right .sales-analytics .item {
    background: var(--color-white);
    display:flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.7rem;
    padding: 1.4rem var(--card-padding);
    border-radius: var(--border-radius-3);
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

.right .sales-analytics .item:hover {
    box-shadow: none;
}

.right .sales-analytics .item .right {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin: 0;
    width: 100%;
}

.right .sales-analytics .item .icon {
    padding: 0.6rem;
    color: var(--color-white);
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
}

.right .sales-analytics .item.offline .icon {
    background: var(--color-danger);
}
    
.right .sales-analytics .item.customers .icon {
    background: var(--color-success);
}

.right .sales-analytics .add-product {
    background-color: transparent;
    border: 2px dashed var(--color-primary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.right .sales-analytics .add-product:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.right .sales-analytics .add-product div {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.right .sales-analytics .add-product div h3 {
    font-weight: 600;
}