/*
 * Form page (PLAN.md §7.3, §8): the main app's Add result table (inputResult.css) adapted for touch.
 * inputResult.css already stacks rows into a grid at ≤768px; the capture layer keeps that layout at every width
 * (tablets included), puts the unit beside the input, makes controls full width and keeps 44px targets.
 */

/* No extra bottom space: the Save bar is sticky in the flow, so nothing hides behind it. */
.form-page {
    padding-bottom: 0;
}

.form-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
}

.form-table,
.form-table tbody {
    display: block;
}

/* `.form-page … tr.form-row` outranks inputResult.css `body:not(.noToolbar) .inputresult__table tr` (3-column grid). */
.form-page .form-table tr.form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        'label label'
        'input post'
        'icons icons';
    column-gap: var(--spacing-small);
    margin: 0 0 var(--spacing-medium-large);
}

.form-table .form-row > td {
    display: block;
    padding: 0;
    box-shadow: none;
}

.form-table .form-row .label {
    grid-area: label;
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    max-width: none;
    padding: 0 0 var(--spacing-extra-small);
    text-align: start;
}

.form-row__label-text {
    display: inline;
    color: var(--capture-color-text);
    font-weight: var(--fontweight-semibold);
    cursor: default;
}

.form-row__required {
    font-size: var(--size-small);
}

.form-row__required[hidden] {
    display: none;
}

.form-table .form-row td.input {
    grid-area: input;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-extra-small);
    width: auto;
    min-width: 0;
}

.form-table .form-row .post {
    grid-area: post;
    align-self: start;
    min-height: var(--capture-tap-target);
    display: flex;
    align-items: center;
    padding: 0;
    color: var(--capture-color-text-secondary);
}

.form-table .form-row .post:empty {
    display: none;
}

.form-table .inputresult__inputicons {
    grid-area: icons;
}

.form-table .inputresult__inputicons:empty {
    display: none;
}

.form-table .input__element {
    min-height: var(--capture-tap-target);
}

/* Inputs are full width (MAP-1696): the main app fixes numeric at 50px and date at 140px. */
.form-table input.value,
.form-table textarea.value,
.form-table input.numeric,
.form-table input.date,
.form-table input.datetime {
    width: 100%;
    min-height: var(--capture-tap-target);
}

.form-table textarea.value {
    min-height: calc(var(--capture-tap-target) * 2);
    resize: vertical;
}

.form-table input.numeric {
    font-variant-numeric: tabular-nums;
}

/* Check field: a large tappable row around the main app's checkbox */
.check-field {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    width: 100%;
    min-height: var(--capture-tap-target);
    color: var(--capture-color-text);
    cursor: pointer;
}

.check-field input[type='checkbox'] {
    margin: 0 var(--spacing-small) 0 0;
}

/* Read-only rows: signature, calculation, unsupported */
.readonly-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-small);
    width: 100%;
    padding: var(--spacing-small) var(--spacing-medium);
    border-radius: var(--border-radius-small);
    background: rgb(var(--background-labelbadge));
    color: var(--capture-color-text-secondary);
}

.readonly-field .icon,
.readonly-field .function {
    color: rgb(var(--icon));
}

.readonly-field__value {
    color: var(--capture-color-text);
    font-weight: var(--fontweight-semibold);
}

.readonly-field__note {
    font-size: var(--size-base);
}

.readonly-field--unsupported .icon {
    color: rgb(var(--icon-warning));
}

/* Select field: button that opens the options sheet */
.select-field {
    width: 100%;
}

.select-field__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-small);
    width: 100%;
    min-height: var(--capture-tap-target);
    border: 1px solid rgb(var(--border-input));
    border-radius: var(--border-radius-small);
    background: rgb(var(--background-input));
    color: rgb(var(--textcolor-input));
    font: inherit;
    font-size: var(--capture-font-size-input);
    text-align: start;
    cursor: pointer;
}

.select-field__button.required {
    box-shadow: 4px 0 0 0 rgb(var(--border-hard)) inset;
}

.select-field__button.invalid {
    border-color: rgb(var(--border-error-hard));
    box-shadow: 4px 0 0 0 rgb(var(--border-error-hard)) inset;
}

