/* --- Sticky Navbar Support --- */
:root {
    --brms-navbar-height: 56px;
}

#brms-navbar {
    z-index: 1030; /* Below Bootstrap modals, above page content */
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.brms-navbar {
    align-items: center;
    position: sticky;
}

.brms-navbar .navbar-brand,
.brms-navbar .navbar-toggler {
    flex-shrink: 0;
}

.brms-navbar-context {
    min-width: 0;
}

.brms-navbar-context-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-dialog {
    margin: max(1.75rem, calc(var(--brms-navbar-height) + 0.75rem)) auto 1.75rem;
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - var(--brms-navbar-height) - 2rem);
}

@media (max-width: 991.98px) {
    .brms-navbar-context {
        margin-right: 0.5rem !important;
    }

    .brms-navbar-context-text {
        font-size: 0.95rem;
    }

    .brms-navbar-menu {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 0.75rem;
        left: auto;
        width: min(20rem, calc(100vw - 1.5rem));
        margin-top: 0;
        padding: 0.5rem 0.75rem;
        background-color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 0.5rem;
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
        z-index: 1040;
    }

    .brms-navbar-menu .navbar-nav {
        align-items: stretch;
    }

    .brms-navbar-menu .nav-link {
        padding: 0.5rem 0;
        white-space: normal;
    }

    .brms-navbar-menu:not(.show) {
        display: none;
    }
}

/* Add top padding to main content to prevent it being hidden under navbar */
#main-content {
    padding-top: var(--brms-navbar-height);
}
/* 🔹 Ensure the whole page scrolls together */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* 🔹 Sidebar Container (Expands with Page) */
#sidebar-container {
    position: absolute; /* Allows scrolling with the page */
    top: var(--brms-navbar-height); /* Below navbar */
    left: 0;
    width: 275px; /* Default width */
    min-height: calc(100vh - var(--brms-navbar-height)); /* Ensure it extends fully */
    background-color: #2c3e50;
    transition: width 0.3s ease-in-out;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* 🔹 Sidebar Content */
#sidebar-content {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    color: #ecf0f1;
}

/* 🔹 Sidebar Collapsed State (Hidden Initially if localStorage says so) */
.sidebar-hidden #sidebar-container {
    width: 0;
    overflow: hidden;
}

/* 🔹 Sidebar Toggle Button */
#sidebar-toggle {
    position: fixed;
    top: 50vh;
    left: 275px; /* Aligns with sidebar */
    width: 15px;
    height: auto;
    background-color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: left 0.3s ease-in-out;
    z-index: 1100;
}

/* 🔹 Toggle Button Image */
#toggle-icon {
    width: 15px;
    height: auto;
}

/* 🔹 Adjust Toggle Button When Sidebar is Collapsed */
.sidebar-hidden #sidebar-toggle {
    left: 0;
}

/* 🔹 Main Content Adjustments */
#main-content {
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    margin-left: 275px; /* Default Space for Sidebar */
    width: calc(100vw - 275px);
    padding: 20px;
    padding-top: calc(var(--brms-navbar-height) + 20px);
    overflow: visible; /* Prevent any isolated scrolling */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* 🔹 When Sidebar is Collapsed */
.sidebar-hidden #main-content {
    margin-left: 0;
    width: 100vw;
}

/* 🔹 Fix Message Bar to Viewport Bottom */
#message-area {
    position: fixed;
    bottom: 0;
    left: 275px;
    width: calc(100% - 275px);
    background-color: #f8f9fa;
    padding: 10px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1500;
    transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* 🔹 When Sidebar is Collapsed */
.sidebar-hidden #message-area {
    left: 0;
    width: 100%;
}

/* 🔹 Ensure Sidebar Text is White */
#sidebar-content {
    color: #ecf0f1;
}

#sidebar-content a {
    color: #ecf0f1;
    text-decoration: none;
}

#sidebar-content a:hover {
    color: #3498db;
}

.document-tree,
.document-tree ul {
    list-style-type: none;
    padding-left: 0; /* Remove extra indentation */
    margin-left: 0; /* Align items properly */
}

/* Optional: Add spacing and styling for clarity */
.document-tree li {
    margin-bottom: 5px; /* Adjust spacing between items */
}

/* Ensure child elements are properly aligned */
.document-tree .children {
    padding-left: 15px; /* Indent child items slightly */
}

/* Ensure the document tree has no bullet points */
.document-tree {
    list-style: none;
    padding-left: 0;
}

/* Style for tree items */
.document-tree ul {
    list-style: none;
    padding-left: 20px;
}

/* Hide child elements by default */
.children {
    display: none;
}

/* When expanded, show children */
.expanded > .children {
    display: block;
}

/* Styling for toggle arrows */
.toggle-arrow {
    cursor: pointer;
    margin-right: 5px;
    font-size: 14px;
    color: #ecf0f1; /* Matches sidebar text color */
}

/* Change color on hover for better UX */
.toggle-arrow:hover {
    color: #3498db;
}

ul.errorlist {
    color: #dc3545; /* Bootstrap red */
    list-style-type: none; /* Remove bullets */
    padding-left: 0; /* Remove indent */
    margin-bottom: 0.5rem;
}

ul.errorlist li {
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.modal-wider .modal-dialog {
    max-width: 95vw;
    width: 95vw;
    margin: auto;
  }
  
  .modal-wider .modal-content {
    height: 90vh;
  }
  
  .modal-wider .modal-body {
    max-height: 80vh;
    overflow-y: auto;
  }
  
  /* Move Bootstrap modals down so they are not hidden behind the navbar */
/* Ensure selected project/variant/baseline items have readable text on blue background */
#setProjectModal .list-group-item.active {
    color: #ffffff !important;
}

/* Right-hand discussion sidebar on work item detail */
.discussion-sidebar {
    width: 320px;
}

@media (max-width: 991.98px) {
    .discussion-sidebar {
        width: 100%;
    }
}

.discussion-list {
    max-height: 400px;
}