:root {
    --duration-expand: 0.2s; /* Duration for expand/collapse */
    --duration-fade: 0.15s;   /* Duration for fade/arrow rotation */
}

body {
    font-family: sans-serif;
    padding: 20px;
}

h1, h2 {
    color: #333;
}

section {
    margin-bottom: 30px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.parameter-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 15px; /* Spacing between elements */
}

.parameter-row label {
    flex-basis: 250px; /* Fixed width for labels */
    flex-shrink: 0;
}

.parameter-row input[type="number"] {
    width: 80px; /* Width for number inputs */
    padding: 5px;
    margin-left: 5px; /* Small space after label */
}

/* Styling for the generic collapsible header */
.collapsible-header {
    display: flex; /* Use Flexbox */
    justify-content: space-between; /* Keep items grouped left initially */
    align-items: center; /* Vertically align items */
    cursor: pointer;
    user-select: none; /* Prevent text selection */
    margin-bottom: 15px; /* Space below header */
    position: relative; /* Needed for absolute positioning of arrow if desired */
    padding-right: 40px; /* Make space for arrow */
}

/* Arrow indicator */
.collapsible-header::after {
    content: ' \25BC'; /* Down arrow */
    font-size: 0.8em;
    position: absolute; /* Position arrow consistently */
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--duration-fade) ease-in-out; /* Animate arrow rotation */
}

.collapsible-section.collapsed > .collapsible-header::after {
    /* content: ' \25B6'; /* Right arrow */ /* Using transform instead */
    transform: translateY(-50%) rotate(-90deg);
}

/* Style the content area for transition */
.collapsible-content {
    max-height: 3000px; /* Increased max-height for expanded state */
    opacity: 1;
    overflow: hidden; /* Keep this for vertical collapse */
    transition: 
        max-height var(--duration-expand) ease-in-out, 
        opacity var(--duration-fade) ease-in-out,
        margin-top var(--duration-expand) ease-in-out, 
        margin-bottom var(--duration-expand) ease-in-out,
        padding-top var(--duration-expand) ease-in-out, 
        padding-bottom var(--duration-expand) ease-in-out;
    /* Add padding/margin if the container section has them */
    margin-top: 15px; /* Match header margin-bottom */
    padding-top: 1px; /* Prevent margin collapse issue */
    padding-bottom: 1px;
}

/* Hide content when collapsed */
.collapsible-section.collapsed > .collapsible-content {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    /* Optionally hide border if the content div itself had one */
    /* border-width: 0; */
}

/* Utility class to hide elements */
.hidden {
    opacity: 0;
    /* We need display: none initially to prevent layout shifts/interaction,
       JS will remove this class entirely, allowing opacity transition */
    display: none; 
}

button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    margin-top: 10px;
}

.collapsible-section {
    /* Add transition for initial reveal */
    transition: opacity var(--duration-fade) ease-in-out;
}

/* === Parameter Tables === */
.params-table {
    display: grid; /* Use Grid for the main table */
    /* Columns set by JS */
    gap: 5px 10px; /* Row gap, Column gap */
    margin-bottom: 20px;
    overflow-x: auto;
}

.params-table-header /*, .params-table-row */ {
    /* display: contents; /* Make children direct grid items */ 
    /* Let the row be a grid item itself */
    /* We still need display: contents for the header for alignment */
    display: contents; 
}

.params-table-body {
    display: contents; /* Crucial: Makes rows direct grid items */
}

.params-table-row {
     display: contents; /* Make label/value direct grid items */
     /* grid-template-columns: subgrid; /* Remove subgrid approach */
}

.params-table-header > div,
.params-table-row > div { 
    /* Styles for direct children (label cell, value cell AFTER promotion) */
    padding: 5px;
    border-bottom: 1px solid #eee;
    text-align: left; 
}

.params-table-header > div {
    font-weight: bold;
    background-color: #f8f8f8;
     /* Re-add flex specifically for header alignment if needed */
    display: flex;
    align-items: center;
    justify-content: center; /* Center header text */
}

/* Align specific cell content if needed */
.param-label-cell {
    padding-right: 10px;
    grid-column: 1; /* Position label cell in column 1 */
    text-align: right; /* Align text within the label cell */
     /* display: flex; /* Remove flex - let grid position */
     /* align-items: center; */
     /* justify-content: flex-end; */
}

