/*     * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    } */

/*testing*/
/*.page-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;*/
/* 🧨 Neutralize all spacing that causes the gap */
/*margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 100%;
    height: 100vh;*/ /* match your layout */
/*box-sizing: border-box;*/
/* Ensure child .page-layout fills it */
/*flex: 1 1 auto;
}*/
.page-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    /* 🧩 Allow natural height growth instead of fixed vh */
    width: 100%;
    height: auto; /* let it expand with content */
    min-height: 0; /* prevent flex overexpansion */

    margin: 0;
    padding: 0;
    gap: 0;
    box-sizing: border-box;
}

.canvas-column,
.canvas-wrapper,
.canvas-inner,
.canvas-area,
.canvas-area canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    border: none; /* remove any borders */
    box-sizing: border-box;
}

.page-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50vh; /*THIS locks it to viewport height*/
    /*overflow: hidden; THIS ensures you won’t see scrollbars.*/
    align-items: flex-start; /* ADDED so columns align to top */
}
.page-layout-fixed-height {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh; /*THIS locks it to viewport height*/
    /*overflow: hidden; THIS ensures you won’t see scrollbars.*/
    align-items: flex-start; /* ADDED so columns align to top */
}
.canvas-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.canvas-wrapper {
    width: 100%;
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio for large screens */
}

.canvas-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.canvas-area canvas {
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid #ccc; /* optional */
    pointer - events: auto; /* must be enabled for OrbitControls */
    touch - action: none; /* prevent browser pinch/scroll interference */
}

.reset-btn {
    margin: 0.5rem;
    align-self: flex-start;
}

.results-panel {
    flex: 1;
    overflow-y: auto;
    max-height: auto;
    padding: 0rem;
    width: calc(100% - 300px); /* allow 300px for lil-gui menu, which should be set the same*/
}
.results-panel-scroll {
    flex: 1;
    overflow-y: auto;
    max-height: 100vh; /*max height 100% of view height*/
    padding: 0rem;
}




#myCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.gui-panel-s {
    flex: 0 0 auto; /* size based on content (dat.GUI) */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* prevent stretching */
    /*padding: 0.5rem; /* optional spacing */
    max-width : 300px; /* max width*/
}

.form-panel {
    width: 250px;
    padding: 2px;
    background-color: #f9f9f9;
    border-left: 1px solid #ccc;
    overflow-y: auto;
}

table {
    width: 100%;
}

td {
    padding: 2px;
}

.red-cell {
    color: black;
    background-color: red;
}

.tiny-text {
    /*         font-size: 10px;  or 0.7rem  or x-small or xx-small */
    font-size: small;
    
}
.x-tiny-text {
    font-size: x-small;
}
.xx-tiny-text {
    font-size: xx-small;
}
.green-cell {
    color: green;
}

.form-control {
    width: 100%;
}

.small-form {
    font-size: 0.85rem; /* or e.g., 12px */
}

.tight-form table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.75rem;
    line-height: 1; /* Reduce vertical text spacing */
}

.tight-form td {
    padding: 0px;
    margin: 0px; /* Reduce vertical and horizontal padding */
    vertical-align: middle;
}

.tight-form label {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    white-space: nowrap;
}

.tight-form .form-control {
    padding: 0px 0px;
    font-size: 0.75rem;
    width: 100%;
}

.tight-form input,
.tight-form select,
.tight-form textarea {
    padding: 0px;
    margin: 0px;
    font-size: 0.85rem;
    line-height: 1;
    box-sizing: border-box;
}


img {
    width: 100%;
    height: 100%;
}

.table-fit-width {
    width: 100%;
    border-collapse: collapse;
   /* table-layout: fixed; /* keeps columns from expanding beyond width */
    font-size: clamp(0.3rem, 0.5vw + 0.5rem, 1rem); /* fluid font sizing */
}

    .table-fit-width th,
    .table-fit-width td {
/*        border: 1px solid #ccc;*/
        padding: 2px;
    /*    text-align: left;*/
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal; /* allow wrapping */
    }
    /* Red background only on the text span */
    .table-fit-width .text-red-bg {
        background-color: red;
        color: white;
        display: inline; /* inline keeps background tight to text */
        padding: 0 2px; /* optional small padding */
    }
    .table-fit-width .text-green-bg {
        background-color: green;
        color: white;
        display: inline; /* inline keeps background tight to text */
        padding: 0 2px; /* optional small padding */
    }
.right-align {
    text-align: right;
}

/* WT added : When screen is smaller than 768px (typical tablet/phone breakpoint) */
@media (max-width: 768px) {
    .page-layout {
        flex-direction: column; /* stack vertically */
        height: auto; /*  allow content to grow  */
    }

    .canvas-column {
        height: auto;
    }

    .canvas-wrapper {
        padding-top: 0; /* remove aspect ratio trick */
        height: auto; /* wrapper adapts to child */
    }

    .canvas-inner {
        position: relative; /* not absolute */
        width: 100%;
        height: auto;
    }

    .canvas-area canvas {
        width: 100%; /* fill available width */
        height: 70vh; /* take 70% of viewport height (tweak as needed) */
        display: block;
    }

    .gui-panel-s {
        width: 100%; /* full width below canvas */
        border-left: none;
        border-top: 1px solid #ccc; /* separator on top instead of left */
        flex-direction: row;
        align-items: center;
    }

    .results-panel {
        flex: 1;
        overflow-y: auto;
        max-height: auto;
        padding: 0rem;
        width: 100%; /*full width */
    }

    .results-panel-scroll {
        flex: 1;
        overflow-y: auto;
        max-height: 100vh; /*max height 100% of view height*/
        padding: 0rem;
        width: 100%; /* full */
    }

    .form-panel {
        width: 100%; /* full width below canvas */
        border-left: none;
        border-top: 1px solid #ccc; /* separator on top instead of left */
    }
}