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: 1000px; /* 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 (replace old component grid styles) */

.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: 80px;  /* Give buttons enough height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.25rem;
}

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

.component-grid-item .comp-icon {
    width: 100%;     /* Make icon responsive to the grid column's width */
    max-width: 180px; /* But don't let it get too huge on large screens */
    height: 60px;   /* Set a consistent, larger height for the icon area */
    object-fit: contain;
    margin-top: 0px;
}

.component-grid-item .comp-label {
    font-size: 0.9em;
    line-height: 1;
    margin-top: 0px;
}
/* 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 */
}

/* --- NEW Styles for HORIZONTAL Circuit Diagram --- */
#circuitDiagramContainer {
    display: flex;
    align-items: center; /* Vertically align items */
    min-height: 140px;   /* Give it enough height for labels and icons */
    overflow-x: auto;  /* Allow horizontal scrolling if diagram is too wide */
    background-color: #f8f9fa;
    padding: 1rem 0; /* Add vertical padding */
}

.circuit-schematic {
    display: flex;
    align-items: center; /* Vertically aligns the icons and connection lines */
    height: 100%; /* Ensure the flex container takes up the parent's height */
}

.circuit-element {
    display: flex;
    flex-direction: column; /* Stack label, icon, impedance vertically */
    align-items: center;   /* Center items horizontally */
    text-align: center;
    position: relative;    /* For label positioning */
    padding: 0;            /* No extra padding, let icons control spacing */
    flex-shrink: 0;        /* Prevent elements from shrinking */
}

.circuit-element .label {
    position: absolute;
    top: -10px; /* Position label above the schematic */
    font-size: 0.9em;
    font-weight: bold;
    white-space: nowrap;
}

.circuit-element .impedance-value {
    margin-top: 5px;
    font-size: 0.8em;
    font-family: monospace;
    white-space: nowrap;
}

.circuit-element .schematic-icon {
    /* Define a base width and height for consistency */
    width: 120px;
    height: 80px;
}

/* Specific width for the larger load/source box */
.circuit-element .schematic-icon.black-box {
     width: 100%;
}