.ev-comp-editor-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ev-comp-editor-div {
    display: grid;
    border: 1px silver solid;
    border-radius: 5px;
    padding: 10px 16px 10px 15px;
    font-size: 0.9rem;
}

.ev-comp-editor-ev-grid {
    display: grid;
    grid-template-columns: 40px 130px 130px 110px;
    grid-row-gap: 8px;
}

.ev-comp-editor-fv-grid {
    display: grid;
    grid-template-columns: 40px 110px 260px;
}

.ev-comp-editor-opm-params-grid {
    display: grid;
    grid-template-columns:
        40px 120px 100px 40px 20px 120px;
    grid-row-gap: 8px;
}

.ev-comp-editor-notes-grid {
    display: grid;
    grid-template-columns: 40px 60px 340px;
}

.ev-comp-editor-label-1 {
    margin-left: 10px;
    font-size: 0.9rem;
    color: var(--color-text-1);
}

.ev-comp-editor-label-2 {
    margin-left: 22px;
    font-size: 0.9rem;
    color: navy;
}

.ev-comp-defaults-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 22px;
    margin-top: 21px;
}

.ev-comp-defaults-fundname{
    margin-left: 15px;
}




/* Valuation Calibration editor - 2 column layout */
.valn-calib-editor-dialog {
    max-width: min(1150px, 96vw);
}

.valn-calib-editor-dialog .dialog-main-area {
    max-height: min(650px, 82vh);
}

.valn-calib-editor-grid {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    gap: 12px;
    align-items: start;
}

.valn-calib-editor-calib-grid {
    display: grid;
    grid-template-columns: 150px 340px;
    grid-row-gap: 8px;
    align-items: center;
}

.valn-calib-editor-calib-grid textarea {
    width: 100%;
    box-sizing: border-box;
}

.valn-calib-editor-note-label {
    align-self: start;
    margin-top: 4px;
}

.valn-calib-editor-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.valn-calib-editor-buttons {
    grid-column: 1 / -1;
}

/* the Notes block, when the editor is opened from the EV list. the same columns as the
   Fair Value block above it, so the two captions line up */
.valn-calib-editor-notes-grid {
    display: grid;
    grid-template-columns: 40px 110px 260px;
    align-items: start;
}

.valn-calib-editor-notes-grid textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 70px;
}

/* a field that is there to be read - it is edited on the Calibration Input view.
   the text color is stated rather than taken from the theme: the field keeps the
   whitesmoke box in both themes, and the theme's own text color would be light on it */
.valn-calib-editor-readonly {
    background-color: whitesmoke;
    color: #555;
    cursor: default;
}

/* the browser grays a disabled select of its own accord - this holds it to the same
   whitesmoke as the read-only text areas beside it */
select.valn-calib-editor-readonly {
    opacity: 1;
    -webkit-text-fill-color: #555;
}

/* the text box that stands in for a read-only dropdown - it fills its column the way the
   read-only text areas above it do, so the left hand fields line up */
.valn-calib-editor-readonly-text {
    width: 100%;
    box-sizing: border-box;
}

.valn-calib-editor-readonly-note {
    font-size: 0.8rem;
    color: gray;
    margin-top: 8px;
}


/* Quarterly Milestones / Calibration editor - every field twice, last quarter beside this one */
/* the width is stated rather than left to the content: the editor's dropdowns and text
   areas stretch the grid to fill it, but the viewer draws the same rows as text, which
   would leave it narrower. the two are the same dialog, so they open the same size.
   the height is stated for the same reason and for one more - the note rows below take a
   share each of what is left, which needs a height to take a share of.
   dragging the grip in the corner replaces both with an inline size (makeResizableDialog) */
.qtr-milestones-editor-dialog {
    width: min(1100px, 96vw);
    max-width: 96vw;
    height: min(760px, 88vh);
    max-height: 92vh;
}

/* the column layout goes on [open] rather than on the class, and this is not a detail:
   a closed dialog is hidden by the browser's own `dialog:not([open]) { display: none }`,
   so a display of any kind on the class itself outranks it and the dialog never goes away
   when it is closed - it just loses its backdrop and sits there */
