/* =========================================================
   INSTRUKCJA — WIDOK PRACOWNIKA
========================================================= */

#details-modal {
    align-items: center !important;
}

#details-modal .modal-box {
    position: relative;

    width: min(620px, calc(100% - 24px)) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: 88vh !important;

    margin: 12px auto !important;

    padding: 14px 20px 18px !important;

    overflow: hidden !important;

    border-radius: 28px !important;
}


/* ---------------------------------------------------------
   Nagłówek
--------------------------------------------------------- */

#details-modal .modal-title-row {
    position: relative;

    min-height: 48px;

    padding-right: 48px;
}

#modal-title {
    margin: 0 !important;

    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.worker-instruction-close {
    position: absolute;

    top: 0;
    right: 0;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 0;
    border-radius: 13px;

    color: #35423a;
    background: #edf1ee;

    font-size: 21px;
}


/* ---------------------------------------------------------
   Treść
--------------------------------------------------------- */

#modal-content {
    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: calc(88vh - 145px) !important;

    margin-top: 20px !important;
    padding: 0 !important;

    overflow-y: auto !important;
    overflow-x: auto !important;

    color: #3e4d43 !important;

    font-size: 15.5px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;

    /*
       KLUCZOWE:
       Markdown jest HTML-em, więc nie możemy zachowywać
       enterów znajdujących się w kodzie HTML.
    */
    white-space: normal !important;
}


/* ---------------------------------------------------------
   Akapity
--------------------------------------------------------- */

#modal-content p {
    margin: 0 0 9px !important;

    line-height: 1.15 !important;
}

#modal-content > p:first-child {
    margin-bottom: 18px !important;
}

#modal-content > :last-child {
    margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   Listy
--------------------------------------------------------- */

#modal-content ul,
#modal-content ol {
    display: block !important;

    margin: 5px 0 10px !important;
    padding-left: 22px !important;

    line-height: 1.15 !important;

    white-space: normal !important;
}

#modal-content li {
    display: list-item !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    line-height: 1.15 !important;

    white-space: normal !important;
}

#modal-content li > p {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.15 !important;
}


/* zagnieżdżone podpunkty */

#modal-content li > ul,
#modal-content li > ol {
    margin: 5px 0 0 !important;
    padding-left: 22px !important;
}

#modal-content li > ul > li,
#modal-content li > ol > li {
    margin-bottom: 4px !important;
}


/* sekcje typu:
   • Księga HACCP
      ◦ ...
*/

#modal-content > ul > li {
    margin-bottom: 14px !important;
}

#modal-content > ul > li:last-child {
    margin-bottom: 0 !important;
}

#modal-content strong {
    color: #27342b !important;

    font-weight: 750 !important;
    line-height: 1.15 !important;
}


/* ---------------------------------------------------------
   Nagłówki Markdown
--------------------------------------------------------- */

#modal-content h1,
#modal-content h2,
#modal-content h3,
#modal-content h4 {
    margin: 18px 0 7px !important;

    color: #18231c !important;

    line-height: 1.2 !important;
}

#modal-content h1 {
    font-size: 19px !important;
}

#modal-content h2 {
    font-size: 17px !important;
}

#modal-content h3,
#modal-content h4 {
    font-size: 15.5px !important;
}


/* ---------------------------------------------------------
   Tabele
--------------------------------------------------------- */

#modal-content table {
    width: 100% !important;

    margin: 14px 0 !important;

    border-collapse: separate !important;
    border-spacing: 0 !important;

    border: 1px solid #d9e1db !important;
    border-radius: 14px !important;

    background: white;

    font-size: 13.5px !important;
    line-height: 1.25 !important;
}

#modal-content th,
#modal-content td {
    padding: 9px 10px !important;

    border-right: 1px solid #d9e1db !important;
    border-bottom: 1px solid #d9e1db !important;

    text-align: left;
    vertical-align: middle;
}

#modal-content th {
    color: white !important;
    background: #355f28 !important;

    font-weight: 750 !important;
}

#modal-content th:last-child,
#modal-content td:last-child {
    border-right: 0 !important;
}

#modal-content tr:last-child td {
    border-bottom: 0 !important;
}


/* ---------------------------------------------------------
   Przyciski
--------------------------------------------------------- */

#details-modal .worker-instruction-bottom-close {
    display: block !important;

    width: auto !important;
    min-width: 120px !important;
    min-height: 40px !important;

    margin: 18px auto 0 !important;
    padding: 0 20px !important;

    border: 0 !important;
    border-radius: 13px !important;

    color: #26332a !important;
    background: #edf1ee !important;

    font-size: 12px !important;
    font-weight: 750 !important;
}


@media (max-width: 520px) {

    #details-modal .modal-box {
        width: calc(100% - 18px) !important;

        padding: 13px 17px 16px !important;

        border-radius: 25px !important;
    }

    #modal-title {
        font-size: 18px !important;
    }

    #modal-content {
        font-size: 15px !important;
    }

    #modal-content table {
        min-width: 390px !important;
    }

}