.select-field__button--empty .select-field__value {
    color: var(--capture-color-text-secondary);
}

.select-field__value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.select-field__button .icon {
    color: rgb(var(--icon));
    cursor: inherit;
}

.select-field__search {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: var(--spacing-small);
}

.select-field__search > input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
}

.bottom-sheet .select-field__options {
    margin: 0;
    padding: 0;
}

.bottom-sheet .select-field__options li {
    padding: 0;
}

.select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-small);
    width: 100%;
    min-height: var(--capture-tap-target);
    padding: var(--spacing-small) var(--spacing-extra-small);
    border: 0;
    border-bottom: 1px solid var(--capture-color-border);
    background: none;
    color: var(--capture-color-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.select-option:active {
    background: rgb(var(--background-table-hover));
}

.select-option__check {
    visibility: hidden;
    color: rgb(var(--icon));
}

.select-option[aria-selected='true'] .select-option__check {
    visibility: visible;
}

.select-option[aria-selected='true'] .select-option__label {
    font-weight: var(--fontweight-semibold);
}

.select-field__more[hidden],
.select-field__none[hidden] {
    display: none;
}

/* Sticky Save bar above the tab bar */
.form-bar {
    position: sticky;
    /* Sticky stops at the scroll area's padding edge; -gutter puts it on the tab bar instead of 16px above. */
    bottom: calc(var(--capture-gutter) * -1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-medium);
    /* Full width, and into the page's bottom padding, so at the end of the form it sits right on the tab bar. */
    margin: 0 calc(var(--capture-gutter) * -1) calc(var(--capture-gutter) * -1);
    padding: var(--spacing-medium) var(--capture-gutter);
    border-top: 1px solid var(--capture-color-border);
    background: var(--capture-color-surface);
}

.form-bar[hidden] {
    display: none;
}

.form-bar__status {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--capture-color-text-secondary);
    font-size: var(--size-base);
}

/* Accessory row above the keyboard for numeric fields (PLAN.md §11.3) */
.numeric-accessory {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--zindex-notification);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-small);
    padding: var(--spacing-extra-small) max(var(--capture-gutter), env(safe-area-inset-right)) var(--spacing-extra-small)
        max(var(--capture-gutter), env(safe-area-inset-left));
    border-top: 1px solid var(--capture-color-border);
    background: var(--capture-color-surface);
}

.numeric-accessory[hidden] {
    display: none;
}

.numeric-accessory .btn {
    min-width: 56px;
    justify-content: center;
    font-size: var(--size-subtitle);
}

/* Record status under the title (PLAN.md §7.3): .labelbadge chip + note. */
.form-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-extra-small);
    margin: 0 0 var(--spacing-medium);
}

.form-status[hidden] {
    display: none;
}

.form-status__note {
    margin: 0;
    color: var(--capture-color-text-secondary);
    font-size: var(--size-base);
}

.form-status__note[hidden] {
    display: none;
}

/* AlisQI's validation message, shown verbatim (PLAN.md §7.4). */
.form-status__note--error {
    color: rgb(var(--textcolor-error));
}

.status-chip--error {
    background: rgb(var(--background-error));
    color: rgb(var(--textcolor-error));
}

/* Changed in AlisQI since it was opened (PLAN.md §9.3) */
.form-conflict {
    display: flex;
    width: 100%; /* .capsule is fit-content */
    flex-direction: column;
    gap: var(--spacing-medium);
    margin: 0 0 var(--spacing-medium);
    background: rgb(var(--background-warning));
    color: rgb(var(--textcolor-warning));
}

.form-conflict[hidden] {
    display: none;
}

.form-conflict__text {
    display: flex;
    gap: var(--spacing-small);
    margin: 0;
}

.form-conflict__text .icon {
    color: rgb(var(--icon-warning));
}

.form-conflict__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-small);
}

.form-conflict__actions .btn {
    min-height: var(--capture-tap-target);
}

/* ---- Round 2 (user feedback) -------------------------------------------------------------------------- */

