.valuation-editor-main-area {
    width: 500px;
}

/* the labels in here are divs, and "dialog div" paints those black - which disappears
   against a dark theme. Follow the same theme colors .dialog-main-area uses. */
.valuation-editor-main-area div,
.valuation-editor-main-area label {
    color: var(--color-text-1);
}

.valuation-editor-main-area .valuation-editor-header {
    padding: 2px 0 1px 25px;
    font-size: 0.9rem;
    color: var(--color-titles);
    font-weight: 600;
}

.valuation-editor-main-area>div:first-of-type {
    /* first div among siblings, ignores other element types */
    margin-top: 11px;
}

.valuation-editor-main-area>div:nth-of-type(2) {
    margin-bottom: 20px;
}

.valuation-editor-main-area fieldset {
    margin: 14px 8px 0 8px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-dim);
}


.valuation-editor-grid {
    /* position: fixed; */
    /* margin: 0; */
    /* IMPORTANT: otherwise browser centers it */
    /* left: 40px;
    top: 80px; */
    display: grid;
    grid-template-columns: 200px 1fr;
    padding: 5px;
}


.valuation-editor-grid div {
    border-bottom: 1px solid gainsboro;
    padding: 5px 15px 3px 10px;
    /* font-size: 0.9rem; */
}

.valuation-editor-grid span {
    padding: 0 0 0 2px;
    align-self: end;
    /* bottom of the cell */
}


/* these two keep black text - the highlight is always a light background,
   whatever the theme */
.valuation-editor-grid .highlight-in-yellow {
    background-color: yellow;
    color: black;
}

.valuation-editor-grid .highlight-in-pink {
    background-color: pink;
    color: black;
}

.valuation-editor-main-area .dialog-editor-row {
    margin: 10px 0;
    align-items: center;
}

.valuation-editor-label {
    min-width: 170px;
}

.valuation-editor-input-readonly {
    width: 120px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 6px;
    background-color: #f5f5f5;
    color: #555;
    font-size: 0.9rem;
}

.valuation-editor-main-area .valuation-editor-options-intro {
    margin: 18px 0 4px 18px;
    font-size: 0.85rem;
    color: var(--color-text-dim);
}

/* inline validation warning shown above the button bar */
.valuation-editor-warning {
    margin: 10px 18px 0 18px;
    padding: 8px 12px;
    border: 1px solid #e0b4b4;
    border-radius: 5px;
    background-color: #fff6f6;
    color: #9f3a38;
    font-size: 0.85rem;
}

/* group box (".NET GroupBox" look) around each option */
.valuation-editor-option {
    margin: 10px 8px 0 8px;
    padding: 4px 12px 10px 12px;
    border: 1px solid #c8c8c8;
    border-radius: 5px;
}

.valuation-editor-option-legend {
    display: flex;
    align-items: center;
    padding: 0 6px;
}


.valuation-editor-main-area .valuation-editor-option-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-titles);
    cursor: pointer;
}

/* an option that is shown but cannot be picked (e.g. not yet implemented) */
.valuation-editor-main-area .valuation-editor-option-label.option-disabled {
    opacity: 0.45;
    cursor: default;
}

/* compact exit-scenarios table (Exit # | Amount | Weighting) */
.valuation-editor-exits-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0;
    font-size: 0.9rem;
}

.valuation-editor-exits-table th {
    text-align: left;
    font-weight: 600;
    color: var(--color-text-dim);
    padding: 2px 8px 4px 8px;
    border-bottom: 1px solid #d8d8d8;
}

/* center the Amount and Weighting column headers (leave the Exit # header left) */
.valuation-editor-exits-table th:nth-child(2),
.valuation-editor-exits-table th:nth-child(3) {
    text-align: center;
}

/* the Weighted header sits over figures rather than over boxes, so it is right-aligned to
   them. those figures end 11px in from the edge of the column - 8px of cell padding and the
   3px the span itself carries - so the header is brought in by the same amount to line up */
