/*==========================================================================*/
/*  Reflow.css - WCAG 2.1 SC 1.4.10 Reflow Compliance (Level AA)
/*  
/*  This stylesheet provides responsive overrides to enable content reflow 
/*  at 320 CSS pixels width (equivalent to 400% zoom at 1280px viewport).
/*  
/*  All rules are scoped within @media queries so desktop rendering is 
/*  unaffected. Data tables are exempt per WCAG 1.4.10 and are made 
/*  horizontally scrollable within their container.
/*==========================================================================*/


/*--------------------------------------------------------------------------*/
/*  1. Data table scrollable wrappers                                       
/*  WCAG exempts data tables from reflow requirements, but they must not    
/*  cause the entire page to scroll horizontally. Wrapping in overflow-x    
/*  containers ensures only the table scrolls.                              
/*--------------------------------------------------------------------------*/

.pageTable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/*--------------------------------------------------------------------------*/
/*  2. Reflow overrides at 320px equivalent viewport                        
/*  These rules activate when the viewport is narrow enough to require      
/*  content reflow (320px width = 400% zoom of 1280px).                     
/*--------------------------------------------------------------------------*/

@media screen and (max-width: 640px) {

    /* --- Master layout: collapse two-column table to stacked blocks --- */
    #sitepage > table,
    #sitepage > table > tbody,
    #sitepage > table > tbody > tr,
    #sitepage > table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
    }

    #rmsnavigationholdercell {
        width: 100% !important;
        display: block !important;
    }

    /* --- Right content column: remove fixed min-width --- */
    #rightcolumn {
        min-width: 0 !important;
        width: 100% !important;
        float: none !important;
    }

    /* --- Navigation accordion: full width on narrow screens --- */
    #processleftnavaccordion,
    #leftnavaccordion {
        width: 100% !important;
    }

    /* --- Header title: remove absolute positioning --- */
    #MainHeaderTitle {
        position: static !important;
        left: auto !important;
        padding-left: 10px;
    }

    /* --- Site header: allow natural height --- */
    #siteheader {
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* --- Site page wrapper: remove float, allow natural flow --- */
    #sitepagewrapper {
        float: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* --- Content area: fluid width --- */
    #ContentAreaWrapperBody {
        min-height: 0 !important;
        width: auto !important;
    }

    #ContentAreaWrapperTop {
        width: auto !important;
    }

    /* --- Override inline fixed pixel widths on common elements --- */
    /* Form containers and filter panels */
    div[id$="collapsible"],
    div[id$="collapsible"] > div {
        width: 100% !important;
        float: none !important;
    }

    /* Labels and inputs in filter/search panels */
    div[id$="collapsible"] label,
    div[id$="collapsible"] input[type="text"],
    div[id$="collapsible"] select,
    div[id$="collapsible"] textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- Generic inline style overrides for floated layout divs --- */
    /* Target divs with inline float:left that are not navigation or icons */
    #ContentAreaWrapperBody div[style*="float: left"],
    #ContentAreaWrapperBody div[style*="float:left"] {
        float: none !important;
        width: 100% !important;
    }

    /* --- Clear-fix divs become unnecessary --- */
    div[style*="clear: both"],
    div[style*="clear:both"] {
        clear: none !important;
    }

    /* --- Form field layout: stack label + input vertically --- */
    .rmsFormLabel,
    .rmsFormField {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }

    /* --- Dialogs and modals: fluid width --- */
    .ui-dialog {
        width: 95vw !important;
        max-width: 100% !important;
        left: 2.5vw !important;
    }

    .ui-dialog-content {
        width: auto !important;
        max-width: 100% !important;
    }

    /* --- Kendo UI widget overrides --- */
    .k-widget,
    .k-dropdown,
    .k-combobox,
    .k-datepicker,
    .k-textbox {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- Images: constrain to viewport --- */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- Prevent body/html from enforcing min-width --- */
    html,
    body {
        min-width: 0 !important;
    }

    /*----------------------------------------------------------------------*/
    /*  3. RunFeature / student-facing page overrides                       
    /*  These pages use a separate layout (RunFeature.cshtml) with inline   
    /*  fixed pixel widths on containers, section headers, form panels,     
    /*  labels, and inputs.                                                 
    /*----------------------------------------------------------------------*/

    /* --- LiveStepContainer: remove fixed width, allow fluid --- */
    .LiveStepContainer,
    #LiveStepContainer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
    }

    /* --- Section headers: fluid width instead of fixed 840px --- */
    .RMSLiveComponent > div > div > div[style*="width:"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Inner table-cell divs within section headers */
    .RMSLiveComponent > div > div > div > div[style*="display: table-cell"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- Login panel and form panels: fluid width --- */
    div[id^="LoginPanel"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- Component sub-entry labels and inputs: stack and fill width --- */
    .RMSComponentSubEntry label[style*="width:"] {
        width: 100% !important;
        display: block !important;
        padding-bottom: 4px;
    }

    .RMSComponentSubEntry input[style*="width:"],
    .RMSComponentSubEntry select[style*="width:"],
    .RMSComponentSubEntry textarea[style*="width:"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- Column split layout: stack columns vertically --- */
    .columnSplitColContainer {
        width: 100% !important;
    }

    .colsplitcolumn {
        width: 100% !important;
        float: none !important;
    }

    /* --- Wait/processing dialog: constrain to viewport --- */
    .web_dialog {
        width: 90vw !important;
        left: 5vw !important;
        margin-left: 0 !important;
    }

    /* --- Generic RunFeature floated divs --- */
    .RMSLiveComponent div[style*="float:left"],
    .RMSLiveComponent div[style*="float: left"] {
        float: none !important;
        width: 100% !important;
    }

    /* --- Popup panels: fluid width --- */
    .RMSPopupPanelContainer {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}