/* LegisData Simulator Styles */
.legisdata-simulador-container {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.legisdata-simulador-container h2 {
    margin-top: 0;
    color: #333;
}

.legisdata-simulador-container p {
    font-size: 14px;
    color: #555;
}

/* New styles for the controls header */
.legisdata-controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* Increased margin for better separation */
    padding: 10px;
    background-color: #f0f0f0; /* Slightly different background for the header */
    border-radius: 3px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.legisdata-input-type-switch {
    /* margin-bottom: 15px; /* Removed as it's now part of a flex container */
    /* padding: 10px; /* Padding now on parent .legisdata-controls-header */
    /* background-color: #eee; /* Background now on parent */
    border-radius: 3px;
    display: flex; /* To align labels nicely if they wrap */
    gap: 10px; /* Spacing between radio buttons if they wrap */
}

.legisdata-input-type-switch label {
    margin-right: 10px; /* Adjusted margin */
    cursor: pointer;
    font-size: 0.9em;
}

.legisdata-right-controls {
    display: flex;
    align-items: center;
    gap: 15px; /* Spacing between "Bancas" text and "Calcular" button */
}

.legisdata-bancas-info {
    font-size: 0.9em;
    color: #333;
    font-weight: bold;
    text-align: center; /* Center the text within the span */
    flex-grow: 1; /* Allow the span to take available space */
    /* If the "Calcular" button is to its right, ensure it doesn't push it too far */
    /* The parent .legisdata-right-controls already uses gap, so this should work. */
}

/*
.legisdata-calcular-btn { // This is the less specific rule, commented out or to be removed
    padding: 8px 15px; 
    font-size: 0.95em; 
}
*/

.legisdata-listas-container {
    display: flex; /* Enable flexbox for wrapping */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    gap: 20px; /* Spacing between items */
    justify-content: flex-start; /* Align items to the start */
    margin-bottom: 20px;
}

/* Styles for the new two-column list item layout */
.legisdata-lista-item-sim {
    display: flex;
    align-items: stretch; /* Make columns of equal height */
    gap: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    /* margin-bottom: 10px; /* Replaced by gap in container */
    border-radius: 3px; 
    background-color: #fff; 
    flex: 1 1 300px; /* Grow, shrink, with a basis of 300px. Allows 2-3 items per row on wider screens. */
    max-width: calc(50% - 10px); /* Ensure max 2 items on medium screens, accounting for gap (20px/2) */
    /* For 3 columns: max-width: calc(33.33% - 14px); (adjust gap calc) */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.legisdata-lista-image-col {
    flex-basis: 80px;
    flex-shrink: 0;
    display: flex; /* To help control child image/placeholder */
    flex-direction: column; /* Stack children vertically if needed, though img/div should fill */
    justify-content: center; /* Center content vertically if object-fit: contain was used and image is smaller */
    align-items: center; /* Center content horizontally if image is smaller */
}

.legisdata-lista-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the space, crop if necessary */
    display: block;
    border-radius: 3px; 
}

.legisdata-lista-no-image { /* Style the placeholder div as well */
    width: 100%; 
    height: 100%; 
    min-height: 80px; /* Ensure placeholder has a decent minimum height */
    background-color: #e0e0e0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.8em; 
    color: #777; 
    text-align: center;
    border-radius: 3px;
}


.legisdata-lista-details-col {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between name, candidate, and input */
    align-items: center; /* New: Horizontally center flex items */
}

.legisdata-lista-name {
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 2px 0; /* Reduced bottom margin */
    text-align: center; /* New: Center the text */
}

.legisdata-lista-first-candidate {
    font-size: 0.95em;
    color: #555; /* Slightly darker than previous .legisdata-primer-candidato */
    margin: 0 0 5px 0; /* Adjusted bottom margin */
    min-height: 1.2em; /* Ensure it takes up space even if empty (due to  ) */
    text-align: center; /* New: Center the text */
}

.legisdata-lista-details-col .legisdata-vote-input { /* More specific selector for the input */
    width: 100%; /* Make input take full width of its column part */
    padding: 6px; /* Slightly reduced padding for a more compact look */
    border: 1px solid #ddd;
    font-size: 0.9em; /* Make it slightly smaller to give prominence to text above */
    border-radius: 3px;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.legisdata-actions {
    margin-top: 20px;
    text-align: right;
}

/* Specific styling for the Calcular button within the controls header */
.legisdata-controls-header .legisdata-calcular-btn {
    background-color: transparent;
    color: #333; /* Darker text for contrast against light gray #f0f0f0 */
    border: 1px solid #ccc; /* Subtle border to define the button */
    padding: 8px 15px; 
    font-size: 0.95em; 
    font-weight: normal; /* Ensure consistent font weight */
    line-height: normal; /* Ensure consistent line height */
    border-radius: 3px;
    cursor: pointer;
    text-shadow: none; 
    box-shadow: none; 
    outline: none; /* Remove default browser outline on focus, if any */
    vertical-align: middle; /* Helps prevent small shifts due to alignment changes */
}

.legisdata-controls-header .legisdata-calcular-btn:hover,
.legisdata-controls-header .legisdata-calcular-btn:focus,
.legisdata-controls-header .legisdata-calcular-btn:active {
    background-color: #e0e0e0; /* Slightly darker gray on hover/focus/active */
    color: #000; /* Black text on hover for better emphasis */
    border: 1px solid #bbb; /* Keep border width and style, change color */
    padding: 8px 15px; /* Explicitly keep padding the same */
    font-size: 0.95em; /* Explicitly keep font-size the same */
    font-weight: normal; /* Explicitly keep font-weight the same */
    text-shadow: none; /* Ensure no new text shadow is added */
    box-shadow: none; /* Ensure no new box shadow is added, especially for :active */
    outline: none; /* Consistent outline management */
}

/* Specific override for :active if WP adds an inset shadow or different border */
.legisdata-controls-header .legisdata-calcular-btn:active {
    background-color: #d0d0d0; /* Even slightly darker for active state */
    border-color: #aaa; /* Darker border for active */
    box-shadow: none !important; /* Force no shadow for active state */
}


.legisdata-hemicycle-container {
    width: 100%; /* Ensure it takes full available width */
    /* max-width: 400px; /* REMOVED to allow full width */
    margin: 20px auto; /* Existing: Center it and add some vertical space */
    min-height: 200px; /* Existing: Ensure it has some height before SVG is drawn. Consider if this needs to adapt to JS svgHeight. */
    /* background-color: #f8f8f8; /* Optional: light background for the graph area */
    /* border: 1px solid #eee; /* Optional: subtle border */
}

.legisdata-hemicycle-container svg {
    display: block; /* Remove extra space below inline SVG */
    width: 100%;
    height: auto; /* Maintain aspect ratio */
}

.legisdata-results-container {
    border-top: 1px dashed #ccc;
    margin-top: 20px;
    padding-top: 15px;
}

.legisdata-results-seats h3,
.legisdata-results-candidates h3 {
    margin-top: 0;
    color: #444;
}

/* Legend Styles */
.legisdata-hemicycle-legend {
    /* text-align: center; /* Remains commented out */
    margin-top: 15px; /* Existing */
    display: flex; /* Existing */
    flex-wrap: wrap; /* RE-ADDED to allow wrapping */
    justify-content: center; /* Existing */
    gap: 10px 15px; /* Existing row-gap column-gap */
    font-size: 0.9em; /* Existing */
    /* overflow-x: auto; /* REMOVED */
    /* white-space: nowrap; /* REMOVED */
    /* padding-bottom: 10px; /* REMOVED as scrollbar clearance no longer needed */
}

.legisdata-legend-item {
    display: flex;
    align-items: center;
}

.legisdata-legend-color-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 1px solid #777;
    vertical-align: middle;
}


/* Styling for the ordered list of elected candidates */
.legisdata-elected-candidates-ordered-list {
    list-style-type: decimal; /* Ensures numbers are displayed */
    list-style-position: inside;
    padding-left: 5px; /* Adjust as needed, 'inside' might need less padding */
    margin-top: 10px;
    text-align: left; /* Ensure text aligns left within the container */
}

.legisdata-elected-candidates-ordered-list li {
    margin-bottom: 5px; /* Space between candidate entries */
    padding-left: 5px; /* Small padding for each item */
}


/* Responsive adjustments */
@media (max-width: 768px) { /* Broader breakpoint for controls header */
    .legisdata-controls-header {
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align items to the start */
        gap: 10px; /* Add gap when stacked */
    }

    .legisdata-input-type-switch {
        width: 100%; /* Allow switch to take full width */
        justify-content: flex-start; /* Align radio buttons to start */
    }
    
    .legisdata-right-controls {
        width: 100%; /* Allow right controls to take full width */
        justify-content: space-between; /* Space out "bancas" and "calcular" */
    }
}


@media (max-width: 600px) {
    /* .legisdata-listas-container { /* No longer grid */
        /* grid-template-columns: 1fr; */ /* Single column on small screens */
    /* } */
    
    .legisdata-lista-item-sim {
        flex-basis: calc(100% - 0px); /* Full width on small screens, no gap calc needed as it's one item */
        max-width: 100%; /* Override previous max-width */
        /* The flex-direction: column below is for the item's *internal* layout, not the container's */
    }

    /* The stacking of image and details from previous version for small screens is good, let's keep it */
    .legisdata-lista-item-sim { /* This rule from previous iteration seems good for stacking */
        flex-direction: column; 
        align-items: center; 
    }

    .legisdata-lista-image-col {
        margin-bottom: 10px; 
        width: 100px; 
        max-width: 100px; 
        height: 100px; /* Give a fixed height for the image when stacked, so it's not 100% of a now-flexible parent */
    }
    
    .legisdata-lista-details-col {
        width: 100%; 
        align-items: center; 
    }

    .legisdata-lista-name,
    .legisdata-lista-first-candidate {
        text-align: center; 
    }
    
    .legisdata-lista-details-col .legisdata-vote-input {
        max-width: 200px; 
    }

    /* Further adjustments for very small screens if needed for .legisdata-right-controls */
    .legisdata-right-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .legisdata-calcular-btn {
        width: 100%;
        text-align: center;
    }
}

/* Styles for vote input fields */
input[type="number"].legisdata-vote-input {
    text-align: center;
    -moz-appearance: textfield; /* Firefox */
}

input[type="number"].legisdata-vote-input::-webkit-outer-spin-button,
input[type="number"].legisdata-vote-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Optional: Some versions of Chrome might need this */
}

/* Attempt to hide any lingering old color input field in generic list setup */
#legisdata-generic-list-template .legisdata-generic-color-field,
#legisdata-generic-lists-container .legisdata-generic-list-item .legisdata-generic-color-field {
    display: none !important;
}