/* Global adjustments for all screen orientations */
.control-panel {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #000000;
    color: white;
    padding: 5px;
    z-index: 10; /* Ensure it stays above iframes */
    position: fixed;
    top: 0; /* Move control panel to the top */
    width: 100vw;
    height: 20px; /* Consistent height across all orientations */
}

/* Portrait orientation adjustments (when device height is greater than width) */
@media (orientation: portrait) {
    /* Adjust content to make room for control panel */
    .content {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        align-items: stretch; /* Ensure child elements take full width */
        margin-top: 30px; /* Allow space for control panel */
        height: calc(100vh - 30px); /* Remaining height after control panel */
        width: 100%; /* Ensure content spans the full width */
    }

    /* Full width and proportional height for stacked layout */
    .content iframe,
    .content #adsb-container {
        width: 100%; /* Use full available width */
        flex: 1; /* Share available height equally */
        display: block; /* Ensure elements are visible */
    }

    /* ADS-B container adjustments */
    #adsb-container {
        height: calc(100% + 90px); /* Include space for the footer */
        width: 100%; /* Ensure full width */
    }

    #adsb-container iframe {
        height: calc(100% - 100px); /* Leave space for the footer */
        width: 100%; /* Match the container's width */
    }

    #adsb-container .adsb-footer {
        height: 90px;
        width: 100%; /* Match iframe width */
        position: relative; /* Stays aligned below the iframe */
    }

    /* Ensure full width for marine and windy iframes */
    #marine, #windy {
        width: 100%; /* Use the full width of the container */
        height: 100%; /* Adjust height proportionally */
        flex: 1;
    }

    /* Welcome message styling */
    #welcomeMessage {
        font-size: 1.2em;
        padding: 15px;
        text-align: center;
    }
}

/* Landscape orientation adjustments (when width is greater than height) */
@media (orientation: landscape) {
    .content {
        flex-direction: row; /* Place elements side by side */
        align-items: stretch; /* Ensure full height */
    }

    .content iframe,
    .content #adsb-container {
        width: 33.33%; /* Equal width for each element */
        height: 100%; /* Match parent height */
        display: block;
        flex: 1; /* Evenly split width */
    }

    #adsb-container {
        display: flex; /* Allows for footer stacking inside the container */
        flex-direction: column; /* Stack iframe and footer */
    }

    #adsb-container iframe {
        height: calc(100% - 90px); /* Leaves space for the footer */
        width: 100%;
    }

    #adsb-container .adsb-footer {
        height: 90px;
        width: 100%;
        position: relative;
    }

    #marine, #windy {
        height: 100%; /* Full height */
        flex: 1; /* Equal width distribution */
        display: block;
    }
}

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%;
    overflow: hidden;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

/* Adjust content to allow space for control panel */
.content {
    flex-grow: 1;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-top: 30px; /* Space for control panel at the top */
}

.content iframe {
    border: none;
    display: none; /* Hidden by default */
}

.split iframe {
    width: 50%;
}

/* Adjust height for Marine iframe with 32px trim when displayed */
.show .marine {
    height: calc(100% + 32px); /* Increase height by 32px */
}

/* Welcome message styling */
#welcomeMessage {
    text-align: center;
    color: white;
    background-color: black;
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    padding-top: 40%;
    z-index: 1; /* Ensure it sits on top when no iframes are displayed */
}

.control-panel label, .control-panel select {
    font-size: 0.9em;
}

.control-panel select {
    background-color: #555;
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
}

.control-panel input[type="checkbox"] {
    margin-right: 8px;
}

.control-panel button {
    background-color: #555;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 0.9em;
    cursor: pointer;
}

/* Style for ADS-B footer */
#adsb-container {
    display: none; /* Hidden by default when ADS-B is not selected */
    width: 100%; /* Matches iframe width */
    height: calc(100% + 90px); /* Includes space for the footer */
    position: relative; /* Ensures proper stacking with iframe */
    overflow: hidden; /* Prevents content spillover */
}

#adsb-container iframe {
    width: 100%; /* Matches the container width */
    height: calc(100% - 90px); /* Leaves space for the footer */
    display: block;
    border: none;
    z-index: 1;
}

#adsb-container .adsb-footer {
    position: absolute; /* Ensures it's placed directly below the iframe */
    bottom: 0; /* Sticks to the bottom of the container */
    width: 100%; /* Matches the iframe width */
    height: 90px; /* Fixed height for the footer */
    background-color: #201747;
    color: white; /* Text color */
    text-align: left;
    z-index: 2; /* Brings the footer in front of other elements */
    overflow: hidden; /* Ensures no content overflow */
    display: flex;
}

#file-content {
    width: 100%; /* Full width of the footer */
    height: 100%; /* Full height of the footer */
    overflow-y: auto; /* Enable vertical scrolling if needed */
    white-space: pre-wrap; /* Preserve line breaks */
    padding-left: 10px; /* Inner padding for readability */
    font-family: Arial, sans-serif;
    font-size: 1.2em; /* Adjust font size for readability */
    color: white;
    border: none;
}