.param-value-cell {
    grid-column: 2 / -1; /* Position value cell spanning from col 2 */
    /* Allow content to wrap if needed, but primarily control layout via career-entry */
}

.parameter-row label {
    margin-right: 10px;
    min-width: 150px; /* Give labels some space */
    display: inline-block;
    text-align: right;
}

.parameter-row span {
    margin-left: 5px;
    margin-right: 5px;
}
.parameter-row input[type="number"] {
    width: 80px; /* Standard width for number inputs */
}


/* === Career Entry Specific Styles === */
.careers-cell {
    /* Override default padding if needed, careers manage internal spacing */
    padding: 0;
    display: block; /* Override display:flex from parent rule */
}

.career-entry {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #fdfdfd;
}

.career-header,
.career-param-row {
    display: grid;
    grid-template-columns: 160px 100px 100px 1fr; /* Label | Mean | StdDev | Extras (checkboxes/units) */
    gap: 5px 10px;
    align-items: center; /* Align items vertically in the row */
    margin-bottom: 5px; /* Space between rows within a career */
    text-align: left; /* Default left align for career rows */
}

.career-header > div {
    font-weight: bold;
    text-align: center; /* Center header labels */
    padding-bottom: 3px;
    border-bottom: 1px solid #ddd;
}

.career-param-row label {
    grid-column: 1;
    text-align: right; /* Right align the parameter label */
    padding-right: 10px;
    font-weight: normal;
}

.career-param-row .career-mean-cell {
    grid-column: 2;
    display: flex; /* Use flex to align input and unit within the cell */
    align-items: center;
}

.career-param-row .career-stddev-cell {
    grid-column: 3;
     display: flex; 
    align-items: center;
}

.career-param-row .career-extras-cell {
    grid-column: 4;
    display: flex;
    align-items: center;
    gap: 5px; /* Space between checkbox and label */
}

.career-param-row input[type="number"] {
    width: 80px; /* Consistent width */
}

/* Style readonly inputs */
input[readonly] {
    background-color: #eee; /* Lighter background */
    color: #777; /* Gray text */
    cursor: not-allowed; /* Indicate non-interactive */
}

.career-param-row .calculated-field span {
     grid-column: 2 / span 2; /* Span calculated value across Mean/StdDev columns */
     font-weight: bold;
}

.add-career-btn,
.delete-career-btn {
    margin-top: 10px;
    padding: 3px 8px;
    font-size: 0.9em;
    cursor: pointer;
}

.delete-career-btn {
    background-color: #fdd;
    border: 1px solid #f99;
    color: #c00;
    grid-column: 1; /* Place delete button under the label */
    justify-self: start; /* Align button left in its column */
}

/* Ensure labels inside career rows don't interfere with main labels */
.career-param-row label {
    min-width: auto;
    display: inline; /* Let grid handle width */
}

.career-param-row .unit-span {
    margin-left: 4px; /* Space before unit */
}

/* Style the 'Add Person' button */
.add-person-btn {
    font-size: 0.9em;
    padding: 2px 8px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    border-radius: 3px;
    /* margin-left: 10px; /* Removed - rely on grid gap */
    align-self: center; 
    justify-self: start; 
    white-space: nowrap; 
    width: max-content; 
}

.add-person-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

/* Style cells in the table body */
.params-table-body .param-label-cell {
    font-weight: normal;
    text-align: right;
    padding-right: 10px;
    grid-column: 1; /* Always in the first column */
}

.params-table-body .param-value-cell {
    text-align: center;
    /* background-color: #f9f9f9; */ /* Optional background for value cells */
    padding: 3px;
    white-space: nowrap; /* Prevent wrapping within a cell */
}

.params-table-body .param-value-cell input[type="number"] {
    width: 60px; /* Smaller inputs for the table */
    min-width: 50px; /* Prevent inputs from becoming too small */
    margin-left: 3px;
    margin-right: 1px;
    text-align: right;
}

.params-table-body .param-value-cell span { /* Unit */
 font-size: 0.9em;
}

/* --- End Personal Params Table Styles --- */

.params-table-header input[type="text"] {
    /* Style name inputs in header if needed */
}

