/* static/css/disease.css */

:root {
   
    --theme-primary-green: #194210;    
    --theme-accent-green: #fff;        
    --theme-button-hover-bg:#194210 ;   

  
    --outer-box-bg: #e0dcc2;           
    --accordion-item-bg: #ffffff;    
    --accordion-border-color: var(--theme-primary-green); 
    --disease-title-color: #000000;   

   
    --bs-white-text-on-light-bg: #20221f; 
    --bs-dark-text: #212529;  

    
    --accordion-button-padding-y: 1.5rem;
    --accordion-button-padding-x: 1.5rem;
    --accordion-body-padding-y: 1.75rem;
    --accordion-body-padding-x: 1.5rem;
}

/* --- Outer Box for Disease Title and Accordion --- */
.disease-detail-outer-box {
    background-color: var(--outer-box-bg);
    padding: 2rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Disease Title Styling */
.disease-detail-header h1,
.disease-detail-header h1 span {
    color: var(--disease-title-color) !important;
}
.disease-detail-header p.lead {
    color: var(--bs-dark-text);
}

/* Main Accordion Styling */
.accordion {
    margin-bottom: 0;
}

.accordion-item {
    background-color: var(--accordion-item-bg);
    border: 2px solid var(--accordion-border-color);
}

.accordion-item:not(:first-of-type) {
    border-top: 2px solid var(--accordion-border-color); 
}
.accordion-item:first-of-type {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
.accordion-item:last-of-type {
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom: 2px solid var(--accordion-border-color);
}
.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: calc(0.25rem - 2px); 
    border-bottom-left-radius: calc(0.25rem - 2px);
}


.accordion-button {
    background-color: var(--theme-accent-green); 
    color: var(--bs-white-text-on-light-bg);     
    font-weight: 600;
    padding: var(--accordion-button-padding-y) var(--accordion-button-padding-x);
    border-bottom: 1px solid var(--accordion-border-color);
    border-radius: 0;
}
.accordion-button:focus {
    z-index: 3;
    border-color: transparent; 
    box-shadow: 0 0 0 0.25rem rgba(25, 66, 16, 0.35); 
    outline: 0;
}
.accordion-button:not(.collapsed) {
    background-color: var(--theme-primary-green); 
    color: white; 
    box-shadow: none;
    border-bottom-color: transparent; 
}
.accordion-item:last-of-type .accordion-button:not(.collapsed) {
    border-bottom: 0;
}

.accordion-button:hover {
    background-color: var(--theme-button-hover-bg); 
    color: white;
}
.accordion-button:not(.collapsed):hover { 
    background-color: var(--theme-primary-green);
    color: white;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2320221f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after { 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}

.accordion-body {
    background-color: var(--accordion-item-bg); 
    color: var(--bs-dark-text);
    padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
}

/* Disease Properties Table */
.disease-info-table th,
.disease-info-table td {
    border: 1px solid #dee2e6;
    padding: 0.9rem 0.75rem;
    vertical-align: top;
}
.disease-info-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    width: 30%; 
    text-align: left;
    overflow-wrap: break-word;
}
.disease-info-table td {
    text-align: left;
    overflow-wrap: break-word;
}

/* Connections List Group Styling */
.list-group-item {
    padding: 0.9rem 1.25rem;
    background-color: transparent; 
    border: none; 
    border-bottom: 1px solid #f0f0f0; 
}
.list-group-flush .list-group-item:last-child {
    border-bottom: none;
}

.list-group-item .item-number {
    margin-right: 0.5em;
    font-weight: 500;
    color: #6c757d;
}

.list-group-item a {
    text-decoration: none;
    font-weight: 500;
    color: var(--theme-primary-green);
}
.list-group-item a:hover {
    text-decoration: underline;
    color: rgb(80, 105, 80);
}
.list-group-item a i.fa-external-link-alt, 
.disease-info-table td a i.fa-external-link-alt {
    margin-left: 4px;
    font-size: 0.8em;
}

/* Inner Accordion Styling (for connections) */
#innerConnectionsAccordion .accordion-button {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    background-color: #f8f9fa; 
    color: var(--bs-dark-text);
    border-bottom: 1px solid #e0e0e0; 
}
#innerConnectionsAccordion .accordion-button:not(.collapsed) {
    background-color: #e9ecef; 
    color: var(--bs-dark-text);
    border-bottom-color: transparent;
}
#innerConnectionsAccordion .accordion-button:hover {
    background-color: #4c7a43; 
    color: white;
}
#innerConnectionsAccordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
#innerConnectionsAccordion .accordion-body {
    padding: 1rem 1.25rem;
}
#innerConnectionsAccordion .list-group-item {
    padding: 0.75rem 1rem;
     border-bottom: 1px solid #f5f5f5; 
}
#innerConnectionsAccordion .list-group-flush .list-group-item:last-child {
    border-bottom: none;
}


/* --- Cytoscape Graph Specific Styles --- */
#cy-disease-graph-container { 
    position: relative;
    width: 100%;
    min-height: 550px;
    height: 65vh;
    max-height: 700px;
    background-color: #fdfdfa;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    overflow: hidden;
}

#cy-disease-graph { 
    width: 100%;
    height: 100%;
    position: relative;
}

.cytoscape-graph-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    color: #555;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    z-index: 100;
}

/* Node Info Panel Styling */
#graph-node-info-panel {
    margin-top: 15px;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    max-height: 250px;
    overflow-y: auto;
    font-size: 0.9rem;
}
#graph-node-info-panel h5 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    color: var(--theme-primary-green);
}
#graph-node-info-panel ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}
#graph-node-info-panel li {
    padding: 0.25rem 0;
    border-bottom: 1px dashed #e0e0e0;
}
#graph-node-info-panel li:last-child {
    border-bottom: none;
}
#graph-node-info-panel li strong {
    color: #333;
}
.graph-controls .form-control-sm.graph-limit-input{
    max-width: 75px;
}
#cy-disease-graph-container {
            position: relative;
}

/* Styling for the zoom controls container */
.cytoscape-zoom-controls {
            position: absolute;
            bottom: 15px;
            right: 15px;
            z-index: 999; 
}

/* Ensure overlays don't block Cytoscape clicks */
#cy-disease-graph-container .cytoscape-graph-loader {
    pointer-events: none;
    /* loader never intercepts */
}

#cy-disease-graph-container .cytoscape-zoom-controls {
    pointer-events: none;
    /* the empty areas are click-through */
    width: auto;
    height: auto;
    /* keep the overlay’s bounds tight */
}

#cy-disease-graph-container .cytoscape-zoom-controls .btn-group-vertical,
#cy-disease-graph-container .cytoscape-zoom-controls button {
    pointer-events: auto;
    /* buttons remain clickable */
}