/* EoSFitting — mirrors EoSFitting__Step_By_Step_Layout.py's collapsible, one-section-at-a-time
   flow. The collapsible sections,
   buttons, text boxes, checkboxes and dropdowns are the ones EoSAlign.css and Dropdown.css
   define; this file only adds what EoSFitting has that EoSAlign does not (the data
   tables, the number boxes, the model list, the results tables and the figures). */

#eosfitting-app {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    box-sizing: border-box;
}

/* Several elements below set their own `display`, which would otherwise override the
   browser's default `[hidden] { display: none }` rule (author styles win over the UA
   stylesheet) -- this restores `hidden` so EoSFitting.js can show/hide them with it. */
.eosfitting-center-row[hidden],
.eosfitting-inline-row[hidden],
.eosfitting-upload-options[hidden],
.eosfitting-column-choice-row[hidden],
.eosfitting-model-parameters[hidden],
.fitting-table-scroll[hidden],
.eosfitting-figures[hidden],
.eosfitting-continue-button[hidden],
.eosfitting-loading[hidden],
#eosfitting-workspace[hidden] {
    display: none !important;
}

.eosfitting-loading {
    text-align: center;
    color: var(--secondary-text);
    padding: 3rem 0;
}
.eosfitting-loading.is-error {
    color: var(--warning-color);
}

/* ── Sections inside sections ─────────────────────────────────────────────── */
/* EoSAlign.css shows a section's content with ".collapsible-section.expanded .collapsible-content", which matches the content of
   every section inside an expanded one too, so a collapsed subsection of the (expanded) Pressure-Scale Alignment section stayed
   open. Here a section's own content and arrow only follow its own state. */
#eosfitting-app .collapsible-section:not(.expanded) > .collapsible-content {
    display: none;
}
#eosfitting-app .collapsible-section:not(.expanded) > .collapsible-header .collapsible-arrow {
    transform: none;
}

/* ── Small layout helpers ─────────────────────────────────────────────────── */
.eosfitting-center-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.eosfitting-continue-button {
    margin-top: 0.5rem;
}
.eosfitting-inline-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    color: var(--tertiary-text);
    font-size: 0.9rem;
}
/* Mirrors the "One File" / "Multiple Files" buttons, which are the middle half of the width of the
   Manual Entry / Upload File buttons above them */
.eosfitting-upload-options {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 0.5rem 0;
}
.eosfitting-upload-options .mode-button {
    flex: 0 1 25%;
    min-width: 8rem;
}

/* ── Number boxes (mirrors Number_Box in Fitting_Display_Helpers.py) ──────── */
.fitting-number-box {
    box-sizing: border-box;
    width: 11.9rem;
    max-width: 100%;
    background-color: var(--quaternary-background);
    color: var(--primary-text);
    border: 1px solid transparent;
    border-radius: var(--corner-rounding);
    font-family: "Noto Sans Mono", Consolas, monospace;
    font-size: 0.95rem;
    padding: 0.3rem 0.75rem;
}
.fitting-number-box:focus {
    outline: none;
    border-color: var(--primary-color);
}
/* A box on a nested card, whose card is lighter than the main cards, needs another color to stand out
   (the main card color, or the page color when the two are the same -- the light theme) */
.collapsible-section.nested .fitting-number-box,
.eosfitting-model-parameters .fitting-number-box {
    background-color: var(--secondary-background);
}
[data-theme="light"] .eosfitting-model-parameters .fitting-number-box,
:root:not([data-theme]) .eosfitting-model-parameters .fitting-number-box {
    background-color: var(--primary-background);
}