.valuation-editor-exits-table th:nth-child(4) {
    text-align: right;
    padding-right: 11px;
}

/* four columns share the width three had, so the boxes that are typed into are kept narrow
   and the worked-out column takes what is left */
.valuation-editor-exits-table th:nth-child(1) {
    width: 15%;
}

.valuation-editor-exits-table th:nth-child(2) {
    width: 32%;
}

.valuation-editor-exits-table th:nth-child(3) {
    width: 21%;
}

.valuation-editor-exits-table th:nth-child(4) {
    width: 32%;
}

/* amount x weighting - worked out rather than typed, so it is dimmer than the boxes beside
   it, and right-aligned so the figures line up under each other and with the total */
.valuation-editor-weighted {
    display: block;
    text-align: right;
    padding-right: 3px;
    color: var(--color-text-dim);
    white-space: nowrap;
}

/* the sum of that column, on the totals row - the weighted average itself */
.valuation-editor-weighted-total {
    display: block;
    text-align: right;
    padding-right: 3px;
    font-weight: 600;
}

/* the weighted average once the discount is taken off it. the Discount row is a flex row,
   so the auto margin pushes this out to the right-hand end of it - and the Results fieldset
   is the same width as the Exit Scenarios one above it, so that end is the right edge of the
   exits table. the 11px brings it in to where the Weighted figures stop, so the discounted
   figure lines up underneath the column it comes from */
.valuation-editor-after-discount {
    margin-left: auto;
    margin-right: 11px;
    margin-bottom: 6px;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--color-text-1);
    white-space: nowrap;
}

.valuation-editor-exits-table td {
    padding: 3px 8px;
}

.valuation-editor-exits-table .valuation-editor-exit-num {
    font-weight: 600;
    color: var(--color-titles);
    white-space: nowrap;
}

.valuation-editor-exits-table .valuation-editor-input {
    width: 100%;
    box-sizing: border-box;
}

/* the weightings total sits under the 4 exits, split off by a rule */
.valuation-editor-exits-table tfoot td {
    border-top: 1px solid #d8d8d8;
    padding-top: 6px;
}

/* fills the same width as the inputs above it, so the figures line up */
.valuation-editor-total-value {
    flex: 1;
    text-align: right;
    padding-right: 3px;
    font-weight: 600;
}

/* the total is not the 100% a save needs */
.valuation-editor-total-off {
    color: var(--color-text-warning);
}

/* the <number-input-int> web component is display:inline by default, so width is
   ignored - make it block and let its shadow input fill the cell (no overflow) */
.valuation-editor-exits-table number-input-int.valuation-editor-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    --number-input-width: 100%;
}

/* percentage input: number field with a trailing % symbol */
.valuation-editor-pct-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.valuation-editor-pct-wrap .valuation-editor-input {
    width: 70px;
    box-sizing: border-box;
    text-align: right;
}

.valuation-editor-exits-table .valuation-editor-pct-wrap .valuation-editor-input {
    width: 100%;
}

.valuation-editor-pct-symbol {
    color: var(--color-text-dim);
}

/* note shown beside a dropdown that has no options */
.valuation-editor-empty-note {
    margin-left: 8px;
    color: var(--color-text-dim);
    font-style: italic;
    font-size: 0.85rem;
}

/* Notes: narrow label so the textarea sits right beside it (saves horizontal space) */
.valuation-editor-main-area .dialog-editor-row.valuation-editor-notes-row {
    align-items: flex-start;
}

.valuation-editor-notes-label {
    min-width: auto;
    margin-right: 8px;
}

.valuation-editor-notes {
    flex: 1;
}

/* rows belonging to the option that is not currently selected */
.valuation-editor-main-area .dialog-editor-row.option-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* a line under an option saying what it does - sits under the input, indented to line up with it */
.valuation-editor-option-note {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-text-dim);
    padding: 2px 0 4px 8px;
}