/* Docker Lab Run Flow - layout
   Fixed total height (CANVAS_HEIGHT 560). The path diagram fills the width and the
   information panel sits below it at every width.
   Wide: toolbar 44px, diagram 250px, panel 266px.
   Under 720px: the toolbar wraps to two rows (76px).
   Under 600px: the five nodes form a column and the diagram grows to 280px. */
* { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; }
main { display: block; }

#app {
    height: 560px;
    display: flex;
    flex-direction: column;
    border: 1px solid silver;
    background: aliceblue;
}
#toolbar {
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: white;
    border-bottom: 1px solid silver;
}
#title { font-size: 19px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }

#body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#network-wrap { flex: 0 0 250px; position: relative; min-width: 0; }
#network { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

#panel {
    flex: 1 1 auto;
    background: white;
    border-top: 1px solid silver;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.35;
    overflow: hidden;
}
#panel h3 { margin: 2px 0 6px 0; font-size: 17px; font-family: Menlo, Consolas, monospace; }
#panel p { margin: 0 0 7px 0; }
#panel .hint { color: dimgray; font-size: 14px; margin-bottom: 8px; }
#panel .label { font-weight: bold; }
#panel .good { color: darkgreen; font-weight: bold; }
#panel .bad { color: firebrick; font-weight: bold; }
#panel .failure {
    background: mistyrose;
    border: 1px solid lightcoral;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 6px 0 8px 0;
}
#panel .score { font-weight: bold; margin-top: 6px; }
.legend { font-size: 13px; color: #333; line-height: 1.6; }
select { font-size: 14px; padding: 4px; border-radius: 6px; border: 1px solid steelblue; max-width: 250px; }
.tool-label { font-size: 14px; white-space: nowrap; }
#panel code { font-family: Menlo, Consolas, monospace; font-size: 14px; background: whitesmoke; padding: 1px 4px; border-radius: 3px; }
.swatch {
    display: inline-block; width: 12px; height: 12px; border-radius: 3px;
    vertical-align: middle; margin-right: 5px; border: 1px solid #333;
}

.btn {
    font-size: 14px;
    padding: 6px 12px;
    border: 1px solid steelblue;
    border-radius: 6px;
    cursor: pointer;
    background: white;
    color: #1f5f99;
}
.btn-primary { background: steelblue; color: white; }
.btn:hover { filter: brightness(0.95); }

/* vis-network hover tooltips */
div.vis-tooltip {
    max-width: 240px;
    white-space: normal !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.3;
    z-index: 20;
}

@media (max-width: 719px) {
    #toolbar { height: 76px; flex: 0 0 76px; flex-wrap: wrap; align-content: center; row-gap: 4px; }
    #title { flex: 0 0 100%; }
}

@media (max-width: 599px) {
    #network-wrap { flex: 0 0 280px; }
    .tool-label { display: none; }
    select { max-width: 175px; }
    #panel {
        font-size: 14px;
        padding: 8px 10px;
    }
    #panel h3 { font-size: 16px; margin-bottom: 4px; }
    #panel p { margin-bottom: 5px; }
    #title { font-size: 16px; }
    .legend { display: none; }
}

.check-label { font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
#panel .cols { display: flex; gap: 16px; }
#panel .cols > div { flex: 1; }
@media (max-width: 599px) { #panel .cols { display: block; } }