/* Default CSS Stylesheet for a new Web Application project */

/* Set padding to keep content from hitting the edges */

/*.body-content {
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/

a {
    color: #255783 !important;
}

.skip-to-content {
    position: absolute; /* Remove it from the normal document flow */
    top: -40px; /* Place it off-screen */
    left: 0;
    background-color: #000; /* Background color for visibility when focused */
    color: #fff; /* Text color */
    padding: 8px 16px; /* Add padding for better usability */
    z-index: 1000; /* Ensure it appears above other elements */
    text-decoration: none; /* Remove underline */
    font-size: 16px; /* Adjust font size */
}

    .skip-to-content:focus {
        top: 0; /* Bring it back into view when focused */
    }

.dl-horizontal dt {
    white-space: normal;
}

.icon {
    font-size: 2em; /* Increase the font size of the icon */
    display: inline-block; /* Ensure the icon behaves like a block for alignment */
    width: 2em; /* Optional: Set a fixed width */
    height: 2em; /* Optional: Set a fixed height */
    text-align: center; /* Center the icon if needed */
    line-height: 2em; /* Vertically center the icon */
}

.specIcon {
    width: 1.5em; /* Adjust size to match other icons */
    height: 1.5em;
    vertical-align: middle; /* Align with text */
}
/*left navigation controls*/
.content-container {
    display: flex; /* Create a horizontal layout for the left nav and main content */
    flex: 1; /* Allow this section to grow and fill the remaining space */
    overflow: hidden; /* Prevent content overflow */
    padding-top: .25em
}
/* Left navigation menu */
.left-nav {
    width: 7em; /* Collapsed width */
    background-color: #080530; /* Dark background */
    overflow: hidden; /* Hide overflowing content */
    transition: width 0.3s ease; /* Smooth transition for expanding */
    z-index: 1000; /* Ensure it stays above other elements */
    padding: 4px 4px 4px 11px; /* Add padding for spacing */
    flex-shrink: 0; /* Prevent the nav from shrinking */
}
    /* Expand the menu on hover or focus */
    .left-nav:hover,
    .left-nav:focus-within {
        width: 16em; /* Expanded width */
    }
    /* Style the unordered list */
    .left-nav ul {
        list-style: none; /* Remove default bullet points */
        padding: 0;
        margin: 0;
    }
    /* Style each list item */
    .left-nav li {
        margin-bottom: 1em; /* Add spacing between items */
    }
    /* Style the links */
    .left-nav a {
        display: flex; /* Align icon and label horizontally */
        align-items: center; /* Vertically center the content */
        color: white; /* Text color */
        text-decoration: none; /* Remove underline */
        padding: 0.5em; /* Add padding for clickable area */
        transition: background-color 0.3s ease; /* Smooth hover effect */
    }
        /* Change background color on hover or focus */
        .left-nav a:hover,
        .left-nav a:focus {
            background-color: #555; /* Slightly lighter background */
        }
    /* Style the icons */
    .left-nav .icon {
        display: inline-block;
        width: 1em; /* Fixed width for icons */
        height: 1em; /* Fixed height for icons */
        margin-right: 1em; /* Spacing between icon and label */
        text-align: center; /* Center the icon */
        line-height: 1.5em; /* Vertically center text-based icons */
    }
    /* Style the labels */
    .left-nav .label {
        display: none; /* Hide labels by default */
        white-space: nowrap; /* Prevent text wrapping */
    }
    /* Show labels when the menu is expanded */
    .left-nav:hover .label,
    .left-nav:focus-within .label {
        display: inline; /* Show labels */
    }
/* Main content */
.main-content {
    flex: 1; /* Take up the remaining space */
    padding: 1em;
    overflow-y: auto; /* Add scrolling if the content overflows */

}
/* Footer */
.footer {
    background-color: #080530;
    color: white;
    text-align: center;
    padding: .5em;
    flex-shrink: 0; /* Prevent the footer from shrinking */
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 100%;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
/* Mobile override: reset flex to block for consuming app grid compatibility */
@media (max-width: 1024px) {
    html, body {
        display: block;
    }
}

.page-layout {
    display: flex;
    flex-direction: row; /* Sidebar + main-container side by side on desktop */
    height: auto;
    width: 100%;
}

    /* Main container takes remaining space after sidebar */
    .page-layout .main-container {
        flex: 1;
    }

@media (max-width: 576px) {
    .page-layout {
        flex-direction: column; /* Stack on mobile */
    }
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 10px 0;
}

BODY {
    BACKGROUND-COLOR: #EEE !important;
    LETTER-SPACING: normal;
    padding-top: 0 !important;
    TEXT-TRANSFORM: none;
    WORD-SPACING: normal;
}

#headerNavBar {
    background-color: #080530;
    font-size: 13px;
    font-weight: bold;
    padding-top: -5px;
}

.boxShadow {
    box-shadow: 0 6px 17px rgba(50, 50, 50, 0.75);
}

.navigationLink a:hover {
    color: ghostwhite;
}

