.mobile-form .mobile-form-row > .form-label,
.mobile-form .mobile-form-row > .col-form-label {
    display: block;
    margin-bottom: .5rem;
    padding: 0;
    font-weight: 600;
}

.mobile-form .form-control,
.mobile-form .form-select {
    min-height: 3rem;
    padding: .75rem;
    font-size: 1rem;
}

.mobile-form textarea.form-control {
    min-height: 8rem;
}

/* Containing block for the visually hidden input, see mobile_cibor_form.html.twig */
.mobile-form .mobile-choice {
    position: relative;
    /* Hands the height of the grid cell to the label, so two choices next to each other end up
       equally high even when only one of them wraps onto a second line. */
    display: flex;
}

.mobile-form .mobile-choice-label {
    --mobile-choice-indicator-size: 1.25rem;
    --mobile-choice-padding-inline: 1rem;
    /* btn-outline-secondary fills grey when selected; Bootstrap reads these for the checked state */
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-color: var(--white);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    width: 100%;
    min-height: 3rem;
    margin: 0;
    padding: .75rem var(--mobile-choice-padding-inline);
    /* The form sits inside .bold-form-labels, which only exempts .form-check labels from bold */
    font-weight: 400;
    text-align: left;
    white-space: normal;
}

/*
    Without a tick box the styled buttons read as plain buttons. This draws the checkbox/radio
    control inside the label so it stays obvious what kind of choice it is: a square box for
    multi-select (checkbox), a circle for single-select (radio).
*/
.mobile-form .mobile-choice-label::before {
    content: "";
    flex: 0 0 auto;
    width: var(--mobile-choice-indicator-size);
    height: var(--mobile-choice-indicator-size);
    border: 2px solid var(--primary);
    background-color: var(--white);
}

.mobile-form input[type="checkbox"].btn-check + .mobile-choice-label::before {
    border-radius: .25rem;
}

.mobile-form input[type="radio"].btn-check + .mobile-choice-label::before {
    border-radius: 50%;
}

/* When selected the button fills with the primary color, so the box keeps a white outline. */
.mobile-form .btn-check:checked + .mobile-choice-label::before {
    border-color: var(--white);
}

/*
    The mark sits on top of that box and is masked rather than drawn as a colored SVG, so its color
    comes from --primary (cibor-colors.css) instead of a hardcoded hex.
*/
.mobile-form .btn-check:checked + .mobile-choice-label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--mobile-choice-padding-inline);
    width: var(--mobile-choice-indicator-size);
    height: var(--mobile-choice-indicator-size);
    transform: translateY(-50%);
    background-color: var(--primary);
}

.mobile-form input[type="checkbox"].btn-check:checked + .mobile-choice-label::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m4 8 3 3 5-6'/%3E%3C/svg%3E") no-repeat center / .75rem;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m4 8 3 3 5-6'/%3E%3C/svg%3E") no-repeat center / .75rem;
}

.mobile-form input[type="radio"].btn-check:checked + .mobile-choice-label::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2.5' fill='%23000'/%3E%3C/svg%3E") no-repeat center / .75rem;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2.5' fill='%23000'/%3E%3C/svg%3E") no-repeat center / .75rem;
}

.mobile-form .btn-check:focus-visible + .mobile-choice-label {
    outline: .25rem solid color-mix(in srgb, var(--primary) 25%, transparent);
    outline-offset: .125rem;
}

/*
    A disabled field has to stay readable but must not look editable, so it turns grey.
*/
.mobile-form .form-control:disabled,
.mobile-form .form-select:disabled {
    color: var(--gray-600);
    border-color: var(--gray-300);
    background-color: var(--gray-100);
    cursor: not-allowed;
}

/*
    The read-only InlineEditor keeps rendering its own white editable, so it has to be greyed out
    through the disabled textarea it is paired with (see ckeditor5_controller.js).
*/
.mobile-form textarea:disabled + .ck.ck-editor__editable.ck-inline-host {
    color: var(--gray-600);
    border-color: var(--gray-300);
    background-color: var(--gray-100);
    cursor: not-allowed;
}

.mobile-form .btn-check:disabled + .mobile-choice-label {
    color: var(--gray-600);
    border-color: var(--gray-300);
    background-color: var(--gray-100);
}

.mobile-form .btn-check:disabled + .mobile-choice-label::before {
    border-color: var(--gray-300);
}

/*
    Only mute the label when the field itself is disabled: a choice group may disable a single
    option (e.g. the "last uploaded PDF" option of reportSource) while the field stays editable.
*/
.mobile-form .mobile-form-row:has(> :disabled) > .form-label,
.mobile-form .mobile-form-row:has(> :disabled) > .col-form-label {
    color: var(--gray-600);
}

.mobile-form .form-floating {
    position: static;
}

.mobile-form .form-floating > .form-control,
.mobile-form .form-floating > .form-control-plaintext,
.mobile-form .form-floating > .form-select {
    height: auto;
    min-height: 3rem;
    padding: .75rem;
}

