/* --- Global & Layout --- */
body {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; /* Modern font stack */
    margin: 0;
    display: flex;
    flex-direction: column; /* Main layout */
    align-items: stretch; /* Stretch children */
    height: 100vh;
    /* overflow: hidden; */ /* REMOVED - Let child containers manage overflow */
    background-color: #f8f9fa; /* Light background */
    font-size: 14px; /* Base font size */
    color: #333;
}

#main-container {
    display: flex;
    width: 100%;
    height: 100%;
}

#visualization-container {
    flex-grow: 1;
    height: 100%;
    position: relative;
    border-right: 1px solid #ccc;
    background-color: #fff; /* White background for the graph */
}

svg#portfolio-graph {
    display: block;
    width: 100%;
    height: 100%;
    cursor: default; /* Use grab/grabbing cursors via JS for zoom */
}

/* --- Right Info Panel --- */
#info-panel {
    width: 320px; /* Slightly wider panel */
    flex-shrink: 0; /* Prevent shrinking */
    background-color: #ffffff;
    height: 100%; /* Explicit height */
    box-sizing: border-box;
    display: flex; /* Ensure it's a flex container */
    flex-direction: column; /* Stack children vertically */
    border-left: 1px solid #ccc;
    /* overflow: hidden; */ /* REMOVED: Allow this panel to scroll */
    overflow-y: auto; /* ADDED: Explicitly allow vertical scrolling */
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out; /* Smooth transition */
    /* border: 3px solid red !important; */ /* REMOVED DEBUG BORDER */
}

/* Style for the toggler button */
#sidebar-toggler {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1031; /* Ensure it's above most elements but below modals */
    padding: 0.25rem 0.5rem;
    font-size: 1.2rem;
    /* --- DEBUGGING STYLE --- */
    /* background-color: red !important; */
    /* width: 50px; */
    /* height: 50px; */
    /* border: 2px solid black !important; */
    /* --- END DEBUGGING STYLE --- */
}

/* Responsive adjustments for the panel and toggler */
@media (max-width: 991.98px) { /* Below large screens */
    #info-panel.collapse:not(.show) {
        /* Hidden state - Simplify: Use width 0 and hide overflow */
        width: 0 !important; /* Force width to 0 */
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important; /* Prevent content spill */
        /* Remove transform and visibility */
        /* transform: translateX(100%); */
        /* visibility: hidden; */
    }
    #info-panel.collapsing {
        /* During transition - rely on BS default, ensure height is okay */
         height: 100% !important; /* Override Bootstrap inline style */
         min-width: 0 !important;
         overflow: hidden;
         /* visibility: visible; */ /* Let BS handle display */
         transition: width 0.3s ease-in-out; /* Transition width */
    }
    #info-panel.show {
        /* Shown state - position it */
        position: absolute; /* Take out of flow */
        right: 0;
        top: 0;
        height: 100%;
        width: 300px; /* Adjust width for smaller screens */
        z-index: 1030; /* Below toggler */
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
        border-left: 1px solid #ccc; /* Restore border */
        /* transform: translateX(0); */ /* Don't need transform if using width */
        /* visibility: visible; */ /* Let BS handle display */
        overflow-y: auto; /* ALLOW VERTICAL SCROLL */
        overflow-x: hidden; /* Prevent horizontal scroll */
    }

    /* Adjust main visualization container padding when sidebar is potentially open */
    /* This might not be needed if using absolute positioning for the sidebar */
    /* #visualization-container {
        padding-right: 0; / * Remove padding if sidebar overlays *
    } */
}

/* Ensure panel is displayed correctly on large screens without d-lg-block */
@media (min-width: 992px) {
    #info-panel.collapse {
        /* Default display/state for collapse on large screens */
        display: block;
        visibility: visible;
        width: 320px; /* Default width */
        transform: none !important;
        position: static;
        border-left: 1px solid #ccc;
        box-shadow: none;
        /* overflow: hidden; */ /* Needed for width transition */
        overflow-y: auto; /* ALLOW VERTICAL SCROLL */
        overflow-x: hidden; /* Prevent horizontal scroll */
        transition: width 0.3s ease-in-out; /* Define transition */
    }
    /* Explicitly hide if collapse is present but .show is not (i.e., toggled closed) */
     #info-panel.collapse:not(.show) {
          /* Use width 0 instead of display: none for animation */
          width: 0 !important;
          padding-left: 0 !important; /* Remove padding when collapsed */
          padding-right: 0 !important;
          border-left: none !important; /* Remove border when collapsed */
          overflow: hidden !important;
          /* display: none !important; */ /* Don't use display: none */
     }
     /* Ensure collapsing state has correct transition */
     #info-panel.collapsing {
        height: 100% !important;
        overflow: hidden;
        transition: width 0.3s ease-in-out;
     }
}

