/* Knowledge Graph Styles - Extracted from inline styles */

:root {
    --primary-bg-light: #f3f9f3;
    --primary-bg-medium: #e7f3e7;
    --primary-border: #b8d8b8;
    --primary-text: #2a552a;
    --primary-accent: #3d8f3d;
    --primary-button-bg: #e0f0e0;
    --primary-button-hover-bg: #cce2cc;
    --graph-bg: #fdfdfd;
}

.kg-wrapper,
.app-kg-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Removed fixed height to allow content to dictate height */
    overflow: visible;
    background-color: var(--primary-bg-light);
    display: flex;
    flex-direction: column;
    position: relative;
}

.kg-main-content,
.app-kg-main-content {
    /* flex-grow: 1; removed to allow natural height */
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 15px;
    gap: 10px;
}

/* ... existing code ... */

#graph-wrapper,
.app-kg-graph-wrapper {
    width: 100%;
    aspect-ratio: 0.618 / 1;
    position: relative;
    border: 1px solid var(--primary-border);
    border-radius: 8px;
    overflow: hidden;
}

/* Generic Popup Style for Centered Popups */
.app-kg-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    background-color: #fff;
    border: 1px solid var(--primary-border);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 15px;
    z-index: 1050; /* High z-index to sit on top */
    flex-direction: column;
}

/* Specific Popup Adjustments */
.app-kg-search-wrapper {
    width: 250px;
}

.app-kg-filters-popup-box {
    width: 600px; /* Doubled width from 300px */
    max-height: 500px;
}

.app-kg-legend-popup {
    width: 250px;
    max-height: 400px; /* Reduced height to ensure scrollbar appears sooner if needed */
}

.app-kg-legend-content {
    max-height: 350px;
    overflow-y: auto;
    padding-right: 5px; /* Prevent scrollbar overlapping content */
}

.app-kg-options-popup {
    width: 450px; /* Slightly wider to accommodate row layout */
}

.app-kg-export-options-box {
    width: 150px;
    padding: 5px 0; /* Menu style padding */
}

.app-kg-export-options-box .btn {
    border: none;
    text-align: left;
    padding: 8px 15px;
    border-radius: 0;
}

.app-kg-export-options-box .btn:hover {
    background-color: var(--primary-bg-light);
}

.kg-top-controls-wrapper,
.app-kg-top-controls-wrapper {
    position: relative;
    flex-shrink: 0;
    background-color: var(--primary-bg-medium);
    border: 1px solid var(--primary-border);
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kg-controls-row,
.app-kg-controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 25px; width: 100%; }

.kg-control-group,
.app-kg-control-group { display: flex; align-items: center; gap: 8px; position: relative; }

.kg-control-group label,
.app-kg-control-group label { font-size: 14px; white-space: nowrap; color: var(--primary-text); font-weight: bold; }

.kg-control-group select,
.app-kg-control-group select,
.kg-control-group input[type="text"],
.app-kg-control-group input[type="text"] { font-size: 13px; padding: 4px 6px; border: 1px solid var(--primary-border); border-radius: 4px; background-color: white; }

.kg-control-group input[type="range"],
.app-kg-control-group input[type="range"] { width: 120px; }

.kg-control-group .value-display,
.app-kg-control-group .value-display { font-size: 13px; font-weight: bold; color: var(--primary-text); min-width: 30px; }

button.kg-action-button,
button.app-kg-action-button { padding: 5px 15px; font-size: 14px; cursor: pointer; border: 1px solid var(--primary-border); background-color: var(--primary-accent); color: white; border-radius: 4px; transition: background-color 0.2s; }

button.kg-action-button:hover,
button.app-kg-action-button:hover { background-color: #2a552a; }

.kg-filters-toggle-button,
.app-kg-filters-toggle-button { padding: 4px 10px; font-size: 13px; cursor: pointer; border: 1px solid var(--primary-border); background-color: var(--primary-button-bg); border-radius: 4px; color: var(--primary-text); }

.kg-filters-toggle-button:hover,
.app-kg-filters-toggle-button:hover { background-color: var(--primary-button-hover-bg); }



.kg-filter-column,
.app-kg-filter-column { display: flex; flex-direction: column; gap: 5px; }

.kg-checkbox-list,
.app-kg-checkbox-list { max-height: 150px; overflow-y: auto; border: 1px solid var(--primary-border); padding: 8px; border-radius: 4px; background-color: #fff; min-width: 180px; }

.app-kg-chapter-list {
    max-height: 300px;
    overflow-y: auto;
}

.kg-checkbox-list label,
.app-kg-checkbox-list label { font-weight: normal; font-size: 13px; display: flex; align-items: center; cursor: pointer; }

.kg-checkbox-list input,
.app-kg-checkbox-list input { margin-right: 8px; }

.kg-button-group,
.app-kg-button-group { display: flex; gap: 5px; margin-bottom: 5px; }

.kg-button-group button,
.app-kg-button-group button { flex-grow: 1; font-size: 12px; padding: 3px; background-color: var(--primary-button-bg); border: 1px solid var(--primary-border); border-radius: 3px; cursor: pointer; }

.kg-button-group button:hover,
.app-kg-button-group button:hover { background-color: var(--primary-button-hover-bg); }





#graph-container,
.app-kg-graph-container { width: 100%; height: 100%; }

svg { background-color: var(--graph-bg); }

.link,
.app-kg-link { stroke-opacity: 0.7; }

.node circle,
.app-kg-node circle { stroke: #fff; stroke-width: 1.5px; cursor: pointer; transition: stroke 0.3s, stroke-width 0.3s; }

.node text,
.app-kg-node text { font-size: 10px; pointer-events: none; text-anchor: middle; dy: 22px; fill: #333; font-weight: bold; }

.link-label,
.app-kg-link-label { font-size: 9px; pointer-events: none; text-anchor: middle; fill: #555; }

.kg-tooltip,
.app-kg-tooltip { position: absolute; text-align: left; padding: 8px; font-size: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.2s; max-width: 300px; word-wrap: break-word; z-index: 10; }

#status-message,
.app-kg-status-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #6c757d; font-size: 1.5em; text-align: center; }



.app-kg-legend-item {
    display: flex;
    align-items: center;
    padding: 4px 8px; /* Reduced padding */
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    font-size: 13px;
    margin-bottom: 2px; /* Reduced margin */
    border: 1px solid transparent;
}

.app-kg-legend-item:hover {
    background-color: var(--primary-bg-light);
    border-color: var(--primary-border);
}

.app-kg-legend-item.inactive {
    opacity: 0.6;
    background-color: #f1f3f5;
    color: #adb5bd;
    border: 1px dashed #dee2e6;
    text-decoration: line-through;
}

.app-kg-legend-item.inactive:hover {
    opacity: 0.8;
    background-color: #e9ecef;
}

.app-kg-legend-item.inactive span,
.app-kg-legend-item.inactive .relation-symbol {
    filter: grayscale(100%);
    opacity: 0.5;
}

.app-kg-legend-item span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.app-kg-legend-item .relation-symbol {
    height: 3px;
    width: 15px;
    margin-right: 8px;
    border-radius: 1px;
    flex-shrink: 0;
}