:root {
    /* Define custom properties for colors */
    --ln-bg-color: hsl(0, 0%, 95%);
    --caption-bg-color: hsl(0, 0%, 90%);
    --caption-color: hsl(0, 0%, 5%);
}

/* Apply box-sizing to all elements for consistent box model */

* {
    box-sizing: border-box;
}

html {
    font-family: monospace;
    font-size: 16px;
}

/* Set max-width and center the body content */
body {
    max-width: 1200px;
    margin: auto;
}

.HEADER {
    width: 100%;
    /* Use CSS Grid for header layout */
    display: grid;
    grid-template-columns: minmax(200px, auto) auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "a b"
        "a c"
        "a d";
}

.HEADSCREENSHOT {
    /* Position the screenshot within the grid */
    grid-area: a;
    justify-self: center;
    align-self: center;
}

/* Make the screenshot responsive */
.HEADSCREENSHOT img {
    max-width: 100%;
    height: auto;
    display:block;
}

.LOGO {
    /* Position the logo within the grid */
    grid-area: b;
    text-align: right;
}

/* Don't use the logo.png */
/* load the logo from the web */
.LOGO>img {
    content: url("https://www.gmccs.de/media/img/gmccs/gmccs_de.svg");
    max-width: 100%;
    max-height: 50px;
    padding: 5px;
}

.HEADINFOTEXT {
    /* Position the info text within the grid */
    grid-area: c;
    justify-self: right;
    align-self: center;
}

.HEADINFOTEXT_TABLE{
    border-spacing: 5px;
}
.HEADINFOTEXT_TABLE td {
    /* Style table cells */
    background-color: var(--ln-bg-color);
    border-radius: 5px;
    padding-inline: 5px;
}

/* Hide completely empty rows (modern browsers supporting :has()) */
.HEADINFOTEXT_TABLE tbody tr:not(:has(td:not(:empty))) {
    display: none;
}

.COMMENT {
    grid-area: d;
    padding: 5px;
    display: grid;
    grid-template-columns: auto;
    justify-content: end;
}

.COMMENT_NAME {
    /* Hide the comment name */
    display: none;
}

.COMMENT_TEXT {
    padding: 5px;
    /* Style the comment text background and border */
    background-color: var(--ln-bg-color);
    border-radius: 5px;
}

/* Hide completely empty comment (modern browsers supporting :has()) */
.COMMENT:not(:has(p:not(:empty))) {
    display: none;
}

.COMMENT p {
    /* Remove default margin from paragraphs within comments */
    margin: 0;
}


/* Content section styling */
/* content */
.CONTENT {
    margin-top: 1rem;
}

.CONTENT table {
    width: 100%;
    /* Collapse table borders and set font size */
    border-collapse: collapse;
    font-size: 12px;
}

.CONTENT td,
.CONTENT th {
    border: 1px solid gray;
    /* Style table cells and headers */
    text-align: center;
    padding-inline: 5px;
}

.CONTENT tfoot {
    /* Center align text in table footer */
    text-align: center;
}

.CONTENT tbody tr {
    /* Set line height for table body rows */
    line-height: 1.5;
}

.CONTENT tbody tr:nth-child(even) {
    /* Alternate row background colors */
    background-color: var(--ln-bg-color);
}


/* Renaming and hiding original table headers */
/* Hide original headers by setting font-size to 0 */
/* operation type */
.th_30,
/* cutter compensation */
.th_20,
/* corner radius */
.th_114,
/* tl diam */
.th_102,
/* Cycle time */
.th_24 {
    font-size: 0;
}

/* Set new header name using ::after pseudo-element */
.th_30::after {
    content: "Strategy";
    font-size: 12px;
}

/* New tool compensation name */
.th_20::after {
    content: "Comp";
    font-size: 12px;
}

/* New tool corner radius name */
.th_114::after {
    content: "Rad";
    font-size: 12px;
}

/* New tool diameter name */
.th_102::after {
    content: "Dia";
    font-size: 12px;
}

/* New cycle time name */
.th_24::after {
    content: "Time";
    font-size: 12px;
}


/* Caption styles for grouped tables */
.CONTENT caption:not(:empty) {
    /* Style non-empty captions */
    font-size: larger;
    font-weight: bold;
    padding: 5px;
    cursor: pointer;
    border-radius: .5em 0.5em 0 0;
    border: 1px solid gray;
    border-bottom: 0px;
}

.CONTENT caption,
.CONTENT thead {
    /* Set background and text color for captions and table headers */
    background-color: var(--caption-bg-color);
    color: var(--caption-color);
}

/* Styles for shrinked tables */
.shrinkedTable tbody,
.shrinkedTable tfoot,
.shrinkedTable thead {
    /* Hide body, footer, and header of shrinked tables */
    display: none;
}

.shrinkedTable caption {
    /* Override caption styles for shrinked tables */
    font-size: x-small !important;
    font-weight: normal !important;
    color: gray !important;
    border: 1px dotted gray !important;
    background-color: white !important;
}


/* Avoid page breaks on table rows when printing */
table {
    page-break-inside: auto
}

tr {
    /* Prevent page breaks inside table rows */
    page-break-inside: avoid;
    page-break-after: auto
}

/* Hide group name column and table footer */
.th_27,
.td_27,
tfoot {
    display: none;
}


/* Left-aligned text for specific table cells */
.td_30,
.td_21,
.td_111,
.td_118 {
    text-align: left !important;
}


@media print {
    /* Hide shrinked tables when printing */
    .shrinkedTable {
        display: none;
    }
}