/* static/css/plant.css */

:root {
    /* Theme Greens (Keep or adjust your existing ones) */
    --theme-primary-green: #194210;     /* Your main dark green */
    --theme-accent-green: #fff;      /* Medium green for accordion buttons */
    --theme-button-hover-bg: #194210;   /* Darker medium green for hover */

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

    /* Bootstrap variables for reference */
    --bs-white: #20221f;
    --bs-dark: #212529; /* Default dark text color */

    /* Padding for Accordion Height - ADJUST THESE FOR DESIRED HEIGHT */
    --accordion-button-padding-y: 1.5rem;   /* e.g., 1.25rem, 1.5rem, 1.75rem */
    --accordion-button-padding-x: 1.5rem;
    --accordion-body-padding-y: 1.75rem;    /* e.g., 1.5rem, 1.75rem, 2rem */
    --accordion-body-padding-x: 1.5rem;
}

/* --- NEW: Outer Box for Plant Title and Accordion --- */
.plant-detail-outer-box {
    background-color: var(--outer-box-bg);
    padding: 2rem; /* Add some padding inside the outer box */
    border-radius: 0.5rem; /* Optional: rounded corners for the outer box */
    margin-bottom: 2rem; /* Space below the outer box */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Optional: subtle shadow */
}

/* Plant Title Styling */
.plant-detail-header h1,
.plant-detail-header h1 em { /* Ensure em inside h1 is also black */
    color: var(--plant-title-color) !important; /* Black for plant title, !important to override .text-primary if it exists */
    font-style: italic; /* Keep italic if that's what <em> was for */
}
/* If you have .text-primary on the H1 in HTML, this will override it.
   Alternatively, remove .text-primary from the H1 in plant_detail.html */

.plant-detail-header p.lead {
    color: var(--bs-dark); /* Ensure lead paragraph text is readable */
}


/* Accordion Width Control (if you still use .accordion-wrapper) */
.accordion-wrapper {
    max-width: 900px; /* Or your desired width */
    margin-left: 0;
    margin-right: auto; /* Or 0 if you always want it left inside .plant-detail-outer-box */
}

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

/* Style for each accordion item */
.accordion-item {
    background-color: var(--accordion-item-bg);      /* WHITE background */
    border: 2px solid var(--accordion-border-color); /* DARK GREEN border, increased thickness */
    /* border-radius: 0; /* Remove if you want sharp corners for items */
}

.accordion-item:not(:first-of-type) {
    /* If items have their own border, a top border might create a double-thick line */
    /* border-top: none; /* Consider this if borders look too thick between items */
    /* OR ensure the border applies correctly without doubling up */
     border-top: 2px solid var(--accordion-border-color); /* If you want consistent border */
}
/* Optional: rounded corners for the first and last items if the item itself isn't rounded */
.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); /* Your chosen green for button bg */
    color: var(--bs-white);                      /* White text for contrast on button */
    font-weight: 600;
    padding: var(--accordion-button-padding-y) var(--accordion-button-padding-x);
    border-bottom: 1px solid var(--accordion-border-color); /* Add a subtle separator from body */
}
/* Remove default blue focus outline and default radius for button if item is handling radius */
.accordion-button:focus {
    z-index: 3;
    border-color: transparent; /* Or a color that matches button bg */
    box-shadow: 0 0 0 0.25rem rgba(25, 66, 16, 0.35); /* Your green focus ring */
    outline: 0;
}
.accordion-button { /* To ensure no other radius is applied by default BS styles if item handles it */
    border-radius: 0;
}


/* Accordion Button when it's NOT collapsed (i.e., its section is open) */
.accordion-button:not(.collapsed) {
    background-color: var(--theme-primary-green); /* Darker green when open */
    color: white;
    box-shadow: none; /* Remove default Bootstrap shadow when open if not desired */
    border-bottom-color: transparent; /* Hide bottom border when open if body is directly below */
}

/* Accordion Button: Hover state */
.accordion-button:hover {
    background-color: var(--theme-button-hover-bg);
    color: white;
}

/* Accordion Button Icon (the arrow/chevron) - Should still be 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='%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");
}
.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 (the content area) */
.accordion-body {
    background-color: var(--accordion-item-bg); /* Inherits WHITE from .accordion-item */
    color: var(--bs-dark); /* Ensure text is readable on white */
    padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
}


/* Your existing .plant-info-table and .list-group-item styles */
/* Ensure they are still present and correct for content inside the accordion */
.plant-info-table th,
.plant-info-table td {
    border: 1px solid #dee2e6; /* Consider if this border is needed or if accordion border is enough */
    padding: 0.9rem 0.75rem;
    vertical-align: top;
}
.plant-info-table th {
    background-color: #f8f9fa; /* Or transparent if you want the white accordion bg to show */
    font-weight: 600;
    color: #333;
    width: 25%;
    text-align: left;
    overflow-wrap: break-word;
}
.plant-info-table td {
    text-align: left;
    overflow-wrap: break-word;
}
.plant-info-table td em {
    font-style: italic;
}

.list-group-item {
    padding: 0.9rem 1.25rem;
    background-color: transparent; /* Essential for white accordion body */
    border: none; /* Remove default list item borders if accordion item has a border */
}

.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);
}
#cy-plant-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 added */
}
#graph-node-info-panel {
    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;
}
.cytoscape-graph-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-style: italic;
    color: #6c757d; /* Bootstrap secondary text color */
}
.graph-controls .form-control-sm.graph-limit-input{
    max-width: 75px;
}
#cy-plant-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 */
}