body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1e1e1e;
    color: #ffffff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    /* height: 100vh; */
    margin: 0 auto; /* Center the content */
    max-width: 1380px; /* Constrain width to plot size and center */

}
table {
    border-collapse: collapse;
    /* width: auto; */
    background-color: #2d2d2d;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow: hidden;
}

#outputTable {
    margin-top: 2em;
}

th, td {
    text-align: left;
    padding: 20px;
    color: #dcdcdc;
}
th {
    background-color: #0078d4;
    color: #ffffff;
}

h1, h2, h3, p, ol {
    margin: 0;
}

h1{
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 1em;
}

h2{
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: .5em;
}

h3{
    font-size: 1.1em;
    font-weight: normal;
}

a {
    color: #0078d4;
    text-decoration: none;
}

li, p, h3 {
    line-height: 1.7em;
}

#loading{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    
    opacity: 0;
    z-index: 1000;
}

input[type="checkbox"] {
    accent-color: #0078d4;
    transform: scale(1.5); /* Makes checkboxes larger */
    margin: 10px; /* Adds space around checkboxes for easier interaction */
    cursor: pointer; /* Changes cursor to pointer to indicate clickable area */
}
tr:hover {
    background-color: #434245;
    th {
        background-color: #0078d4;
    }
}


/* th:nth-child(1), td:nth-child(1),
th:nth-child(2), td:nth-child(2) {
    white-space: nowrap;
} */
/* th:nth-child(3), td:nth-child(3) {
    width: 100%;
} */

#doublepointLogo {
    width: 230px;
    padding: 1em 0;
    display: block;
    fill: #fff;
}
/* Style for connection button */
button.connect, button.reconnect, button.reset, button.pausePlay, button.camera, button.switch-camera, button.close-camera, button.open-dpad-grid, button.open-flick-ui {
    font-size: 16px;
    padding: 10px 20px;
    min-width: 180px;
    margin: 2em auto;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 1; /* Ensure connect button has z-index 1 */
}

/* Chart controls section styling */
.chart-controls {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin: 1em 0;
}

.chart-controls button.reset,
.chart-controls button.pausePlay {
    position: static;
    margin: 0;
}

/* Connect section styling */
.connect-section {
    display: flex;
    justify-content: center;
    margin: 1em 0;
}

.connect-section button.connect,
.connect-section button.reconnect {
    position: static;
    margin: 0;
}

.connect-section button.reconnect {
    background-color: #4CAF50; /* Green */
    color: white;
}

.connect-section button.reconnect:hover {
    background-color: #45a049;
}

/* Interface controls section styling */
.interface-controls {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin: 1em 0;
    flex-wrap: wrap;
}

.interface-controls button.camera, 
.interface-controls button.close-camera,
.interface-controls button.switch-camera,
.interface-controls a.open-dpad-grid,
.interface-controls a.open-flick-ui,
.interface-controls a.open-debug-console {
    position: static;
    margin: 0;
}

