/**
    Style sheet for the "issue/{IssueID}" and "solution/{SolutionID}" pages
    For right now they, are identical in styling
*/


.empty-feed {

    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.comment-feed {
    position: relative;
    padding: 2.4rem;
    background-color: var(--bs-tertiary-bg);
    border: 4px dashed var(--bs-secondary-color);
    border-radius: 16px;
    text-align: center;
    overflow: hidden;
}

/* Inner dashed box with pseudo-elements */
.comment-feed::before,
.comment-feed::after {
    content: "";
    position: absolute;
    border-style: dashed;
    border-color: var(--bs-secondary-color);
    pointer-events: none;
    z-index: 0;
}

/* Horizontal upper line */
.comment-feed::before, .comment-feed::after {
    top: 0.65rem;
    left: 1.25rem;
    right: 1.25rem;
    height: 0;
    border-width: 0 0 2px 0;
}
.comment-feed::after {
    top: revert;
    bottom: 0.65rem;
}
    /* Optional: Responsive content */
    .comment-feed .content {
        position: relative;
        z-index: 1;
    }

.comment-feed button {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--bs-primary);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: bold;
    /*Hard coded color style for button text, not themed */
    color: var(--call-to-action-theme-color);
}

.nav-link {
    position: relative;
}
.nav-link .content-count {
    position: absolute;
    right:5px;
    top:0;
    scale: 0.6;
}

.issue-card .content-count {
    position: absolute;
    right: -7px;
    top: -9px;
    scale: 0.6;
}


.truncate-multiline {
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 4; 
    overflow: hidden; 
}

@media (max-width: 768px) {
    .truncate-multiline {
        -webkit-line-clamp: 8;
    }

}

.expanded 
.expand-button-spacer {
    display: none;
}

.composite-scope {
    display: none;
    max-width: 230px;
    max-height: 170px;
    overflow-y: scroll;
}
.show-composite-scope .composite-scope {
    display: block;
}

.expanded.show-composite-scope .composite-scope {
    max-height: initial;
    overflow-y: initial;
}

.card-sticky-header {
    position: absolute;
    visibility: hidden;
    text-align: center;
    height: 0;
    /*margin-bottom: 20px;*/ /*space to offset the height 0 */
    overflow: visible;
    margin: auto;
    z-index: 1;
    position: absolute;
    width: fit-content;
}

.sticky-header-content {
    /*    padding-inline: 20px;*/
    /*background: rgba(0,0,0,0.7);*/ /* slightly transparent */
    /*backdrop-filter: blur(6px);*/ /* adds a nice frosted glass effect */
    /*    color: #fff;*/
    padding: 0.5rem 1rem;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    font-size: 1rem;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-top: 0;
}

:root {
    --sub-content-tab-bar: 57px;
}

.sub-content-tab-bar {
    height: var(--sub-content-tab-bar);
}

.card.solution-card.expanded .card-sticky-header,
.card.issue-card.expanded .card-sticky-header {
    position: sticky;
    top: var(--header-height);
    visibility: visible;
}
.tab-pane .card.solution-card.expanded .card-sticky-header,
.tab-pane .card.issue-card.expanded .card-sticky-header {
    top: calc(var(--header-height) + var(--sub-content-tab-bar));
}

.search-results-container .card.solution-card.expanded .card-sticky-header,
.search-results-container .card.issue-card.expanded .card-sticky-header {
    top: 0;
}


:root {
    --solution-bg: #03ca03; /* Light mode green */
    --issue-bg: #f8d7da
    /* Add other light mode variables here */
}



[data-bs-theme="dark"] {
    --solution-bg: #006600; /* Dark mode green */
    --issue-bg: #686364;
    /* Add other dark mode variables here */
}

.solution-card .card-header {
    background: var(--solution-bg);
}

.issue-card .card-header {
    background: var(--issue-bg);
}

.issue-card, .solution-card {
    --card-header-height: 0px;
}



.issue-card .card-header,
.solution-card .card-header {
    z-index: 2;
    position: relative; /* So that the z-index can be applied... relative, not absoltue to maintain width*/
}
.issue-card:not(.select2-item) .card-header,
.solution-card:not(.select2-item) .card-header {
    margin-left: var(--dial-width);
}

.parent-fieldset .select2-container .select2-selection--single {
    height: initial;
}
.select2-item .scope-ribbon,
.parent-content-dropdown .scope-ribbon {
    margin-top: 0;
}
.select2-item h5,
.parent-content-dropdown h5 {
    text-wrap: auto;
    margin-right: 27px;
}

/*  x (clear button) for select 2*/
.parent-fieldset .select2-container--default .select2-selection--single .select2-selection__clear-custom {
    height: 41px;
    top: -40px;
    position: absolute;
    right: -19px;
    z-index: 1052; /* step above select2 dropdown*/
    padding: 10px; /* increase clickable area*/
}
/* the x icon*/
/*.parent-fieldset .select2-container--default .select2-selection--single .select2-selection__clear-custom span {
    height:0;
    width: 0;
}*/
.parent-fieldset .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
}

.dial-container {
    z-index: 1;
    position: relative;
    background: linear-gradient(to bottom, var(--bs-body-bg) 0%, var(--bs-body-bg) 70%, rgba(255,255,255,0) 100%);
}
@media (max-width: 768px) {
    .dial-container {
        margin-top: var(--card-header-height);
    }
    .card-header-spacer-for-mobile {
        height: var(--card-header-height);
    }
    .issue-card .card-header,
    .solution-card .card-header {
        width: 100%;
        position: absolute !important;
        margin-left: 0 !important;
    }
}


.author-content-alert.edit-mode .if-not-edit-mode {
    display: none;
}
.author-content-alert:not(.edit-mode) .if-edit-mode {
    display: none;
}