/*#region properties*/
.certificate-pdf-properties {
    --pdf-cert-text-shadow: 0px 0px 0px black;
    --pdf-cert-item-title-color: var(--pdf-black);
    --pdf-cert-item-color: #404040;
    --pdf-cert-icon-color: var(--pdf-blue);
    --pdf-cert-units-color: var(--pdf-black);
    --pdf-cert-units-space: 0.1em;
    --pdf-cert-line-color: var(--pdf-lightgray);
    --pdf-cert-line-width: 1px;
    --pdf-cert-padding-block: 0.5in;
    --pdf-cert-padding-inline: 0.5in;
    --pdf-cert-font-size: 1rem;
    --pdf-cert-data-font-size: 1.1em;
    --pdf-cert-data-grid-gap: 1.75em;
    --pdf-cert-weight-enteries-bgcolor: #d5d5d5;
    --pdf-cert-weight-enteries-brcolor: #b5b5b5;
    --pdf-cert-weight-record-date-color: var(--pdf-orange);
    --pdf-cert-weight-record-date-bgcolor: var(--pdf-black);
    --pdf-cert-interval-arrow-color: var(--pdf-black);
    --pdf-cert-background-image: url('/_content/TruckScale.PDF/assets/skalio-724x1024-a4.webp');
}
/*#endregion properties*/


/* #region page*/
.certificate-pdf-page {
    position: relative;
    isolation: isolate;
    display: grid;
    font-family: Arial;
    font-size: var(--pdf-cert-font-size);
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: white;
    padding-block: var(--pdf-cert-padding-block);
    padding-inline: var(--pdf-cert-padding-inline);
    color: var(--pdf-black);
}

    .certificate-pdf-page[data-is-preview] {
        width: 8.27in;
        height: 11.69in;
    }

        .certificate-pdf-page[data-is-preview][data-use-background-image] :is(.background-image, .header .logo) {
            image-rendering: auto;
        }

    .certificate-pdf-page[data-use-background-image]:before {
        content: "";
        inset: 0;
        position: absolute;
        background-image: var(--pdf-cert-background-image);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        image-rendering: pixelated;
        z-index: -1;
        opacity: 0.1;
        filter: grayscale(1) blur(0px);
    }

    .certificate-pdf-page *, *:is(:after,:before) {
        line-height: 1;
    }

        .certificate-pdf-page *:after, *:before {
            line-height: 1;
        }
/* #endregion page*/


/* #region certificate-pdf */
.certificate-pdf {
    z-index: 1;
    height: 100%;
    display: grid;
    grid-template-rows: min-content 0.5rem min-content 2rem min-content 1fr min-content;
    grid-template-columns: 1fr 0.5rem auto;
    grid-template-areas:
        "header   header   header  "
        ".        .        .       "
        "data     .        result  "
        ".        .        .       "
        "metadata metadata metadata"
        ".        .        .       "
        "footer   footer   footer  ";
}
/* #endregion certificate-pdf*/


/* #region globals*/
    .certificate-pdf .row-flex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 0.5em;
        align-items: baseline;
    }

    .certificate-pdf .duration {
        display: flex;
        flex-flow: row nowrap;
        direction: ltr;
        justify-content: start;
        gap: 0.25em;
        color: var(--pdf-blue);
        font-weight: bolder;
        font-size: 1.0em;
        text-shadow: var(--pdf-cert-text-shadow);
        align-items: baseline;
    }

        .certificate-pdf .duration > span {
            display: flex;
            align-items: end;
            gap: var(--pdf-cert-units-space);
        }

[dir="rtl"] .certificate-pdf .duration {
    justify-content: end;
}


.certificate-pdf .duration :is(.houres, .minutes, .seconds) {
    color: var(--pdf-cert-units-color);
    text-shadow: none;
    font-size: 0.9em;
}
/* #endregion globals*/


/* #region item*/
.certificate-pdf .item {
    display: grid;
    grid-auto-rows: min-content;
    gap: 0.5em;
    color: var(--pdf-cert-item-color);
}

.certificate-pdf .item-title {
    font-weight: bold;
    color: var(--pdf-cert-item-title-color);
}
/* #endregion item*/


/* #region header */
.certificate-pdf .header {
    grid-area: header;
    padding-block-end: 0.25em;
    border-block-end: var(--pdf-cert-line-width) solid var(--pdf-cert-line-color);
}

    .certificate-pdf .header .certificate-id {
        display: flex;
        font-weight: bold;
        column-gap: 0.5em;
    }
/* #endregion header*/


/* #region footer */
.certificate-pdf .footer {
    grid-area: footer;
    display: grid;
    align-items: end;
}
/* #endregion footer*/