.inset {
    -moz-box-shadow: inset 0px 3px 6px 0px rgba(150, 150, 150, 0.375) !important;
    -webkit-box-shadow: inset 0px 3px 6px 0px rgba(150, 150, 150, 0.375) !important;
    box-shadow: inset 0px 3px 6px 0px rgba(150, 150, 150, 0.375) !important;
}

.inset-error {
    -moz-box-shadow: inset 2px 2px 6px 0px rgba(255, 59, 45, 0.75) !important;
    -webkit-box-shadow: inset 2px 2px 6px 0px rgba(255, 59, 45, 0.75) !important;
    box-shadow: inset 2px 2px 6px 0px rgba(255, 59, 45, 0.75) !important;
}

.panel-validation-error {
    border-color: #b0171f;
    position: sticky;
    top: 0
}

.panel {
    border: 1px solid #aaa;
    background: #ffffff;
}

.errorListItem .glyphicon-edit {
    display: none;
}

.errorLabel {
    cursor: pointer;
    color: #b0171f;
}

.panel-body-validationError {
    color: #b0171f;
    padding: 15px;
}

.panel-validation-error > .panel-heading > .panel-title {
    font-size: 18px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.panel-validation-error > .panel-heading {
    color: white;
    font-size: 18px;
    background-color: #b0171f;
}

    .panel-validation-error > .panel-heading > .panel-title {
        font-size: 18px;
        padding-top: 2px;
        padding-bottom: 2px;
        margin-left: 100px;
    }

.responsive-image {
    max-width: 100%; /* Ensure the image does not exceed the container's width */
    max-height: 100%; /* Ensure the image does not exceed the container's height */
    object-fit: contain; /* Maintain aspect ratio and fit within the container */
    width: auto; /* Allow the width to adjust automatically */
    height: auto; /* Allow the height to adjust automatically */
}

/*had to add this explicit definition when I move the anchor tag of the banner to be outside the image and text for grid responsiveness*/
.horizontal-list {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to new line on small screens */
    justify-content: center;
    list-style-type: none;
    padding: 3px;
    margin: 0;
    column-gap: clamp(1rem, 4vw, 7rem); /* Fluid spacing between items */
    row-gap: clamp(1rem, 1vw, 2rem)
}

    .horizontal-list li {
        margin-right: 0; /* Using gap instead */
    }

        .horizontal-list li a {
            text-decoration: none;
            color: #9d9d9d !important;
            font-size: clamp(0.875rem, 0.75rem + 0.75vw, 1.25rem); /* Fluid font size: 14px to 20px */
        }

/* ========== MOBILE COLLAPSIBLE NAVIGATION ========== */

/* Mobile Navigation Collapse Container */
.nav-mobile-collapse {
    display: none; /* Hidden on desktop */
    position: relative;
}

/* Navigation toggle header */
.nav-collapse-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    background-color: #080530;
    cursor: pointer;
    font-weight: 500;
    color: #9d9d9d;
    gap: 8px;
    font-size: clamp(0.875rem, 0.75rem + 0.75vw, 1.25rem);
}

    .nav-collapse-header:hover {
        background-color: #1a1a4a;
    }

    .nav-collapse-header .chevron {
        transition: transform 0.2s ease;
        font-size: 0.8em;
    }

/* Expanded content - overlays page content */
.nav-collapse-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #080530;
    border-top: 1px solid #3477b2;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nav-collapse-content.expanded {
    display: block;
}

.nav-collapse-content ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-collapse-content li {
        border-bottom: 1px solid rgba(157, 157, 157, 0.2);
    }

        .nav-collapse-content li:last-child {
            border-bottom: none;
        }

        .nav-collapse-content li a {
            display: block;
            padding: 12px 20px;
            color: #9d9d9d !important;
            text-decoration: none;
            font-size: 1rem;
            text-align: center;
        }

            .nav-collapse-content li a:hover {
                background-color: #1a1a4a;
                color: #ffffff !important;
            }

/* Mobile breakpoint: show collapsible, hide regular nav */
@media (max-width: 576px) {
    .horizontal-list {
        display: none;
    }

    .nav-mobile-collapse {
        display: block;
    }
}

.navbar-nav > li > a {
    color: #9D9D9D;
    padding-top: 5px;
}

.nav.navbar-nav li {
    display: inline-block;
    float: none;
    vertical-align: top;
}

    .nav.navbar-nav li a:hover {
        color: ghostwhite;
        display: inline-block;
        float: none;
        vertical-align: top;
    }

.navbar {
    margin-bottom: 5px;
    max-height: 30px !important;
    min-height: 30px !important;
}

.footer-nav {
    border: none;
    padding-top: 5px;
    text-align: center;
    font-size: 1.25em;
}

.topnav ul li a:hover {
    color: ghostwhite !important;
}

.topnav {
    border: none;
    /*    padding-bottom: 5px;
*/
    text-align: center;
}

