/* static/css/phytochemical.css */

:root {
    /* Theme Greens (mirrored from plant.css for consistency) */
    --theme-primary-green: #194210;     /* Main dark green */
    --theme-accent-green: #fff;         /* White for accordion buttons (text will be dark) */
    --theme-button-hover-bg: #194210;   /* Beige for hover - Note: plant.css uses dark green for hover, you might want to make this consistent */

    /* Colors for the outer box and accordion (mirrored from plant.css) */
    --outer-box-bg: #e0dcc2;            /* Beige background for the surrounding box */
    --accordion-item-bg: #ffffff;       /* Accordion items are WHITE */
    --accordion-border-color: var(--theme-primary-green); /* Dark green border for accordion */
    --phytochemical-title-color: #000000; /* Black for the phytochemical title */

    /* Bootstrap variables for reference (values from plant.css) */
    --bs-white: #20221f; /* This is a dark color, used for text on light backgrounds */
    --bs-dark: #212529;  /* Default dark text color */

    /* Padding for Accordion (mirrored from plant.css) */
    --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 Phytochemical Title and Accordion --- */
.phytochemical-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);
}

/* Phytochemical Title Styling */
.phytochemical-detail-header h1,
.phytochemical-detail-header h1 span { /* Ensure span inside h1 is also black */
    color: var(--phytochemical-title-color) !important; /* Black for phytochemical title */
}
.phytochemical-detail-header p.lead {
    color: var(--bs-dark); /* Ensure lead paragraph text is readable */
}
.phytochemical-detail-header p.lead a { /* Style for CID link in header */
    color: var(--theme-primary-green);
    font-weight: 500;
}
.phytochemical-detail-header p.lead a:hover {
    text-decoration: underline;
    color: rgb(80, 105, 80);
}


/* Overall accordion container styling */
.accordion {
    margin-bottom: 0; /* No bottom margin if it's the last element in outer-box */
}

/* Style for each accordion item */
.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;
}

/* Accordion Button (the clickable header) */
.accordion-button {
    background-color: var(--theme-accent-green); /* White background */
    color: var(--bs-white);                      /* Dark text (from --bs-white variable) */
    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; /* Remove default radius if item handles it */
}
.accordion-button:focus {
    z-index: 3;
    border-color: transparent;
    box-shadow: 0 0 0 0.25rem rgba(25, 66, 16, 0.35); /* Your green focus ring */
    outline: 0;
}

/* Accordion Button when it's NOT collapsed (i.e., its section is open) */
.accordion-button:not(.collapsed) {
    background-color: var(--theme-primary-green); /* Dark green when open */
    color: white; /* Actual white text */
    box-shadow: none;
    border-bottom-color: transparent;
}

/* Accordion Button: Hover state */
.accordion-button:hover {
    background-color: var(--theme-button-hover-bg);
    /* Consider if text color should change on hover if background changes significantly */
    /* If var(--theme-button-hover-bg) is dark (like #194210), text should be white. */
    /* If it's light (like beige), text should be dark. */
    /* Example: color: white; if hover is dark */
    color: white; /* Assuming --theme-button-hover-bg (#194210) is dark */
}

/* Accordion Button Icon (the arrow/chevron) */
.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"); /* Dark icon for light button */
}
.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"); /* White icon for dark button */
    transform: rotate(-180deg);
}


/* Accordion Body (the content area) */
.accordion-body {
    background-color: var(--accordion-item-bg); /* White background */
    color: var(--bs-dark); /* Standard dark text */
    padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
}


/* Styling for the phytochemical information table inside accordion */
.phytochemical-info-table th,
.phytochemical-info-table td {
    border: 1px solid #dee2e6;
    padding: 0.9rem 0.75rem; /* Consistent padding */
    vertical-align: top;
}
.phytochemical-info-table th {
    background-color: #f8f9fa; /* Light grey, consistent with plant.css */
    font-weight: 600;
    color: #333;
    width: 25%;                /* Adjusted width for consistency with other tables */
    text-align: left;
    overflow-wrap: break-word;
}
.phytochemical-info-table td {
    text-align: left;
    overflow-wrap: break-word;
}
.phytochemical-info-table td a { /* For CID link in table */
    font-weight: 500;
    color: var(--theme-primary-green);
}
.phytochemical-info-table td a:hover {
    text-decoration: underline;
    color: rgb(80, 105, 80);
}

/* Styling for list groups inside accordion */
.list-group-item {
    padding: 0.9rem 1.25rem;
    background-color: transparent; /* Essential for accordion body background to show */
    border: none;                  /* Remove default list item borders */
}

.list-group-item a {
    text-decoration: none;
    font-weight: 500;
    color: var(--theme-primary-green); /* Use theme green for links */
}
.list-group-item a:hover {
    text-decoration: underline;
    color: rgb(80, 105, 80); /* Darker shade of theme green or adjust */
}

/* Font Awesome icon styling if used (consistent with original) */
.list-group-item a i.fa-external-link-alt,
.phytochemical-info-table td a i.fa-external-link-alt,
.phytochemical-detail-header p.lead a i.fa-external-link-alt {
    margin-left: 4px;
    font-size: 0.8em;
}


/* --- START: Styles for Cytoscape Graph (mirrored from plant.css) --- */
#cy-phytochemical-graph { /* Use specific ID for phytochemical graph */
    width: 100%;
    height: 500px; /* Adjust as needed */
    border: 1px solid #dee2e6; /* Bootstrap light grey border */
    background-color: #f8f9fa; /* Bootstrap light background */
    margin-top: 1rem;
    position: relative; /* For loader positioning */
}

/* If you have a wrapper for messages/loader around the graph div */
#cy-phytochemical-graph-container {
    position: relative; /* Allows absolute positioning of loader inside */
    min-height: 100px; /* Ensure it has some height even if graph fails to load, to show messages */
}

#graph-node-info-panel { /* Generic ID, can be reused if only one graph per page */
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 4px;
    max-height: 200px; /* Example max height */
    overflow-y: auto; /* Scroll for long content */
}

#graph-node-info-panel h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

#graph-node-info-panel ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

#graph-node-info-panel ul li {
    padding: 0.25rem 0;
    font-size: 0.9rem;
}
#graph-node-info-panel ul li strong {
    color: #333;
}


.cytoscape-graph-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-style: italic;
    color: #6c757d; /* Bootstrap secondary text color */
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8); /* Slight background for readability if graph bg is dark */
    border-radius: 4px;
}
/* --- END: Styles for Cytoscape Graph --- */
.graph-controls .form-control-sm.graph-limit-input{
    max-width: 70px;
}
#cy-phytochemical-graph-container {
            position: relative;
}

        /* Styling for the zoom controls container */
.cytoscape-zoom-controls {
            position: absolute;
            bottom: 15px;
            right: 15px;
            z-index: 999; /* Ensure it's on top of the graph canvas */
}