/* --- Sticky Navbar Support --- */
:root {
    --brms-navbar-height: 56px;
    --document-sidebar-width: 19rem;
    --document-sidebar-handle-width: 2.75rem;
    --document-sidebar-open-offset: calc(var(--document-sidebar-width) + var(--document-sidebar-handle-width) + 0.75rem);
}

#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;
    }

    body.dark-mode .brms-navbar-menu {
        background-color: #1f2937;
        border-color: rgba(148, 163, 184, 0.35);
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.45);
    }

    body.dark-mode .brms-navbar-menu .nav-link {
        color: #f8fafc;
    }

    body.dark-mode .brms-navbar-menu .nav-link:hover,
    body.dark-mode .brms-navbar-menu .nav-link:focus {
        color: #bfdbfe;
    }
}

/* 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: fixed;
    top: calc(var(--brms-navbar-height) + 1rem);
    left: 0;
    width: calc(var(--document-sidebar-width) + var(--document-sidebar-handle-width));
    height: calc(100vh - var(--brms-navbar-height) - 2rem);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    pointer-events: none;
}

/* 🔹 Sidebar Content */
#sidebar-content {
    width: var(--document-sidebar-width);
    height: 100%;
    overflow: hidden;
    color: #212529;
    background: #eef4f9;
    border: 1px solid rgba(76, 110, 145, 0.18);
    border-left: 0;
    border-radius: 0 1rem 1rem 0;
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.16);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
}

/* 🔹 Sidebar Collapsed State (Hidden Initially if localStorage says so) */
.sidebar-hidden #sidebar-container {
    transform: translateX(calc(-1 * var(--document-sidebar-width)));
}

/* 🔹 Sidebar Toggle Button */
#sidebar-toggle {
    width: var(--document-sidebar-handle-width);
    min-height: 8.5rem;
    padding: 0.85rem 0.35rem;
    margin-top: 1rem;
    border: 1px solid rgba(31, 59, 88, 0.12);
    border-left: 0;
    border-radius: 0 1rem 1rem 0;
    background: #1f3b58;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 0.5rem;
    color: #ffffff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

/* 🔹 Toggle Button Image */
#toggle-icon {
    font-size: 1.2rem;
    line-height: 1;
}

/* 🔹 Main Content Adjustments */
#main-content {
    --message-bar-clearance: 6.5rem;
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
    margin-left: var(--document-sidebar-open-offset);
    width: calc(100vw - var(--document-sidebar-open-offset));
    padding: 20px;
    padding-top: calc(var(--brms-navbar-height) + 20px);
    padding-bottom: 20px;
    overflow: visible; /* Prevent any isolated scrolling */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#main-content > .content-area {
    padding-bottom: 0;
}

.page-bottom-message-spacer {
    height: var(--message-bar-clearance);
    flex: 0 0 auto;
}

.split-view-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--brms-navbar-height) - 10rem);
    min-height: 36rem;
    gap: 1rem;
}

.split-view-list-panel,
.split-view-detail-panel {
    flex: 1 1 50%;
    min-height: 0;
}

.split-view-list-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.split-view-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.split-view-detail-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(31, 59, 88, 0.12);
}

.split-view-placeholder {
    margin-bottom: 0.75rem;
}

.split-view-pane-frame {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    background-color: #ffffff;
    border-color: rgba(31, 59, 88, 0.12) !important;
}

body.dark-mode .split-view-pane-frame {
    background-color: #111827;
    border-color: #334155 !important;
}

@media (max-width: 991.98px) {
    .split-view-shell {
        height: auto;
        min-height: auto;
    }

    .split-view-list-panel,
    .split-view-detail-panel {
        flex-basis: auto;
    }

    .split-view-list-panel {
        overflow: visible;
    }

    .split-view-list-scroll {
        overflow: visible;
        padding-right: 0;
    }

    .split-view-detail-panel {
        border-top: 0;
        padding-top: 0;
    }
}

