/* Light and dark theme variables */
:root {
    --background-color: #000000;
    --text-color: #ffffff;
    --primary-color: #1e1e1e;
    --secondary-color: #2e2e2e;
    --border-color: #555555;
    --hover-color: #3e3e3e;
    --button-color: #2e2e2e;
    --button-border-color: gray;
    --button-hover-color: #3e3e3e;
}

/* @media (prefers-color-scheme: light) {
    :root {
        --background-color: #ffffff;
        --text-color: #000000;
        --primary-color: #f0f0f0;
        --secondary-color: #e0e0e0;
        --border-color: #cccccc;
        --hover-color: #d0d0d0;
        --button-color: #e0e0e0;
        --button-border-color: #aaaaaa;
        --button-hover-color: #bbbbbb;
    }
} */

body {
    background-color:  var(--background-color);
    color: var(--text-color);
    font-family: "Noto Sans", sans-serif;
}

.box-div {
    border: 1px solid var(--border-color);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: var(--primary-color);
    width: max-content;
    box-shadow: 
    /* Ambient Shadow */
    0px 4px 6px -1px rgba(0, 0, 0, 0.1),
    /* Key Shadow */
    0px 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.box-div h3 {
    font-size: larger;
}

.log-entry label {
    display: inline-block;
    width: 100px;
    font-weight: bold;
}
.log-entry input, .log-entry select, .log-entry textarea, .box-div input, .box-div select, .box-div textarea, .box-div button {
    width: 200px;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid var(--button-border-color);
    border-radius: 3px;
    background-color: var(--button-color);
    color: var(--text-color);
}



.success {
    color: #c0c0c0;
}

.error {
    color: #f44336;
}

.button-list a {
    text-decoration: none;
    color: var(--text-color);
}

.button-list a {
    display: inline;
    font-size: large;
    background-color: var(--button-color);
    border: 1px solid var(--button-border-color);
    border-radius: 3px;
    padding: 5px;
    transition-duration: 0.5s;
    cursor:pointer;
    box-shadow: 
    /* Ambient Shadow */
    0px 4px 6px -1px rgba(0, 0, 0, 0.1),
    /* Key Shadow */
    0px 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.button-list a:hover {
    transition-duration: 0.2s;
    background-color: #3e3e3e;
}

.button-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 10px;
}
table {
    margin-top: 20px; width: 100%; border-collapse: collapse; border-color: var(--border-color);
}
th, td {
    border: 1px solid var(--border-color); padding: 8px; text-align: left; word-wrap: break-word;
}
tr:nth-child(even) {
    background-color: var(--secondary-color);
}

.button {
    background-color: var(--button-color);
    width: max-content;
    padding: 7px;
    margin-bottom: 10px;    
    
}

/* Mobile Style */
@media (max-width: 600px) {
    h1 {
        text-align: center;
        margin-bottom: 15px;
        margin-top: 15px;
    }
    .box-div {
        width: 90vw !important;
    }
    .log-entry input, .log-entry select, .log-entry textarea {
        width: 95%;
    }
    .button-list a {
        flex: 1 1 calc(50% - 20px); /* Two buttons per row */
        text-align: center;
    }
}

.inline-svg {
      width: 1em;
      height: 1em;
      vertical-align: top;
      margin-right: 0.2em;
}

/* Make canvas respond nicely inside the container */
.chart-container canvas {
    display: block;
    max-width: 100%;
    height: 400px !important;
}