#graph-container {
    width: 100%;
    height: 95%;
    overflow: hidden;
    border: none;
}
.node.source-node circle {
    stroke: #ff6600;
    stroke-width: 3px;
    filter: drop-shadow(0 0 3px rgba(255, 102, 0, 0.5));
}

/* Zoom controls styling */
.zoom-controls {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    padding: 5px;
}

.zoom-controls button {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
}

.zoom-controls button:hover {
    background-color: #f0f0f0;
}

/* Main content */
.sidebar {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 20px;
}

.constraint-group {
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
}

.constraint-group h6 {
    color: #495057;
    margin-bottom: 10px;
    font-weight: 600;
}

.btn-sm {
    margin: 2px;
}

.selected-node-info {
    background-color: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 15px;
    margin-bottom: 20px;
}

.connection-mode {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    display: none; /* Hidden by default */
}

.connection-mode.active {
    display: block; /* Show when connection mode is active */
}

.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Link styles */
.link {
    stroke-opacity: 0.6;
    transition: stroke-opacity 0.3s, stroke-width 0.3s;
}

.link:hover {
    stroke-opacity: 1;
    cursor: pointer;
}

.link.selected {
    stroke-opacity: 1;
    stroke-width: 3px !important;
    stroke-dasharray: 5, 5;
    stroke: #ff0000 !important;
}

/* Invisible hitbox for links - helps with clicking */
.link-hitbox {
    stroke-opacity: 0;
    pointer-events: stroke;
}

/* Highlight nodes in connection mode */
.node.source-node circle {
    stroke: #ff6600;
    stroke-width: 3px;
    filter: drop-shadow(0 0 3px rgba(255, 102, 0, 0.5));
}

.main-content {
    padding: 20px;
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

.main-container {
    min-height: calc(100vh - 80px);
}

.app-header {
    /* Header should not have any height constraints */
    position: static;
}

#no-node-selected {
    padding: 2rem;
    margin-top: 2rem;
}

.right-sidebar {
    padding: 20px;
}

/* Ensure all columns start at the same height */
.col-md-2, .col-md-7, .col-md-3 {
    padding-top: 20px;
}

/* Button colors for node types */
.btn-class {
    background-color: #99ff99; /* Light green for classes */
    border-color: #99ff99;
    color: #000;
}

.btn-class:hover {
    background-color: #88ee88;
    border-color: #88ee88;
}

.btn-concept {
    background-color: #99ccff; /* Light blue for concepts */
    border-color: #99ccff;
    color: #000;
}

.btn-concept:hover {
    background-color: #88bbee;
    border-color: #88bbee;
}

.btn-data-element {
    background-color: #ffcc99; /* Light orange for data elements */
    border-color: #ffcc99;
    color: #000;
}

.btn-data-element:hover {
    background-color: #eebb88;
    border-color: #eebb88;
}

.btn-dataset {
    background-color: #87CEFA; /* Light blue for dataset */
    border-color: #87CEFA;
    color: #000;
}

.btn-dataset:hover {
    background-color: #87CEFA;
    border-color: #87CEFA;
}

.btn-new-structure {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #000;
}

.btn-new-structure:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

/* I14Y Link Icon Styling */
.i14y-link-icon {
    cursor: help;
}

.i14y-link-icon:hover circle {
    fill: #218838;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

.i14y-link-icon:hover path {
    stroke: #f8f9fa;
    transition: all 0.2s ease;
}