/* 🔹 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: var(--document-sidebar-open-offset);
    width: calc(100% - var(--document-sidebar-open-offset));
    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: #212529;
}

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

#sidebar-content a:hover {
    color: #0d6efd;
}

.document-sidebar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid rgba(31, 59, 88, 0.08);
    background: linear-gradient(135deg, #e7f0f8 0%, #dce9f5 100%);
}

.document-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.document-sidebar-action-button {
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
}

.document-sidebar-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    background: #eef4f9;
}

.document-sidebar-toggle {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.document-sidebar-toggle-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.document-sidebar-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.document-tree,
.document-tree ul,
.hierarchy-tree,
.hierarchy-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,
.hierarchy-tree li {
    margin-bottom: 0.35rem;
}

/* Ensure child elements are properly aligned */
.document-tree .children,
.hierarchy-tree .children {
    padding-left: 1rem;
}

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

/* Style for tree items */
.document-tree ul,
.hierarchy-tree ul {
    list-style: none;
    padding-left: 1rem;
}

/* 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: 0.25rem;
    font-size: 0.75rem;
    color: #6c757d;
    background: #ffffff;
    border: 1px solid rgba(33, 37, 41, 0.12);
    border-radius: 999px;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.4rem;
}

/* Change color on hover for better UX */
.toggle-arrow:hover {
    color: #0d6efd;
    border-color: rgba(13, 110, 253, 0.35);
    background: rgba(13, 110, 253, 0.08);
}

.toggle-spacer {
    display: inline-block;
    width: 1.4rem;
    margin-right: 0.25rem;
    flex: 0 0 1.4rem;
}

.document-node-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0;
}

.document-node-link {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    padding: 0.25rem 0.55rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.document-node-link:hover {
    background-color: rgba(13, 110, 253, 0.08);
}

.document-node.expanded > .document-node-row .document-node-link {
    background-color: rgba(13, 110, 253, 0.08);
}

@media (max-width: 991.98px) {
    :root {
        --document-sidebar-width: 16rem;
        --document-sidebar-handle-width: 2.5rem;
    }

    #sidebar-container {
        height: calc(100vh - var(--brms-navbar-height) - 1rem);
        top: calc(var(--brms-navbar-height) + 0.5rem);
    }

    #sidebar-toggle {
        margin-top: 0.75rem;
    }
}

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;
}

body.dark-mode #setProjectModal .list-group-item.active,
body.dark-mode #setProjectModal .list-group-item.list-group-item-action.active {
    background-color: #2b5a87 !important;
    border-color: #3b78ad !important;
    color: #ffffff !important;
}

body.dark-mode #setProjectModal .list-group-item.active:hover,
body.dark-mode #setProjectModal .list-group-item.active:focus {
    background-color: #3b78ad !important;
    border-color: #5a99d1 !important;
    color: #ffffff !important;
}

/* Right-hand discussion sidebar on work item detail */
.discussion-drawer {
    position: fixed;
    top: calc(var(--brms-navbar-height) + 1rem);
    right: 0;
    width: min(360px, calc(100vw - 1rem));
    height: calc(100vh - var(--brms-navbar-height) - 2rem);
    z-index: 1015;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
    pointer-events: none;
}

.discussion-drawer.is-collapsed {
    transform: translateX(100%);
}

.discussion-drawer-toggle {
    position: absolute;
    top: 10.25rem;
    left: -2.75rem;
    width: 2.75rem;
    min-height: 8.5rem;
    padding: 0.75rem 0.4rem;
    border: 0;
    border-radius: 0.75rem 0 0 0.75rem;
    background: #1f3b58;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

.discussion-drawer-handle-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
}

.discussion-drawer .card {
    height: 100%;
    border-radius: 1rem 0 0 1rem;
    overflow: hidden;
    background: #eef4f9;
    border: 1px solid rgba(76, 110, 145, 0.18);
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.16);
    pointer-events: auto;
}

.discussion-drawer .card-header {
    background: linear-gradient(135deg, #e7f0f8 0%, #dce9f5 100%);
    border-bottom: 1px solid rgba(31, 59, 88, 0.08);
}

.discussion-drawer .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #eef4f9;
}

