/* /Pages/Serverinfo.razor.rz.scp.css */
/* Serverinfo.razor - CSS isolation: Blazor scoped deze regels automatisch op deze component.
   Oorspronkelijk overgenomen uit site.css van de MVC-versie; alle selectors beginnen met .si-page.
   De regel die MainLayout op volle breedte zet staat in wwwroot/css/site.css (isolatie bereikt MainLayout niet). */
/* Overgenomen uit site.css van de MVC-versie, beperkt tot deze pagina */
.si-page .carta-link[b-ycsfwsfch8] {
    color: #53AF31;
    text-decoration: none;
}

    .si-page .carta-link:hover[b-ycsfwsfch8] {
        color: #444444;
    }

.si-page .color-orange[b-ycsfwsfch8] {
    color: #fd832a;
}

.si-page .color-red[b-ycsfwsfch8] {
    color: #df3131;
}

.si-page .color-green[b-ycsfwsfch8] {
    color: #53AF31;
}

.si-page .color-yellow[b-ycsfwsfch8] {
    color: #ffc107;
}

.si-page .server-details-container[b-ycsfwsfch8] {
    display: flex;
    flex-direction: column;
}

.si-page .server-details[b-ycsfwsfch8] {
    flex: 1 1 100%;
    padding: 10px;
}

