/* Form grid, labels and inputs (modals), inline filter rows and the small selects. */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* A label never gives up its height. Some labels clip their text (overflow: hidden), which
   lets flexbox squeeze them to a sliver when an error message under the field adds height —
   the field then draws over the label. */
.form-group > .form-label {
    flex-shrink: 0;
}

.form-group.full {
    grid-column: 1/-1;
}

/* ── messages under a field ──
   The PMS way of saying a field is wrong: the field outlined in red and the
   reason in red right under it ("This field is required"). Drawn by
   assets/js/libraries/validator.js, through fieldError() / fieldsValid() in
   assets/js/common/helpers.js. */
.form-validation-error,
.form-validation-error:focus,
.ss-main.form-validation-error {
    border-color: var(--danger) !important;
}

.form-validation-error:focus,
.ss-main.form-validation-error:focus-within {
    box-shadow: 0 0 0 3px var(--danger-soft) !important;
}

.slds-validation-error-message {
    flex-basis: 100%;
    width: 100%;
    margin-top: 4px;
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.35;
    color: var(--danger);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
}

/* A label that wraps its field (the worksheet's inline forms) stacks the
   message under the field rather than beside it. */
label > .slds-validation-error-message {
    display: block;
}

/* Three fields sharing one row inside a .form-grid (e.g. epic Key / Due date / Priority). */
.form-row-3 {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.form-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--ink-3);
}

.form-input,
.form-select,
.form-textarea {
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.form-input::placeholder {
    color: var(--faint-ink) !important;
    opacity: 1 !important;
}

.form-input::-webkit-input-placeholder {
    color: var(--faint-ink) !important;
}

.form-input::-moz-placeholder {
    color: var(--faint-ink) !important;
    opacity: 1 !important;
}

.form-input:-ms-input-placeholder {
    color: var(--faint-ink) !important;
}

.form-input::-ms-input-placeholder {
    color: var(--faint-ink) !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: var(--focus-ring);
}

.form-textarea {
    resize: none;
    height: 56px;
    width: 100%;
}

.form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}

.mini-sel {
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--ink-3);
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--r-xs);
    padding: 1px 2px;
    cursor: pointer;
}

.mini-sel:hover {
    background: var(--line);
}

.mini-sel:focus {
    border-color: var(--primary);
    background: #fff;
    outline: none;
}

.inline {
    display: flex;
    gap: var(--sp-2) var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
    margin: var(--sp-2) 0;
}

.inline input,
.inline select,
.props input,
.props select {
    font: inherit;
    font-size: var(--fs-sm);
    min-height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 5px 10px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition: border-color .15s, box-shadow .15s;
}

.inline input:focus,
.inline select:focus,
.props input:focus,
.props select:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: var(--focus-ring);
    outline: none;
}

.inline .inline-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 500;
}

/* the confirmation popup */
.opt-row {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 7px 0;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.opt-row input {
    margin-top: 2px;
    flex: none;
}

/* Page toolbar row sitting straight under the strip (dashboard, board, issues). */
.inline.inline-flush {
    margin-top: 0;
}

/* Filter row with room below it (analytics, review). */
.inline.inline-bar {
    margin: 0 0 12px;
}

/* A label and its control on one line. */
.inline .inline-label {
    display: flex;
    gap: 6px;
    align-items: center;
}

.inline .inline-label-wide {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* The .inline select look, without the focus change of .inline select:focus (analytics scope,
   review person). */
.inline select.plain-select {
    font: inherit;
    font-size: var(--fs-md);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 6px 8px;
    background: var(--surface-2);
}

/* A quieter aside inside a form label. */
.form-label .label-note {
    font-weight: 400;
}

/* The red star after a required field's label. */
.form-label .req {
    margin-left: 2px;
    color: var(--danger);
    font-weight: 600;
}

/* A line under a field saying why what is in it cannot be used — the epic
   key already belonging to another epic, say. The field is outlined to
   match, so the problem is visible without reading. */
.field-note {
    margin: 0;
    font-size: var(--fs-2xs);
    line-height: 1.35;
}

.field-note--clash {
    color: var(--danger-ink);
}

.form-input.input-clash,
.form-input.input-clash:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

.form-label.label-amber {
    color: var(--amber);
}

.form-input.input-upper {
    text-transform: uppercase;
}

/* Pushes one action to the left end of .form-actions. */
.form-actions .action-left {
    margin-right: auto;
}

/* An option row used as a single checkbox line inside a form grid. */
.opt-row.opt-row-flush {
    padding: 0;
}