/* #region data*/
.certificate-pdf .data {
    grid-area: data;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    row-gap: var(--pdf-cert-data-grid-gap);
    border-inline-end: var(--pdf-cert-line-width) solid var(--pdf-cert-line-color);
    padding-inline-end: 0.5em;
}

    .certificate-pdf .data .item span {
        line-height: 1.25;
    }

    .certificate-pdf .data .item .truck-id {
        background-color: var(--pdf-yellow);
        line-height: 1;
        color: black;
        padding-inline: 0.4em;
        padding-block: 0.1em;
        border: 2px solid black;
        border-radius: 0.25em;
        font-weight: bolder;
    }
/* #endregion data*/


/* #region result */
.certificate-pdf .result {
    grid-area: result;
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: row;
}
/* #endregion result*/


/* #region net-weight in result*/
.certificate-pdf .net-weight {
    display: grid;
    grid-auto-rows: auto;
    gap: 1em;
    align-self: start;
}

    .certificate-pdf .net-weight .net-weight-value {
        font-weight: bold;
        color: var(--pdf-green);
        font-size: 1.2em;
        text-shadow: var(--pdf-cert-text-shadow);
    }

    .certificate-pdf .net-weight .date {
        color: var(--pdf-blue);
        font-weight: bolder;
        font-size: 1.0em;
        text-shadow: var(--pdf-cert-text-shadow);
    }
/* #endregion net-weight in result*/


/* #region weight-entries in result*/
.certificate-pdf .weight-entries {
    display: grid;
    grid-template-rows: auto min-content auto;
    grid-auto-flow: row;
    align-self: end;
}

    .certificate-pdf .weight-entries:has([data-weight-record]) {
        grid-template-rows: auto auto;
        gap: 2.4em;
    }

.certificate-pdf .item .timestamp {
    font-size: 1em;
}

.certificate-pdf .data-weight-entry {
    background-color: var(--pdf-cert-weight-enteries-bgcolor);
    padding-inline: 0.2em;
    padding-block: 0.2em;
    border-radius: 0.4em;
    grid-auto-rows: auto;
    outline: 2px solid var(--pdf-cert-weight-enteries-brcolor);
}

.certificate-pdf .item-title[data-weight-record]:after {
    content: attr(data-date-weight-record);
    margin-inline-start: 0.25em;
    padding-block: 0.15em 0.1em;
    padding-inline: 0.15em;
    border-radius: 0.25em;
    background-color: var(--pdf-cert-weight-record-date-bgcolor);
    color: var(--pdf-cert-weight-record-date-color);
    font-size: 0.7em;
}

.certificate-pdf .data-interval {
    justify-self: center;
    display: flex;
    align-items: center;
}

    .certificate-pdf .data-interval .double-head-arrow {
        font-size: 2em;
        margin-block-end: 0.2em;
        color: var(--pdf-cert-interval-arrow-color);
    }
/* #endregion weight-entries in result*/


/* #region weight-units-flex*/
.certificate-pdf .weight-units-flex {
    direction: ltr;
    display: flex;
    justify-content: start;
    gap: var(--pdf-cert-units-space);
    align-items: baseline;
}

[dir="rtl"] .certificate-pdf .weight-units-flex {
    justify-content: end;
}

.certificate-pdf .weight-units-flex .units {
    font-size: 0.9em;
    font-weight: bolder;
    color: var(--pdf-cert-units-color);
}

.certificate-pdf .weight-units-flex .weight {
    font-weight: bold;
    color: var(--pdf-blue);
    font-size: 1.0em;
    text-shadow: var(--pdf-cert-text-shadow);
}
/* #endregion weight-units-flex*/


/*#region metadata*/
.metadata {
    --table-border: var(--pdf-cert-line-width) solid var(--pdf-cert-line-color);
    grid-area: metadata;
    height: max-content;
    border-radius: 0.5rem;
    border: var(--table-border);

    legend {
        margin-inline: auto;
        padding-inline: 0.5rem;
        margin-block-end: 1rem
    }
}

    .metadata table {
        table-layout: auto;
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;

        & th {
            border: var(--table-border);
            border-block-start: none;
            text-align: start;
            padding-block-end: 0rem;
        }

        & :is(th, td):first-child {
            border-inline-start: none;
        }

        & :is(th, td):last-child {
            border-inline-end: none;
        }

        & td {
            border: var(--table-border);
            text-align: start;
            padding-block: 0.75rem;
        }

        & tr:last-child td {
            border-block-end: none;
        }

        & td.entry-type-title {
            font-weight: bold;
        }
    }
/*#endregion metadata*/