/**
 * The Ausfüllen view: the same fields as the printed sheet, asked one at a
 * time. Controls come from controls.css; this file only lays them out.
 */

.vo-fill {
    display: none;
}

.vo-fill__section {
    background: var(--bg-surface);
    border-radius: var(--r-lg);
    margin: 0 0 var(--sp-7);
    padding: var(--sp-6) var(--sp-6) var(--sp-7);
    box-shadow: var(--shadow-card);
}

.vo-fill__section-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--chrome-accent-dark);
    margin: 0 0 var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: var(--bw) solid var(--border-soft);
}

/* A wide child must scroll inside itself, never widen the row it is in. */
.vo-fill__row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    min-width: 0;
}

.vo-fill__row + .vo-fill__row {
    border-top: var(--bw) solid var(--border-row);
}

/* The row under the pointer is the field the card is answering, and it washes
   in and out rather than switching, so a pointer crossing the form does not
   strobe it. */
.vo-fill__row[data-field] {
    border-radius: var(--r-md);
    transition: background var(--t-base) var(--ease);
}

.vo-fill__row[data-field]:hover {
    background: var(--hover-wash);
}

.vo-fill__row-head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-height: var(--sp-9);
}

.vo-fill__label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--text);
}

.vo-fill__hint {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--text-muted);
    margin: 0;
}

/* The stripe marks the row; the message repeats what the validation dialog
   says about it word for word. */
.vo-fill__row--invalid {
    border-left: var(--bw-stripe) solid var(--err-strong);
    padding-left: var(--sp-5);
}

.vo-fill__row--invalid .vo-input,
.vo-fill__row--invalid .vo-textarea {
    border-color: var(--err-strong);
}

/* `__error` belongs to `Vo.Validate`, which puts it into a row for one verdict
   and takes it out again on the next keystroke. A row that carries its own
   standing message says the same thing in `__note`, which that sweep leaves
   alone. */
.vo-fill__error,
.vo-fill__note {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: var(--lh-normal);
    color: var(--err-fg);
    margin: 0;
}

/* An entry with a second way to fill it in: the button keeps its square, the
   entry takes what is left. */
.vo-fill__with-action {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.vo-fill__with-action .vo-input {
    flex: 1 1 auto;
    min-width: 0;
}

.vo-fill__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.vo-fill__actions .vo-btn {
    flex: 1 1 auto;
    justify-content: center;
}

.vo-fill__multi {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* `min-width: 0` is the load-bearing part: a table is a `max-content`-sized
   item, and in the column flex box a row is, that makes the *row* as wide as
   the table — which pushes the whole Ausfüllen view sideways and takes the
   rest of the form off screen with it. */
.vo-fill__tablewrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    border: var(--bw) solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--bg-surface);
}

.vo-fill__table {
    border-collapse: collapse;
    min-width: var(--measure-sm);
    width: 100%;
    font-size: var(--fs-sm);
}

.vo-fill__table th,
.vo-fill__table td {
    padding: 0;
    text-align: left;
}

.vo-fill__table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-raise-1);
    padding: var(--sp-4) var(--sp-5);
    background: var(--brand-teal-tint);
    color: var(--chrome-accent-dark);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: var(--bw) solid var(--border-soft);
}

/* Held at the left edge while the row scrolls past it, so the line being
   filled in is always identified. */
.vo-fill__table-num {
    position: sticky;
    left: 0;
    z-index: var(--z-raise-2);
    width: var(--col-num);
    min-width: var(--col-num);
    padding: 0 var(--sp-4);
    background: var(--bg-surface);
    color: var(--chrome-muted);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    text-align: right;
    border-right: var(--bw) solid var(--border-soft);
}

.vo-fill__table thead .vo-fill__table-num {
    z-index: var(--z-raise-3);
    background: var(--brand-teal-tint);
}

.vo-fill__table tbody tr + tr .vo-fill__table-num,
.vo-fill__table tbody tr + tr td {
    border-top: var(--bw) solid var(--border-row);
}

/* The ruling of the table is the control's outline: a bordered control inside
   a bordered cell is two boxes for one thing. */
.vo-fill__table-input {
    border: none;
    border-radius: 0;
    background: transparent;
    min-height: var(--touch-h);
    padding: var(--sp-4) var(--sp-5);
    min-width: var(--col-cell);
}

.vo-fill__table-input:focus {
    outline: var(--focus-w) solid var(--focus-ring);
    outline-offset: var(--focus-inset);
    background: var(--bg-input-focus);
}

/* The whole line is tinted rather than the one cell, because the rule is about
   the line: a confirmed treatment needs its date, its measure and the
   patient's signature together. */
.vo-fill__table tbody tr.vo-fill__table-row--invalid td,
.vo-fill__table tbody tr.vo-fill__table-row--invalid .vo-fill__table-num {
    background: var(--err-bg);
}

.vo-fill__table tbody tr.vo-fill__table-row--invalid .vo-fill__table-num {
    color: var(--err-fg);
    font-weight: var(--fw-bold);
}

.vo-fill__table-input.invalid {
    outline: var(--focus-w) solid var(--err-strong);
    outline-offset: var(--focus-inset);
}

.vo-fill__table td:first-of-type .vo-fill__table-input {
    min-width: calc(var(--col-cell) + var(--sp-5));
}

.vo-fill__checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.vo-fill__checkbox {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-3) 0;
    cursor: pointer;
    font-size: var(--fs-md);
    color: var(--text);
    min-height: var(--touch-h);
}

.vo-fill__choice {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.vo-fill__choice-item {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border: var(--bw) solid var(--border-control);
    border-radius: var(--r-md);
    font-size: var(--fs-md);
    color: var(--text);
    background: var(--bg-surface);
    min-height: var(--touch-h);
    cursor: pointer;
}

.vo-fill__choice-item:has(input:checked) {
    background: var(--brand-teal-tint);
    border-color: var(--chrome-accent);
}

.vo-fill__pair {
    display: flex;
    gap: var(--sp-4);
}

.vo-fill__input--grow {
    flex: 1 1 auto;
}

.vo-fill__input--be {
    flex: 0 0 calc(var(--sp-11) * 2);
    text-align: center;
}

/* The card answers a field on desktop, so the per-field button is the mobile
   way in and nothing else. */
@media (min-width: 769px) {
    .vo-fill__help {
        display: none;
    }
}