/* Search Section */
#search-section {
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
    background-color: #e9e9e9; /* Slightly distinct background */
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}
#search-input {
    flex-grow: 1;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
}
#search-button {
    padding: 6px 12px;
    font-size: 0.9em;
    flex-shrink: 0;
}

/* Accordion Styling */
.accordion-item {
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    flex-shrink: 0; /* Prevent accordions shrinking excessively */
}

/* --- Admin Chat Styles --- */
#admin-chat-log {
    background: #fff;
}
.chat-message {
    display: flex;
    margin-bottom: 8px;
}
.chat-message .bubble {
    border-radius: 12px;
    padding: 8px 10px;
    max-width: 90%;
    white-space: pre-wrap;
}
.chat-message.user { justify-content: flex-end; }
.chat-message.user .bubble {
    background: #0d6efd;
    color: #fff;
    border-bottom-right-radius: 6px;
}
.chat-message.assistant { justify-content: flex-start; }
.chat-message.assistant .bubble {
    background: #f1f3f5;
    color: #212529;
    border-bottom-left-radius: 6px;
}
.chat-card.job .card { background: #fafafa; }

/* Subtle pulse for newly created nodes (fallback if JS transitions not applied) */
.node.pulse {
    animation: nodePulse 0.9s ease-in-out 2;
}
@keyframes nodePulse {
    0% { stroke-width: 2px; }
    50% { stroke-width: 6px; }
    100% { stroke-width: 2px; }
}

/* Gentle red glow for invalid inputs */
.input-error-glow {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    transition: box-shadow 0.2s ease;
}

/* Compact modal styling for tighter layout */
.modal-compact .modal-header { border-bottom: 0; }
.modal-compact .modal-body { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.modal-compact .modal-footer { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.modal-compact .form-label { margin-bottom: 0.25rem; }
.modal-compact .form-control, .modal-compact .form-select, .modal-compact textarea {
    padding: .375rem .5rem;
}
.accordion-item:last-child {
    border-bottom: none;
}
.accordion-header {
    background-color: #f7f7f7;
    color: #333;
    cursor: pointer;
    padding: 12px 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-header:hover {
    background-color: #eee;
}
.accordion-header::after { /* Arrow indicator */
    content: '\25BC'; /* Down arrow */
    font-size: 0.7em;
    color: #777;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}
.accordion-item.is-open .accordion-header::after {
    transform: rotate(180deg); /* Up arrow */
}
.accordion-body {
    padding: 0 15px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    font-size: 0.9em;
}

/* Use new ID to make Details accordion fill space */
#details-accordion-item {
    /* flex-grow: 1; */ /* REMOVED: No longer need to fill space if panel scrolls */
    display: flex; /* Keep */
    flex-direction: column; /* Keep */
    /* overflow: hidden; */ /* Keep commented out */
    /* height: 0; */ /* Keep commented out */
}

#details-accordion-item > .accordion-body {
    /* flex-grow: 1; */ /* REMOVED: No longer need to fill space */
    /* max-height: none !important; */ /* Keep commented out */
    /* overflow-y: auto; */ /* REMOVED: Content div scrolls now */
    /* overflow: hidden; */ /* Keep commented out */
    display: flex; /* Keep */
    flex-direction: column; /* Keep */
    /* height: 0; */ /* Keep commented out */
    /* min-height: 0; */ /* REMOVED: No longer needed */
    /* Styles for the body of the details accordion */
    padding: 0.5rem 1rem;
}

.accordion-item.is-open .accordion-body {
    /* Allow animation for non-details accordions */
    max-height: 500px; /* Adjust as needed for filter content height */
    padding: 15px 15px;
    transition: max-height 0.4s ease-in, padding 0.3s ease-in;
}

/* Force collapsed accordions to hide content fully */
.accordion-item:not(.is-open) .accordion-body {
    display: none;
}

/* Ensure details accordion body doesn't get limited by the general max-height rule above */
#details-accordion-item.is-open > .accordion-body {
     max-height: none; /* Keep it unrestricted */
}

/* Layout & Forces accordion should fully show all controls without clipping */
#layout-tuning-accordion.is-open > .accordion-body {
    max-height: none !important;
    overflow: visible !important;
    display: block;
    padding-bottom: 18px;
}

/* Panel Content (Details Section) */
#details-panel-content { /* Specific ID for details content area */
    padding: 0; /* Padding handled by accordion-body */
    font-size: 1em; /* Increased from 0.85em for better readability */
    line-height: 1.6;
    /* overflow-y: auto; */ /* REMOVED: Panel scrolls now */
    /* flex-grow: 1; */ /* Keep commented out */
}
#details-panel-content h3 { margin: 0 0 12px 0; font-size: 1.25rem; color: #222; display: flex; justify-content: space-between; align-items: center;}
#details-panel-content h4 { margin: 18px 0 10px 0; font-size: 1.1rem; color: #444; border-bottom: 1px solid #eee; padding-bottom: 5px;}
#details-panel-content p { margin: 6px 0 12px 0; }
#details-panel-content ul.details-list { padding-left: 0; list-style: none; margin-bottom: 12px; }
#details-panel-content ul.details-list li { margin-bottom: 8px; padding-left: 12px; border-left: 2px solid #eee; }
#details-panel-content strong { font-weight: 600; color: #111; }
#details-panel-content .meta { display: block; font-size: 0.95em; color: #666; margin-bottom: 6px; }
#details-panel-content .placeholder {
    color: #888;
    font-style: italic;
    padding: 20px 0;
    text-align: center;
    /* Ensure no background */
    background-color: transparent;
}
#details-panel-content .badge { font-size: 0.8em; vertical-align: middle; margin-left: 5px;}
/* Link/Suggestion items in panel */
#details-panel-content .suggestion-item,
#details-panel-content .manual-link-item {
    padding: 10px 14px; /* Increased padding */
    margin-bottom: 8px;
    border-radius: 5px;
    border: 1px solid #eee;
    cursor: pointer; /* Indicate clickability */
    transition: background-color 0.2s;
    font-size: 1em; /* Ensure readable size */
}
#details-panel-content .suggestion-item { background-color: #f9f9f9; }
#details-panel-content .manual-link-item { background-color: #fdfdff; border-color: #e0e0ee; }
#details-panel-content .suggestion-item:hover { background-color: #f0f0f0; }
#details-panel-content .manual-link-item:hover { background-color: #f5f5ff; }
#details-panel-content .suggestion-item strong,
#details-panel-content .manual-link-item strong { color: #0d6efd; } /* Make linked text blue */
/* NEW: Apply similar card/block styling to recommendation list items */
#details-panel-content li.recommendation-card {
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    font-size: 0.95em;
    list-style: none;
    margin-left: 0;
    border-left: 3px solid #198754;
    color: inherit;
}
#details-panel-content .recommendation-text {
    display: inline-block;
    margin-right: 5px;
    flex-grow: 1;
}
#details-panel-content .node-link, #details-panel-content .goal-link {
    cursor: pointer;
    color: #0d6efd;
    text-decoration: none;
}
#details-panel-content .link-type-badge { /* Style for link type (e.g., Collaboration) */
    display: inline-block; padding: 0.1em 0.4em; font-size: 0.8em; background-color: #e9ecef; border-radius: 3px; margin-right: 4px;
}

