@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --scale-instruction: 1;
    --toolbox-hight: 100%;
}

body {
    font-family: Calibri, "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    font-size-adjust: cap-height 0.62;

    margin-bottom: 0;
    margin-top: 0;
    display: flex;
    flex-direction: row;
}

table {
    table-layout: fixed;
}

table,
th,
td {
    border: thin solid black;
    border-collapse: collapse;
    padding: 0.05em 0.2em;
    font-weight: normal;
    text-align: left;
}

.bottom-double-line {
    border-bottom-style: double;
    border-bottom-width: 4px;
}

tr:has(.overlay-disallowed) {
    position: relative;
}

.table-head th {
    font-weight: 700;
}

.center td {
    width: 50%;
}

.top-info td {
    padding-top: 0.5em;
    padding-left: 1.5em;
    padding-right: 5em;
    font-size: small;
}

input {
    border: none;
    border-bottom: 2px dotted black;
}

.top-info input {
    width: 100%;
}

table input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffc000;
    border: 1px solid #000;
    width: 14px;
    height: 14px;
    padding-bottom: 5px;
}

table input[type="checkbox"]:checked {
    background-image: url("./static/tick.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.checkbox-col {
    line-height: 80%;
    font-size: small;
    font-weight: 700;
    padding-left: 0.8em;
    padding-right: 0.5em;
    width: 5%;
}

.all-bold {
    font-weight: 700;
}

.roz-content {
    font-size: small;
    padding-left: 1em;
}

.roz-content label {
    font-size: smaller;
    font-weight: normal;
}

.roz-content:focus {
    outline: 5px auto Highlight;
}

div.inline {
    display: inline-flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
}

.inline * {
    width: auto;
    min-width: 0;
    text-align: center;
}

.inline input {
    height: 1em;
}

/* input widths */

.tor input,
.kmh input,
.linia input {
    width: 3em;
}

.km input {
    width: 5em;
}

.sem input {
    width: 6em;
}

.numpoc input {
    width: 8em;
}

.post input,
.godz input {
    width: auto;
}

.prz input,
.prz label {
    width: 150%;
}

.inne input,
.inne label {
    width: 250%;
}

.inne-dl input {
    width: 380%;
}

/* other */

.tor-zamkniety td,
.tor-zamkniety th {
    background: lightgray padding-box;
}

.tor-zamkniety input {
    background-color: lightgray;
}

.normal-font {
    font-size: small;
    font-weight: normal;
}

.text-area textarea {
    text-align: justify;
    resize: none;
}

.text-area {
    padding-bottom: 3em;
    padding-right: 1em;
    box-sizing: border-box;
}

#instruction-box {
    width: 100%;
}

.fill-page {
    width: 700px;
    padding-bottom: 5px;
    padding-top: 5px;
    transform-origin: left top;
    transition: scale 0.5s ease-in-out;
    scale: var(--scale-instruction);
}

/* section highlights */

.required:invalid {
    background-color: lightcoral;
}

input.optional:invalid {
    background-color: lightblue;
}

input[type="text"]:disabled {
    text-decoration: line-through;
}

input::placeholder {
    color: #000;
    text-decoration: none;
}

/* overlays */

.overlay-disallowed {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url(./static/bar.svg);
    background-repeat: repeat;
    background-size: contain;
    background-color: lightgray;
    opacity: 0.5;
    cursor: not-allowed;
}

/* toolbar */

#toolbar-box {
    display: block;
    width: auto;
    height: calc(var(--toolbox-hight) * var(--scale-instruction) + 5px);
}

#toolbar-flex {
    display: flex;
    position: sticky;
    top: 10px;
    height: 98vh;
    z-index: 10;
    pointer-events: none;
}

/* CSS for bar on right */

#toolbar-flex {
    direction: rtl;
}

#toolbar-flex>* {
    direction: ltr;
}

/* === */

#toolbar-handle-box {
    display: flex;
    align-items: center;
    pointer-events: all;
}

#toolbar-handle {
    width: 2em;
    padding-left: 5px;
}

#toolbar-inner-box {
    width: 100%;
    transition:
        width 0.5s ease-in;
    display: grid;
    align-items: center;
    justify-content: safe center;
    overflow-y: scroll;
    pointer-events: none;
}

#size-holder {
    border: 5px solid #808080;
    opacity: 1;
    width: 25vw;
    border-radius: 8px;
    transition:
        opacity 0.5s ease-in,
        width 0.5s ease-in;
    background-color: white;
    pointer-events: all;
    overflow-x: clip;
}

#tools-box {
    height: 100%;
    min-height: 180px;
    min-width: calc(25vw - 2em);

    display: grid;
    align-items: center;
    grid-template-areas:
        "check save"
        "help help";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 1em;
    row-gap: 0.8em;
    padding: 1em 1em;
}

.button {
    height: 50px;
    border-radius: 1em;
}

#help-box {
    grid-area: help;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: larger;

    border: 1px solid black;
    padding: 0.5em;
}

