.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
    padding-left: 0;
}

.form-select:focus,
.form-control:focus,
.datatable-input:focus,
.datatable-input:focus-visible,
.datatable-selector:focus-visible {
    color: #212529;
    background-color: #fff;
    border-color: #eb7601;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(253, 178, 49, 0.5);
}

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.all-top-border {
    border-top: solid 1px #ced4da !important;
}

#refrence-modal .content-body,
.search-list {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.search-item.selected:first-child,
.search-item.selected {
    background-color: #eee;
    border: solid 1px #ced4da;
    border-radius: 5px;
}

.search-item.selected+.search-item {
    border-top: unset;
}

.p-list-item-bottom,
.p-list-item {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-top: solid 1px #ced4da;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
    align-content: center;
}

.p-list-item:first-child,
.p-list-item.first-item {
    border-top: none;
}

.p-list-item-bottom {
    border-top: unset;
    border-bottom: solid 1px #ced4da;
}

.p-list-item-bottom a,
.p-list-item a {
    color: black;
    text-decoration: none;
}

.p-list-item-bottom a:hover,
.p-list-item-bottom a:focus,
.p-list-item a:hover,
.p-list-item a:focus {
    text-decoration: underline;
}

.badge-pill {
    border-radius: 10rem
}

.table th {
    font-weight: unset;
}

.table> :not(caption)>*>*,
.datatable-table> :not(caption)>*>* {
    padding: 0.66rem 0.5rem;
}

.text-thin {
    font-weight: lighter;
}

.text-normal {
    font-weight: normal;
}

.display-7 {
    font-size: 2.5rem;
}

.display-8 {
    font-size: 2rem;
}

.display-9 {
    font-size: 1.5rem;
}

.m-left-0 {
    margin-left: 0;
}

.m-left-1 {
    margin-left: 2rem;
}

.m-left-2 {
    margin-left: 4rem;
}

.m-left-3 {
    margin-left: 6rem;
}

.m-left-4 {
    margin-left: 8rem;
}

.m-left-5 {
    margin-left: 10rem;
}

button.convert-ref {
    margin-top: -2.5px;
}

body.dragging,
body.dragging * {
    cursor: move !important;
}

#used-in-list {
    max-height: 50%;
    overflow: auto;
}

.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}

.chunk-title {
    color: #000;
    text-decoration: none;
    margin-left: 0.3rem;

}

.chunk-title:hover {
    color: #000;
}


.chunk-title.disabled,
.chunk-title.disabled:hover {
    color: #00000080;
}


iframe.section-view {
    height: 70vh;
    width: 100%;
}

ul.draggable {
    margin: 0;
    padding: 0;
}

ul.draggable li {
    border: none;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
    align-content: center;
    border: 1px solid #eee;
    border-left: 5px solid #eee;
}

li.placeholder {
    background-color: #eee !important;
}

ul.draggable.normal li {
    cursor: default;
    border: solid 1px #ced4da;
}

ul.draggable li:first-child {
    margin-top: 0rem;
}

ul.draggable li.placeholder {
    position: relative;
}

ul.draggable li.placeholder:before {
    position: absolute;
}

ul.draggable ul:has(li) {
    width: 100%;
    margin: 1rem;
    margin-left: -1rem;
}

.children-counter {
    font-size: smaller;
    cursor: pointer;
}

.type {
    display: block;
    padding: 0.25rem 1rem 0.25rem 0.6rem;
    font-size: 0.75rem;
    color: #555;
}

.type-orange-bg {
    background-color: #fff3cd;
    /* border-radius: 5px; */
}

.type-blue-bg {
    background-color: #cff4fc;
}

.actions {
    font-size: 0.75rem;
    padding: 0.25rem 1rem;
}

.actions a {
    color: #aaa;
    text-decoration: none;
    opacity: 0.7;
    transition: all ease-in-out 0.25s;
}

.legend {
    padding: 0.25rem;
    display: inline-block;
}

.actions a:hover {
    opacity: 1;
}

ul.draggable li div.col-12 {
    padding: 0.5rem 0rem;
}

/* Credits functionality - commented out for future use
.credits {
    cursor: default;
    border: #6c757d solid 1px;
    color: #6c757d;
}
*/

.dragger {
    width: 25px;
    opacity: 0;
    margin-top: -4px;
    cursor: move;
    transition: all ease-in-out 0.125s;
}

