/* Proxy Control Console - two-screen layout */

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    overflow-x: hidden;
}

#wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

.console-screen {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    box-sizing: border-box;
}

.console-screen--one {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.console-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem;
    box-sizing: border-box;
}

.console-panel h1 {
    margin-bottom: 1rem;
}

.console-panel p {
    margin-bottom: 2rem;
}

.console-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.console-actions button {
    padding: 0.8rem 2rem;
    cursor: pointer;
}

.console-status {
    margin-top: 2rem;
}

.console-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.console-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.console-screen--two {
    padding: 3rem;
    box-sizing: border-box;
    overflow: hidden;
}

.console-screen--two header {
    margin-bottom: 2rem;
}

.console-screen--two .gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin: 0;
}

.console-screen--two .gallery a {
    display: block;
    height: 13vh;
    overflow: hidden;
}

.console-screen--two .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 736px) {
    .console-screen--one {
        grid-template-columns: 1fr;
    }

    .console-image {
        height: 45vh;
    }

    .console-screen--two {
        padding: 1.5rem;
    }

    .console-screen--two .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .console-screen--two .gallery a {
        height: 13vh;
    }
}

/* Proxy result table */
.console-screen--two {
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.results-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 1rem;
}

.results-table th,
.results-table td {
    padding: 1rem 0.8rem;
    text-align: center;
    vertical-align: middle;
}

.results-table th {
    font-weight: 700;
}

.results-table tbody tr {
    height: 4.5rem;
}

.results-summary {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    font-size: 1rem;
}


/* Final layout for proxy results screen */
.console-screen--two {
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.results-summary {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4rem;
    margin-bottom: 2rem;
    font-size: 1.15rem;
}

.results-summary span {
    white-space: nowrap;
}

.results-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 1rem;
}

.results-table th,
.results-table td {
    padding: 1rem 0.7rem;
    text-align: center;
    vertical-align: middle;
}

.results-table th {
    font-weight: 700;
}

.results-table tbody tr {
    height: 4.5rem;
}


/* Force second screen into one full-width layout */
.console-screen--two {
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

.console-screen--two .results-summary {
    width: 100% !important;
    margin: 0 0 2rem 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 4rem !important;
}

.console-screen--two .results-table-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.console-screen--two .results-table {
    width: 100% !important;
    max-width: none !important;
}


/* Fixed table header with scrollable results */
.console-screen--two .results-table-wrapper {
    width: 100% !important;
    max-width: none !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

.console-screen--two .results-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}


/* Prevent scrolling rows from showing through the fixed header */
.console-screen--two .results-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
}

.console-screen--two .results-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 21 !important;
    background: #ffffff !important;
}

.console-screen--two .results-table tbody {
    position: relative;
    z-index: 1;
}


/* Transparent fixed table header */
.console-screen--two .results-table thead,
.console-screen--two .results-table thead th {
    background: transparent !important;
}


/* Original site colors for fixed results header */
.console-screen--two .results-table thead {
    background: linear-gradient(
        to right,
        #49fcd4 0%,
        #49fcd4 50%,
        #ffffff 50%,
        #ffffff 100%
    ) !important;
}

.console-screen--two .results-table thead th {
    background: transparent !important;
}


/* Move header color split slightly to the right */
.console-screen--two .results-table thead {
    background: linear-gradient(
        to right,
        #49fcd4 0%,
        #49fcd4 55%,
        #ffffff 55%,
        #ffffff 100%
    ) !important;
}


/* Fine-tune header color split */
.console-screen--two .results-table thead {
    background: linear-gradient(
        to right,
        #49fcd4 0%,
        #49fcd4 53%,
        #ffffff 53%,
        #ffffff 100%
    ) !important;
}


/* Fine-tune header color split */
.console-screen--two .results-table thead {
    background: linear-gradient(
        to right,
        #49fcd4 0%,
        #49fcd4 51%,
        #ffffff 51%,
        #ffffff 100%
    ) !important;
}


/* Final fine-tune: header color split */
.console-screen--two .results-table thead {
    background: linear-gradient(
        to right,
        #49fcd4 0%,
        #49fcd4 52%,
        #ffffff 52%,
        #ffffff 100%
    ) !important;
}


/* Micro-adjust header color split */
.console-screen--two .results-table thead {
    background: linear-gradient(
        to right,
        #49fcd4 0%,
        #49fcd4 51.5%,
        #ffffff 51.5%,
        #ffffff 100%
    ) !important;
}


/* Micro-adjust header color split */
.console-screen--two .results-table thead {
    background: linear-gradient(
        to right,
        #49fcd4 0%,
        #49fcd4 51.3%,
        #ffffff 51.3%,
        #ffffff 100%
    ) !important;
}


/* Final tiny adjustment */
.console-screen--two .results-table thead {
    background: linear-gradient(
        to right,
        #49fcd4 0%,
        #49fcd4 51.2%,
        #ffffff 51.2%,
        #ffffff 100%
    ) !important;
}


/* Enlarge proxy result table header text */
.console-screen--two .results-table thead th {
    font-size: 1.15rem !important;
}


/* Enlarge proxy results summary */
.console-screen--two .results-summary {
    font-size: 1.3rem !important;
}


/* Bold all proxy result summary text */
.console-screen--two .results-summary {
    font-weight: 700 !important;
}


/* Mobile typography refinement only */
@media screen and (max-width: 736px) {

    .console-screen--one h1 {
        font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .console-screen--one p {
        font-size: clamp(1rem, 4.5vw, 1.3rem) !important;
        line-height: 1.5 !important;
    }

    .console-actions button {
        font-size: clamp(0.95rem, 4vw, 1.15rem) !important;
        line-height: 1.2 !important;
    }

    .console-status {
        line-height: 1.5 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .console-screen--two .results-summary {
        font-size: clamp(0.95rem, 4vw, 1.2rem) !important;
        line-height: 1.5 !important;
        gap: 0.6rem !important;
    }

    .console-screen--two .results-summary span {
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .console-screen--two .results-table {
        font-size: clamp(0.8rem, 3.2vw, 1rem) !important;
    }

    .console-screen--two .results-table thead th {
        font-size: clamp(0.8rem, 3.3vw, 1rem) !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .console-screen--two .results-table td {
        line-height: 1.35 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}