/* TODO: Gradually go through the forms-related CSS in master.css, modernize it
    and transfer it to this file. */


div.form-fields-grid {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 3fr;

    row-gap: 0.4em;
    column-gap: 6px;
    /* This attempts to get a decent balance of vertical alignment for
       various types of fields. */
    line-height: 1.2em;
}

div.form-fields-grid .field-errors {
    /* Take up an entire row of the grid. */
    grid-column: span 2;
}

div.form-fields-grid .left-col-label {
    text-align: right;
}

/* Improve the vertical alignment of field labels with
   certain types of fields. */
div.form-fields-grid .left-col-label.file {
    line-height: 1.9em;
}
div.form-fields-grid .left-col-label.number {
    line-height: 1.5em;
}
div.form-fields-grid .left-col-label.select {
    line-height: 1.9em;
}
div.form-fields-grid .left-col-label.text {
    line-height: 1.5em;
}

div.form-fields-grid .radio-option-label {
    /* Lay out the radio button and its label with flexbox, so that even if
       the label is multiline, it'll stay to the right of the radio button. */
    display: flex;
    align-items: flex-start;
    gap: 6px;
}


/* Form with multiple fields on one line and a surrounding box.
   There may also be other uses for just the box. */

/* This wrapper goes around div.form-box or div.box if we want to center it. */
div.center-box-wrapper {
    text-align: center;
}
div.form-box,
div.box {
    max-width: 800px;
    /* Allow the width to shrink to its contents */
    display: inline-block;
    /* Don't apply parent's text-align to descendants */
    text-align: initial;

    padding: 10px;
    margin: 10px;
    border: 1px solid black;
    border-radius: 5px;

    background-color: var(--content-box-color);
}
/* This wrapper goes around the field and label, keeping both on the same
   line. */
div.form-box div.field-and-label-wrapper {
    display: inline-block;
    margin: 0 5px;
}


/* For sets of fields that should be grouped closely together. */
fieldset {
    padding-bottom: 5px;
    border-bottom: 1px solid var(--heading-underline-color-bold);
    margin-bottom: 20px;
}

/* Another level of grouping fields. */
hr.subfieldset {
    background-color: var(--heading-underline-color-soft);
    border: none;
    height: 1px;
}


/*
Headers for forms, with subheaders delineating fieldsets, etc.

<legend> is a special header, conventionally for fieldsets.
Actually, legends are only supposed to be in fieldsets, according to W3C,
so we should ensure we don't use them in other situations.
In contrast, h1, h2, etc. can go anywhere and are thus suitable for
general use.
*/

legend {
    padding: 5px 0 6px 0;
    border-bottom: 1px solid var(--heading-underline-color-soft);
    margin-bottom: 5px;
    font-size: 1.3em;
    color: var(--heading-color-soft);
    font-weight: bold;
	text-transform: uppercase;
}
h2.form,
legend.small {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--heading-underline-color-bold);
    font-size: 1.2em;
    color: var(--heading-color-bold);
    text-transform: none;
}
h3.form {
    padding-bottom: 2px;
    border-bottom: 1px solid var(--heading-underline-color-soft);
    font-size: 1.0em;
    color: var(--heading-color-soft);
    text-transform: none;
}


/* Help text for fields or fieldsets. For example, "No more than 20
   characters", or a couple paragraphs on what a group of fields do. */

.helptext {
    display: block;
    line-height: 120%;
    width: 500px;
}

.helptext_small {
    display: block;
    font-size: 0.9em;
    width: 500px;
}

.helptext_long {
    line-height: 120%;
    width: 800px;
    margin: 10px 0;
}

.extra-help-content {
    /* Extra help content starts out hidden, and can be shown via Javascript
       when the user clicks a button. */
    display: none;
}


/* Sizing number fields. Browser support of `size` for input type number
   is particularly unreliable, because this case actually isn't supported
   in the W3C spec.
   https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#size
   So we instead have CSS width rules which look at the size attribute. */

input[type="number"][size="3"] {
    width: 4em;
}


/* Specific fields. */

#export-annotations-cpc-prep-form input.cpc-filepath {
    width: 25em;
}

#label-search-form input[name="min_popularity"] {
    width: 50px;
}

#annotation-area-percent-fields-grid {
    /* 4 columns: label, field, label, field */
    grid-template-columns: 10em 7em 10em 7em;
}