/* ADDED: Style for Recommendation Cards */
#details-panel-content .recommendation-card {
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 4px;
    border: 1px solid #eee; /* Align with suggestion/link border */
    background-color: #f9f9f9; /* Align with suggestion background */
    font-size: 0.95em; /* Match list item text */
    /* border-left: 3px solid #198754; */ /* Removed green accent for now */
}

/* ADDED: Style for inline delete buttons */
.delete-item-btn {
    padding: 0px 4px !important; /* Smaller padding */
    font-size: 0.9rem !important; /* Smaller font */
    line-height: 1 !important; /* Ensure button doesn't affect line height */
    margin-left: 8px;
    vertical-align: top; /* Align with the top of the text */
    flex-shrink: 0; /* Prevent shrinking */
    opacity: 0.5; /* Make slightly more transparent initially */
    transition: opacity 0.2s;
    /* Make button look like plain text */
    background: none;
    border: none;
    color: #888; /* Grey color for the X */
    font-weight: bold; /* Make X slightly bolder */
    cursor: pointer;
}
.delete-item-btn:hover {
    opacity: 1;
}

/* Edit/Delete Buttons in Panel */
.edit-initiative-btn, .delete-suggestion-btn, .delete-manual-link-btn, .delete-goal-btn {
    font-size: 0.8rem !important;
    padding: 0.15rem 0.4rem !important;
    margin-left: 10px;
    vertical-align: middle;
    flex-shrink: 0; /* Prevent button from shrinking */
}