.mobile-form .form-floating > label {
    position: static;
    width: auto;
    height: auto;
    padding: 0 0 .5rem;
    transform: none;
    opacity: 1;
}

.mobile-form .form-floating > .form-control:focus ~ label,
.mobile-form .form-floating > .form-control:not(:placeholder-shown) ~ label,
.mobile-form .form-floating > .form-select ~ label {
    transform: none;
    opacity: 1;
}

/*
    An autocomplete keeps its search on a phone (a business unit can have well over a hundred flaw
    types, so the full list is never an option), but its selected values must not stay the tiny tags
    Tom Select renders by default. Turning the control into a column splits it into the two things a
    field engineer does: read or remove what is already selected, in full width rows, and add one
    through the search box that sits right below them.
*/
.mobile-form .form-select-autocomplete .ts-wrapper.multi {
    /* Bootstrap draws the select caret here. Full width rows need that right edge more than they
       need an arrow next to them, and the placeholder of the search box says what the field does */
    background-image: none;
}

.mobile-form .form-select-autocomplete .ts-wrapper.multi .ts-control {
    /* Without that caret the control no longer has to keep 2.25rem of its right side free */
    --ts-pr-caret: 0px;
    --ts-pr-min: .5rem;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    /* tom-select.css raises the top padding to clear the floating label, which the mobile theme
       replaces with a label above the field */
    padding: .5rem;
}

.mobile-form .form-select-autocomplete .ts-wrapper.multi .ts-control > .item {
    justify-content: space-between;
    min-height: 3rem;
    margin: 0;
    /* The right side is left to the remove button, which brings its own width */
    padding: .5rem 0 .5rem .75rem;
    border-radius: var(--bs-border-radius);
    font-size: 1rem;
    /* Flaw type names are long, so they wrap instead of being cut off */
    white-space: normal;
}

/*
    Removing is a daily action, so the target covers the full row: at least 44px wide, and the
    negative block margins let it grow through the padding of the row up to its edges.
*/
.mobile-form .form-select-autocomplete .ts-wrapper.multi .ts-control > .item > .remove {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    min-width: 2.75rem;
    margin: -.5rem 0 -.5rem .5rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
}

/* Tom Select forces padding and min-height on its search input, hence the plain height */
.mobile-form .form-select-autocomplete .ts-wrapper.multi .ts-control > input {
    flex: 0 0 auto;
    height: 2.75rem;
    min-width: 0;
}

.mobile-form .form-select-autocomplete .ts-dropdown .option {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: .5rem .75rem;
}

/* Keeps the matches inside the viewport instead of running past the fold */
.mobile-form .form-select-autocomplete .ts-dropdown-content {
    max-height: min(50vh, 20rem);
}

.mobile-form .ck.ck-editor .ck-editor__main,
.mobile-form .ck-editor__editable_inline {
    min-height: 10rem;
}

.mobile-form .ck.ck-editor .ck-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
}

/*
    A report form is long on a phone, so the photo and save buttons ride along in a bar that floats
    just above the PwaFooter. It stays in flow (sticky, not fixed): that reserves its own space at
    the end of the form, so scrolling down always lifts the last fields out from under it, and the
    blocks below the form keep the footer height as their only bottom offset.
*/
.mobile-form .mobile-form-actions {
    position: sticky;
    bottom: var(--pwa-footer-height);
    /* Must stay below modals/popovers/tooltips and below the sticky footer (1020) */
    z-index: 999;
    /* Bleed through the container gutters so the bar reads as a full width bar */
    margin-block: .5rem 0;
    margin-inline: calc(-.5 * var(--bs-gutter-x, 1.5rem));
    padding: .5rem calc(.5 * var(--bs-gutter-x, 1.5rem));
    border-top: 1px solid var(--gray-300);
    background-color: var(--white);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .1);
}

/*
    Taking a photo, picking one from the gallery and saving belong next to each other, but two of
    those three buttons come from the uploader component, wrapped in its own boxes. Those wrappers
    hand their box over so all three buttons end up as flex children of the bar and can split it.
*/
.mobile-form .mobile-form-actions .mobile-actions-passthrough {
    display: contents;
}

/* An equal share each, whatever the bar ends up holding: the camera button is only there for
   image-only uploads and the save button only when the form renders one. No Bootstrap utility sets
   a zero flex-basis, and without it a long label like "Kies uit galerij" would claim more than its
   share instead of wrapping. */
.mobile-form .mobile-form-actions .mobile-action-button {
    flex: 1 1 0;
    min-width: 0;
    /* On the item instead of align-items on the bar: these buttons reach the bar through a
       display:contents wrapper. Stretching each item to the row keeps the three equally tall even
       when one label wraps and the others do not. */
    align-self: stretch;
    /* Bootstrap's own button variable, because .btn would beat a .small class on font-size. A third
       of a phone is too narrow for the 1rem default. */
    --bs-btn-font-size: .8125rem;
}

/* Not a button, so it drops onto its own line below the row instead of taking a share of it */
.mobile-form .mobile-form-actions .invalid-feedback {
    flex: 1 0 100%;
}