/* ========================================================================
   Responsive Design Styles
   ========================================================================
   This file provides adaptive responsive behavior for the OCL Portal.
   - Min screen width: 320px
   - Max container width: min(1185px, 80vw)
   - Disables horizontal scrolling (except for specific elements)
   - Allows text wrapping and prevents overlapping
   - Does NOT modify any CSS framework styles
   ======================================================================== */

/* ========================================================================
   Global Responsive Container and Body
   ======================================================================== */

/* HTML element - ensure minimum height fills screen */
html {
    min-height: 100vh; /* Minimum height = viewport height */
    height: 100%; /* Allow natural growth */
}

/* Reset body to be responsive instead of fixed width */
body {
    width: auto !important;
    max-width: min(1185px, 80vw);
    min-width: 320px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden; /* Disable horizontal scroll globally */
    min-height: 100vh; /* Body fills screen height */
    display: flex;
    flex-direction: column; /* Stack header and content vertically */
}

/* Prevent body scroll when modal is open - responsive override */
body.modal-open {
    overflow: hidden !important;
    height: 100vh;
}

/* ========================================================================
   Modal Responsive Behavior
   ======================================================================== */

/* Make modal dialogs responsive to screen size */
.modal-dialog {
    width: auto !important;
    max-width: min(90vw, 800px);
    margin: 30px auto;
}

/* Specific modal dialog widths with max constraints */
#viewDialog .modal-dialog {
    max-width: 700px;
    width: 90vw !important;
}

#editDialog .modal-dialog,
#alertDialog .modal-dialog {
    max-width: 600px;
    width: 90vw !important;
}

/* Ensure modal content is responsive */
.modal-content {
    width: 100%;
    box-sizing: border-box;
}

/* Adjust modal positioning for smaller screens */
.modal-dialog-center {
    margin-top: 10%;
    margin-bottom: 10%;
}

/* Make modal body scrollable when content is too tall */
.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ensure modal doesn't overflow viewport height */
.modal {
    padding-right: 0 !important;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
}

/* Header - fixed at top */
#header {
    flex-shrink: 0; /* Don't shrink header */
}

/* Main container responsive sizing - grows to push footer down */
.container,
.body-content {
    width: 100% !important; /* Full width to avoid side margins */
    max-width: min(1185px, 80vw) !important;
    min-width: 320px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    flex: 1 0 auto; /* Grow to fill available space, pushing footer down */
    display: flex;
    flex-direction: column; /* Allow content to flow vertically */
    margin-left: auto; /* Center the container */
    margin-right: auto; /* Center the container */
}

/* Ensure all content rows span full container width */
.container > *,
.body-content > * {
    width: 100%; /* Full width within container */
    margin-left: 0;
    margin-right: 0;
}

/* Preserve specific Bootstrap row behavior */
.row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ========================================================================
   Header Responsive Behavior
   ======================================================================== */

#header {
    width: auto !important;
    max-width: min(1185px, 80vw);
    min-width: 320px;
    overflow: visible !important; /* Allow nav dropdowns to extend beyond header */
    box-sizing: border-box;
}

/* Header top - maintain flexbox layout */
.header-top {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

/* Logo responsive */
#logo {
    max-width: 140px;
    width: 140px;
    height: auto;
    flex-shrink: 0;
}

/* Text links - keep on the right */
#textlinks {
    text-align: right;
    margin-left: auto;
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#textlinks a {
    display: inline-block;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Site title responsive */
.site-title {
    width: 100%;
    height: auto;
    min-height: 40px;
    overflow: visible;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

#portal-title,
.title-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex-shrink: 0;
}

.title-text {
    margin-left: auto;
    text-align: right;
    float: none;
}

/* Title graphic responsive */
.title-graphic {
    width: 100%;
    height: 40px;
}

/* ========================================================================
   Navigation Responsive Behavior
   ======================================================================== */

#navbar {
    width: 100% !important;
    overflow: visible !important; /* Allow sub-menus to overflow */
    position: relative;
    z-index: 1000;
}

#navmenu {
    width: 100%;
    overflow: visible !important; /* Allow sub-menus to overflow */
}

/* Kendo Menu - Allow dropdowns to display properly */
.k-menu,
.k-menu-horizontal {
    overflow: visible !important;
}

/* Kendo Menu Groups (sub-menus) - Must be able to overlap */
.k-menu .k-menu-group,
.k-menu-group,
.k-animation-container {
    position: absolute !important;
    z-index: 10000 !important;
    overflow: visible !important;
    white-space: nowrap !important; /* Prevent text wrapping in menus */
    min-width: 200px;
}

/* Menu items should not wrap */
.k-menu .k-item,
.k-menu .k-link {
    white-space: nowrap !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
}

/* Allow navigation text to wrap if needed - but NOT in Kendo menus */
#navbar li:not(.k-item),
#navbar p:not(.k-item),
#navbar a:not(.k-link) {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ========================================================================
   Content Area Responsive Behavior
   ======================================================================== */