.item-dragger:hover>.dragger {
    opacity: 0.5;
}

.btn-regenerate {
    background: #eee;
    border-radius: 50%;
    display: inline-block;
    margin-left: -10rem;
    margin-bottom: -6rem;
}

/* 
ul:not(:has(li)) {
    margin: 0 !important;
} */

.modal-75 {
    width: 75% !important;
    max-width: unset !important;
}

.left-border {
    border-left: 1px solid #ced4da;
}

.right-border {
    border-right: 1px solid #ced4da;
}

.put-right {
    position: absolute;
    right: 1.5rem;
    z-index: 9999;
}

.put-right-l2 {
    position: absolute;
    right: 1.5rem;
    z-index: 9;
}

.datatable-wrapper.no-footer .datatable-container {
    border-bottom: unset;
}

.datatable-table>tbody>tr>td {
    height: 3.5rem;
}

.question-display {
    display: block;
}

.question-edit {
    display: none;
}

.datatable-pagination-list button {
    border-radius: 5px;
}

.nav-item.active .nav-link,
.nav-item:hover .nav-link,
.nav-link:hover {
    color: #000;
}

div.dita-title {
    position: relative;
}

div.dita-title.warning:before {
    content: "⚠";
    background: #ffc000;
    border-radius: 5px;
    width: 25px;
    height: 25px;
    text-align: center;
    position: absolute;
    font-size: large;
    top: 2rem;
    left: 1.5rem;
}

ul .reason {
    display: block;
    font-size: smaller;
    font-weight: normal;
}

/* Main ordered list styling */
.view-dita-map ol,
.view-dita-map ul {
    list-style: none;
    counter-reset: item;
    padding-left: 0;
    margin: 0;
    border-left: 5px solid #ddd;
}

/* List item styling */
.view-dita-map ul>li,
.view-dita-map ol>li {
    display: block;
    margin-bottom: 0.5em;
    position: relative;
    font-weight: bold;
}

.view-dita-map div.dita-title {
    background-color: #eee;
    padding: 0.5rem;
    padding-left: 3.5rem;
}

.view-dita-map ul>li>div.dita-title {
    padding-left: 1rem;
}

/* Counter for numbering */
.view-dita-map ol>li:before {
    content: counter(item) ".";
    counter-increment: item;
    font-weight: bold;
    position: absolute;
    left: 2rem;
    top: 0.5rem;
    z-index: 1;
}

/* Small tag styling for the filename */
.view-dita-map ul>li small,
.view-dita-map ol>li small {
    display: block;
    font-weight: normal;
    color: #666;
    font-size: 12px;
    margin-top: 4px;
}

/* Nested list styling */
.view-dita-map ol ol {
    margin-top: 8px;
    margin-left: 20px;
    counter-reset: nested-item;
}

.view-dita-map ol ol div.dita-title {
    padding-left: 4rem;
}

.view-dita-map ol ol ol div.dita-title {
    padding-left: 5rem;
}

.view-dita-map ol ol ol ol div.dita-title {
    padding-left: 6rem;
}

.view-dita-map ol ol ol ol ol div.dita-title {
    padding-left: 7rem;
}

.view-dita-map ol ol>li:before {
    content: counter(item) "." counter(nested-item) ".";
    counter-increment: nested-item;
    left: 1.5rem;
    top: 0.5rem;
}

.view-dita-map ol ol ol {
    counter-reset: nested-item-2;
}

.view-dita-map ol ol ol>li:before {
    content: counter(item) "." counter(nested-item) "." counter(nested-item-2) ".";
    counter-increment: nested-item-2;
    left: 1.5rem;
    top: 0.5rem;
}

.view-dita-map ol ol ol ol {
    counter-reset: nested-item-3;
}

.view-dita-map ol ol ol ol>li:before {
    content: counter(item) "." counter(nested-item) "." counter(nested-item-2) "." counter(nested-item-3) ".";
    counter-increment: nested-item-3;
    left: 1.5rem;
    top: 0.5rem;
}

/* Level 5 nested list styling */
.view-dita-map ol ol ol ol ol {
    counter-reset: nested-item-4;
}

.view-dita-map ol ol ol ol ol>li:before {
    content: counter(item) "." counter(nested-item) "." counter(nested-item-2) "." counter(nested-item-3) "." counter(nested-item-4) ".";
    counter-increment: nested-item-4;
    left: 1.5rem;
    top: 0.5rem;
}