#help-box h2 {
    margin-top: 0;
    margin-bottom: 0.1em;
}

#help-box h3 {
    margin: 0.1em 0;
}

#help-box p {
    margin: 0.3em 0;
}

#help-box div {
    width: 100%;
}

#field-help .allHelpExamples {
    display: flex;
    background-color: rgba(211, 211, 211, 0.685);
    gap: 6px 4px;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 1vh 0;
}

#field-help .exampleFieldElement {
    width: fit-content;
    height: fit-content;
    line-height: 0.9em;
    padding: 0 8px;
    border-bottom: 3px dotted #000;
    white-space: nowrap;
}

#section-help {
    margin-bottom: 0.1em;
}

#section-help>ul {
    margin-top: 0px;
    padding-left: 30px;
}


/* BUTTON TYPES */

.check {
    grid-area: check;
    background-color: plum;
}

.check:hover {
    background-color: rgba(221, 160, 221, 0.58);
}

.check:active {
    background-color: rgb(221, 137, 221);
}

.save {
    grid-area: save;
    background-color: lightgreen;
}

.save:hover {
    background-color: rgba(144, 238, 144, 0.58);
}

.save:active {
    background-color: rgb(113, 241, 113);
}

.cancel {
    grid-area: cancel;
    background-color: lightsalmon;
}

.cancel:hover {
    background-color: rgba(255, 160, 122, 0.58);
}

.cancel {
    background-color: rgb(255, 130, 80);
}

.button:disabled {
    background-color: lavender;
    border-color: initial;
    cursor: not-allowed;
}

/* Z FIELD - ID GENERATION */

#norm-Z {
    padding-right: 0em;
}

#norm-Z-input {
    width: 40%;
    margin-right: 10px;
}

#norm-Z-button {
    line-height: 0.9em;
}

#id-generator-dialog>*,
#id-generator-dialog select,
#id-generator-dialog input {
    font-size: large;
}

#id-generator-dialog select,
#id-generator-dialog input {
    border: revert;
    width: 5em;
}

#id-generator-dialog ::placeholder {
    color: revert;
}

#id-generator-dialog label {
    font-size: larger;
}

.inner-dialog {
    display: grid;
    column-gap: 1em;
    row-gap: 0.2em;
    margin-bottom: 0.5em;
    align-items: center;
}

.inner-dialog select,
.inner-dialog input {
    grid-column: 2;
}

#set-id {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* TEMPORARY MOBILE */

@media only screen and (max-width: 900px) {
    /* #toolbar-box {
        display: none;
    } */

    #toolbar-box {
        position: fixed;
        right: 0;
    }

    #help-box {
        display: none;
    }

    #size-holder {
        min-width: 200px;
    }

    #tools-box {
        grid-template-rows: 1fr;
        row-gap: 0;
        min-height: 130px;
    }
}

@media (max-width: 1200px) {
    #help-box h3 {
        margin: 0.3em 0;
    }

    #help-box p {
        margin: 0.1em 0;
    }

    #help-box {
        font-size: medium;
    }
}


/* PRINT CSS */

thead th,
tfoot th {
    padding: 0;
    border: 0;
}

.table-head th {
    border-top: none;
}

@page {
    size: A4 portrait;
}

/* OLD PRINT MODE */
@media print {
    :root {
        --scale-instruction: 1;
    }

    body {
        margin: 0;
    }

    #toolbar-box {
        display: none;
    }

    table {
        table-layout: fixed;
        width: auto;
    }

    label {
        font-size: medium !important;
    }

    tr {
        break-after: avoid;
        break-inside: avoid;
        break-before: avoid;
    }

    td,
    th {
        font-size: large !important;
        padding: 0.1vh 0.2em;
    }

    .table-head th {
        font-size: 1.4em !important;
    }

    .fill-page {
        scale: 1;
        width: inherit;
        padding: 0;
    }

    .post input {
        width: 160px;
    }

    table input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    tr.bottom-double-line {
        break-after: page;
    }

    button {
        display: none;
    }

    #norm-Z {
        padding-right: 5em;
    }

    #norm-Z br {
        display: none;
    }

    input:not([type="checkbox"]) {
        background-color: transparent !important;
        appearance: none !important;
        -moz-appearance: textfield !important;
        font-size: large !important;
    }

    #norm-Z-input {
        width: 100%;
        margin-right: inherit;
    }

    .bottom-double-line {
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }

    .godz input {
        font-family: Calibri, "Open Sans", sans-serif;
        line-height: 1.2em;
    }

    .inne input,
    .inne label,
    .prz input,
    .prz label {
        width: 200%;
    }

    input[type="time"]:invalid,
    input[type="time"]:disabled {
        color: transparent;
    }

    .tor-zamkniety td,
    .tor-zamkniety th {
        background: #e8e8e8 padding-box;
    }

    .tor-zamkniety input {
        background-color: #e8e8e8;
    }

    .overlay-disallowed {
        display: none;
    }
}