.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-option-radio {
    margin: 0 6px 0 0;
}

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

/* 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;
}

.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;
}