/* Allow text and content to wrap by default - EXCEPT for Kendo menus */
*:not(.k-menu):not(.k-menu-group):not(.k-item):not(.k-link):not(.k-animation-container) {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Prevent elements from causing horizontal scroll */
.page-header,
.page-title,
.page-description,
footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Forms and inputs responsive */
.form-control,
input,
textarea,
select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Buttons responsive */
.btn,
button {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* ========================================================================
   Tables, Grids, Images, Maps - Allow Horizontal Scroll
   ======================================================================== */

/* Tables can scroll horizontally if needed */
.table-responsive,
table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Kendo grids can scroll horizontally */
.k-grid,
.k-grid-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Images, maps, and embedded content responsive but can scroll if too large */
img,
iframe,
embed,
object,
video {
    max-width: 100%;
    height: auto;
}

/* Special case: allow these elements to have horizontal scroll if content is too wide */
.table-container,
.grid-container,
.map-container,
.image-gallery {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ========================================================================
   Prevent Overlapping Elements
   ======================================================================== */

/* Ensure floated elements don't cause overlapping */
.clear {
    clear: both;
}

/* Clear fix for containers with floated children */
.clearfix::after,
.container::after,
.body-content::after,
#header::after {
    content: "";
    display: table;
    clear: both;
}

/* Ensure positioned elements don't overlap */
.modal,
.dropdown-menu,
.tooltip,
.popover {
    z-index: 9999;
}

/* Kendo menu dropdowns - Higher z-index to overlay everything */
.k-animation-container,
.k-menu-group {
    z-index: 10000 !important;
}

/* Ensure absolute positioned elements stay within bounds - EXCEPT menu dropdowns */
[style*="position: absolute"]:not(.k-menu-group):not(.k-animation-container) {
    max-width: 100%;
}

/* ========================================================================
   Footer Responsive Behavior
   ======================================================================== */

/* Footer - stays at bottom of screen or content */
footer {
    overflow: visible;
    flex-shrink: 0; /* Don't shrink footer */
    margin-top: auto; /* Push to bottom when content is short */
}

footer table {
    width: 100% !important;
    table-layout: auto;
    overflow-x: auto;
}

footer td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ========================================================================
   Media Queries for Smaller Screens
   ======================================================================== */

@media screen and (max-width: 768px) {
    
    /* Logo - adjust size on small screens */
    #logo {
        margin-bottom: 10px;
        max-width: 120px;
        width: 120px;
    }
    
    /* Adjust text links to stay horizontal and right-aligned */
    #textlinks {
        text-align: right;
        margin-left: auto;
        padding: 5px 0;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    
    #textlinks a {
        display: inline-block;
        border-right: 1px solid #999;
        border-bottom: none;
        padding: 0 8px;
        font-size: 0.9em;
    }
    
    #textlinks a.last,
    #textlinks a:last-child {
        border-right: none;
    }
    
    /* Keep title elements in flexbox layout */
    .title-text {
        margin-left: auto;
        text-align: right;
    }
    
    #portal-title a {
        display: block;
    }
    
    /* Modal adjustments for tablets */
    .modal-dialog {
        width: 95vw !important;
        max-width: 95vw;
        margin: 20px auto;
    }
    
    .modal-dialog-center {
        margin-top: 5%;
        margin-bottom: 5%;
    }
    
    /* Reduce modal padding on smaller screens */
    .modal-body {
        padding: 15px;
    }
    
    .modal-header,
    .modal-footer {
        padding: 10px 15px;
    }
    
    /* Footer table cells stack vertically */
    footer table,
    footer tbody,
    footer tr,
    footer td {
        display: block;
        width: 100% !important;
        text-align: left !important;
    }
    
    footer td {
        padding: 10px 0;
    }
    
    /* Page title and links stack */
    .page-title {
        float: none;
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    
    /* Further adjustments for very small screens */
    body {
        margin-top: 5px;
    }
    
    #logo {
        width: 100px;
    }
    
    .site-title {
        padding: 5px 0;
    }
    
    h1,
    .page-title {
        font-size: 1.2rem; /* 12px for very small screens */
    }
    
    /* Make buttons full width on very small screens */
    .btn,
    button {
        width: 100%;
        margin-bottom: 5px;
    }
    
    /* Adjust form controls */
    .form-horizontal .control-label {
        text-align: left;
        padding-bottom: 5px;
    }
    
    /* Modal adjustments for mobile phones */
    .modal-dialog {
        width: 98vw !important;
        max-width: 98vw;
        margin: 10px auto;
    }
    
    .modal-dialog-center {
        margin-top: 2%;
        margin-bottom: 2%;
    }
    
    /* Further reduce modal padding on mobile */
    .modal-body {
        padding: 10px;
    }
    
    .modal-header,
    .modal-footer {
        padding: 8px 10px;
    }
    
    /* Stack modal footer buttons vertically */
    .modal-footer .btn {
        width: 100%;
        margin: 5px 0;
    }
    
    /* Reduce modal title font size */
    .modal-title {
        font-size: 1.4rem;
    }
}

/* ========================================================================
   Ensure No Horizontal Overflow
   ======================================================================== */

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: none;
}

/* Re-apply container constraints */
.container,
.body-content {
    overflow-x: hidden;
    max-width: 100%;
}

/* Header - must allow overflow for nav dropdowns */
#header {
    overflow: visible !important; /* Override to allow nav menu dropdowns */
    max-width: 100%;
}

/* Final constraint on body for proper centering */
body {
    width: auto !important;
    max-width: min(1185px, 80vw);
    min-width: 320px;
}