/* =============================================================================
   FILE: architecture.layout.css
   PURPOSE: Non-breakable container hierarchy for TMS Web Core pages/features
   NOTES:
   - No body styling
   - No font styling
   - No absolute positioning for main canvas; absolute allowed only for overlays
   ============================================================================= */

/* ---------------------------------------------
   H0: APP SHELL (once per app)
   .appshell
     .appshellheader
     .appshellpagehost
---------------------------------------------- */



.appshell{
    display                                 : flex;
    flex-direction                          : column;
    height                                  : 100vh;
    min-height                              : 0;
    overflow                                : hidden;
}

.appshellheader{
    flex                                    : 0 0 auto;
}

.appshellpagehost{
    flex                                    : 1 1 auto;
    min-height                              : 0;
    overflow                                : hidden;
}

/* ---------------------------------------------
   H1: PAGE ROOT (once per page)
   (current: homepagecontainer)
---------------------------------------------- */

.pageroot{
    position                                : relative;
    width                                   : 100%;
    height                                  : 100%;
    min-height                              : 0;

    display                                 : flex;
    flex-direction                          : column;

    align-items                             : stretch;
    justify-content                         : flex-start;

    overflow                                : hidden;
}

/* ---------------------------------------------
   H2: FEATURE ROOT (once per major feature)
   Wraps one feature to isolate it from global page rules
---------------------------------------------- */

.featureroot{
    position                                : relative;
    width                                   : 100%;
    height                                  : 100%;
    min-height                              : 0;
    overflow                                : hidden;
}

/* ---------------------------------------------
   H3: FEATURE LAYOUT OWNER (grid or flex)
   (current: horizcenterdivcontainer)
---------------------------------------------- */
.featurecontentroot{
    position                    : relative;
    width                       : 100%;
    height                      : 100%;
    min-height                  : 0;

    display                     : flex;
    flex-direction              : column;

    overflow                    : hidden;
}

.featurecontentroot .builder-main-div{
    flex                        : 1 1 auto;
    min-height                  : 0;
    overflow                    : auto;
}

.featurecontentroot .builder-footer-div{
    flex                        : 0 0 auto;
    overflow                    : visible;
}

.featureflexlayout{
    position                                : relative;

    display                                 : flex;
    flex-direction                          : column;
    flex-wrap                               : nowrap;
    justify-content                         : flex-start;
    align-items                             : stretch;

    width                                   : 100%;
    height                                  : 100%;
    min-height                              : 0;

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

    overflow                                : hidden;
}

.featurelayout{
    display                                 : grid;
    grid-template-columns                   : 300px 1fr;
    grid-template-rows                      : 1fr 100px;

    width                                   : 100%;
    height                                  : 100%;
    min-height                              : 0;

    box-sizing                              : border-box;
    padding                                 : 10px;
    gap                                     : 10px;

    overflow                                : hidden;
}

/* Left menu area (optional)
   (current: navigatordiv) */
.featuremenu{
    flex                                    : 0 0 300px;

    width                                   : 300px;
    height                                  : 100%;
    min-height                              : 0;

    overflow                                : auto;
}

/* Right content cell (layout cell owner)
   (current: builder-main-div) */
.featurecontentcell{
    flex                                    : 1 1 auto;

    position                                : relative;

    min-width                               : 0;
    height                                  : 100%;
    min-height                              : 0;

    display                                 : flex;
    flex-direction                          : column;

    overflow                                : hidden;
}

.featurecontentcell > .contentsurface{
    flex                                    : 1 1 auto;
    min-height                              : 0;
}

.featurecontentcell > .featurefooter{
    flex                                    : 0 0 auto;
}

/* Right footer cell
   (current: builder-footer-div) */
.featurefooter{
    grid-column                             : 2;
    grid-row                                : 2;

    min-height                              : 0;
    overflow                                : hidden;
}

.dashboardmaincolumn{
    position                                : relative;

    width                                   : 100%;
    height                                  : 100%;
    min-height                              : 0;

    display                                 : flex;
    flex-direction                          : column;

    overflow                                : hidden;
}

.dashboardfooterbar{
    position                                : relative;

    width                                   : 100%;
    height                                  : 100px;

    display                                 : flex;
    flex-direction                          : row;
    align-items                             : center;
    justify-content                         : center;

    box-sizing                              : border-box;
    padding                                 : 0;
    gap                                     : 10px;

    overflow                                : visible;
}

.dashboardbuilderlayout{
    position                                : relative;
    width                                   : 100%;
    height                                  : 100%;
    min-height                              : 0;

    display                                 : flex;
    flex-direction                          : row;

    box-sizing                              : border-box;
    padding                                 : 10px;
    gap                                     : 10px;

    overflow                                : hidden;
}

.dashboardbuilderlayout .navigatordiv{
    flex                                    : 0 0 300px;
    width                                   : 300px;
    height                                  : 100%;
    min-height                              : 0;

    overflow                                : auto;
}

.dashboardbuildermain{
    flex                                    : 1 1 auto;
    min-width                               : 0;
    height                                  : 100%;
    min-height                              : 0;

    display                                 : flex;
    flex-direction                          : column;

    overflow                                : hidden;
}

.dashboardbuilderbody{
    flex                                    : 1 1 auto;
    min-height                              : 0;

    overflow                                : auto;
}

.dashboardbuilderfooter{
    flex                                    : 0 0 100px;
    height                                  : 100px;
    min-height                              : 100px;

    overflow                                : visible;
}

@media (max-width: 900px){
    .dashboardbuilderlayout{
        padding                             : 0;
        gap                                 : 0;
    }

    .dashboardbuilderlayout .navigatordiv{
        display                             : none;
    }
}

/* Mobile/tablet: hide menu, keep right side deterministic */
@media (max-width: 1024px){

    .featurelayout{
        grid-template-columns               : 1fr;
    }

    .featuremenu{
        display                             : none;
    }

    .featurecontentcell{
        grid-column                         : 1;
    }

    .featurefooter{
        grid-column                         : 1;
    }

    .featureroot .navigatordiv{
        display                 : none;
    }
}

/* ---------------------------------------------
   H4: CONTENT SURFACE + OVERLAY SURFACE
   These two MUST be children of .featurecontentcell
---------------------------------------------- */

/* Normal-flow content holder; ONLY scroll owner if needed */
.contentsurface{
    position                                : relative;
    width                                   : 100%;
    height                                  : 100%;
    min-height                              : 0;
    overflow                                : auto;
}

/* Absolute overlay holder; does not affect layout */
.overlaysurface{
    position                                : absolute;
    inset                                   : 0;

    width                                   : 100%;
    height                                  : 100%;

    overflow                                : hidden;

    pointer-events                          : none;
}

.overlaysurface[data-open="true"]{
    pointer-events                          : auto;
}

/* ---------------------------------------------
   H5: CANVAS + EDITOR OVERLAY (your functional nodes)
---------------------------------------------- */

/* Main canvas container (must remain in-flow)
   (current: dashboard-container) */
.dashboardcanvas{
    position                                : relative;
    width                                   : 100%;
    height                                  : 100%;
    min-height                              : 0;
}

/* Editor / slide-in overlay (allowed absolute)
   (current: form-container) */
.featureeditoroverlay{
    position                                : absolute;
    inset                                   : 0;

    width                                   : 100%;
    height                                  : 100%;

    overflow                                : hidden;
}