html {
  font-size: 18px;
}

@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 0px;
    font-size: 18px;
}


A:link, A:visited {
    text-decoration: none;
    color: blue;
}

A:hover {
    text-decoration: underline;
    color: blue;
}

#info {
    position: absolute;
    text-align: left;
    left:225px;
    top:0px;
    width:800px;
}

.draggable {
    position: absolute;
    /*border: 1px solid #cce6ff*/
}

#d1 {
    top: 5px;
}

#d2 {
    top: 5px;
    left: 70px;
}

#d3 {
    top: 70px;
}

#d4 {
    top: 70px;
    left: 70px;
}

#d5 {
    top: 135px;
}

#d6 {
    top: 135px;
    left: 70px;
}

#d7 {
    top: 205px;
}

#d8 {
    top: 205px;
    left: 70px;
}

#d9 {
    top: 270px;
}

#d10 {
    top: 270px;
    left: 70px;
}

#d11 {
    top: 335px;
}

#d12 {
    top: 5px;
    left: 840px;
}

#d13 {
    top: 5px;
    left: 900px;
}

#d14 {
    top: 70px;
    left: 840px;
}

#d15 {
    top: 70px;
    left: 900px;
}

#d16 {
    top: 135px;
    left: 840px;
}

#d17 {
    top: 135px;
    left: 900px;
}

#d18 {
    top: 335px;
    left: 70px;
}

#d19 {
    top: 205px;
    left: 840px;
}

#d20 {
    top: 205px;
    left: 900px;
}
#btnFoto {
    position: fixed;
    bottom: 60px; /* 20px od dołu ekranu */
    right: 20px; /* 20px od prawej krawędzi */
    padding: 6px 10px;
    font-size: 1em;
    z-index: 1000; /* upewnij się, że jest nad innymi elementami */
    background-color: #007bff;
    color: white;
    border: 1px solid #ccd;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    cursor: pointer;
    max-width: 220px;
    width: auto;
    white-space: normal;
    text-align: center;
    line-height: 1.3em;
}

    #btnFoto:hover {
        background-color: #0056b3;
    }
#zdj {
    position: absolute;
    top: 80px;
    left: 230px;

}
#zrobZdjecie {
    user-select: none; /* blokuje zaznaczanie tekstu */
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none; /* blokuje dymek "Kopiuj" na iOS */
    touch-action: manipulation; /* zapobiega zoomowaniu */
}

#TS {
    position: absolute;
    top: 500px;
    left: 790px;
}
#Odbiory {
    position: absolute;
    top: 20px;
    left: 800px;
}
#SA {
    position: absolute;
    top: 500px;
    left: 860px;
}
#MP {
    position: absolute;
    top: 500px;
    left: 240px;
}
#nr {
    position: absolute;
    top: 500px;
    left: 500px;
}
textarea {
    padding: 5px;
    max-width: 100%;
    line-height: 1,2;
    border-radius: 1px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px #999;
}

#uwagi {
    position: absolute;
    left: 230px;
    top: 400px;
    color: blue;
    font-size: 16px;
}

.btn {
    position: absolute;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 24px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    top: 400px;
}

table, td {
    border-color: #f0f5f5;
    border-style: outset;
    cursor: pointer;
    font-size: 18px;
}
#canvas-container { /* lub inny wrapper dla uwagi + canvas */
    position: relative;
}
#suggestions {
    position: absolute;
    z-index: 1001;
    background: white;
    border: 1px solid #ccc;
    font-size: 18px;
    max-height: 150px;
    overflow-y: auto;
    display: none;
}

    #suggestions div {
        padding: 6px;
        cursor: pointer;
    }

        #suggestions div:hover {
            background-color: #e6f0ff;
        }
.highlight-row {
    background-color: LightBlue;
}
:root {
    --color-blue: #1a75ff;
}
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #e0e0e0;
    }
    :root {
        --color-blue: #4d94ff; /* Jaśniejszy, bardziej widoczny niebieski dla dark mode */
    }
    .highlight-row {
        background-color: #355c7d; /* Przygaszony odcień niebieskiego */
        color: #e0e0e0;
    }
    h1, h2, h3, h4, h5, h6 {
        color: #ffffff;
    }

    a {
        color: #8ab4f8;
    }

    .btn {
        background-color: #333;
        color: #e0e0e0;
        border: 1px solid #444;
    }

        .btn:hover {
            background-color: #444;
        }

    table {
        background-color: #1e1e1e;
        color: #e0e0e0;
        border-collapse: collapse;
    }

        table th, table td {
            border: 1px solid #333;
            padding: 0.5em;
        }

    input, textarea, select {
        background-color: #333;
        color: #e0e0e0;
        border: 1px solid #444;
    }
    #suggestions {
        
        background: #333;
    }
        #adresBox {
        background-color: #1e1e1e;
        color: #e0e0e0;
    }

    .highlight {
        background-color: #2d4b2d;
    }

    .highlight-fail {
        background-color: #4b2d2d;
    }

    .cell-content[contenteditable="true"] {
        background-color: #2b2b2b;
        border: 1px dashed #555;
    }
    A:link, A:visited {
        text-decoration: none;
        color: #84cdfd;
    }

    A:hover {
        text-decoration: underline;
        color: #84cdfd;
    }
    #uwagi {
        position: absolute;
        left: 230px;
        top: 400px;
        color: #4d94ff;
        font-size: 16px;
    }
}