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

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

/* Grouping for input field, unit select, and submit button */
#icosmo-matrix-synth-container .input-unit-button-inline-group {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    margin-bottom: 6px;
}
#icosmo-matrix-synth-container .calc-input-with-label {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
#icosmo-matrix-synth-container .calc-input-with-label input.calc-input-field { /* Specific to calc inputs if needed */
    width: 100%;
}
#icosmo-matrix-synth-container 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 */
}
#icosmo-matrix-synth-container 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 */
#icosmo-matrix-synth-container #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 */
#icosmo-matrix-synth-container hr.calc-section-divider {
    border:0;
    height:1px;
    background-color:#4f4f4f;
    margin:10px 0;
}

/* Calculator Results Tables */
#icosmo-matrix-synth-container #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;
}
#icosmo-matrix-synth-container #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;
}
#icosmo-matrix-synth-container #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;
}
#icosmo-matrix-synth-container #row-results-data .results-panel td {
    padding: 3px 4px !important;
    border: 1px solid #555555 !important;
    font-weight:lighter;
    color:#cccccc;
}
#icosmo-matrix-synth-container #row-results-data .results-panel tr:nth-child(even) { /* Style for even rows */
    background-color:#383838;
}
#icosmo-matrix-synth-container #row-results-data .results-panel td:nth-child(1) { /* Title column */
    white-space: nowrap;
    text-align: right !important;
    padding-right: 10px !important;
}
#icosmo-matrix-synth-container #row-results-data .results-panel td:nth-child(2) { /* Output value column */
    text-align: right !important;
    word-break: break-all;
}
#icosmo-matrix-synth-container #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;
}
#icosmo-matrix-synth-container #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) {
    #icosmo-matrix-synth-container #row-results-data .results-panel table {
        table-layout: fixed !important; /* Helps with word wrapping in narrow cells */
    }
    #icosmo-matrix-synth-container #row-results-data .results-panel td {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Ensure calculator input groups remain somewhat usable on small screens */
    #icosmo-matrix-synth-container #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 */
    }
    #icosmo-matrix-synth-container #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;
    }
    #icosmo-matrix-synth-container #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;
    }
    #icosmo-matrix-synth-container #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;
    }
    #icosmo-matrix-synth-container #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 */
    }
    #icosmo-matrix-synth-container #calc-inputs-combined-module-placeholder .calc-preset-select.full-width-select {
        margin-top: 8px;
    }
}