body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    overflow: hidden;
}


/* Container for the entire page */
#container {
    display: flex;
    flex-direction: column;
    height: calc(100% - 60px); /* leave space for toolbar */
    width: 100%; /* Full width */
    overflow: hidden; /* Ensure content doesn't overflow the rounded corners */
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    display: none; /* Initially hidden */
}


@media (prefers-color-scheme: dark) {
    body {
        color: #fff; /* Text color for dark mode */
        background-color: #121212; /* Background for dark mode */
    }
}