/* Level 6 nested list styling */
.view-dita-map ol ol ol ol ol ol {
    counter-reset: nested-item-5;
}

.view-dita-map ol ol ol ol ol ol>li:before {
    content: counter(item) "." counter(nested-item) "." counter(nested-item-2) "." counter(nested-item-3) "." counter(nested-item-4) "." counter(nested-item-5) ".";
    counter-increment: nested-item-5;
    left: 1.5rem;
    top: 0.5rem;
}

/********************************************************************************************/
.drag-enabled li {
    transition: none !important;
    cursor: default !important;
}

.drag-enabled li:not(.dragging) {
    transition: all 0.2s ease;
}

.dragging * {
    pointer-events: none !important;
}

.drag-enabled.dragging-active * {
    transition: none !important;
    animation: none !important;
}

.drag-enabled li:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.drop-before {
    border-top: 4px solid #007bff !important;
    background: linear-gradient(to bottom, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0.05) 100%);
    position: relative;
}

.drop-after {
    border-bottom: 4px solid #007bff !important;
    background: linear-gradient(to top, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0.05) 100%);
    position: relative;
}

.drop-as-child {
    border: 3px dashed #007bff !important;
    background: linear-gradient(to left, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0.05) 100%);
    position: relative;
}

.drop-before::after {
    content: "DROP BEFORE";
    position: absolute;
    left: 50%;
    top: -15px;
    transform: translateX(-50%);
    background: #007bff;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    z-index: 1000;
    pointer-events: none;
}

.drop-after::after {
    content: "DROP AFTER";
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    background: #007bff;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    z-index: 1000;
    pointer-events: none;
}

.drop-as-child::after {
    content: "MAKE CHILD";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #007bff;
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    z-index: 1000;
    pointer-events: none;
}

.drag-enabled li {
    position: relative;
}

.drag-enabled li:hover {
    background: rgba(0, 123, 255, 0.08);
}

.drag-feedback {
    --bs-info: #0dcaf0;
    --bs-success: #198754;
}

.view-dita-map li::before,
.view-dita-map li::after,
.drop-before::after,
.drop-after::after,
.drop-as-child::after {
    pointer-events: none !important;
}

.drag-handle {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    pointer-events: none;
    /* left: 0.2rem;
    top: 50%;
    transform: translateY(-50%); */
    color: #6c757d;
    cursor: grab !important;
    display: none;
    z-index: 999999999999;
    pointer-events: auto !important;
    user-select: none;
}

.drag-enabled .drag-handle {
    display: inline-block;
}

.drag-handle:hover {
    color: #007bff;
}

