.dashboard-section {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* 8 equal columns */
    grid-template-rows: repeat(5, 1fr); /* 5 equal rows */
    gap: 12px;
    box-sizing: border-box;
    grid-template-areas:
        "TotalIncome TotalIncome CoupledWidgets CoupledWidgets AvgRating AvgRating QuickActions QuickActions"
        "TotalIncome TotalIncome CoupledWidgets CoupledWidgets AvgRating AvgRating QuickActions QuickActions"
        "OrdersStat OrdersStat OrdersStat OrdersStat Stocks Stocks Stocks Stocks"
        "OrdersStat OrdersStat OrdersStat OrdersStat Stocks Stocks Stocks Stocks"
        "OrdersStat OrdersStat OrdersStat OrdersStat Stocks Stocks Stocks Stocks";
}

.widget {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 8px;
    background-color: var(--background-light);
    overflow: hidden;
    padding: 12px;
}

/* Define each widget's grid placement */
.coupled-widgets-2{
    display: flex;
    flex-flow: column;
    gap: 12px;
    grid-area: CoupledWidgets;

}

/* Total Income Widget */

.total-income-widget {
    grid-area: TotalIncome;
    padding: 24px;
    display: flex;
    flex-flow: column;
    gap: 12px;
    justify-content: start;
}

.widget.total-income-widget {
    padding: 15px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.income-grid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.income-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: auto;
}

.income-item h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px; /* Slightly larger */
    font-weight: bold;
    margin: 0;
}

.income-item i {
    font-size: 22px;
}

.income-label {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

.widget-title{
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
}

.widget-title hr{
    margin: 12px 0px;
}

.widget div hr {
    width: 85%;
}


@media (max-width: 1600px) {
    .currency {
        display: none !important;
    }
}

/* Responsive: 1 column on small screens */
@media (max-width: 1200px) {
    .income-grid {
        grid-template-columns: 1fr;
    }

    .widget-title {
        display: none;
    }
}

@media (max-width: 700px) {
    .dashboard-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .total-income-widget{
        width: 100%;
        height: 300px;

    }

    .total-income-widget .income-grid{
        display: flex;
        flex-wrap: wrap;
    }

    .income-item{
        width: auto;
        padding: 1rem 1.5rem
    }
}

/* New Orders Widget */

.new-orders-widget {
    grid-area: NewOrders;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    gap: 10px;
}

.new-orders-widget .new-orders-container {
    display: flex;
    flex-flow: column;
    gap: 12px;
    justify-content: center;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    width: 100%;
    background: var(--red);
    height: 100%;
    color: white;
    text-align: center;

}

.new-orders-widget-title{
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}


.new-orders-widget .quantity-container{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--blue);
    border-radius: 8px;
    color: white;
    gap: 12px;
    padding: 12px;
    text-align: center;

}

@media (max-width: 1600px) {
    .hide-responsive-1600 {
        display: none;
    }
}

@media (max-width: 1024px){
    .new-orders-container h2, .quantity-container h2{
        flex-flow: column;
    }
    .hide-responsive-1024{
        display: none ;
    }
    .show-responsive-1024{
        display: block ;
    
    }
}

@media (max-width: 900px) {
    .quantity-container{
        display: none ;
    }

    .new-orders-container h2{
        flex-flow: row;
    }
}

/* New Reviews Widget */