/* Filter/Options Toggles (legacy - kept for compatibility) */
.toggle-container { margin-bottom: 12px; padding: 10px; background: transparent; border-radius: 8px; }
.toggle-container span { font-weight: 600; font-size: 0.9em; display: block; margin-bottom: 6px; }
.toggle-container label { margin-right: 15px; user-select: none; font-size: 0.9em; display: inline-block; margin-bottom: 5px; cursor: pointer; }
.toggle-container input[type="checkbox"], .toggle-container input[type="radio"] { margin-right: 5px; vertical-align: middle; cursor: pointer;}
#orgCategoryCheckboxes label { display: block; } /* Stack org radios */

/* Filter sections inside accordion */
.filter-section { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #e9ecef; }
.filter-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.filter-label { font-weight: 600; font-size: 0.9em; display: block; margin-bottom: 8px; color: #495057; }
.filter-section label { margin-right: 12px; user-select: none; font-size: 0.9em; display: inline-block; margin-bottom: 5px; cursor: pointer; }
.filter-section input[type="checkbox"], .filter-section input[type="radio"] { margin-right: 5px; vertical-align: middle; cursor: pointer; }

/* Style for the new dropdown */
#orgTypeFilterSelect {
    width: 100%; /* Make dropdown full width */
    padding: 6px 10px;
    font-size: 0.9em;
    margin-top: 4px; /* Add some space above */
}

#search-section {
    padding: 10px;
    background: #f7f9fb;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* --- Visualization Elements --- */

/* Nodes (Initiatives) */
.node { 
    transition: opacity 0.3s ease-in-out; /* RE-ENABLED */ 
    transform-box: fill-box; /* Ensure CSS transforms use element bbox for origin */
    transform-origin: center; /* Scale around the node center to avoid shifting */
}
.node circle {
    stroke: none; /* REMOVED default white border */
    stroke-width: 0; /* REMOVED default white border */
    transition: filter 0.5s ease-out;
}
/* Default node colors set by JS using config based on org type */

/* Node Labels */
.label-text {
    font-size: 9px; fill: #222; pointer-events: none; text-anchor: middle;
    font-weight: 500; paint-order: stroke; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1px;
    stroke-linecap: butt; stroke-linejoin: miter; transition: opacity 0.3s ease-in-out, fill 0.2s; opacity: 1; /* RE-ENABLED */
    dominant-baseline: alphabetic; /* Match helper.js */
}

/* New node label classes */
.node-label {
    pointer-events: none; 
    text-anchor: middle;
    paint-order: stroke; 
    stroke: rgba(255, 255, 255, 0.4); 
    stroke-width: 1px;
    stroke-linecap: butt; 
    stroke-linejoin: miter; 
    transition: opacity 0.3s ease-in-out, fill 0.2s; 
    opacity: 1;
    dominant-baseline: alphabetic;
    user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}

.transformation-label {
    fill: #333;
    font-weight: 600;
}

.participant-label, .ecosystem-label {
    fill: #555;
    font-weight: 500;
}

/* GOAL Circles */
.goal-circle {
    fill: rgba(230, 230, 230, 0.15); /* Very light fill */
    stroke: #aaaaaa;
    stroke-width: 1.5px;
    stroke-dasharray: 6, 3;
    transition: stroke-width 0.2s, stroke 0.2s, filter 0.2s, fill 0.2s, opacity 0.3s ease-in-out, r 0.3s ease-out; /* RE-ENABLED */
}
.goal-circle:hover {
    stroke: #666; stroke-width: 2.5px; filter: brightness(1.05); /* RE-ENABLED */
}
.goal-circle.dragging { /* Style when dragging */
    stroke: #333; fill: rgba(200, 200, 200, 0.2); cursor: grabbing;
}

/* GOAL Labels */
.goal-label {
    font-size: 11px; font-weight: 600; fill: #555; pointer-events: none; text-anchor: middle;
    paint-order: stroke; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1px;
    transition: opacity 0.3s ease-in-out, fill 0.2s; opacity: 1; /* RE-ENABLED */
    user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}

/* Legacy label class */
.label-text { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

/* Prevent OS/text selection highlight on SVG text (teal/blue selection background) */
svg text::selection { background: transparent; color: inherit; }
svg text::-moz-selection { background: transparent; color: inherit; }
svg text:focus { outline: none; }


/* AI Suggestion Links */
.ai-suggestion {
    stroke: #aaaaaa; /* Grey */ stroke-opacity: 0.6; stroke-width: 1.5px; stroke-dasharray: 4, 4;
    transition: stroke-opacity 0.2s, stroke-width 0.2s, stroke 0.2s, opacity 0.3s ease-in-out; /* RE-ENABLED */
    cursor: pointer;
}
.ai-suggestion:hover { stroke: #777777; stroke-opacity: 0.9; stroke-width: 2.5px; /* RE-ENABLED */} 

/* Manual Links */
.link.manual-link {
    stroke: #888; stroke-opacity: 0.5; stroke-width: 1.5px;
    transition: stroke-opacity 0.2s, stroke-width 0.2s, stroke 0.2s, opacity 0.3s ease-in-out; /* RE-ENABLED */
    cursor: pointer;
}
.link.manual-link:hover { stroke-opacity: 0.9; stroke-width: 2.5px; stroke: #555; /* RE-ENABLED */ }

/* --- Highlighting & Selection --- */
/* Generic selected/related styles */
.selected { opacity: 1 !important; pointer-events: auto !important; } /* RE-ENABLED opacity */
.related { opacity: 1 !important; pointer-events: auto !important; } /* RE-ENABLED opacity */

/* Node specific */
.node.selected { stroke: none !important; stroke-width: 0 !important; opacity: 1 !important; transform: scale(1.1) !important; }
.node.related { stroke: #555 !important; stroke-width: 2.5px !important; }
.node:hover:not(.selected) { stroke: #333; stroke-width: 2.5px; filter: brightness(1.1); /* RE-ENABLED */} 
.node.selected .label-text, .label-text.selected { font-weight: 700; fill: #000 !important; }
.node.related .label-text, .label-text.related { font-weight: 600; fill: #111 !important; }
/* Remove stroked outline on selected/related labels to avoid colored halos */
.node-label.selected, .node-label.related { stroke: none !important; text-shadow: none !important; }
.goal-label.selected, .goal-label.related { stroke: none !important; text-shadow: none !important; }
.label-text.selected, .label-text.related { stroke: none !important; text-shadow: none !important; }

/* Goal specific */
.goal-circle.selected { stroke: #000 !important; stroke-width: 3px !important; fill: rgba(200, 200, 200, 0.2); }
.goal-circle.related { stroke: #555 !important; stroke-width: 2.5px !important; }
.goal-label.selected { font-weight: 700; fill: #000 !important; }
.goal-label.related { font-weight: 600; fill: #111 !important; }

/* Link specific */
.ai-suggestion.selected { stroke: #444444 !important; stroke-opacity: 0.95 !important; stroke-width: 3px !important; stroke-dasharray: none !important; }
.ai-suggestion.related { stroke: #888888 !important; stroke-opacity: 0.8 !important; stroke-width: 2px !important; }
.link.manual-link.selected { stroke: #000 !important; stroke-opacity: 0.95 !important; stroke-width: 3px !important; }
.link.manual-link.related { stroke: #555 !important; stroke-opacity: 0.7 !important; stroke-width: 2px !important; }


/* --- Search Highlighting --- */
.node.search-highlight { 
    opacity: 1 !important; 
    pointer-events: auto !important; 
    stroke: #ffc107 !important; /* Bootstrap warning yellow */
    stroke-width: 3px !important; /* Slightly less thick than selected */
}
/* Ensure search highlight overrides regular hover/related stroke */
.node.search-highlight:hover { stroke: #ffc107 !important; }

/* --- General Fading & Filtering --- */
.element-faded {
    opacity: 0.2 !important; /* ADJUSTED OPACITY: Make less faded than before */
    transition: opacity 0.3s ease-in-out; /* RE-ENABLED */
    pointer-events: none !important; /* Prevent interaction */
}
/* Ensure faded nodes override selected/related opacity */
.node.element-faded, .goal-circle.element-faded {
    opacity: 0.2 !important; /* More specific selector */
    filter: grayscale(60%); /* RE-ENABLED */
}
/* Fade labels more */
.label-text.element-faded, .goal-label.element-faded { 
    opacity: 0.1 !important; 
}
/* Fade links significantly */
.link.manual-link.element-faded, .ai-suggestion.element-faded {
    stroke-opacity: 0.05 !important;
}
/* Special class for filtered-out (can be same as faded or different) */
.filtered-out {
     /* opacity: 0.1 !important; */ /* Example: make filtered even more faded */
     /* pointer-events: none !important; */
     /* Rely on element-faded for now */
}


/* Info Boxes (Hover) */
#info-boxes-container {
    position: absolute; /* Position it relative to visualization-container */
    top: 0;
    left: 0;
    width: 100%; /* Cover the full area of visualization-container */
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through to the SVG */
    overflow: visible; /* Changed from hidden, might be better for absolutely positioned children */
    z-index: 10; /* Ensure it's above SVG graph elements, but can be below other UI like modals */
}

.info-box { /* General class for positioning/basic style of individual info boxes */
    position: absolute; /* Crucial for left/top positioning within #info-boxes-container-html */
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 0.9em;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
    max-width: 280px;
    opacity: 0; /* Initially hidden, shown by JS */
    transition: opacity 0.15s ease-in-out;
    pointer-events: none; /* Individual info boxes also don't capture mouse events */
    z-index: 100; /* Ensure individual boxes are above graph elements if container z-index isn't enough */
    background-color: rgba(255, 255, 255, 0.95);
}

.info-box strong { font-weight: 600; color: #111; display: block; margin-bottom: 3px; }
.info-box p { margin: 2px 0 4px 0; color: #333; }
.info-box p.desc { font-size: 0.95em; } /* Description text */
.info-box span.meta, .info-box p.meta { font-size: 0.9em; color: #666; margin-bottom: 4px; }
.info-box .badges { margin-bottom: 4px; }
.info-box .badge { font-size: 0.8em; margin-right: 3px; vertical-align: middle;}
.info-box .badge i { vertical-align: text-bottom; } /* Align icon */

/* Specific Hover Box Style */
.info-box-hover {}
.info-box-hover.info-box-link { background-color: rgba(245, 245, 245, 0.95); border-color: #bbb; }
.info-box-hover.info-box-suggestion { border-left: 3px solid #fd7e14; } /* Orange border for suggestions */
.info-box-hover.info-box-manual { border-left: 3px solid #6c757d; } /* Grey border for manual */

/* --- Zoom & Controls --- */
#zoom-layer {}
#zoom-background { width: 100%; height: 100%; fill: none; pointer-events: all; }

#controls { position: absolute; bottom: 15px; left: 15px; z-index: 5; display: flex; gap: 10px; }
#controls button, #controls a {
    padding: 6px 10px; background: rgba(255, 255, 255, 0.85); border: 1px solid #ccc; border-radius: 4px;
    font-size: 11px; cursor: pointer; transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); text-decoration: none; color: #333; display: inline-flex;
    align-items: center; gap: 4px; line-height: 1.4;
}
#controls button:hover, #controls a:hover { background: rgba(255, 255, 255, 1.0); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }

@media (max-width: 576px) {
    #controls {
        bottom: auto;
        top: 70px;
        left: 10px;
        right: 10px;
        flex-wrap: wrap;
        gap: 6px;
    }
    #controls button, #controls a {
        font-size: 12px;
        padding: 7px 10px;
    }
}

/* --- Notifications --- */
#notification-container { position: fixed; bottom: 20px; right: 20px; z-index: 1050; display: flex; flex-direction: column-reverse; align-items: flex-end; pointer-events: none; }
.notification-box { background-color: rgba(50, 50, 50, 0.9); color: #fff; padding: 10px 15px; margin-top: 10px; border-radius: 6px; font-size: 0.9em; max-width: 350px; opacity: 1; transition: opacity 0.5s ease, transform 0.5s ease; transform: translateY(0); box-shadow: 0 2px 5px rgba(0,0,0,0.2); pointer-events: auto; position: relative; }
.notification-box.fade-out { opacity: 0; transform: translateY(10px); }
.notification-box ul { list-style: none; padding: 0; margin: 0; }
.notification-box li { margin-bottom: 3px; line-height: 1.3; }
.notification-box .close-button { position: absolute; top: 2px; right: 5px; background: none; border: none; color: #fff; font-size: 1.2em; cursor: pointer; padding: 2px; line-height: 1; opacity: 0.7; }
.notification-box .close-button:hover { opacity: 1; }

/* --- Admin Specific --- */
/* Hide admin-only elements if body doesn't have is-admin-view */
body:not(.is-admin-view) .admin-only { display: none !important; }

/* Edit Modal Styling (Bootstrap overrides if needed) */
#editInitiativeModal .modal-body { max-height: 70vh; overflow-y: auto; } /* Allow more height */

/* Command input section styles */
#admin-command-section { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
#admin-command-input { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 8px; font-size: 0.9em; resize: vertical; min-height: 60px; }
#admin-command-controls { display: flex; justify-content: space-between; align-items: center; min-height: 25px; }
#admin-command-status { flex-grow: 1; font-size: 0.8em; padding-right: 8px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; height: 1.5em; line-height: 1.5em; }
#send-admin-command-button { padding: 6px 12px; font-size: 0.9em; flex-shrink: 0;}
/* Command processing state */
#admin-command-section.processing #send-admin-command-button { background-color: #ffc107; border-color: #ffc107; color: #333; cursor: wait; }
#admin-command-section.processing #admin-command-status { font-weight: bold; color: #e65100; font-style: normal;}
/* Command status text colors */
#admin-command-status.status-success { color: #198754; font-weight: bold; font-style: normal;}
#admin-command-status.status-error { color: #dc3545; font-weight: bold; font-style: normal;}
#admin-command-status.status-info { color: #0dcaf0; font-weight: bold; font-style: normal;}

/* Utility */
.hidden { display: none !important; }
/* Bootstrap badge customization */
.badge { line-height: 1.1; /* Adjust line height */ }

/* Styles for newly added node glow */
.node.newly-added-node circle {
    /* No glow effect */
}

/* Highlight Styles */
.node.highlighted circle,
.goal-circle.highlighted {
    stroke: #ffcc00; /* Yellow stroke */
    stroke-width: 4px;
}

/* Faded Styles */
.node.faded,
.goal-circle.faded,
.link.faded,
.ai-suggestion-link.faded,
.goal-label.faded {
    opacity: 0.2;
}

/* --- Mobile Details Panel --- */
#mobile-details-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid #ccc;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
    z-index: 1040; /* Below modals but above most other things */
    transform: translateY(100%); /* Start hidden below view */
    transition: transform 0.3s ease-out;
    max-height: 70vh; /* Give more room for scrolling content on tablets */
    display: flex; /* Use flex for internal layout */
    flex-direction: column;
    overscroll-behavior: contain; /* Keep scroll gestures inside the panel */
    touch-action: pan-y; /* Allow vertical scrolling */
}

#mobile-details-panel.is-visible {
    transform: translateY(0); /* Slide into view */
}

#mobile-details-close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
    color: #aaa;
    background: none;
    border: none;
    padding: 0 5px;
    cursor: pointer;
    z-index: 1041;
}
#mobile-details-close:hover {
    color: #333;
}

#mobile-details-content {
    padding: 20px 15px 15px 15px; /* Add padding, more top for close button */
    overflow-y: auto; /* THIS is the scrolling container */
    flex-grow: 1; /* Allow it to take available space */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    overscroll-behavior: contain; /* Prevent scroll chaining to canvas */
    touch-action: pan-y; /* Make vertical scroll reliable on touch */
    /* Apply similar detail styling as desktop */
    font-size: 0.9em; /* Slightly larger for mobile? */
    line-height: 1.5;
}
/* Reuse desktop panel content styles if applicable, or define mobile specific */
#mobile-details-content h3 { margin: 0 0 10px 0; font-size: 1.1rem; color: #222; padding-right: 25px; /* Space for close button */} /* Adjust heading style */
#mobile-details-content h4 { margin: 15px 0 8px 0; font-size: 1rem; color: #444; border-bottom: 1px solid #eee; padding-bottom: 4px;}
#mobile-details-content p { margin: 4px 0 10px 0; }
#mobile-details-content ul.details-list { padding-left: 0; list-style: none; margin-bottom: 10px; }
#mobile-details-content ul.details-list li { margin-bottom: 6px; padding-left: 10px; border-left: 2px solid #eee; }
#mobile-details-content strong { font-weight: 600; color: #111; }
#mobile-details-content .meta { display: block; font-size: 0.9em; color: #777; margin-bottom: 4px; }
#mobile-details-content .placeholder { color: #888; font-style: italic; padding: 20px 0; text-align: center; background-color: transparent; }
#mobile-details-content .badge { font-size: 0.85em; vertical-align: middle; margin-left: 5px;}
#mobile-details-content .suggestion-item, #mobile-details-content .manual-link-item { padding: 8px; margin-bottom: 5px; border-radius: 4px; border: 1px solid #eee; cursor: pointer; transition: background-color 0.2s; background-color: #f9f9f9; }
#mobile-details-content .suggestion-item:hover, #mobile-details-content .manual-link-item:hover { background-color: #f0f0f0; }
#mobile-details-content .node-link, #mobile-details-content .goal-link { cursor: pointer; color: #0d6efd; text-decoration: none; }
#mobile-details-content .node-link:hover, #mobile-details-content .goal-link:hover { color: #0a58ca; text-decoration: underline; }
#mobile-details-content .link-type-badge { display: inline-block; padding: 0.1em 0.4em; font-size: 0.8em; background-color: #e9ecef; border-radius: 3px; margin-right: 4px; }
/* Hide admin edit/delete buttons specifically in mobile view */
#mobile-details-content .edit-initiative-btn, #mobile-details-content .delete-initiative-btn,
#mobile-details-content .delete-suggestion-btn, #mobile-details-content .delete-manual-link-btn,
#mobile-details-content .delete-goal-btn, #mobile-details-content .edit-goal-btn {
    display: none !important;
}

/* Ensure Mobile panel only shows on small screens on non-touch devices */
/* On touch devices (iPad, tablets), mobile panel is controlled by JS */
@media (min-width: 1200px) {
    #mobile-details-panel {
        display: none !important;
    }
}
/* Hide mobile panel on large non-touch screens */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    #mobile-details-panel {
        display: none !important;
    }
}

/* Show mobile search bar on touch devices even on larger screens */
/* Override Bootstrap's d-lg-none for touch devices under 1200px */
@media (min-width: 992px) and (max-width: 1199px) and (hover: none),
       (min-width: 992px) and (max-width: 1199px) and (pointer: coarse) {
    .mobile-search-bar.d-lg-none {
        display: flex !important;
    }
}

/* Hide mobile search bar on large non-touch screens */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    .mobile-search-bar.d-lg-none {
        display: none !important;
    }
}

/* --- Unified Command System Styles --- */
#unified-command-section {
    position: relative;
}

#unified-command-input {
    transition: border-color 0.3s ease;
}

#unified-command-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

#command-type-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#command-type-indicator i {
    font-size: 1.1em;
}

#unified-command-section.processing {
    opacity: 0.8;
}

#unified-command-section.processing #unified-command-input {
    background-color: #f8f9fa;
}

#unified-command-section.success {
    animation: successPulse 0.5s ease-in-out;
}

#unified-command-section.error #unified-command-input {
    border-color: #dc3545;
}

@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Command type indicator animations */
.text-info {
    color: #0dcaf0 !important;
}

.text-warning {
    color: #ffc107 !important;
}

/* Improve alert styling for command status */
.alert-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

.alert-sm i {
    margin-right: 0.5rem;
}

/* Utility */
.hidden { display: none !important; }

/* Remove styles related to processing connections */
/* g.node.processing-connections circle {
    opacity: 0.6;
    stroke: #cccccc;
    stroke-width: 1.5px;
} */

/* --- INFO PANEL/ACCORDION --- */

/* Highlighting for Parent Goals of Selected Nodes */
.goal-circle.goal-highlighted-by-child {
    /* stroke: #ff9900; */ /* REMOVE Distinct orange stroke */
    /* stroke-width: 2.5px; */ /* Use related-goal style or define new */
    /* stroke-opacity: 0.85; */
    /* fill: rgba(255, 153, 0, 0.1); */ /* REMOVE Light orange fill */

    /* Make it look like a standard related goal for now */
    stroke: #555 !important; /* Same as .goal-circle.related */
    stroke-width: 2.5px !important; /* Same as .goal-circle.related */
    fill: rgba(220, 220, 220, 0.15); /* Slightly more prominent fill than default, less than selected */
    stroke-opacity: 0.7;
}

.goal-label.related-goal-label, /* Keep existing related style */
.goal-circle.goal-highlighted-by-child + .goal-label { /* Style label if its circle is parent-highlighted */
    font-weight: 600; /* Or some other distinct style */
    /* fill: #cc7a00; */ /* REMOVE Darker orange to match stroke */
    fill: #111 !important; /* Same as .goal-label.related */
    opacity: 1 !important; /* Ensure it's visible */
}