/*
 * The fields sit in the main app's fieldset card (styles.css: white, rounded, shadow, its own padding), like the
 * main app's Add result form. Only the width is fixed here, so long content can't widen the page.
 */
.form-fieldset {
    min-width: 0;
    margin: 0;
}

/* Date / datetime with "Now" / "Today" */
.form-table .date-field {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-small);
    min-width: 0;
}

.form-table .date-field > input {
    flex: 1;
    min-width: 0;
}

.date-field__now {
    flex: none;
    min-height: var(--capture-tap-target);
    justify-content: center;
}

/*
 * Check field as an on/off switch (native feel on phones; styling-inventory deviation from the main app's
 * checkbox). Off: the input border colour; on: the main app's action colour; knob: the input background.
 */
.switch-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-medium);
    width: 100%;
    min-height: var(--capture-tap-target);
    color: var(--capture-color-text);
    cursor: pointer;
}

.switch-field__on,
.switch-field:has(.switch:checked) .switch-field__off {
    display: none;
}

.switch-field:has(.switch:checked) .switch-field__on {
    display: inline;
}

/* `.switch-field input.switch[type=checkbox]` outranks the main app's global checkbox rules (styles.css). */
.switch-field input.switch[type='checkbox'] {
    position: relative;
    flex: none;
    width: 52px;
    height: 32px;
    margin: 0;
    border-radius: 16px;
    border: 0;
    background: rgb(var(--border-input));
    cursor: pointer;
    transition: background-color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.switch-field input.switch[type='checkbox']::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgb(var(--background-input));
    box-shadow: var(--main-box-shadow);
    transition: transform 0.2s ease;
}

.switch-field input.switch[type='checkbox']:checked {
    background: rgb(var(--background-actbtn));
}

.switch-field input.switch[type='checkbox']:checked::before {
    transform: translateX(20px);
}

.switch-field input.switch[type='checkbox']::after {
    display: none; /* the main app's checkmark */
}

.switch-field input.switch[type='checkbox']:focus-visible {
    outline: solid medium rgb(var(--focus-input));
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .switch-field input.switch[type='checkbox'],
    .switch-field input.switch[type='checkbox']::before {
        transition: none;
    }
}

/* Select in radio mode: the main app's .input__radios, one 44px row per option */
.form-table .radio-field__options {
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0;
}

.form-table .radio-field__option {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    min-width: 0;
    min-height: var(--capture-tap-target);
    margin: 0;
    color: var(--capture-color-text);
    font-size: var(--capture-font-size-input);
    cursor: pointer;
}

.form-table .radio-field__option input[type='radio'] {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: rgb(var(--background-actbtn));
}

.radio-field__label {
    overflow-wrap: anywhere;
}

.select-field__search[hidden] {
    display: none;
}

/* Viewing a synced result (read-only until Edit): values stay readable, editing controls step back. */
/* Spec-marked values keep their colour, as locked fields do in the main app. */
.form-page--view .form-table input:disabled:not(.in_spec, .inner_spec, .outer_spec),
.form-page--view .form-table textarea:disabled,
.form-page--view .select-field__button:disabled:not(.in_spec, .outer_spec) {
    color: var(--capture-color-text);
    box-shadow: none;
    opacity: 1;
    -webkit-text-fill-color: var(--capture-color-text);
}

.form-page--view .select-field__button .icon,
.form-page--view .date-field__now,
.form-page--view .scan-button {
    display: none;
}

.form-page--view .switch:disabled,
.form-page--view .radio-field__option input:disabled {
    opacity: 0.7;
    cursor: default;
}

/* Form bar: Photo · Edit · Save */
.form-bar .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-small);
    min-height: var(--capture-tap-target);
}

.form-bar .btn[hidden] {
    display: none;
}

/*
 * Numeric: the main app's operator select (empty, <, >) in line with the input, like the Add result form.
 * inputResult.css hides `.operator` unless the form has `.showOperators`; here it is always available. The select
 * only takes the room of its widest option, the input gets the rest.
 */
.form-table .numeric-field {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-small);
    min-width: 0;
}

.form-table .numeric-field select.operator {
    display: block;
    flex: none;
    width: 64px;
    min-height: var(--capture-tap-target);
    font-size: var(--capture-font-size-input);
}