.discussion-composer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(31, 59, 88, 0.08);
    background: #eef4f9;
}

@media (max-width: 991.98px) {
    .discussion-drawer {
        right: 0;
        width: min(88vw, 320px);
        height: calc(100vh - var(--brms-navbar-height) - 2rem);
    }

    .discussion-drawer-toggle {
        top: 8.25rem;
        min-height: 7rem;
    }
}

.discussion-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.hierarchy-drawer {
    position: fixed;
    top: calc(var(--brms-navbar-height) + 1rem);
    right: 0;
    width: min(360px, calc(100vw - 1rem));
    height: calc(100vh - var(--brms-navbar-height) - 2rem);
    z-index: 1020;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
    pointer-events: none;
}

.hierarchy-drawer.is-collapsed {
    transform: translateX(100%);
}

.hierarchy-drawer-toggle {
    position: absolute;
    top: 1rem;
    left: -2.75rem;
    width: 2.75rem;
    min-height: 8.5rem;
    padding: 0.75rem 0.4rem;
    border: 0;
    border-radius: 0.75rem 0 0 0.75rem;
    background: #1f3b58;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

.hierarchy-drawer-handle-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
}

.hierarchy-drawer .card {
    height: 100%;
    border-radius: 1rem 0 0 1rem;
    overflow: hidden;
    background: #eef4f9;
    border: 1px solid rgba(76, 110, 145, 0.18);
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.16);
    pointer-events: auto;
}