.si-page .panel-container[b-ycsfwsfch8] {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.si-page .server-info-panel[b-ycsfwsfch8] {
    order: 1;
    flex: 0 0 auto;
    margin: 0 0 0 10px;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    font-size: 8px;
    padding-right: 5px;
}

.si-page .graph-container[b-ycsfwsfch8] {
    display: inline-flex;
}

.si-page .cpu-panel[b-ycsfwsfch8] {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: #dbead7;
}

.si-page .memory-panel[b-ycsfwsfch8] {
    order: 3;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: #fcd9b8;
}
    /* licht oranje, gekozen op de echte pagina */
    .si-page .cpu-panel .graph-container[b-ycsfwsfch8],
    .si-page .memory-panel .graph-container[b-ycsfwsfch8] {
        margin-right: 1px;
    }

.si-page .graph-cpu-range-short[b-ycsfwsfch8],
.si-page .graph-memory-range-short[b-ycsfwsfch8] {
    width: 60px;
    height: 90px;
}

.si-page .graph-cpu-range-medium[b-ycsfwsfch8],
.si-page .graph-memory-range-medium[b-ycsfwsfch8] {
    width: 100px;
    height: 90px;
}

.si-page .graph-cpu-range-long[b-ycsfwsfch8],
.si-page .graph-memory-range-long[b-ycsfwsfch8],
.si-page .graph-disk-range-long[b-ycsfwsfch8] {
    width: 200px;
    height: 90px;
}

.si-page .disk-panel[b-ycsfwsfch8] {
    order: 4;
    position: relative;
    flex: 0 1 auto;
    width: 200px;
    min-width: 80px;
    height: 90px;
    overflow: hidden;
    font-size: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: #fff9d6;
}

    .si-page .disk-panel .graph-container[b-ycsfwsfch8] {
        flex-grow: 1;
        width: 100%;
    }

    .si-page .disk-panel .name[b-ycsfwsfch8] {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

.si-page .monitor-details[b-ycsfwsfch8],
.si-page .database-details[b-ycsfwsfch8] {
    order: 5;
    position: relative;
    flex: 0 0 auto;
    width: 135px;
    min-width: 135px;
    height: 90px;
    overflow: hidden;
    font-size: 10px;
    box-sizing: border-box;
    background-color: #e7f1ff;
}
/* zeer lichtblauw, passend bij de blauwe Monitor-knop (btn-primary) */
.si-page .monitor-graph-container[b-ycsfwsfch8] {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.si-page .monitor-details .name[b-ycsfwsfch8],
.si-page .database-details .name[b-ycsfwsfch8] {
    position: absolute;
    top: 3px;
    left: 25px;
    font-size: 7px;
    color: #121416;
    z-index: 999;
}

.si-page .monitor-details .monitor-uptime[b-ycsfwsfch8],
.si-page .database-details .monitor-uptime[b-ycsfwsfch8] {
    position: absolute;
    top: 3px;
    right: 0;
    width: 12px;
    height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

    .si-page .monitor-details .monitor-uptime i[b-ycsfwsfch8],
    .si-page .database-details .monitor-uptime i[b-ycsfwsfch8] {
        font-size: 12px;
    }

/* Grote statusiconen midden in de tegel: rood kruis (Down) en geel waarschuwingsteken (Unhealthy, halve grootte) */
.si-page[b-ycsfwsfch8] {
    --si-state-icon-large: 90px;
}

    .si-page .monitor-details .monitor-uptime-down-large[b-ycsfwsfch8],
    .si-page .database-details .monitor-uptime-down-large[b-ycsfwsfch8],
    .si-page .monitor-details .monitor-uptime-unhealthy-large[b-ycsfwsfch8] {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 25;
    }

        .si-page .monitor-details .monitor-uptime-down-large i[b-ycsfwsfch8],
        .si-page .database-details .monitor-uptime-down-large i[b-ycsfwsfch8] {
            font-size: var(--si-state-icon-large);
            line-height: var(--si-state-icon-large);
        }

        .si-page .monitor-details .monitor-uptime-unhealthy-large i[b-ycsfwsfch8] {
            font-size: calc(var(--si-state-icon-large) / 2);
            line-height: calc(var(--si-state-icon-large) / 2);
        }
    /* Grafieken van een server samen in een container naast de serverinfo, zonder zichtbare rand.
   De grafieken lopen binnen deze container door naar de volgende regel, dus nooit onder de serverinfo. */
    .si-page .panel-container[b-ycsfwsfch8] {
        flex-wrap: nowrap;
    }

    .si-page .server-charts[b-ycsfwsfch8] {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        border: none;
    }

    /* Knoppen Monitor en Database: grafieken verbergen met CSS (niet uit de DOM), zodat aanzetten direct werkt
   zonder opnieuw te tekenen. .database-details zijn de databasetegels. */
    .si-page.si-hide-monitors .monitor-details[b-ycsfwsfch8] {
        display: none;
    }

    .si-page.si-hide-database .database-details[b-ycsfwsfch8] {
        display: none;
    }

    /* Kop: gelijke buitenkolommen (1fr), zodat de middelste kolom altijd in het midden van de pagina staat */
    .si-page .si-header[b-ycsfwsfch8] {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        column-gap: 1rem;
    }

    .si-page .si-header-center[b-ycsfwsfch8] {
        justify-self: center;
    }

    .si-page .si-header-right[b-ycsfwsfch8] {
        justify-self: end;
    }

    /* ==========================================================================
   Applicatiestijl: witte kaarten zoals de rest van de applicatie
   (zelfde opbouw als .outage-card: wit, afgeronde hoeken, lichte schaduw, gekleurde linkerrand).
   De grafiekmaten blijven gelijk; alleen de omlijsting en de typografie veranderen.
   ========================================================================== */
    .si-page .server-details-container[b-ycsfwsfch8] {
        padding: 0 1rem;
        gap: 12px;
    }

    .si-page .server-details[b-ycsfwsfch8] {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-left: 4px solid #27ae60;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 12px;
    }

        .si-page .server-details.si-down[b-ycsfwsfch8] {
            border-left-color: #e74c3c;
        }

    .si-page .panel-container[b-ycsfwsfch8] {
        margin-bottom: 0;
    }

    /* Serverinfo: leesbare tekst in plaats van 8px */
    .si-page .server-info-panel[b-ycsfwsfch8] {
        flex: 0 0 170px;
        width: 170px;
        margin: 0 12px 0 0;
        font-size: 12px;
        line-height: 1.45;
        padding-right: 0;
    }

    .si-page .si-server-name[b-ycsfwsfch8] {
        font-size: 14px;
        font-weight: 600;
        color: #212529;
        margin-bottom: 2px;
        white-space: nowrap;
    }

    .si-page .si-link[b-ycsfwsfch8] {
        color: #3498db;
        text-decoration: none;
    }

        .si-page .si-link:hover[b-ycsfwsfch8] {
            text-decoration: underline;
        }

    .si-page .si-muted[b-ycsfwsfch8] {
        color: #6c757d;
    }

    .si-page .si-truncate[b-ycsfwsfch8] {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .si-page .si-facts[b-ycsfwsfch8] {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 8px;
        margin: 6px 0 0;
    }

        .si-page .si-facts dt[b-ycsfwsfch8] {
            font-weight: 400;
            color: #6c757d;
        }

        .si-page .si-facts dd[b-ycsfwsfch8] {
            margin: 0;
            color: #212529;
        }

    /* Grafieken: 3px wit tussen de blokken en licht afgeronde hoeken, zodat de blokken rustig uit elkaar staan */
    .si-page .server-charts[b-ycsfwsfch8] {
        gap: 3px;
    }

    .si-page .cpu-panel[b-ycsfwsfch8],
    .si-page .memory-panel[b-ycsfwsfch8],
    .si-page .disk-panel[b-ycsfwsfch8],
    .si-page .monitor-details[b-ycsfwsfch8],
    .si-page .database-details[b-ycsfwsfch8] {
        border-radius: 4px;
    }

        /* Monitortegels: naam in de tekstkleur van de applicatie, iets groter */
        .si-page .monitor-details .name[b-ycsfwsfch8],
        .si-page .database-details .name[b-ycsfwsfch8] {
            font-size: 8px;
            max-width: 92px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .si-page .monitor-details .carta-link[b-ycsfwsfch8],
        .si-page .database-details .carta-link[b-ycsfwsfch8] {
            color: #212529;
        }

            .si-page .monitor-details .carta-link:hover[b-ycsfwsfch8],
            .si-page .database-details .carta-link:hover[b-ycsfwsfch8] {
                color: #3498db;
                text-decoration: underline;
            }

    /* ==========================================================================
   Servers verslepen (volgorde per gebruiker in localStorage)
   ========================================================================== */
    .si-page .server-info-panel[b-ycsfwsfch8] {
        cursor: grab;
        user-select: none;
    }
        /* overal in de serverinfo oppakken */
        .si-page .server-info-panel a[b-ycsfwsfch8] {
            cursor: pointer;
        }

    .si-page .si-drag-handle[b-ycsfwsfch8] {
        color: #adb5bd;
        margin-right: 6px;
        padding: 0 2px;
    }

        .si-page .si-drag-handle:hover[b-ycsfwsfch8] {
            color: #6c757d;
        }

        .si-page .si-drag-handle:active[b-ycsfwsfch8] {
            cursor: grabbing;
        }

    .si-page .server-details.si-dragging[b-ycsfwsfch8] {
        opacity: 0.5;
    }
    /* Groene lijn (zelfde groen als de linkerrand van de kaart) waar de server komt; via box-shadow, zodat de kaart niet van maat verandert */
    .si-page .server-details.si-drop-before[b-ycsfwsfch8] {
        box-shadow: 0 -4px 0 0 #27ae60, 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .si-page .server-details.si-drop-after[b-ycsfwsfch8] {
        box-shadow: 0 4px 0 0 #27ae60, 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    /* Servernaam opent de onderhoudspagina van de server (/server/{ServerId}) */
    .si-page .si-server-link[b-ycsfwsfch8] {
        color: inherit;
        text-decoration: none;
    }

        .si-page .si-server-link:hover[b-ycsfwsfch8] {
            color: #3498db;
            text-decoration: underline;
        }

    /* ==========================================================================
   Databasemonitors: zelfde tegel als een monitor (135 x 90), achter de monitors,
   achtergrond zeer licht violet passend bij de paarse Database-knop (btn-purple #8e44ad)
   ========================================================================== */
    .si-page .database-details[b-ycsfwsfch8] {
        order: 6;
        background-color: #ece3f8;
    }

        .si-page .database-details .name[b-ycsfwsfch8] {
            color: #212529;
        }

    /* ==========================================================================
   Knoppen CPU, Memory en Disk: verbergen met CSS (grafieken blijven getekend, aanzetten is direct).
   Kleur van de knop = kleur van die grafieken, witte tekst (optie A).
   ========================================================================== */
    .si-page.si-hide-cpu .cpu-panel[b-ycsfwsfch8] {
        display: none;
    }

    .si-page.si-hide-memory .memory-panel[b-ycsfwsfch8] {
        display: none;
    }

    .si-page.si-hide-disk .disk-panel[b-ycsfwsfch8] {
        display: none;
    }

    .si-page .si-btn-memory[b-ycsfwsfch8],
    .si-page .si-btn-memory:hover[b-ycsfwsfch8],
    .si-page .si-btn-memory:focus[b-ycsfwsfch8] {
        background-color: #fd7e14;
        border-color: #fd7e14;
        color: #ffffff;
    }

        .si-page .si-btn-memory:hover[b-ycsfwsfch8] {
            background-color: #e8590c;
            border-color: #e8590c;
        }

    .si-page .si-btn-disk[b-ycsfwsfch8],
    .si-page .si-btn-disk:hover[b-ycsfwsfch8],
    .si-page .si-btn-disk:focus[b-ycsfwsfch8] {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #ffffff;
    }

        .si-page .si-btn-disk:hover[b-ycsfwsfch8] {
            background-color: #e0a800;
            border-color: #e0a800;
        }