.drop-zone {
    min-height: 3px;
    background-color: #007bff;
    margin: 2px 0;
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.drop-zone.active {
    opacity: 1;
}


/********************************************************************************************/

.not-allowed {
    cursor: not-allowed !important;
    background-color: #eee;
}

.not-allowed * {
    cursor: not-allowed !important;
}

.not-allowed .nav-link,
.not-allowed:hover .nav-link,
.not-allowed:hover .nav-link:hover {
    color: rgba(0, 0, 0, 0.35) !important;
}

.pigro-navbar .nav-item {
    padding: 0 2rem;
    margin-right: 0.5rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    box-shadow: inset 0px -1px 7px -3px #333333;
    font-weight: 500;
}

.bg-color-all {
    background-color: #eee;

}

.bg-color-all.active {
    /* background-color: #165aac; */
    box-shadow: unset;
}


.bg-color-all:hover .nav-link {
    color: #165aac !important;
}


.bg-color-all.active .nav-link {
    color: #165aac !important;
    font-weight: bold;
}


.bg-color-1 {
    background-color: rgba(128, 72, 59, 0.7);
    font-weight: bold;
}

.bg-color-1:hover,
.bg-color-1.active {
    /* background-color: rgba(128, 72, 59, 1); */
    background-color: #eee;
}

.bg-color-1:hover .nav-link,
.bg-color-1.active .nav-link {
    color: #000 !important;
    box-shadow: unset;
}


.bg-color-2 {
    /* background-color: rgba(162, 124, 58, 0.7); */
    background-color: #b3cbe8;
    font-weight: bold;
}


.bg-color-2:hover,
.bg-color-2.active {
    /* background-color: rgba(162, 124, 58, 1); */
    background-color: #eee;
}

.bg-color-2:hover .nav-link,
.bg-color-2.active .nav-link {
    color: #000 !important;
}

.bg-color-3 {
    /* background-color: rgba(146, 100, 57, 0.7); */
    background-color: #c4d884;
    font-weight: bold;
}

.bg-color-3:hover,
.bg-color-3.active {
    /* background-color: rgba(146, 100, 57, 1); */
    background-color: #eee;
}

.bg-color-3:hover .nav-link,
.bg-color-3.active .nav-link {
    color: #000 !important;
}

.bg-color-4 {
    background-color: rgba(178, 145, 61, 0.7);
    font-weight: bold;
}

.bg-color-4:hover,
.bg-color-4.active {
    /* background-color: rgba(178, 145, 61, 1); */
    background-color: #eee;
}

.bg-color-4:hover .nav-link,
.bg-color-4.active .nav-link {
    color: #000 !important;
}

.bg-color-5 {
    background-color: rgba(79, 52, 46, 0.7);
    font-weight: bold;
}

.bg-color-5:hover,
.bg-color-5.active {
    /* background-color: rgba(79, 52, 46, 1); */
    background-color: #eee;
}

.bg-color-5:hover .nav-link,
.bg-color-5.active .nav-link {
    color: #000 !important;
}

.dita-title .retry-btn {
    position: absolute;
    right: 4.25rem;
}

.dita-title .view-btn,
.dita-title .regen-btn,
.dita-title .generate-btn,
.dita-title .processing-btn {
    position: absolute;
    right: 0.5rem;
}

.dita-title .update-btn {
    position: absolute;
    right: 4.25rem;
}

.border-left {
    margin-left: -5px;
    border-left: 5px solid;
}

.border-no {
    margin-left: 0px;
    border-left: unset;
}

.border-green {
    border-image: linear-gradient(to bottom, #44b000 100%, #44b000 100%) 1;
}

.border-glossary {
    border-image: linear-gradient(to bottom, #ff0000 100%, #ff0000 100%) 1;
}

.border-style {
    border-image: linear-gradient(to bottom, #006bb0 100%, #006bb0 100%) 1;
}

.border-mixed {
    border-image: linear-gradient(to bottom, #ffcc00 100%, #ffcc00 100%) 1;
}

.border-reuse {
    border-image: linear-gradient(to bottom, #b0009e 100%, #b0009e 100%) 1;
}

.border-glossary-style {
    border-image: linear-gradient(to bottom,
            #F44336 0%, #F44336 50%,
            #006bb0 50%, #006bb0 100%) 1;
}

.border-glossary-mixed {
    border-image: linear-gradient(to bottom,
            #F44336 0%, #F44336 50%,
            #ffcc00 50%, #ffcc00 100%) 1;
}

.border-glossary-reuse {
    border-image: linear-gradient(to bottom,
            #F44336 0%, #F44336 50%,
            #b0009e 50%, #b0009e 100%) 1;
}

.border-mixed-style {
    border-image: linear-gradient(to bottom,
            #006bb0 0%, #006bb0 50%,
            #ffcc00 50%, #ffcc00 100%) 1;
}

.border-reuse-style {
    border-image: linear-gradient(to bottom,
            #006bb0 0%, #006bb0 50%,
            #b0009e 50%, #b0009e 100%) 1;
}

.border-mixed-reuse {
    border-image: linear-gradient(to bottom,
            #ffcc00 0%, #ffcc00 50%,
            #b0009e 50%, #b0009e 100%) 1;
}

.border-glossary-mixed-style {
    border-image: linear-gradient(to bottom,
            #F44336 0%, #F44336 33.33%,
            #006bb0 33.33%, #006bb0 66.66%,
            #ffcc00 66.66%, #ffcc00 100%) 1;
}

.border-glossary-reuse-style {
    border-image: linear-gradient(to bottom,
            #F44336 0%, #F44336 33.33%,
            #006bb0 33.33%, #006bb0 66.66%,
            #b0009e 66.66%, #b0009e 100%) 1;
}

.border-glossary-mixed-reuse {
    border-image: linear-gradient(to bottom,
            #F44336 0%, #F44336 33.33%,
            #ffcc00 33.33%, #ffcc00 66.66%,
            #b0009e 66.66%, #b0009e 100%) 1;
}

.border-mixed-reuse-style {
    border-image: linear-gradient(to bottom,
            #006bb0 0%, #006bb0 33.33%,
            #ffcc00 33.33%, #ffcc00 66.66%,
            #b0009e 66.66%, #b0009e 100%) 1;
}

.border-glossary-mixed-reuse-style {
    border-image: linear-gradient(to bottom,
            #F44336 0%, #F44336 25%,
            #006bb0 25%, #006bb0 50%,
            #ffcc00 50%, #ffcc00 75%,
            #b0009e 75%, #b0009e 100%) 1;
}

/* Filter Styles */
.filter-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.filter-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid #ddd;
    cursor: pointer;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.2s ease;
}

.filter-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.filter-label {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    user-select: none;
    color: #333;
    transition: all 0.2s ease;
}

/* Filter Colors - matching main theme colors */
#filter-green {
    background-color: #44b000;
    border-color: #44b000;
}

/* #filter-green:not(:checked) {
    background-color: #44b000;
    opacity: 0.6;
} */

#filter-reuse {
    background-color: #b0009e;
    border-color: #b0009e;
}

#filter-reuse:not(:checked) {
    background-color: #b0009e;
    opacity: 0.6;
}

#filter-style {
    background-color: #006bb0;
    border-color: #006bb0;
}

#filter-style:not(:checked) {
    background-color: #006bb0;
    opacity: 0.6;
}

#filter-glossary {
    background-color: #ff0000;
    border-color: #ff0000;
}

#filter-glossary:not(:checked) {
    background-color: #ff0000;
    opacity: 0.6;
}

#filter-mixed {
    background-color: #ffcc00;
    border-color: #ffcc00;
}

#filter-mixed:not(:checked) {
    background-color: #ffcc00;
    opacity: 0.6;
}

#filter-mixed:checked::after {
    color: #333;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .filter-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    .filter-label {
        font-size: 0.8rem;
    }
}

.badge-processing {
    color: #000;
    font-size: 0.7rem;
}

.report-container {
    height: 89%;
    align-items: flex-start;
    display: flex;
    gap: 30px;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

/* Pie Chart Styles - Updated for primary filtering interface */
.pie-chart-container {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.pie-chart-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2;
    /* Pie chart on the right */
}

.pie-chart-svg {
    transform: rotate(-90deg);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    max-width: 100%;
    height: auto;
}

.pie-slice {
    cursor: pointer;
    transition: all 0.3s ease;
    stroke: #ffffff;
    stroke-width: 1;
}

.pie-slice:hover {
    filter: brightness(1.1);
    transform-origin: 150px 150px;
}

.pie-slice.slice-active {
    stroke-width: 3;
    filter: brightness(1.15) saturate(1.2);
}

.pie-slice.slice-inactive {
    opacity: 0.2;
    filter: grayscale(0.8) brightness(0.6);
}

.pie-slice.slice-empty {
    display: none;
}

/* .pie-slice.pie-green {
    fill: #44b000;
} */

.pie-slice.pie-reuse {
    fill: #b0009e;
}

.pie-slice.pie-style {
    fill: #006bb0;
}

.pie-slice.pie-glossary {
    fill: #ff0000;
}

.pie-slice.pie-mixed {
    fill: #ffcc00;
}

.pie-chart-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: white;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.pie-chart-total-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: #495057;
    line-height: 1;
}

.pie-chart-total-label {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.pie-chart-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    max-width: 250px;
    order: 1;
    /* Legend on the left */
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.legend-item:hover {
    background-color: #f0f8ff;
    transform: translateX(3px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.legend-item.legend-active {
    background-color: rgba(108, 118, 125, 0.1);
    border-left: 3px solid rgba(108, 118, 125, 1);
    font-weight: 600;
}

.legend-item.legend-inactive {
    opacity: 0.4;
    background-color: transparent;
}

.legend-item.legend-inactive .legend-color {
    opacity: 1;
    filter: grayscale(0.7);
}

.legend-item.legend-empty {
    opacity: 0.5;
}

.legend-item.legend-empty .legend-color {
    opacity: 1;
    filter: grayscale(0.3);
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* .legend-item.legend-green .legend-color {
    background-color: #44b000;
} */

.legend-item.legend-reuse .legend-color {
    background-color: #b0009e;
}

.legend-item.legend-style .legend-color {
    background-color: #006bb0;
}

.legend-item.legend-glossary .legend-color {
    background-color: #ff0000;
}

.legend-item.legend-mixed .legend-color {
    background-color: #ffcc00;
}

.legend-text {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.legend-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: #495057;
}

.legend-stats {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(108, 117, 125, 0.7);
    background: transparent;
    padding: 2px 6px;
    border-radius: 10px;
}

.legend-item.legend-active .legend-stats {
    background: rgba(108, 117, 125, 0.1);
    color: rgba(108, 117, 125, 1);
}

.pie-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 280px;
    color: #6c757d;
    font-size: 0.9rem;
    font-style: italic;
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pie-chart-svg {
        width: 200px;
        height: 200px;
    }

    .pie-chart-center {
        width: 70px;
        height: 70px;
    }

    .pie-chart-total-number {
        font-size: 1.4rem;
    }

    .pie-chart-total-label {
        font-size: 0.7rem;
    }

    .pie-chart-container {
        flex-direction: column;
        gap: 20px;
    }

    .pie-chart-wrapper {
        order: 1;
    }

    .pie-chart-legend {
        order: 2;
        max-width: 100%;
    }

    .legend-item {
        padding: 6px 10px;
    }

    .legend-name {
        font-size: 0.8rem;
    }

    .legend-stats {
        font-size: 0.7rem;
    }
}

/* Enhanced interaction states */
.pie-slice:focus,
.legend-item:focus {
    outline: 2px solid #2196f3;
    outline-offset: 2px;
}

.pie-slice:active {
    transform: scale(0.98);
}

.legend-item:active {
    transform: translateX(1px);
}

/* Animation for filter changes */
@keyframes filterChange {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

.legend-item.legend-active {
    animation: filterChange 0.3s ease-out;
}

/* Accessibility improvements */
.pie-slice:focus-visible,
.legend-item:focus-visible {
    outline: 2px solid #2196f3;
    outline-offset: 2px;
}

/* Loading state for sections */
#sections-loading {
    padding: 2rem;
    text-align: center;
}

#sections-loading .badge {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* Enhanced visual feedback */
.pie-chart-container:hover .pie-slice:not(:hover):not(.slice-active) {
    opacity: 0.7;
}

.pie-chart-container:hover .legend-item:not(:hover):not(.legend-active) {
    opacity: 0.7;
}

/* Original Section Collapse Styles */
.original-header-collapsed {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    cursor: pointer;
    position: sticky;
    top: 1rem;
}

.original-header-expanded {
    cursor: pointer;
}

.original-header-collapsed:hover b,
.original-header-expanded:hover b {
    text-decoration: underline;
}

.original-content-hidden {
    display: none;
}

.original-content-visible {
    display: block;
}



.add-btn.top-add {
    top: -0.25rem;
}

.add-btn.top-add+.add-btn {
    top: calc(100% + 0.25rem);
}

.add-btn {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.25rem);
    transform: translateX(-50%) translateY(-50%);
    border: 1px #6c757daa dotted;
    background: transparent;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 2rem;
    z-index: 10;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    pointer-events: none;
    color: #6c757daa;
    cursor: pointer;
    padding: 0.01rem 3rem;
}

.add-btn:hover {
    color: #6c757d;
    border: 1px #6c757d solid;
    background: #eee;
}

.dita-title:hover .add-btn {
    opacity: 1;
    pointer-events: auto;
}

.content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding-top: 25vh;
    z-index: 1000;

}

.overlay-spinner {
    position: fixed;
}

/* Override for export modal overlay spinner to center within modal */
#export-modal .overlay-spinner {
    position: relative;
}

.overlay-spinner .badge {
    padding: 10px 15px;
    font-size: 1rem;
}

#main-container {
    position: relative;
}

span.stopped-alert {
    font-size: small;
    font-weight: normal;
    position: absolute;
    right: 8.5rem;
    top: 1.2vh;
}

/* Stellantis Press Release Styling */
.fact-block {
    background-color: #eee;
    border: 1px solid #dee2e6;
    transition: box-shadow 0.2s;
}

.fact-block:hover {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
}

.source-block {
    background-color: #f8f9fa;
    transition: all 0.2s;
}

.source-block:hover {
    background-color: #e9ecef;
}

.source-block .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.delete-fact-btn,
.delete-source-btn {
    transition: all 0.2s;
}

.delete-fact-btn:hover,
.delete-source-btn:hover {
    transform: scale(1.1);
}

.add-source-dropdown {
    min-width: 180px;
}

/* Make modal scrollable for long forms */
#create-modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Better spacing for source controls */
.d-flex.gap-2 {
    gap: 0.5rem;
}