.hierarchy-drawer .card-header {
    background: linear-gradient(135deg, #e7f0f8 0%, #dce9f5 100%);
    border-bottom: 1px solid rgba(31, 59, 88, 0.08);
}

.hierarchy-drawer .card-body {
    background: #eef4f9;
    overflow-y: auto;
}

.hierarchy-node-row {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.25rem 0.35rem;
    border-radius: 0.6rem;
}

.hierarchy-node-current > .hierarchy-node-row {
    background: #eef5ff;
}

.hierarchy-node-link {
    color: #1f2937;
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 0;
}

.hierarchy-node-link:hover {
    color: #0d6efd;
}

.hierarchy-node-link.active {
    color: #0d6efd;
    font-weight: 600;
}

.hierarchy-node-ref {
    color: #6c757d;
    font-size: 0.78rem;
    margin-right: 0.35rem;
}

.hierarchy-current-badge {
    white-space: nowrap;
}

.hierarchy-linked-item .hierarchy-node-link {
    padding: 0.15rem 0.35rem;
    border-radius: 0.45rem;
}

.hierarchy-linked-item .hierarchy-node-link:hover {
    background: #f6f9fc;
}

.hierarchy-depth-form .form-select {
    width: auto;
    min-width: 4.5rem;
}

.hierarchy-drawer .toggle-arrow {
    color: #4b5563;
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.hierarchy-drawer .toggle-arrow:hover {
    color: #0d6efd;
}

body.dark-mode {
    background: #111827;
    color: #e5e7eb;
}

body.dark-mode #main-content,
body.dark-mode .content-area,
body.dark-mode .container,
body.dark-mode .container-fluid {
    color: inherit;
}

body.dark-mode a {
    color: #8ec5ff;
}

body.dark-mode a:hover {
    color: #bfdbfe;
}

body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .list-group-item,
body.dark-mode .dropdown-menu,
body.dark-mode .accordion-item,
body.dark-mode .ql-toolbar,
body.dark-mode .ql-container,
body.dark-mode .ql-editor,
body.dark-mode .ql-picker-options,
body.dark-mode .quill-container,
body.dark-mode .quill-content-container {
    background-color: #1f2937 !important;
    color: #e5e7eb;
    border-color: #374151 !important;
}

body.dark-mode .ql-toolbar .ql-stroke,
body.dark-mode .ql-toolbar .ql-picker-label,
body.dark-mode .ql-toolbar .ql-picker-item {
    stroke: #dbe8f5;
    color: #dbe8f5;
}

body.dark-mode .ql-toolbar .ql-fill {
    fill: #dbe8f5;
}

body.dark-mode .ql-toolbar button:hover,
body.dark-mode .ql-toolbar button:focus,
body.dark-mode .ql-toolbar button.ql-active,
body.dark-mode .ql-toolbar .ql-picker-label:hover,
body.dark-mode .ql-toolbar .ql-picker-label.ql-active,
body.dark-mode .ql-toolbar .ql-picker-item:hover,
body.dark-mode .ql-toolbar .ql-picker-item.ql-selected {
    color: #ffffff;
}

body.dark-mode .ql-toolbar button:hover .ql-stroke,
body.dark-mode .ql-toolbar button:focus .ql-stroke,
body.dark-mode .ql-toolbar button.ql-active .ql-stroke,
body.dark-mode .ql-toolbar .ql-picker-label:hover .ql-stroke,
body.dark-mode .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: #ffffff;
}

body.dark-mode .ql-toolbar button:hover .ql-fill,
body.dark-mode .ql-toolbar button:focus .ql-fill,
body.dark-mode .ql-toolbar button.ql-active .ql-fill {
    fill: #ffffff;
}

body.dark-mode .ql-snow .ql-picker-options {
    background-color: #1f2937;
    border-color: #374151;
}

body.dark-mode .ql-snow .ql-tooltip {
    background-color: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
}

body.dark-mode .ql-snow .ql-tooltip input[type="text"] {
    background-color: #111827;
    border: 1px solid #4b5563;
    color: #e5e7eb;
}

body.dark-mode .ql-editor.ql-blank::before {
    color: #94a3b8;
}

.reference-search-modal {
    max-width: min(920px, calc(100vw - 2rem));
}

.reference-search-result-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.reference-search-result-text {
    flex: 1 1 auto;
    min-width: 0;
}

.reference-search-result-title {
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
    white-space: normal;
}

.reference-search-result-token {
    font-size: 0.875rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
}

.reference-search-result-type {
    flex: 0 1 auto;
    max-width: 40%;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
}

@media (max-width: 575.98px) {
    .reference-search-result-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .reference-search-result-type {
        max-width: 100%;
    }
}

.quill-content-container.ql-editor {
    font-size: var(--brms-doc-body-size, 1rem);
    counter-reset: brms-outline-h1 brms-outline-h2 brms-outline-h3 brms-outline-h4 brms-outline-h5 brms-outline-h6;
}

.quill-content-container.ql-editor p {
    margin-bottom: var(--brms-doc-paragraph-spacing, 0);
}

.quill-content-container.ql-editor h1 {
    font-size: var(--brms-doc-h1-size, 1.75rem);
}

.quill-content-container.ql-editor h2 {
    font-size: var(--brms-doc-h2-size, 1.5rem);
}

.quill-content-container.ql-editor h3 {
    font-size: var(--brms-doc-h3-size, 1.25rem);
}

.quill-content-container.ql-editor h4 {
    font-size: var(--brms-doc-h4-size, 1.125rem);
}

.quill-content-container.ql-editor h5 {
    font-size: var(--brms-doc-h5-size, 1rem);
}

.quill-content-container.ql-editor h6 {
    font-size: var(--brms-doc-h6-size, 1rem);
}

.quill-content-container.ql-editor h1 {
    counter-increment: brms-outline-h1;
    counter-reset: brms-outline-h2 brms-outline-h3 brms-outline-h4 brms-outline-h5 brms-outline-h6;
}

.quill-content-container.ql-editor h2 {
    counter-increment: brms-outline-h2;
    counter-reset: brms-outline-h3 brms-outline-h4 brms-outline-h5 brms-outline-h6;
}

.quill-content-container.ql-editor h3 {
    counter-increment: brms-outline-h3;
    counter-reset: brms-outline-h4 brms-outline-h5 brms-outline-h6;
}

.quill-content-container.ql-editor h4 {
    counter-increment: brms-outline-h4;
    counter-reset: brms-outline-h5 brms-outline-h6;
}

.quill-content-container.ql-editor h5 {
    counter-increment: brms-outline-h5;
    counter-reset: brms-outline-h6;
}

.quill-content-container.ql-editor h6 {
    counter-increment: brms-outline-h6;
}

.quill-content-container.ql-editor.quill-outline-numbering h1::before {
    content: counter(brms-outline-h1) ". ";
}

.quill-content-container.ql-editor.quill-outline-numbering h2::before {
    content: counter(brms-outline-h1) "." counter(brms-outline-h2) " ";
}

.quill-content-container.ql-editor.quill-outline-numbering h3::before {
    content: counter(brms-outline-h1) "." counter(brms-outline-h2) "." counter(brms-outline-h3) " ";
}

.quill-content-container.ql-editor.quill-outline-numbering h4::before {
    content: counter(brms-outline-h1) "." counter(brms-outline-h2) "." counter(brms-outline-h3) "." counter(brms-outline-h4) " ";
}

.quill-content-container.ql-editor.quill-outline-numbering h5::before {
    content: counter(brms-outline-h1) "." counter(brms-outline-h2) "." counter(brms-outline-h3) "." counter(brms-outline-h4) "." counter(brms-outline-h5) " ";
}

.quill-content-container.ql-editor.quill-outline-numbering h6::before {
    content: counter(brms-outline-h1) "." counter(brms-outline-h2) "." counter(brms-outline-h3) "." counter(brms-outline-h4) "." counter(brms-outline-h5) "." counter(brms-outline-h6) " ";
}

.quill-content-container.ql-editor.quill-outline-numbering h1::before,
.quill-content-container.ql-editor.quill-outline-numbering h2::before,
.quill-content-container.ql-editor.quill-outline-numbering h3::before,
.quill-content-container.ql-editor.quill-outline-numbering h4::before,
.quill-content-container.ql-editor.quill-outline-numbering h5::before,
.quill-content-container.ql-editor.quill-outline-numbering h6::before {
    display: inline-block;
    margin-right: 0.35em;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.quill-content-container .ql-align-center {
    text-align: center;
}

.quill-content-container .ql-align-right {
    text-align: right;
}

.quill-content-container .ql-align-justify {
    text-align: justify;
}

body.dark-mode .ql-editor a {
    color: #93c5fd;
}

body.dark-mode .ql-editor pre,
body.dark-mode .ql-editor code,
body.dark-mode .ql-editor blockquote {
    background-color: #111827;
    color: #e5e7eb;
    border-color: #374151;
}

body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .modal-header,
body.dark-mode .modal-footer,
body.dark-mode .table-light,
body.dark-mode .table-light > th,
body.dark-mode .table-light > td,
body.dark-mode .table > thead.table-light > tr > th,
body.dark-mode .table > tbody > tr.table-light > *,
body.dark-mode .list-group-item.active {
    --bs-table-bg: #273449;
    --bs-table-striped-bg: #273449;
    --bs-table-accent-bg: #273449;
    --bs-table-color: #e5e7eb;
    --bs-table-striped-color: #e5e7eb;
    background-color: #273449;
    color: #e5e7eb;
    border-color: #374151;
}

body.dark-mode .table,
body.dark-mode .table-striped,
body.dark-mode .table-bordered,
body.dark-mode .table > :not(caption) > * > * {
    color: #e5e7eb;
    border-color: #374151;
}

body.dark-mode .table-primary,
body.dark-mode .table-primary > th,
body.dark-mode .table-primary > td,
body.dark-mode .table > tbody > tr.table-primary > * {
    --bs-table-bg: #273449;
    --bs-table-striped-bg: #273449;
    --bs-table-accent-bg: #273449;
    --bs-table-color: #e5e7eb;
    --bs-table-striped-color: #e5e7eb;
    background-color: #273449 !important;
    color: #e5e7eb !important;
    border-color: #3f4d62 !important;
}

body.dark-mode .table-warning,
body.dark-mode .table-warning > th,
body.dark-mode .table-warning > td,
body.dark-mode .table > tbody > tr.table-warning > * {
    --bs-table-bg: #4f3f1d;
    --bs-table-striped-bg: #4f3f1d;
    --bs-table-accent-bg: #4f3f1d;
    --bs-table-color: #f8fafc;
    --bs-table-striped-color: #f8fafc;
    background-color: #4f3f1d !important;
    color: #f8fafc !important;
    border-color: #786033 !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-accent-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: #e5e7eb;
    color: #e5e7eb;
    background-color: rgba(255, 255, 255, 0.03);
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
    background-color: #111827;
    color: #e5e7eb;
    border-color: #4b5563;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #111827;
    color: #e5e7eb;
}

body.dark-mode .form-text,
body.dark-mode .text-muted,
body.dark-mode .small.text-muted {
    color: #9ca3af !important;
}

body.dark-mode .brms-navbar-context-text {
    color: #e5e7eb !important;
}

.table-sort-link {
    color: inherit;
}

.table-sort-link:hover {
    color: inherit;
}

body.dark-mode .table-sort-link {
    color: inherit !important;
}

body.dark-mode .table-sort-link:hover {
    color: #f8fafc !important;
}

body.dark-mode .btn-primary {
    background-color: #2b5a87;
    border-color: #3b78ad;
    color: #f8fafc;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary:active,
body.dark-mode .btn-primary.active,
body.dark-mode .show > .btn-primary.dropdown-toggle {
    background-color: #3b78ad;
    border-color: #4a90cf;
    color: #ffffff;
}

body.dark-mode a.btn,
body.dark-mode a.btn:hover,
body.dark-mode a.btn:focus,
body.dark-mode a.btn:active {
    color: inherit;
}

body.dark-mode .page-link {
    background-color: #1f2937;
    border-color: #374151;
    color: #dbe8f5;
}

body.dark-mode .page-link:hover,
body.dark-mode .page-link:focus {
    background-color: #273449;
    border-color: #475569;
    color: #f8fafc;
    box-shadow: none;
}

body.dark-mode .page-item.active .page-link {
    background-color: #2b5a87;
    border-color: #3b78ad;
    color: #ffffff;
}

body.dark-mode .page-item.disabled .page-link {
    background-color: #111827;
    border-color: #2f3a4a;
    color: #64748b;
}

body.dark-mode .btn-secondary {
    background-color: #334155;
    border-color: #475569;
    color: #e5e7eb;
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-secondary:focus,
body.dark-mode .btn-secondary:active,
body.dark-mode .btn-secondary.active,
body.dark-mode .show > .btn-secondary.dropdown-toggle {
    background-color: #475569;
    border-color: #64748b;
    color: #f8fafc;
}

body.dark-mode .btn-outline-secondary {
    background-color: transparent;
    border-color: #64748b;
    color: #dbe8f5;
}

body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus,
body.dark-mode .btn-outline-secondary:active,
body.dark-mode .btn-outline-secondary.active,
body.dark-mode .show > .btn-outline-secondary.dropdown-toggle {
    background-color: #334155;
    border-color: #64748b;
    color: #f8fafc;
}

body.dark-mode .btn-secondary.disabled,
body.dark-mode .btn-secondary:disabled,
body.dark-mode .btn-outline-secondary.disabled,
body.dark-mode .btn-outline-secondary:disabled {
    background-color: #273449;
    border-color: #3f4d62;
    color: #94a3b8;
    opacity: 1;
}

body.dark-mode .btn-info {
    background-color: #27566b;
    border-color: #37758f;
    color: #f8fafc;
}

body.dark-mode .btn-info:hover,
body.dark-mode .btn-info:focus,
body.dark-mode .btn-info:active,
body.dark-mode .btn-info.active,
body.dark-mode .show > .btn-info.dropdown-toggle {
    background-color: #37758f;
    border-color: #4c8ea9;
    color: #ffffff;
}

body.dark-mode .btn-warning {
    background-color: #7a5a22;
    border-color: #9a7430;
    color: #f8fafc;
}

body.dark-mode .btn-warning:hover,
body.dark-mode .btn-warning:focus,
body.dark-mode .btn-warning:active,
body.dark-mode .btn-warning.active,
body.dark-mode .show > .btn-warning.dropdown-toggle {
    background-color: #9a7430;
    border-color: #b78c3b;
    color: #ffffff;
}

body.dark-mode #sidebar-content {
    color: #e5e7eb;
    background: #1f2937;
    border-color: #334155;
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.5);
    outline: 1px solid rgba(148, 163, 184, 0.24);
}

body.dark-mode .document-sidebar-header {
    background: linear-gradient(135deg, #172131 0%, #1f2937 100%);
    border-bottom-color: #334155;
}

body.dark-mode .document-sidebar-body {
    background: #1f2937;
}

body.dark-mode #sidebar-content a {
    color: #e5e7eb;
}

body.dark-mode #sidebar-content a:hover {
    color: #dbe8f5;
}

body.dark-mode .btn-info.disabled,
body.dark-mode .btn-info:disabled {
    background-color: #223d4a;
    border-color: #2f5567;
    color: #94a3b8;
    opacity: 1;
}

body.dark-mode .btn-warning.disabled,
body.dark-mode .btn-warning:disabled {
    background-color: #5e4924;
    border-color: #786033;
    color: #cbd5e1;
    opacity: 1;
}

body.dark-mode .btn-primary.disabled,
body.dark-mode .btn-primary:disabled {
    background-color: #243b52;
    border-color: #33506d;
    color: #94a3b8;
    opacity: 1;
}

.traceability-browser-head > tr > th {
    background-color: #f8f9fa;
    color: #212529;
}

body.dark-mode .traceability-browser-head > tr > th {
    background-color: #273449 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

body.dark-mode .alert {
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

body.dark-mode .alert-primary {
    background-color: #243b52 !important;
    color: #e5e7eb !important;
    border-color: #33506d !important;
}

body.dark-mode .alert-success {
    background-color: #1f4a36 !important;
    color: #e5e7eb !important;
    border-color: #2d6a4f !important;
}

body.dark-mode .alert-danger {
    background-color: #5a2630 !important;
    color: #f8fafc !important;
    border-color: #7a3542 !important;
}

body.dark-mode .alert-warning {
    background-color: #5e4924 !important;
    color: #f8fafc !important;
    border-color: #786033 !important;
}

body.dark-mode .alert-info {
    background-color: #223d4a !important;
    color: #e5e7eb !important;
    border-color: #2f5567 !important;
}

body.dark-mode .alert-secondary,
body.dark-mode .alert-light,
body.dark-mode .bg-light,
body.dark-mode .bg-white {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

body.dark-mode .alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

body.dark-mode .alert .btn-close:hover,
body.dark-mode .alert .btn-close:focus {
    opacity: 1;
}

body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode hr {
    border-color: #374151 !important;
}

body.dark-mode .discussion-drawer-toggle,
body.dark-mode .hierarchy-drawer-toggle,
body.dark-mode #sidebar-toggle {
    background: #dbe8f5;
    border-color: #a9bfd7;
    color: #1f3b58;
}

body.dark-mode .discussion-drawer .card,
body.dark-mode .hierarchy-drawer .card {
    background: #1f2937;
    border: 1px solid #334155;
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.5);
    outline: 1px solid rgba(148, 163, 184, 0.24);
}

body.dark-mode .discussion-drawer .card-header,
body.dark-mode .hierarchy-drawer .card-header {
    background: linear-gradient(135deg, #172131 0%, #1f2937 100%);
    border-bottom-color: #334155;
}

body.dark-mode .discussion-drawer .card-body,
body.dark-mode .hierarchy-drawer .card-body {
    background: #1f2937;
}

body.dark-mode .discussion-composer {
    background: #1f2937;
    border-top-color: #334155;
}

body.dark-mode #message-area {
    background-color: #111827;
    color: #e5e7eb;
}

@media (max-width: 991.98px) {
    .hierarchy-drawer {
        top: calc(var(--brms-navbar-height) + 1rem);
        bottom: auto;
        height: calc(100vh - var(--brms-navbar-height) - 2rem);
        width: min(88vw, 320px);
    }

    .hierarchy-drawer-toggle {
        top: 0.75rem;
        min-height: 7rem;
    }
}