.form-table .numeric-field > input.numeric {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.form-page--view .form-table .numeric-field select.operator:disabled {
    color: var(--capture-color-text);
    opacity: 1;
}

/*
 * Specifications (the main app's in_spec / inner_spec / outer_spec, vendored specs.css). Numeric fields use the
 * vendored rules as they are (coloured value + icon before the operator select); these rules only add the same
 * marking to capture's own controls: the select button and its options, and the traffic light's place.
 */
.form-status__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
}

.form-status__row .status-chip[hidden] {
    display: none;
}

/* Traffic light in the Save bar: a 44px tap target around the main app's 26px badge. */
.form-bar__light {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: var(--capture-tap-target);
    min-height: var(--capture-tap-target);
    margin: 0 calc(var(--spacing-small) * -1);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.form-bar__light[hidden] {
    display: none;
}

.form-bar__light span#spectrafficlight {
    margin: 0; /* inputResult.css spaces it from the main app's toolbar buttons */
}

/* Its explanation: the main app's tooltip box (.tippy-box), above the bar. */
.form-bar__tip {
    position: absolute;
    bottom: calc(100% + var(--spacing-small));
    left: var(--capture-gutter);
    max-width: min(320px, calc(100% - var(--capture-gutter) * 2));
    padding: var(--spacing-small) var(--spacing-medium);
}

.form-bar__tip[hidden] {
    display: none;
}

.form-bar__tip .tooltip__header {
    margin-bottom: var(--spacing-extra-small);
}

/* Specifications button above the form, like the main app's next to Save (the Save bar has no room at 360px). */
.form-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-medium);
}

.form-tools[hidden] {
    display: none;
}

.form-tools .btn {
    min-height: var(--capture-tap-target);
}

/* Specifications sheet: the panel table at sheet width, values compact enough for five limits at 360px. */
.specs-overview__notes-panel {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.specs-overview__notes-panel td {
    padding: var(--spacing-extra-small) var(--spacing-small);
    font-size: var(--size-base);
    overflow-wrap: anywhere;
}

.specs-overview__notes-panel td.numeric {
    min-width: 2.5em;
}

.specs-overview__wrapper .settings-note {
    margin-bottom: var(--spacing-medium);
}

/* The icon specs.css puts before a numeric input: centred in the 44px row */
.form-table .numeric-field::before {
    align-self: center;
    height: auto;
}

/* Select button: like the main app's .selectsearch marking (icon before the value) */
.select-field__button.in_spec::before,
.select-field__button.outer_spec::before {
    flex: none;
    font-family: 'Font Awesome Pro Light';
}

.select-field__button.in_spec::before {
    content: '\f058';
    color: rgb(var(--icon-success));
}

.select-field__button.outer_spec::before {
    content: '\f057';
    color: rgb(var(--icon-error));
}

.select-field__button.outer_spec .select-field__value {
    color: rgb(var(--textcolor-error));
    font-weight: var(--fontweight-semibold);
}

/* Options in the sheet: off-spec in the error colour, in-spec green (global .in_spec), like .selectsearch */
.select-option.outer_spec .select-option__label {
    color: rgb(var(--textcolor-error));
    font-weight: var(--fontweight-semibold);
}

/*
 * specs.css styles `.outer_spec span` / `.inner_spec span` as boxed values (meant for spec values in tables). The
 * main app's select controls have no spans, so its off-spec options are only red text (`.selectsearch
 * .outer_spec`), in both themes. Capture's select button and sheet options do contain spans: undo the box there,
 * so they look like the main app's. (Radio labels need nothing: inputResult.css resets them itself.)
 */
.select-field__button.outer_spec span,
.select-field__button.inner_spec span,
.select-option.outer_spec span,
.select-option.in_spec span {
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

.select-option.outer_spec .select-option__check,
.select-field__button.outer_spec .icon {
    color: rgb(var(--icon));
}

/* The value stays left-aligned after the spec icon, like the main app's select */
.select-field__button.in_spec .select-field__value,
.select-field__button.outer_spec .select-field__value {
    flex: 1;
    text-align: start;
}