/* 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;
    align-items: 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:grid;
    grid-template-columns: 1fr 1fr;
    gap:1rem;
    padding: 1rem;
    border:1px solid gray;
    border-radius: 1rem;
    background-color: white;
}
.notes::before{
    content: "Notes";
    font-weight: 600;
    font-size: large;
    grid-column: 1 / -1;
}
/* ------------------------------ */




/* electrode cards  */
.electrodes{
    counter-reset: electrode;
}

/* layout */
.electrode_screenshot{grid-area: electrode_screenshot;}
.level{grid-area: level;}
.ref_points{grid-area: ref_points;}

.electrode{
    display:grid;
    grid-template-areas:
    'electrode_screenshot electrode_screenshot level level level'
    'electrode_screenshot electrode_screenshot ref_points ref_points ref_points';   
    background-color: white;
    gap:1rem;
    padding:1rem;
    border-radius: 1rem;
    border: 1px solid gray;
    position:relative;
    margin-block: 1rem;
}

/* numbering */
.electrode::after{
    display:flex;
    counter-increment: electrode;
    content:counter(electrode);
    position:absolute;
    width:20px;
    height:20px;
    border:1px solid black;
    border-radius: 50%;
    background-color:burlywood;
    top:1rem;
    right:1rem;
   justify-content: center;
   align-items: center;
}

/* level information */
.level{
    display:grid;
    grid-auto-columns: auto;
    gap:.5rem;
    align-content: center;
}
.level::before{content:'Level information';font-weight: 600;}
.level_name::before{content:'Name: '}
.level_set_name::before{
    content: "Level set: ";
}
.level_number::before{
    content: "Level #: ";
}
/* ---------------------------------------------- */

/* positions  */
.ref_points{
    display:flex;
    flex-flow: column;
    gap:.5rem;
    counter-reset: ref_point;
    justify-content: center;
}
.ref_points::before{content:'Reference points';font-weight: 600;}
.ref_point{
    display:flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap:.5rem;
    counter-increment: ref_point;
    border:1px solid;
    border-radius: 5px;
    padding-inline: .5rem;
    
}
.ref_point::before{content:counter(ref_point)') '}
.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:'RGB:'}
/* ---------------------------------- */

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

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