.delete-person-btn {
    padding: 1px 5px; /* Small padding */
    font-size: 1em; /* Adjust size as needed */
    line-height: 1; /* Prevent extra spacing */
    background-color: transparent;
    border: none;
    color: #c00;
    cursor: pointer;
    margin-left: 5px; /* Space from name input */
    flex-shrink: 0; /* Prevent button from shrinking */
}

.delete-person-btn:hover {
    color: #f00;
}

/* --- End Personal Params Table Styles --- */

/* --- General Assumptions Section Styles --- */

.general-params-header,
.parameter-row { /* Apply grid to general param rows */
    display: grid;
    grid-template-columns: 200px 120px 120px 1fr; /* Adjust widths as needed: Label | Mean/Value | StdDev | Unit/Options */
    gap: 5px 10px;
    align-items: center;
    margin-bottom: 5px;
    text-align: left;
}

.general-params-header {
    font-weight: bold;
    border-bottom: 1px solid #999;
    margin-bottom: 8px;
    padding-bottom: 4px;
}

.general-params-header > div:not(:first-child) {
    text-align: center; /* Center header text for Mean/StdDev/Units */
}

.parameter-row .param-label {
    grid-column: 1;
    text-align: right;
    padding-right: 10px;
}

.parameter-row .param-mean-cell,
.parameter-row .param-date-cell { /* Date input goes in the mean column */
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 5px; /* Space between input and unit */
}

.parameter-row .param-stddev-cell {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 5px;
}

.parameter-row .param-unit-cell {
    grid-column: 4;
    font-size: 0.9em;
    color: #555;
}

.parameter-row.param-type-date .param-date-cell {
    grid-column: 2 / span 3; /* Let date input span mean/stddev/unit cols */
}

.parameter-row .param-error-cell {
     grid-column: 2 / span 3;
}

/* Hide redundant elements created by old structure if any linger */
.parameter-row > label,
.parameter-row > span {
     /* display: none; /* These shouldn't be direct children anymore */
}

.parameter-row input[type="number"] { /* Override previous rule? */
    width: 80px; 
}

.parameter-row input[type="date"] {
    padding: 3px;
}

/* --- End Personal Params Table Styles --- */

/* Add styles for simulation results layout */
.simulation-results-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 20px; /* Space between trials and chart */
    align-items: flex-start; /* Align items at the top */
    overflow-x: auto;
}

.example-trials-container {
    flex: 1 1 40%; /* Adjust flex properties as needed */
    /* Add some initial styling */
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: auto;
}

#trial-tables-area {
    display: flex;
    gap: 15px; /* Space between individual trial tables */
    overflow-x: auto; /* Allow horizontal scrolling for tables */
}

/* Adjust chart container flex properties */
.chart-container {
    /* Remove the fixed width and margin auto if controlled by flex */
    margin: 0 !important;
    min-width: 300px; /* Ensure chart has a minimum width */
}

/* Basic styling for the trial tables (will be refined) */
.trial-table {
    border-collapse: collapse;
    font-size: 0.8em;
    height: min-content;
    /* Add more styling later */
}

.trial-table tr {
    height: 28px; /* Fixed height for all rows */
    line-height: 1.2; /* Ensure text is vertically centered */
}
    
.trial-table th,
.trial-table td {
    border: 1px solid #ddd;
    padding: 4px 6px;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.trial-table th {
    background-color: #f2f2f2;
    position: sticky; /* Make headers sticky */
    top: 0; /* Stick to the top of the container */
    z-index: 1;
}

/* Style for specific columns */
.trial-table .col-year,
.trial-table .col-status,
.trial-table .col-age { /* Added col-age */
    text-align: center;
}

.trial-table .col-name {
    text-align: left;
}

.trial-table .col-person-span,
.trial-table .col-shared-span {
    text-align: left;
}

/* Style for overdrawn ending balance */
.trial-table td.overdrawn {
    color: red;
    font-weight: bold;
}

/* Style for the button container in the header */
.header-buttons {
    display: flex;
    gap: 10px; /* Space between buttons */
}

/* Style for the action buttons in the header */
.header-action-btn {
    padding: 3px 8px; /* Smaller padding */
    font-size: 0.8em; /* Smaller font */
    cursor: pointer;
    margin-top: 0; /* Override default button margin */
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.header-action-btn:hover {
    background-color: #ddd;
}