/*
 * Copyright 2024 Julien LE CLEACH
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
 * Supvisors Host page style
 */
#instance_contents {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: auto;
    align-items: center;
}

/* Characteristics part */
#characteristics {
    display: block;
    flex-direction: row;
    width: 60%;
    min-height: 100px;
    max-height: 100px;
    padding: 0 10px;
}

#characteristics .card {
    display: flex;
    flex-direction: row;
    height: 90%;
    align-items: start;
    justify-content: space-evenly;
}

#characteristics .card div {
    margin-top: 10px;
    padding: 0 20px;
}

#characteristics .vertical_separator {
    display: block;
    width: 1px;
    position: relative;
    top: 5px;
    height: 70%;
    border-right: 1px solid var(--text-color);
}

/* Statistics part */
#rsc_grid {
    display: grid;
    width: 98%;
    height: 83%;
    grid-template-rows: 49% 49%;
    grid-gap: 10px;
    align-items: center;
    margin: 0 10px;
}

#cpu_stats {
    grid-column: 1;
    grid-row: 1;
}

#mem_stats {
    grid-column: 1;
    grid-row: 2;
}

#net_io_stats {
    grid-column: 2;
    grid-row: 1;
}

#disk_io_stats {
    grid-column: 2;
    grid-row: 2;
}

#disk_usage_stats {
    grid-column: 2;
    grid-row: 2;
}

#rsc_grid .card {
    display: flex;
    height: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#rsc_grid .card figure {
    margin-right: 10px;
}

#rsc_grid .card .div_stats {
    display: flex;
    flex: 1;
    flex-direction: column;
    max-height: 90%;
}

.table_stats {
    display: flex;
    height: 90%;
    overflow-x: clip;
    overflow-y: auto;
    margin: 0 auto;
    padding-right: 15px;
}

.table_stats th {
    position: sticky;
    top: 0;
    z-index: 20;
}

td {
    text-align: center;
}

/* specific to Memory stats */
#mem_stats tr:first-child th {
    border-bottom: solid 1px var(--border-color);
}

/* specific for Disk IO stats */
#disk_io_stats > div:first-child, #disk_usage_stats > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#disk_io_stats .button_group, #disk_usage_stats .button_group {
    width: 40%;
    margin-top: 5px;
    margin-bottom: 10px;
}

#disk_io_stats .button_group .button, #disk_usage_stats .button_group .button {
    min-width: 50%;
    max-width: 50%;
}