.qtr-milestones-editor-dialog[open] {
    display: flex;
    flex-direction: column;
}

/* the title and the warning bar take what they need, the content area takes the rest -
   so the grid inside it knows how much height there is to share out */
.qtr-milestones-editor-dialog > * {
    flex: 0 0 auto;
}

.qtr-milestones-editor-dialog .dialog-main-area {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* clear of the resize grip in the corner */
    padding-bottom: 16px;
}

.qtr-milestones-editor-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    margin-bottom: 24px;
}

.qtr-milestones-editor-grid {
    display: grid;
    grid-template-columns: 130px minmax(240px, 1fr) minmax(240px, 1fr);
    /* the column heads, the two fields that are picked from a list, then the three notes.
       the notes are the 1fr rows, so they take an equal share of whatever height is left
       and all three grow by the same amount when the dialog is dragged bigger.
       it is written out row by row rather than as grid-auto-rows because only the last
       three are meant to grow - add a row to the dialog and add it here too */
    grid-template-rows: auto auto auto 1fr 1fr 1fr;
    column-gap: 14px;
    row-gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
}

.qtr-milestones-editor-col-head {
    font-size: 0.8rem;
    color: gray;
    border-bottom: 1px solid silver;
    padding-bottom: 3px;
}

.qtr-milestones-editor-caption {
    font-size: 0.9rem;
    margin-top: 4px;
}

/* last quarter's - there to be read, so it is grayed and takes no room it does not need */
.qtr-milestones-editor-prev-value {
    font-size: 0.9rem;
    color: gray;
    margin-top: 4px;
    min-height: 22px;
}

/* the cell a note sits in - it takes the height of its row, and the text area inside
   stretches to it. min-height 0 so it can be given back when the dialog is made smaller */
.qtr-milestones-editor-prev,
.qtr-milestones-editor-current {
    display: flex;
    min-height: 0;
}

.qtr-milestones-editor-grid select,
.qtr-milestones-editor-note,
.qtr-milestones-editor-note-prev {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.9rem;
}

/* the notes are not dragged one at a time any more - they follow the dialog, so that all
   of them grow by the same amount rather than one of them growing at the cost of the rest */
.qtr-milestones-editor-note,
.qtr-milestones-editor-note-prev {
    min-height: 70px;
    height: 100%;
    resize: none;
}

.qtr-milestones-editor-note-prev {
    color: gray;
    background-color: whitesmoke;
    cursor: default;
}

.qtr-milestones-editor-warning {
    color: brown;
    background-color: pink;
    border: solid 1px gray;
    margin-left: 10px;
    margin-right: 40px;
}

/* the viewer - the same dialog opened to be read, from the Quarterly History list. this
   quarter's column is drawn as text rather than as controls, but it is not grayed the way
   last quarter's is: it is still the value the record was opened for */
.qtr-milestones-editor-current-value {
    font-size: 0.9rem;
    margin-top: 4px;
    min-height: 22px;
}

/* this quarter's notes, when they are there to be read - the box a text area needs so a
   long note scrolls, without looking like something that can be typed into */
.qtr-milestones-editor-note-readonly {
    background-color: whitesmoke;
    cursor: default;
}

/* the viewer's two columns read the same. the gray of the previous quarter is there to say
   "this is not the one you are editing", and in the viewer there is nothing being edited
   for it to be told apart from - both quarters are values being read, so both are drawn
   the way this quarter's are in the editor.
   only the viewer's grid carries this class, so the editor is untouched */
.qtr-milestones-editor-viewer .qtr-milestones-editor-prev-value {
    color: var(--color-text-1);
}

/* the notes sit on a whitesmoke box of their own rather than on the dialog, so they take
   the fixed color that reads against it in either theme - the same one this quarter's
   note is already drawn in, which is the whole point of stating both here */
.qtr-milestones-editor-viewer .qtr-milestones-editor-note-prev,
.qtr-milestones-editor-viewer .qtr-milestones-editor-note-readonly {
    color: black;
}