/* 
    This style is for handling layouts (grid)
                                                */
/* Outer layout: the step views (left + middle) swap on tab change; the
   tables column on the right is shared and stays put. fr ratios mirror the
   original column widths (steps 73.1 : tables 25.1). */
.dash {
    display: grid;
    grid-template-columns: 73.1fr 25.1fr;
    grid-gap: 0.5rem;
}

.dash-tables {
    display: grid;
    grid-template-rows: 30.2vh 30.2vh 30.2vh;
    grid-gap: 0.5rem;
}

/* the table cards no longer belong to the step grid's named areas */
.dash-tables .card-4,
.dash-tables .card-5,
.dash-tables .card-6 {
    grid-area: auto;
}

/* Step view: charts (left) + monitoring layout (middle). Columns keep the
   original 25.1 : 16 : 16 : 16 ratio via fr units. */
section {
    display: grid;
    grid-template-areas:
        "card-1 card-10 card-10 card-10"
        "card-2 card-10 card-10 card-10"
        "card-3 card-7 card-8 card-9";
    grid-template-columns: 25.1fr 16fr 16fr 16fr;
    grid-template-rows: 30.2vh 30.2vh 30.2vh;
    grid-gap: 0.5rem;
}

/* Keep cards from being stretched by oversized content (e.g. a Highcharts
   chart rendered while its tab was hidden) — otherwise the fr columns blow out. */
.dash-steps section > div {
    min-width: 0;
    min-height: 0;
}

/* Clip a chart that's briefly oversized (before reflow) without clipping the
   header dropdowns. */
.dash-steps section figure {
    overflow: hidden;
}

.main-layout {
    width: 85%;
    height: 75%;
}

.card-1 {
    grid-area: card-1;
    background: #2f3231;
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.card-2 {
    grid-area: card-2;
    background: #2f3231;
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.card-3 {
    grid-area: card-3;
    background: #2f3231;
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.card-4 {
    grid-area: card-4;
    background: #2f3231;
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.card-5 {
    grid-area: card-5;
    background: #2f3231;
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.card-6 {
    grid-area: card-6;
    background: #2f3231;
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.card-7 {
    grid-area: card-7;
}

.card-8 {
    grid-area: card-8;
}

.card-9 {
    grid-area: card-9;
}

.card-7 .body-chart,
.card-8 .body-chart,
.card-9 .body-chart {
    width: 100%;
    height: 20vh;
    background: #2f3231;
    border-radius: 0.3rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.card-7 .body-chart figure div,
.card-8 .body-chart figure div,
.card-9 .body-chart figure div {
    width: 100%;
    height: 18vh;
}

.card-7 .body-qr,
.card-8 .body-qr,
.card-9 .body-qr {
    width: 100%;
    height: 9.2vh;
    background: #2f3231;
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.card-10 {
    grid-area: card-10;
    background: #2f3231;
    border-radius: 0.3rem;
    padding: 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.main-box-machine {
    display: grid;
    grid-template-areas:
        "card-mc-1 card-mc-2"
        "card-mc-3 card-mc-4"
        "card-mc-5 card-mc-6";
    grid-template-columns: 47% 47%;
    grid-template-rows: 31% 31% 31%;
    height: 100%;
    grid-gap: 0.5rem;
    padding: 0.5rem;
}

.card-mc-1 {
    grid-area: card-mc-1;
}

.card-mc-2 {
    grid-area: card-mc-2;
}

.card-mc-3 {
    grid-area: card-mc-3;
}

.card-mc-4 {
    grid-area: card-mc-4;
}

.card-mc-5 {
    grid-area: card-mc-5;
}

.card-mc-6 {
    grid-area: card-mc-6;
}