/* main */
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
    line-height: 1.5;
}

img{
    max-width:100%;
}

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    max-width:1024px;
    margin:0 auto;
    background-color: dimgrey;
}

button{
    padding:1rem;
}

/* add a logo  */
.report::before{
    display:block;
    content:'';
    background-image: url('https://www.gmccs.de/media/img/gmccs/gmccs_de.svg');
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    height:50px;
    margin-inline: 1rem;
}

/* report  */
.report{
    padding:1rem;
}
.report > div{
    margin-block: 1rem;
}

/*  header layout */
.part_screenshot{grid-area:screenshot;}
.date{grid-area:date;}
.user{grid-area:user;}
.part_file_path{grid-area:part_file_path;}
.part_file_name{grid-area:part_file_name;}
.report_header{
    display:grid;
    grid-template-areas:
    'screenshot screenshot header header header'
    'screenshot screenshot date date date'
    'screenshot screenshot user user user'
    'screenshot screenshot part_file_path part_file_path part_file_path'
    'screenshot screenshot part_file_name part_file_name part_file_name';
    gap:1rem;
    border:1px solid gray;
    border-radius: 1rem;
    padding:1rem;
    justify-items: center;
    align-items: center;
    background-color: white;
}

/* screenshot  */
.electrode_screenshot{
    display:flex;
    justify-content: center;
}


.date, .part_file_name, .part_file_path, .user{
    justify-self: left;
}
.report_header::before
{
    content:'X+ Electrodes - Report';
    font-weight: 600;
    font-size: large;
    grid-area: header;
    justify-self: left;
}
.date::before{
    content:'Date: ';
}
.user::before{
    content:'User: ';
}
.part_file_path::before{
    content:'Full path: ';
}
.part_file_name::before{
    content:'Mastercam file: ';
}
/* -------------------------------- */

/* notes  */
.notes{
    display:flex;
    flex-flow: column;
    justify-content: center;
    gap:1rem;
    padding: 1rem;
    border:1px solid gray;
    border-radius: 1rem;
    background-color: white;
}
.notes::before{
    content: "Notes";
    font-weight: 600;
    font-size: large;
}
/* ------------------------------ */

/* electrodes  */
.electrodes{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap:1rem;
    counter-reset: electrode;
}
.electrode{
    display:flex;
    flex-direction: column;
    border:1px solid gray;
    border-radius: 1rem;
    padding:1rem;
    position:relative;
    background-color: white;
}

.level{
    display:grid;
    grid-auto-columns: auto;
    justify-items: center;
}
.level_name{font-weight: 600;text-transform: uppercase;}

.level_set_name::before{
    content: "Level set: ";
}
.level_number::before{
    content: "Level #: ";
}
/* ---------------------------------------------- */

/* positions  */
.ref_points{
    margin-top:1rem;
    display:flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    gap:1rem;
    counter-reset: ref_point;
}
.ref_point{
    border:3px solid gray;
    border-radius: 1rem;
    padding:1rem;
    position:relative;
}
.ref_point *{
    display:flex;
    justify-content: space-between;
    gap:1rem;
}
.ref_point:first-child:before{
    counter-increment: ref_point;
    content: 'Start';
    display:inline-flex;
    width:100%;
    justify-content: center;
    font-weight: 600;
}
.ref_point:last-child:before{
    counter-increment: ref_point;
    content: 'Dest';
    display:inline-flex;
    width:100%;
    justify-content: center;
    font-weight: 600;
}
.ref_point *{
    display:flex;
    justify-content: space-between;
    gap:1rem;
}
.pos_x::before{
    content:"X: ";
}
.pos_y::before{
    content:"Y: ";
}
.pos_z::before{
    content:"Z: ";
}
.pos_c::before{
    content:"C: ";
}
.color_index::before{
    content:"Color #: ";
}
.color_hex::before{
    content:"Color Hex: ";
}
.color_hex, .color_index{
    display:none;
}

/* ---------------------------------- */

/* print  */
@media print{
    body{
        background-color: white;
    }

    .electrode{
        page-break-inside: avoid;
    }
}