/* static/css/formulation.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 (Corrected from plant.css if it was beige, now dark green to match open state) */
                                        /* If you want beige hover: #e0dcc2; and text: var(--bs-dark); */


    /* 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 */
    --formulation-title-color: #000000; /* Black for the formulation 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 Formulation Title and Accordion --- */
.formulation-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);
}

/* Formulation Title Styling */
.formulation-detail-header h1,
.formulation-detail-header h1 span { /* Ensure span inside h1 is also black */
    color: var(--formulation-title-color) !important; /* Black for formulation title */
}
.formulation-detail-header p.lead {
    color: var(--bs-dark); /* Ensure lead paragraph text is readable */
}

/* 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; /* Remove bottom border if open and it's not the last item */
}
/* If the open accordion button is for the last item, it might need its bottom border */
.accordion-item:last-of-type .accordion-button:not(.collapsed) {
    border-bottom: 0; /* No border for the button itself */
    /* The item's border will handle the bottom edge */
}


/* Accordion Button: Hover state */
.accordion-button:hover {
    background-color: var(--theme-button-hover-bg); /* Dark Green (like open state) */
    color: white;
}
/* For the case where the button is already open and hovered, it should remain in the open state style */
.accordion-button:not(.collapsed):hover {
    background-color: var(--theme-primary-green); /* Dark green (open state) */
    color: white; /* Actual white text */
}


/* Accordion Button Icon (the arrow/chevron) */
/* Default (closed state - white button background, dark text, so icon should be dark) */
.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 */
}
/* Open state (dark button background, white text, so icon should be white) */
.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 formulation information table inside accordion */
.formulation-info-table th,
.formulation-info-table td {
    border: 1px solid #dee2e6;
    padding: 0.9rem 0.75rem; /* Consistent padding */
    vertical-align: top;
}
.formulation-info-table th {
    background-color: #f8f9fa; /* Light grey, consistent with plant.css */
    font-weight: 600;
    color: #333;
    width: auto; /* Or adjust as needed */
    text-align: left;
    overflow-wrap: break-word;
}
.formulation-info-table td {
    text-align: left;
    overflow-wrap: break-word;
}

/* 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 .item-number { /* Style for serial numbers if you add them */
    margin-right: 0.5em;
    font-weight: 500;
    color: #6c757d; /* Muted color for numbers */
}

.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 */
}
.nested-ingredients-table {
    font-size: 0.95rem; /* Smaller font size for the nested table content */
    margin-top: 0.5rem; /* Add a little space above it */
}

.nested-ingredients-table th,
.nested-ingredients-table td {
    padding: 0.4rem 0.5rem; /* Reduce padding in cells */
    word-break: break-word; /* Helps prevent long words from breaking layout */
}

.nested-ingredients-table th:first-child, /* Ingredient Component Header */
.nested-ingredients-table td:first-child { /* Ingredient Component Cell */
    width: auto;
}

.nested-ingredients-table th:last-child,  /* Details Header */
.nested-ingredients-table td:last-child {  /* Details Cell */
    width: auto;
}

/* --- Styles for Inner Accordion (copied from disease.css, potentially adjust colors) --- */
#innerConnectionsAccordion .accordion-button {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    background-color: #f8f9fa; /* Lighter background for inner accordion buttons */
    color: var(--bs-dark); /* Dark text */
    border-bottom: 1px solid #e0e0e0; /* Lighter border */
}

#innerConnectionsAccordion .accordion-button:not(.collapsed) {
    background-color: #e9ecef; /* Slightly darker when open */
    color: var(--bs-dark);
    border-bottom-color: transparent;
}

#innerConnectionsAccordion .accordion-button:hover {
    background-color: #4c7a43; /* Hover state for inner buttons */
    color: white;
}

#innerConnectionsAccordion .accordion-button::after {
    /* Ensure icon color matches text color for inner accordions */
    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-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='%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");
    /* Still rotate */
}


#innerConnectionsAccordion .accordion-body {
    padding: 1rem 1.25rem;
}
#innerConnectionsAccordion .list-group-item {
    padding: 0.75rem 1rem;
}


/* --- START: Cytoscape Graph Specific Styles (Copied & Adapted from plant.css) --- */
#cy-formulation-graph-container { /* Use the specific ID for formulation graph container */
    position: relative; /* For loader positioning */
    width: 100%;
    min-height: 550px; /* Or your preferred height */
    height: 65vh;      /* Responsive height */
    max-height: 700px; /* Optional max height */
    background-color: #fdfdfa; /* Light beige/off-white background for the graph area */
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    overflow: hidden; /* Ensures loader stays within bounds */
}

#cy-formulation-graph { /* Use the specific ID for formulation graph div */
    width: 100%;
    height: 100%;
    position: relative; /* For Cytoscape to attach correctly */
}

.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; /* Ensure it's above the graph canvas during loading */
}

/* Node Info Panel Styling */
#graph-node-info-panel {
    margin-top: 15px;
    padding: 15px;
    background-color: #f8f9fa; /* Light grey background */
    border: 1px solid #dee2e6; /* Bootstrap's default border color */
    border-radius: 0.25rem;
    max-height: 250px; /* Max height before scrolling */
    overflow-y: auto;   /* Enable vertical scroll if content exceeds max-height */
    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; /* Lighter dashes for separation */
}
#graph-node-info-panel li:last-child {
    border-bottom: none;
}
#graph-node-info-panel li strong {
    color: #333; /* Darker text for property names */
}
.graph-controls .form-control-sm.graph-limit-input{
    max-width: 75px;
}
#cy-formulation-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 */
}
/* --- END: Cytoscape Graph Specific Styles --- */