.new-reviews-widget {
    grid-area: NewReviews;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.review-box {
    flex: 1;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
}

.positive {
    background-color: var(--green);
    color: white;
}

.negative {
    background-color: var(--red);
    color: white;
}

.total-reviews {
    background-color: var(--blue);
    color: white;
}

@media (min-width: 900px) and (max-width: 1200px) {
    .review-box:not(.negative, .positive) {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 900px) {
    .review-box:not(.total-reviews) {
        display: none;
    }

    .review-box:not(.negative, .positive) {
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        gap: 24px;
    }
}

.avg-rating-widget {
    grid-area: AvgRating;
    display: flex;
    flex-flow:column;
    gap: 12px;
}

/* Quick Action Buttons */

/* Flex container for quick actions */
.quick-actions-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px; 
    width: 100%; /* Ensure the container takes up the full width */
    grid-area: QuickActions; /* Place it in the correct grid area */
}

.quick-action-widget {
    display: flex;
    flex-flow: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex: 1 1 calc(50% - 12px); /* Each item takes 25% width minus the gap */
    box-sizing: border-box;
}

.quick-action-widget.add {
    grid-area: QuickActionAdd;
}

.quick-action-widget.search {
    grid-area: QuickActionSearch;
}

.quick-action-widget.language {
    grid-area: QuickActionLanguage;
}

.quick-action-widget.help {
    grid-area: QuickActionHelp;
}

.quick-action-widget i {
    font-size: 3rem;
}

.quick-action__paragraph{
    font-size: 1.3rem;
}

/* Larger Sections */
.orders-stat-widget {
    grid-area: OrdersStat;
    padding: 12px;
}

/* Stocks Widget */

.stocks-widget {
    grid-area: Stocks;
    position: relative;
    padding: 1rem;
    display: flex;
    flex-flow: column;
}

.stocks-widget-display{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    margin-top: 60px;
}

.stocks-widget-header {
    width: 100%;
    height: auto;
    padding: 10px;
    background: var(--background-dark);
    color: var(--text-light);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    padding: 1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stocks-widget-header__button{
    background: var(--text-grey);
    color: var(--text-dark);
    padding: 8px 12px;
    border-radius: 8px;
    transition: 300ms all ease-in-out
}


.stocks-widget-header__button:hover{
    background: var(--accent);
    color: var(--text-light);
}


.dashboard-stocks-empty{
    display: flex;
    flex-flow: column;
    gap: 24px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 24px;
    color: var(--text-grey);
}

.dashboard-stocks-empty__icon{
    font-size: 52px;
}








/* Total Income Widget */

.total-income-widget {
    grid-area: TotalIncome;
    padding: 24px;
    display: flex;
    flex-flow: column;
    gap: 12px;
    justify-content: start;
}

.widget.total-income-widget {
    padding: 15px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.income-grid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.income-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: auto;
}

.income-item h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px; /* Slightly larger */
    font-weight: bold;
    margin: 0;
}

.income-item i {
    font-size: 22px;
}

.income-label {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

.widget-title{
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
}

.widget-title hr{
    margin: 12px 0px;
}

.widget div hr {
    width: 85%;
}


@media (max-width: 1600px) {
    .currency {
        display: none !important;
    }
}

/* Responsive: 1 column on small screens */
@media (max-width: 1200px) {
    .income-grid {
        grid-template-columns: 1fr;
    }

    .widget-title {
        display: none;
    }
}

@media (max-width: 700px) {
    .dashboard-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .total-income-widget{
        width: 100%;
        height: 300px;

    }

    .total-income-widget .income-grid{
        display: flex;
        flex-wrap: wrap;
    }

    .income-item{
        width: 100%;
        padding: 1rem 1.5rem;
    }
}

/* Mobile design */

@media (max-width: 425px) {
    /* Total Income Mobile Design */
    .dashboard-section{
        display: flex;
        flex-flow: column;
        
    }

    .widget{
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
    }
    .total-income-widget{
        display: flex;
        flex-flow: column;
        overflow: visible;
        justify-content: center;
        align-items: center;
        height: auto;
    }

    .icome-grid{
        display: flex;
        flex-wrap: wrap;
        height: auto;
        overflow: visible;
    }

    .income-item {
        width: 100%;
        height: auto;
        flex: 1 1 calc(25% - 10px); /* Take up 25% width minus the gap */
    }

    .widget-title{
        display: flex;
        flex-flow: column;
        align-items: center;
    }

    /* New Orders Mobile Design */

    .new-orders-widget{
        display: flex;
        flex-flow: row;
    }

    .hide-responsive-1024{
        display: block;
    }

    .hide-responsive-1600{
        display: block;
    }

    /* New Reviews Mobile Desing*/

    .new-reviews-widget{
        display: flex;
        flex-flow: row;

    }

    /* Quick Action Paragraph */

    .quick-action-container {
        flex-wrap: nowrap;
        justify-content: center;
    }

    .quick-action-widget {
        display: flex;
        justify-content: center;
        flex: 1 1 calc(25% - 1.2rem); /* Each item takes 25% width minus the gap */
        align-items: center;
        height: auto;
        padding: 1.2rem;
    }

    .quick-action-widget i{
        margin: 0 auto;
    }

    .quick-action__paragraph{
        display: none;
    }

    /* Orders Stat Widget */

    .orders-stat-widget{
        width: auto;
        height: auto;
    }

    .chart-container{
        width: 100%;
        height: auto;
    }


    .stock-partial-container {
        position: relative;
        display: flex;
        width: 100% !important;
        border-radius: 12px;
        padding: 2rem 1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .stock-partial__icon {
        display: none !important;
    }

    .stock-partial__quantity {
        
    }

    .stock-partial__date_title{
        display: none !important;
    }


    .stock-partial-components-container {
        flex-flow: column;
        gap: 0;
        align-items: start;
    }
    
}