.algorithm-results {
    padding: var(--padding-card);
    color: var(--color-text-primary);
}

.algorithm-results h3 {
    margin-bottom: 15px;
    color: var(--color-text-primary);
}

.algorithm-results .location-info {
    background: var(--color-foreground);
    padding: 15px;
    border-radius: var(--border-radius-medium);
    margin-bottom: 20px;
}

.algorithm-results .location-info p {
    margin: 10px 0;
}

.algorithm-results .top-clusters {
    margin-top: 20px;
}

.algorithm-results .cluster-suggestion {
    background: var(--color-foreground);
    padding: 15px;
    margin: 10px 0;
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-elevation-low);
}

.algorithm-results .cluster-suggestion h5 {
    color: var(--color-text-primary);
    margin: 0 0 10px 0;
}

.algorithm-results .cluster-suggestion p {
    margin: 5px 0;
    color: var(--color-text-secondary);
}

.algorithm-table-container {
    width: 100%;
    margin-bottom: var(--padding-card);
    background: var(--color-foreground);
    border-radius: var(--border-radius-large);
    padding: var(--padding-card);
}

.algorithm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
}

.algorithm-table th,
.algorithm-table td {
    padding: 12px;
    text-align: center;
    border: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
}

.algorithm-table th {
    background-color: var(--color-foreground);
    font-weight: 500;
    color: var(--color-text-primary);
}

.algorithm-table td:first-child {
    font-weight: 500;
    background-color: var(--color-foreground);
    text-align: left;
}

.algorithm-table td:last-child {
    background-color: var(--color-foreground);
    width: 50px;
}

.algorithm-table tr:hover {
    background-color: transparent;
}

.algorithm-results .error {
    color: var(--color-error);
    padding: 10px;
    background: var(--color-foreground);
    border-radius: var(--border-radius-small);
}

.durchschnitt-row {
    background-color: transparent;
    border-top: 2px solid var(--color-border);
}

.table-layout {
    display: block;
}

.algorithm-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-card);
    background: var(--color-foreground);
    border-radius: var(--border-radius-large);
    margin-top: var(--padding-card);
}

.cluster-controls {
    display: flex;
    align-items: center;
    gap: var(--padding-card);
    width: auto;
}

/* Remove default select styling */
#clusterSelect {
    display: none;  /* Hide the native select */
}

/* Custom dropdown container */
.cluster-dropdown {
    position: relative;
    width: 200px;
}

/* Custom dropdown trigger button */
.cluster-dropdown-trigger {
    height: 30px;
    padding: 0 12px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 15px;
    font-size: var(--font-size-xs);
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Custom dropdown popup */
.cluster-dropdown-popup {
    position: absolute;
    bottom: calc(100% + 8px);  /* Changed from top to bottom */
    left: 0;
    right: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large);
    padding: 8px 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);  /* Changed direction */
    transition: all 0.2s ease;
    z-index: 1000;
    max-height: none;  /* Remove max-height limitation */
}

/* Show popup when active */
.cluster-dropdown.active .cluster-dropdown-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Dropdown items */
.cluster-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
    white-space: nowrap;
    font-size: var(--font-size-xs);
}

.cluster-dropdown-item:hover {
    color: var(--color-text-primary);
    background: var(--color-background-hover);
}

.save-button {
    height: 30px;
    padding: 0 12px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 15px;  /* Half of height for pill shape */
    font-size: var(--font-size-xs);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.save-button:hover,
#clusterSelect:hover {
    background: var(--color-background);
    border-color: var(--color-text-primary);
}

#clusterSelect:focus,
.save-button:focus {
    outline: none;
    border-color: var(--color-border);
}

.variable-input {
    width: 50px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 4px;
    border-radius: var(--border-radius-small);
    text-align: center;
}

.variable-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* First, remove all duplicate hover styles */

/* Then, update the interactive elements styles */
.cluster-control-btn,
.save-button,
.cluster-dropdown-trigger {
    transition: border-color 0.2s ease;  /* Add transition for smooth hover */
}

/* Unified hover effects for all buttons */
.cluster-control-btn:hover,
.save-button:hover,
.cluster-dropdown-trigger:hover {
    border-color: var(--color-text-primary);
    background: var(--color-background);  /* Keep background consistent */
}

/* Dropdown item hover */
.cluster-dropdown-item {
    transition: all 0.2s ease;
}

.cluster-dropdown-item:hover {
    background: var(--color-background-hover);
    color: var(--color-text-primary);
}

/* Remove any conflicting styles */
.save-button:hover {
    background: var(--color-background);
}


/* Style remove buttons */
.cluster-control-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: 1;
    cursor: pointer;
}

/* Ensure table cells maintain consistent height */
.algorithm-table td:last-child {
    padding: 6px;
    vertical-align: middle;
}

/* Make all inputs and buttons match font size */
.variable-input,
.cluster-control-btn,
.save-button,
#clusterSelect,
#clusterSelect option {
    font-size: var(--font-size-xs);
}

/* Style the dropdown popup */
#clusterSelect option {
    padding: 12px 16px;  /* Increased padding */
    background: var(--color-background);
    color: var(--color-text-primary);
    border-radius: var(--border-radius-large);  /* Increased border radius */
    margin: 4px 0;  /* Add space between options */
}

/* Hide disabled/already added options completely */
#clusterSelect option[data-added="true"],
#clusterSelect option:disabled {
    display: none;
}

/* Style the dropdown container */
#clusterSelect:focus {
    border-color: var(--color-border);
    box-shadow: none;  /* Remove focus shadow */
}

/* Style the dropdown list */
select#clusterSelect {
    border-radius: 15px;
    padding: 0 36px 0 12px;  /* Adjust padding to account for arrow */
}

/* Ensure proper spacing in the dropdown */
#clusterSelect optgroup,
#clusterSelect option {
    margin: 8px 0;
}

/* Style the select element when opened */
#clusterSelect::-ms-expand {
    display: none;
}

/* Style disabled options */
#clusterSelect option:disabled {
    color: var(--color-text-secondary);
    background: var(--color-background);
}

/* Style option hover state */
#clusterSelect option:hover,
#clusterSelect option:focus {
    background-color: var(--color-background-hover);
}

/* Also update the trigger text */
.cluster-dropdown-trigger span {
    font-size: var(--font-size-xs);
}

/* Custom number input styling */
.custom-number-input {
    display: flex;
    align-items: center;
    gap: 4px;  /* Reduced from 8px */
    justify-content: center;
    width: 70px;  /* Add fixed width */
    margin: 0 auto;  /* Center in table cell */
}

.number-control-btn {
    width: 16px;  /* Reduced from 20px */
    height: 16px;  /* Reduced from 20px */
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease;
    flex-shrink: 0;  /* Prevent button from shrinking */
}

.number-control-btn:hover {
    border-color: var(--color-text-primary);
}

.number-display {
    min-width: 20px;  /* Reduced from 30px */
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
}