.container-fluid {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.footer-nav {
    background-color: #080530;
    display: flex;
    justify-content: center; /* Use flexbox to arrange items in a row */
    padding: 3px; /* Remove default padding */
    margin: 0;
}

    .footer-nav ul li a {
        color: #9d9d9d !important;
        font-size: 1rem;
        font-weight: bold;
        padding-left: 10px;
        padding-right: 15px;
    }

        .footer-nav ul li a:hover {
            color: ghostwhite !important;
        }

.nav > li > a:hover, .nav > li > a {
    color: #9d9d9d;
}

    .nav > li > a:hover, .nav > li > a:focus {
        background-color: transparent !important;
        color: ghostwhite;
    }

/*nix the padding and margin (overrides any other class setting) on any element by adding this class*/
.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

/* 08.18.2022 col-md-## divs to a GRID format
    much more responsive on different screen sizes without having to change a lot of width and font settings!!!   */
#gridPub {
    margin: 0;
    padding: 0;
    display: grid !important;
    gap: 0px;
    grid-template-columns: repeat(auto-fill, minmax(2, 1fr));
}

/* media query tags for smaller screen sizes; handles responsiveness on diff devices
    820 x 1180 = ipad air
    1024 x 1366 = iPad Pro
    390 x 844 = iPhone 12 Pro
    375 x 667 = iphone SE
*** according to best practices, set up views to work on the smallest devices first, then scale upwards to larger screens
    - this is most reliable method. see here: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries  */
/*------------------ media queries below ---------------*/

/* Extra small devices (phones, 600px and down) */

/* ========== MOBILE COMBINED CARD ========== */

/* Hide on desktop, show on mobile */
.mobile-combined-card {
    display: none;
}

@media (max-width: 576px) {
    /* Hide desktop sidebar on mobile */
    .left-nav {
        display: none;
    }

    /* Hide desktop chamber section on mobile */
    .desktop-chamber-section {
        display: none;
    }

    /* Show mobile combined card */
    .mobile-combined-card {
        display: block;
        margin-bottom: 1rem;
    }
}

/* Combined card layout - two columns */
.mobile-combined-card__content {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 0;
}

/* Left column - scrollable nav list */
.mobile-combined-card__nav {
    background-color: #080530;
    max-height: 250px;
    overflow-y: auto;
    padding: 10px 0;
}

    .mobile-combined-card__nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-combined-card__nav li {
        border-bottom: 1px solid rgba(157, 157, 157, 0.2);
    }

        .mobile-combined-card__nav li:last-child {
            border-bottom: none;
        }

    .mobile-combined-card__nav a {
        display: block;
        padding: 10px 15px;
        color: #9d9d9d;
        text-decoration: none;
        font-size: 0.9rem;
    }

        .mobile-combined-card__nav a:hover {
            background-color: #1a1a4a;
            color: #ffffff;
        }

/* Right column - iframe container */
.mobile-combined-card__chamber {
    position: relative;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

    /* Iframe in chamber section */
    .mobile-combined-card__chamber iframe {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 200px;
        height: 180px;
        border: 2px solid #dee2e6;
    }

/* Action buttons below iframe */
.mobile-combined-card__actions {
    display: flex;
    gap: 5px;
    margin-top: 10px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    justify-content: center;
}

    .mobile-combined-card__actions a {
        padding: 6px 10px;
        font-size: 0.75rem;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        color: #1e3a5f;
        text-decoration: none;
    }

        .mobile-combined-card__actions a:hover {
            background: #1e3a5f;
            color: white;
        }

@media Print {
    #TopNavTarget, #hlReturnBill, #lblCreateFooter, #btnPrint, a::after {
        display: None;
    }
}

/*------------------end media queries for responsive design ---------------*/

/* ========== SIDEBAR ORDER / STICKY UTILITIES ========== */

/* Mobile-first: HTML order (sidebar first = top on mobile).
   Desktop: reorder so main content appears first, sidebar second.
   Used with .content-grid at --grid-cols: 3fr 1fr */
@media (min-width: 1025px) {
    .sidebar-order {
        order: 2;
        min-width: 0;
    }

    .main-order {
        order: 1;
        min-width: 0;
    }
}

@media (min-width: 1025px) {
    .sidebar-sticky {
        position: sticky;
        top: 20px;
        align-self: start;
    }
}

/* ========== RESOURCE NAV OVERLAY EXPAND ========== */

/* Override .mobile-combined-card__nav max-height/overflow when used with resource-nav */
.mobile-combined-card__nav.resource-nav {
    position: relative;
    overflow: visible;
    overflow-y: visible;
    max-height: none;
}

    .mobile-combined-card__nav.resource-nav a {
        color: #ffffff !important;
    }

.resource-nav__overflow {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: #080530;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-top: 1px solid #3477b2;
}

    .resource-nav__overflow.expanded {
        display: block;
    }

.resource-nav__toggle {
    display: block;
    width: 100%;
    padding: 8px 15px;
    background: #1a1a4a;
    color: #9d9d9d;
    border: none;
    border-top: 1px solid rgba(157, 157, 157, 0.2);
    cursor: pointer;
    font-size: 0.85rem;
    text-align: center;
    transition: background-color 0.2s ease;
}

    .resource-nav__toggle:hover {
        background-color: #2a2a5a;
        color: #ffffff;
    }