/* panels-calc.css */
/* Styles for Calculator Inputs and Results Tables */

/* Calculator Input Sections */
.calculator-input-section { 
    margin-top: 8px; 
    margin-bottom: 8px; 
}
.calculator-input-section .calc-input-with-label label.control-group-label { 
    margin-bottom: 2px !important; 
}

/* Grouping for input field, unit select, and submit button */
.input-unit-button-inline-group { 
    display: flex; 
    align-items: flex-end; 
    gap: 8px; 
    width: 100%; 
    margin-bottom: 6px; 
}
.calc-input-with-label { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}
.calc-input-with-label input.calc-input-field { /* Specific to calc inputs if needed */
    width: 100%; 
}
select.calc-unit-select { 
    flex-shrink: 0; 
    flex-grow: 0; 
    min-width: 85px; 
    width: auto; 
    align-self: flex-end; /* Aligns with bottom of taller input fields */
}
button.calc-form-submit-button { 
    margin: 0 0 0 5px !important; 
    padding: 1px 5px !important; 
    font-size: 0.9em !important; 
    min-height: unset; 
    height: calc(var(--font-size-input-text) + 10px + 2px); /* Match input height */
    line-height: calc(var(--font-size-input-text) + 10px + 0px);
    width: auto !important; 
    flex-shrink: 0; 
}

/* Preset select dropdown for calculator forms */
#calc-inputs-combined-module-placeholder .calc-preset-select.full-width-select { 
    width: 100%; 
    margin-top: 4px; 
    box-sizing: border-box; 
}

/* Divider line within calculator panel if used */
hr.calc-section-divider { 
    border:0; 
    height:1px; 
    background-color:#4f4f4f; 
    margin:10px 0; 
} 

/* Calculator Results Tables */
#row-results-data .results-panel > h3 { 
    font-size: 1em !important; 
    text-align: center; 
    border-bottom: 1px solid #4f4f4f; 
    padding-bottom: 4px; 
    margin-bottom: 8px; 
    text-transform: uppercase; 
}
#row-results-data .results-panel table { /* Affects all tables in results panels */
    font-size: var(--font-size-results-table) !important; 
    width:100% !important; 
    border-collapse:collapse; 
}
#row-results-data .results-panel th { 
    text-align: left !important; 
    background-color:#2a2a2a; 
    color:white; 
    font-weight:bold; 
    border-bottom: 2px solid #666666 !important; 
    padding: 3px 4px !important; 
    border: 1px solid #555555 !important; 
}
#row-results-data .results-panel td { 
    padding: 3px 4px !important; 
    border: 1px solid #555555 !important; 
    font-weight:lighter; 
    color:#cccccc; 
}
#row-results-data .results-panel tr:nth-child(even) { /* Style for even rows */
    background-color:#383838; 
}
#row-results-data .results-panel td:nth-child(1) { /* Title column */
    white-space: nowrap; 
    text-align: right !important; 
    padding-right: 10px !important; 
}
#row-results-data .results-panel td:nth-child(2) { /* Output value column */
    text-align: right !important; 
    word-break: break-all; 
}
#row-results-data .results-panel td:nth-child(3) { /* Unit column */
    white-space: nowrap; 
    text-align: left !important; 
    font-size:0.9em; 
    padding-left: 5px !important; 
}
#row-results-data #resultsTableColour td[colspan="2"] { /* Specific for Color table if name spans two */
    text-align: left !important; 
}

/* Responsive adjustments for calculator inputs and results */
@media (max-width: 600px) {
    #row-results-data .results-panel table { 
        table-layout: fixed !important; /* Helps with word wrapping in narrow cells */
    }
    #row-results-data .results-panel td { 
        word-wrap: break-word; 
        overflow-wrap: break-word; 
    }

    /* Ensure calculator input groups remain somewhat usable on small screens */
    #calc-inputs-combined-module-placeholder .calculator-input-section .input-unit-button-inline-group {
        display: flex !important; 
        flex-direction: row !important; /* Keep horizontal if possible */
        align-items: flex-end !important; 
        gap: 5px !important; 
        flex-wrap: nowrap !important; /* Try not to wrap this specific group */
    }
    #calc-inputs-combined-module-placeholder .calculator-input-section .input-unit-button-inline-group .calc-input-with-label {
        flex: 1 1 auto !important; /* Allow input field to take most space */
        min-width: 40px !important; 
    }
    #calc-inputs-combined-module-placeholder .calculator-input-section .input-unit-button-inline-group .calc-input-with-label input.calc-input-field {
        width: 100% !important; 
        box-sizing: border-box;
    }
    #calc-inputs-combined-module-placeholder .calculator-input-section .input-unit-button-inline-group select.calc-unit-select {
        flex: 0 0 auto !important; /* Don't grow/shrink, take content width */
        width: auto !important; 
        min-width: 70px !important; 
    }
    #calc-inputs-combined-module-placeholder .calculator-input-section .input-unit-button-inline-group button.calc-form-submit-button {
        flex: 0 0 auto !important; 
        width: auto !important; 
        padding: 1px 6px !important; /* Adjust padding if needed */
    }
    #calc-inputs-combined-module-placeholder .calc-preset-select.full-width-select { 
        margin-top: 8px; 
    }
}