/* ── Data tables (mirrors Fitting_Data_Table.py) ──────────────────────────── */
.fitting-table-scroll {
    max-height: 22rem;
    overflow: auto;
    border-radius: var(--corner-rounding);
    background-color: var(--quaternary-background);
}
.fitting-data-table,
.fitting-results-table {
    border-collapse: collapse;
    width: 100%;
    font-family: "Noto Sans Mono", Consolas, monospace;
    font-size: 0.95rem;
    color: var(--primary-text);
}
.fitting-data-table {
    table-layout: fixed;
}
.fitting-data-table th,
.fitting-results-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--quaternary-background);
    color: var(--quaternary-text);
    font-family: "Noto Sans", Arial, sans-serif;
    font-weight: bold;
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    white-space: pre-line;
    text-align: center;
}
.fitting-data-table th.row-number,
.fitting-data-table td.row-number {
    width: 3rem;
    text-align: center;
    color: var(--quaternary-text);
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 0.85rem;
    position: static;
}
.fitting-data-table td {
    padding: 0;
    border-right: 1px solid var(--primary-text);
    border-bottom: 1px solid var(--primary-text);
}
.fitting-data-table td:last-child {
    border-right: none;
}
.fitting-data-table tr:last-child td {
    border-bottom: none;
}
.fitting-data-table td.row-number {
    border-right: none;
    border-bottom: none;
}
.fitting-data-table input {
    box-sizing: border-box;
    width: 100%;
    background: transparent;
    color: inherit;
    border: none;
    font: inherit;
    padding: 0.35rem 0.5rem;
}
.fitting-data-table input:focus {
    outline: none;
    background-color: var(--primary-accent);
    color: var(--primary-background);
}
.fitting-data-table.is-read-only input {
    pointer-events: none;
}
/* The uncertainty columns (the 2nd and 4th) are only shown when error propagation is enabled */
.fitting-data-table.hide-uncertainty th:nth-child(3),
.fitting-data-table.hide-uncertainty td:nth-child(3),
.fitting-data-table.hide-uncertainty th:nth-child(5),
.fitting-data-table.hide-uncertainty td:nth-child(5) {
    display: none;
}
.fitting-data-table.hide-uncertainty td:nth-child(4) {
    border-right: none;
}

/* The dropdown above each column of the table that chooses the column of the file to use. The table has a
   row-number column (3rem) and equal columns, so a grid with the same padding lines each dropdown up */
.eosfitting-column-choice-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding-left: 3rem;
}
.eosfitting-column-choice-row.hide-uncertainty > :nth-child(2),
.eosfitting-column-choice-row.hide-uncertainty > :nth-child(4) {
    display: none;
}
.eosfitting-column-choice-row.hide-uncertainty {
    grid-template-columns: repeat(2, 1fr);
}

/* One row for each value when the values are in multiple files: the name, the file and its column */
.eosfitting-file-source-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.eosfitting-file-source-row[hidden] {
    display: none;
}
.eosfitting-file-source-row > label {
    flex: 0 0 13rem;
    color: var(--tertiary-text);
    font-size: 0.9rem;
}
.eosfitting-file-source-row > .app-input {
    flex: 1 1 10rem;
    width: auto;
}
.eosfitting-file-source-row > .app-dropdown {
    flex: 0 0 12rem;
}

/* ── Models (mirrors Select_Fitting_Models.py) ────────────────────────────── */
.eosfitting-model-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
/* The equation shrinks to the width that is left beside the name (as the desktop app's Equation_Label does);
   on a narrow screen it goes on its own line instead */
.eosfitting-model-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    padding: 0.25rem 0.375rem;
    border-radius: 0.5rem;
}
.eosfitting-model-row:hover {
    background-color: var(--quaternary-background);
}
.eosfitting-model-row .eosalign-checkbox-row {
    flex: 0 0 auto;
    min-width: 17rem;
}
.eosfitting-equation {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--tertiary-text);
    display: flex;
    align-items: center;
}
.eosfitting-equation svg {
    max-width: 100%;
    height: auto;
}
.eosfitting-model-parameters {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.1rem 0 0.6rem 1.75rem;
    padding: 0.6rem 0.75rem;
    background-color: var(--quaternary-background);
    border-radius: 10px;
}
.eosfitting-model-parameters .eosfitting-inline-row {
    gap: 0.5rem;
}
.eosfitting-model-parameters .eosfitting-inline-row > label {
    min-width: 0;
}
.eosfitting-parameter-fix {
    margin-left: 0.5rem;
}
.eosfitting-uncertainty {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.eosfitting-uncertainty[hidden] {
    display: none;
}

/* ── Results ──────────────────────────────────────────────────────────────── */
.fitting-results-table td {
    padding: 0.35rem 0.75rem;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--quinary-background);
}
.fitting-results-table tr:last-child td {
    border-bottom: none;
}
.fitting-results-table th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: right;
    white-space: nowrap;
    background-color: var(--quaternary-background);
}
.fitting-results-table thead th {
    top: 0;
}
.eosfitting-figure,
.eosfitting-figures {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.eosfitting-figure img,
.eosfitting-figures img {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
}
.eosfitting-figure img:not([src]) {
    display: none;
}

@media (max-width: 760px) {
    .eosfitting-model-row {
        flex-wrap: wrap;
    }
}
@media (max-width: 640px) {
    .eosfitting-file-source-row > label {
        flex-basis: 100%;
    }
    .eosfitting-file-source-row > .app-dropdown {
        flex: 1 1 100%;
    }
    .eosfitting-column-choice-row {
        padding-left: 2.2rem;
    }
    .fitting-data-table th.row-number,
    .fitting-data-table td.row-number {
        width: 2.2rem;
    }
}