/* =============================================
   Forms: the portal's fields, in panels
   A .field holds a label, its control (an input, select or textarea;
   Django's widgets bring .form-control), a hint and any errors. .form-grid
   sets fields in six columns: a field takes the row, or half, a third or
   two thirds of it; on phones every field takes the row. The Account page's
   .account-field (pages/account.css) looks the same.
   ============================================= */

.form-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px 16px;
}

/* A second grid in the same form, apart from the first as its rows are */
.form-grid ~ .form-grid {
    margin-top: 14px;
}

.field {
    grid-column: span 6;
    min-width: 0;
    margin: 0;
}

.field--half {
    grid-column: span 3;
}

.field--third {
    grid-column: span 2;
}

.field--two-thirds {
    grid-column: span 4;
}

/* Starts a row, whatever is (or is hidden) before it: from the first
   column, as wide as its size says */
.field--new-row {
    grid-column: 1 / span 6;
}

.field--new-row.field--half {
    grid-column: 1 / span 3;
}

.field--new-row.field--third {
    grid-column: 1 / span 2;
}

.field--new-row.field--two-thirds {
    grid-column: 1 / span 4;
}

@media (max-width: 767.98px) {
    .form-grid > .field {
        grid-column: 1 / -1;
    }
}

.field__label {
    display: block;
    margin: 0 0 5px;
    color: var(--in-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}

.field__label .fa {
    margin-right: 4px;
}

/* A label with a ? beside it, whose note shows on hover or focus. Panels
   clip their overflow, so the note opens upward over the text above. */
.field__label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 5px;
}

.field__label-row .field__label {
    margin: 0;
}

.field__tip {
    position: relative;
    display: inline-flex;
}

.field__tip-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--in-border-hover);
    border-radius: 50%;
    background: var(--in-surface);
    color: var(--in-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

.field__tip-button:hover,
.field__tip-button:focus {
    border-color: var(--in-accent);
    color: var(--in-accent);
    outline: none;
}

.field__tip-button:focus-visible {
    box-shadow: 0 0 0 3px var(--in-focus);
}

.field__tip-text {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    border: 1px solid var(--in-border);
    border-radius: 6px;
    background: var(--in-surface);
    box-shadow: 0 6px 18px var(--in-shadow);
    color: var(--in-text);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease, visibility 0.12s;
    pointer-events: none;
}

.field__tip:hover .field__tip-text,
.field__tip-button:focus + .field__tip-text {
    visibility: visible;
    opacity: 1;
}

.field__required {
    color: var(--in-danger);
}

/* As the list pages' search field, a little taller. !important on the
   height: Bootstrap sizes a select with a more specific rule. */
.field .form-control,
.field__control {
    display: block;
    width: 100%;
    height: 38px !important;
    padding: 0 11px;
    border: 1px solid var(--in-border-input);
    border-radius: 6px;
    background-color: var(--in-page);
    color: var(--in-text);
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea.form-control,
textarea.field__control {
    height: auto !important;
    min-height: 88px;
    padding: 8px 11px;
    resize: vertical;
}

.field select.form-control,
select.field__control {
    cursor: pointer;
}

/* In a row of small buttons: Recommended Files' add and edit */
.field__control--sm {
    height: 30px !important;
    padding: 0 9px;
    font-size: 0.82rem;
}

/* A list to pick several from (Installer Details' PPA accounts) */
select[multiple].field__control {
    height: auto !important;
    padding: 4px;
}

.field .form-control::placeholder,
.field__control::placeholder {
    color: var(--in-text-placeholder);
}

.field .form-control:focus,
.field__control:focus {
    border-color: var(--in-accent);
    outline: none;
    background-color: var(--in-page);
    color: var(--in-text);
    box-shadow: 0 0 0 3px var(--in-focus);
}

.field .form-control[readonly],
.field .form-control:disabled,
.field__control[readonly],
.field__control:disabled {
    background-color: var(--in-sheet);
    color: var(--in-text-muted);
}

.field--error .form-control,
.field--error .field__control,
.field .form-control.is-invalid {
    border-color: var(--in-danger-border);
}

.field__hint {
    display: block;
    margin: 5px 0 0;
    color: var(--in-text-faint);
    font-size: 0.78rem;
    line-height: 1.45;
}

.field__error {
    margin: 5px 0 0;
    color: var(--in-danger);
    font-size: 0.8rem;
    line-height: 1.45;
}

/* A checkbox and its label on one line. The input is positioned by Bootstrap
   when it has .form-check-input (Django's widget), so it's put back in the
   line here. */
.field-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    color: var(--in-text-2);
    font-size: 0.88rem;
    line-height: 1.45;
    cursor: pointer;
}

.field-check input {
    position: static;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--in-accent);
    cursor: pointer;
}

/* A form's parts, in one panel: each under a small heading, a rule between */
.form-section + .form-section {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--in-border-soft);
}

/* !important: styles.css sets every heading's size, !important, on phones */
.form-section__title {
    margin: 0 0 12px;
    color: var(--in-text);
    font-family: inherit;
    font-size: 0.95rem !important;
    font-weight: 600;
    line-height: 1.35;
}

.form-section__text {
    margin: -6px 0 14px;
    color: var(--in-text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* The errors a submit came back with, above the form */
.form-errors {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--in-danger-border);
    border-radius: 10px;
    background-color: var(--in-danger-wash);
    color: var(--in-danger);
    font-size: 0.86rem;
    line-height: 1.5;
}

.form-errors__title {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
}

.form-errors ul {
    margin: 0;
    padding-left: 18px;
}

/* A form of several panels, one under another */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

/* Cancel and submit, at the foot of a form: the main action on the right */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.form-actions__start {
    margin-right: auto;
}

/* A line beside the buttons, on their left */
.form-actions__note {
    margin: 0;
    color: var(--in-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.form-actions__note .fa {
    margin-right: 5px;
    color: var(--in-text-faint);
}

@media (max-width: 767.98px) {
    .form-actions .portal-btn {
        flex: 1 1 auto;
    }

    .form-actions__start {
        flex-basis: 100%;
        margin-right: 0;
    }
}