/* Core Page Reset */
html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    overflow: hidden; /* Prevents unwanted window scrolling */
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* Master Layout Grid setup */
.layout-container {
    display: grid;
    /* Defines a strict width balance: Left column (auto), Center column (75%), Right column (remaining space) */
    grid-template-columns: auto 75% 1fr;
    /* Two rows: Top row for the header, bottom row fills the remaining screen height */
    grid-template-rows: auto 1fr;
    height: 100vh;
    width: 100vw;
}

/* 1. Header rules to span entirely across the top */
.logo-banner {
    grid-column: 1 / -1; /* Spans across all columns from left edge to right edge */
    grid-row: 1;
    width: 100%;
    background-color: #808080;
    padding: 10px;
    border-bottom: 2px solid #ccc;
}

.logo-img {
    width: 100%; /* Spans across the top area width */
    max-height: 80px; /* Keeps it clean without eating too much vertical screen */
    object-fit: contain;
    display: block;
}

/* 2. Left Side: Legend Section */
.left-legend {
    grid-column: 1;
    grid-row: 2;
    padding: 20px;
    background-color: #fafafa;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.legend-text {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
}

.legend-img {
    max-width: 150px;
    height: auto;
}

/* 3. Center Section: 3/4 Width Viewscreen */
.center-viewscreen {
    grid-column: 2;
    grid-row: 2;
    background-color: #111; /* Dark frame background to highlight the view area */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    overflow: hidden;
}

.viewscreen-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures the image fits cleanly without stretching */
}

/* 4. Right Side: Side-by-Side Controls under a header */
.right-controls {
    grid-column: 3;
    grid-row: 2;
    padding: 20px;
    background-color: #fafafa;
    border-left: 1px solid #ddd;
}

.controls-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/*.controls-header {
    margin: 0;
    font-size: 1.1rem;
    color: #444;
}*/
/* 4. Right Column: Controls space */
.controls-header {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 12px; /* Reduced font size to match the smaller layout area */
}

/* Side-by-side flex layout for buttons */
.button-group {
    display: flex;
    gap: 5px;
    width: 100%;
}

.control-btn {
    flex: 1; /* Puts controls perfectly side by side with identical widths */
    padding: 12px 5px;
    background-color: #e0e0e0;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}

    .control-btn:hover {
        background-color: #d0d0d0;
    }

/* Forces control icons to fit beautifully inside the side-by-side buttons */
.btn-icon {
    width: 100%;
    height: auto;
    max-height: 24px; /* Restricts the icon height so buttons don't get too tall */
    object-fit: contain; /* Prevents the icons from stretching or distorting */
    display: block;
    margin: 0 auto;
}

/* Organizes the buttons side-by-side inside the right column */
.controls-buttons-inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Explicitly locks them into a single horizontal row */
    gap: 4px !important;
    width: 100% !important;
}

/* Forces the 3 image buttons to divide the column space evenly side-by-side */
.controls-buttons-inline button {
    flex: 0 0 calc(33.33% - 3px) !important; /* Forces a strict 1/3 width allocation */
    width: calc(33.33% - 3px) !important;
    padding: 6px 2px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer;
    box-sizing: border-box;
}

/* Scales the icon artwork dynamically to fit inside the side-by-side buttons */
.btn-icon {
    max-width: 100% !important;
    height: auto !important;
    max-height: 20px !important; /* Keeps the icons from becoming vertically stretched */
    object-fit: contain !important;
    display: block;
}