:root {
    --color-get: rgb(97, 175, 254); /* = swagger GET */      /* lightskyblue */
    --color-post: rgb(73, 204, 144); /* = swagger POST */     /* lightgreen */
    --color-put: rgb(252, 161, 48); /* = swagger PUT */      /* goldenrod */
    --color-patch: rgb(218, 165, 32); /* = goldenrod */       /* palegoldenrod *//* lightsalmon */
    --color-delete: rgb(249, 62, 62); /* = swagger DELETE */  /* tomato *//* indianred, lightcoral, lightpink, crimson */
    --color-200: rgb(73, 204, 144);
    --color-400: rgb(252, 161, 48);
    --color-500: rgb(249, 62, 62);
}

body {
    font-family: sans-serif;
}

.hide {
    display: none;
}

/*** live-data ***/
#live-data:not(:has(.live-data-log))::after {
    content: 'Waiting for live-data info...';
}
.live-data-log {
    font-size: 1em;
    border-top: 1px lightgrey solid;
    padding: 0.3em;
}
.live-data-log:nth-child(odd) {
    background-color: #eee;
}
.live-data-log:hover {
    background-color: #ddd;
}

code, .font-code {
    font-family: monospace;
    font-size: 1.2em;
    white-space: pre-wrap;
}

.http {
    .header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
        column-gap: 0.5em;
    }

    .timestamp {
        font-size: 0.5em;
        line-height: 0.9;
        display: inline-block;
        width: 7em;
        min-width: 7em;
        max-width: 7em;
        text-wrap: wrap;
    }
    
    .header > .timestamp {
        /* fix alignment */
        position: relative;
        top: -0.7em;
    }

    .type, .method, .response, .summary {
        font-size: 0.8em;
        font-weight: bold;
        background-color: lightgrey;
        padding: 0.4em;
        text-align: center;
        border-radius: 0.2em;
    }

    .type {
        width: 2.5em;
        min-width: 2.5em;
        max-width: 2.5em;
        color: grey;
        
        &.type-web::before {
            /*margin-right: 5px;
            content: '\1F5CF';
            height: 1em;
            overflow-y: hidden;*/
        }

        &.type-api {
        }
    }

    .method {
        width: 4em;
        min-width: 4em;
        max-width: 4em;
        color: white;
        
        &.method-get {
            background-color: var(--color-get);
        }

        &.method-post {
            background-color: var(--color-post);
        }

        &.method-put {
            background-color: var(--color-put);
        }

        &.method-patch {
            background-color: var(--color-patch);
        }

        &.method-delete {
            background-color: var(--color-delete);
        }
    }

    .url {
        font-weight: bold;
        flex-grow: 1;
        overflow-wrap: anywhere;
    }
    
    .response {
        text-wrap: nowrap;
        color: white;
        
        &.response-200 {
            background-color: var(--color-200);
        }
        &.response-400 {
            background-color: var(--color-400);
        }
        &.response-500 {
            background-color: var(--color-500);
        }
    }

    .summary {
        width: 2.5em;
        min-width: 2.5em;
        max-width: 2.5em;

        &.summary-db::before {
            display: inline-block;
            content: '';
            background-image: url('/_content/KdGTI.AspNetCore.LiveMonitoring/live-monitoring/icons/database-icon.webp');
            height: 0.9em;
            width: 0.9em;
            background-size: 100% 100%;
            margin-right: 5px;
            /* fix: vertical alignment */
            /*margin-top: 0.3em;*/
            position: relative;
            top: 0.1em;
        }

        /*&.summary-api::before {
            content: '\2601';
        }*/
    }

    .details {
        margin-left: 8em;
        
        > * {
            margin: 0.4em 0;
        }
        
        .sql {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: baseline;
            
            .statement {
                font-size: 0.8em;
            }
        }
    }
}

/*** Settings ***/
#settings {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em;
}
#settings .right {
    text-align: right;
}
.setting.show-details {
    text-align: right;

    .input {
        margin: 0.3em;
    }
}

/* live-data-log by settings */
body:has(#settings #show-details input:checked) .live-data-log .details {
    display: block !important;
}

body:has(#settings #hide-static-files input:checked) .live-data-log:has(.url-file) {
    display: none !important;
}