a.open-dpad-grid {
    background-color: #0078d4; /* Blue */
    color: white;
    display: block;
    text-align: center;
    min-width: 140px;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

a.open-flick-ui {
    background-color: #0078d4; /* Blue */
    color: white;
    display: block;
    text-align: center;
    min-width: 140px;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

a.open-debug-console {
    background-color: #0078d4; /* Blue */
    color: white;
    display: block;
    text-align: center;
    min-width: 140px;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

a.open-dpad-grid:hover {
    background-color: #005a9e;
}

a.open-flick-ui:hover {
    background-color: #005a9e;
}

a.open-debug-console:hover {
    background-color: #005a9e;
}

button.connect {
    background-color: #4CAF50; /* Green */
    color: white;
}
button.connect:hover {
    background-color: #45a049;
}
button.reconnect {
    background-color: #4CAF50; /* Red */
    color: white;
}
button.reconnect:hover {
    background-color: #45a049;
}



button.reset, button.pausePlay {
    background-color: #414145; /* Blue */
    color: white;
    display: none;
}

button.reset:hover, button.pausePlay:hover {
    background-color: #28282b;
}

button.camera, button.close-camera {
    background-color: #0078d4; /* Blue */
    color: white;
}
button.camera:hover{
    background-color: #005bb5;
}

button.close-camera {
    background-color: #fd5656; /* Red */
    color: white;
}

button.close-camera:hover {
    background-color: #ff3333;
}

button.switch-camera {
    background-color: #414145; /* Blue */
    color: white;
    display: none; /* Hidden by default */
}
button.switch-camera:hover {
    background-color: #28282b;
}


.camera {
    position: fixed;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #0078d4;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.camera:hover {
    background-color: #005bb5;
}


#cameraStream {
    position: fixed;
    bottom: 2.5em;
    right: 2.5em;
    width: 300px;
    height: calc(3 / 4 * 300px);
    border-radius: 5px;
    display: none; /* Hidden by default */
    cursor: move; /* Indicate draggable */
    z-index: 9999; /* High z-index to be on top of everything */
    object-fit: contain; /* Prevent cropping */
    touch-action: none; /* Prevent default touch actions */
}


/* Fixed height for connection status row */
td {
    height: 40px;
}
table td:first-child {
    width: 200px;
}

.introHL{
    padding: 2em 0 0 0;
}
.introText {
    text-align: left;
    display: flex; 
}

.introText p {
    margin-left: 6em;
    font-size: 1em;
}

.introTools {
    margin: 2em 0 4em 0;
    display: flex;
}



#chartContainer, #chart {
    display: flex;
    margin-top: 2em;
    flex-direction: row-reverse;
    justify-content: flex-end;
    overflow-x: auto; /* Enables horizontal scrolling */    
    overflow-y: hidden; /* Disables vertical scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS devices */
    width: 100%; /* Ensures the container fits within the viewport width */
    min-height: 380px;
    border-radius: 5px;
}


.u-legend{
    background-color: #292929;
    text-align: left;
    border-radius: 0 0 5px 5px;
}
.u-legend th{
    border:none;
    background-color: #292929;
}

.uplot canvas{
    background-color: #3c3c3f;
    padding: 2em 0em .8em 1em;
    border-radius: 5px 5px 0 0;
}

.u-legend .u-marker{
    border-radius: 50px;
    border-width: thick !important;
    width: 10px;
    height: 2px;
}

.u-inline th{
    display: inline;
    padding-left: 1em;
}

.u-inline tr{
    margin: 0;
}

.u-value{
    font-size: 1em;
    width: 2em;
    vertical-align: unset;
}

td.u-value{
    height: auto;
    padding: 1em 0;
}

.u-value::after {
    content: round(attr(data-value));
}

.u-label{
    font-weight: normal;
    font-size: .8em;
}


@media (min-width: 1441px) {
    #chart {
        justify-content: center;
        max-width: 1800px;
        margin: 0 auto;
    }
    
    .top-controls {
        margin: 5em 0 2em 0;
    }
    
    .camera-section {
        margin: 1em 0 4em 0;
    }


}

/* MacBook Pro 16-inch specific adjustments */
@media (min-width: 1440px) and (max-width: 3072px) and (-webkit-min-device-pixel-ratio: 2) {
    body {
        max-width: 1280px;
        padding: 30px;
    }
    
    #chartContainer, #chart {
        min-height: 320px;
    }
    
    .chart-controls {
        margin: 1em 0 1.5em 0;
    }
    
    th, td {
        padding: 15px;
    }
    
    #cameraStream {
        width: 250px;
        height: calc(3 / 4 * 250px);
    }
    
    .uplot canvas {
        padding: 1.5em 0em .6em .8em;
    }
    
    .top-controls {
        margin: 3em 0 1.5em 0;
    }
    
    .camera-section {
        margin: 1em 0 2.5em 0;
    }
}

@media (max-width: 1440px) {
    #chart {
        justify-content: flex-start;
    }

}

@media (max-width: 800px) {

        /* Apply to all input and button elements */
    input, button {
        -webkit-appearance: none; /* Remove default iOS styling */
        border-radius: 0; /* Remove rounded corners */
    }

    /* Specific styles for input[type="submit"] and input[type="button"] */
    input[type="submit"], input[type="button"] {
        -webkit-appearance: none; /* Remove default iOS styling */
        border-radius: 0; /* Remove rounded corners */
    }

    /* Specific styles for buttons */
    button {
        -webkit-appearance: none; /* Remove default iOS styling */
        border-radius: 0; /* Remove rounded corners */
    }

    body {
        padding: 20px; /* Reduced padding for smaller screens */
    }

    h1 {
        font-size: 1.8em; /* Slightly smaller font size */
    }

    h2 {
        font-size: 1.3em;
    }

    h3, p, li {
        font-size: 0.9em; /* Adjust font size for readability */
    }

    .intro, .intro p, .intro ol {
        margin-left: 0;
        margin-top: 1em;
    }
    .intro {
        flex-direction: column;
    }

    .chart-controls {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        margin: 1em 0;
    }
    
    .camera-section {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        margin: 1em 0;
    }
    
    .camera-section button.switch-camera {
        display: block;
    }
    
    .top-controls {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        margin: 2em 0 1em 0;
    }

    #cameraStream {
        top: auto;
        bottom: .5em;
        right: .5em;
        left: auto;
        max-height: 293px;
        max-width: 220px;
        border-radius: .5em;
        z-index: 9999;
        /*background-color: #dadada93;*/
    }








   

    input[type="checkbox"] {
        transform: scale(1.2); /* Slightly larger checkboxes */
    }

    .uplot canvas{
        background-color: #3c3c3f;
        padding: 2em .1em .8em .1em;
        border-radius: 5px 5px 0 0;
    }
    
}

/* Additional media query for very small screens */
@media (max-width: 480px) {
    .intro {
        flex-direction: column; /* Stack intro content vertically */
    }

}