body {
    padding-bottom: 50px; /* Add some space at the bottom */
}

#smithChartCanvasContainer {
    width: 100%;
    aspect-ratio: 1 / 1; /* Make it square */
    position: relative;
    overflow: hidden; /* Ensure canvas fits */
    margin: auto; /* Center if needed */
    max-width: 600px; /* Optional max size */
}

#smithChartCanvasContainer canvas {
    display: block; /* remove extra space below canvas */
    margin: auto; /* Center canvas */
}

#results {
    min-height: 100px;
    background-color: #f8f9fa; /* Light background */
    font-family: monospace;
    white-space: pre-wrap; /* Allow wrapping */
    word-break: break-all;
}

.form-text {
    font-size: 0.8em;
}

/* Add to your existing style.css */

.component-grid-item {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    user-select: none; /* Prevent text selection on click */
    min-height: 60px; /* Ensure consistent height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.component-grid-item:hover {
    background-color: #e9ecef; /* Light grey background on hover */
    border-color: #adb5bd !important; /* Darker border on hover */
}

.component-grid-item .comp-symbol {
    font-family: monospace; /* Use monospace for better symbol alignment */
    font-size: 1.2em;
    /* line-height: 1; */
    margin-bottom: 2px;
    white-space: pre; /* Preserve whitespace for multi-line symbols if needed */
}

/* Optional: Style for placeholder textarea */
#componentsList::placeholder {
    font-style: italic;
    font-size: 0.9em;
}

/* Add to your existing style.css */

/* Style for active mode badge */
#pickModeDisplay .badge.active-mode {
    background-color: #0d6efd !important; /* Bootstrap primary blue */
    color: white;
    border: 1px solid #0a58ca;
}

/* Make mode badges slightly interactive */
#pickModeDisplay .mode-badge {
     cursor: default; /* Or pointer if you make them clickable later */
}

/* Add to your existing style.css */

#matchingSolutionsOutput .solution-link {
    display: block;
    padding: 0.3rem 0.6rem;
    margin-bottom: 0.25rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    text-decoration: none;
    color: #0d6efd;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

#matchingSolutionsOutput .solution-link:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #0a58ca;
}

#matchingSolutionsOutput .solution-link strong {
    display: inline-block;
    min-width: 100px; /* Align solution numbers */
}