/*
 * Offer edit screen — components not covered by generic Bootstrap utilities.
 * Reuses app.css's --mh-* tokens; adds no new colour identity.
 */

/* ── Save bar ──────────────────────────────────────────────────────────── */
.mh-savebar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mh-radius-lg);
    padding: 0.6rem 0.85rem;
    box-shadow: var(--mh-shadow-sm);
    margin-bottom: 1rem;
}
.mh-savebar__right { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ── Service-window card ──────────────────────────────────────────────── */
/* Edit hierarchy is real containment: a line sits inside the window it
   belongs to, so what's on screen is what the form posts. */
.mh-wcard { border: 1px solid var(--bs-border-color); border-radius: var(--mh-radius-lg); background: var(--bs-body-bg); overflow: hidden; }
.mh-wcard + .mh-wcard { margin-top: 1rem; }

/* Two-tier header: identity on top, timing beneath. Six controls crammed
   into one row read as broken layout rather than as a container heading. */
.mh-wcard__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    padding: 0.7rem 0.85rem 0.55rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: inset 3px 0 0 var(--mh-brand);
}
.mh-wcard__title { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 220px; }
.mh-wcard__eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bs-secondary-color); }
.mh-wcard__name {
    font-size: 1.05rem;
    font-weight: 650;
    padding: 0.15rem 0.4rem;
    margin: -0.15rem -0.4rem;
    border-radius: var(--mh-radius-sm);
    border: 1px solid transparent;
    max-width: 280px;
    cursor: text;
}
.mh-wcard__name:hover { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
.mh-wcard__acts { margin-left: auto; display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center; }

.mh-wcard__when {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: flex-end;
    padding: 0.55rem 0.85rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}
.mh-whenfield { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; margin: 0; }
.mh-wcard__when-errors { flex-basis: 100%; }
.mh-wcard__when-errors .invalid-feedback { margin-top: 0; }
.mh-whenlab { color: var(--bs-secondary-color); font-weight: 600; font-size: 0.75rem; }
/* Both control types have to be narrowed here: .form-select is width:100% in
   Bootstrap, so as a flex item the serving-type picker claimed the whole row
   and wrapped onto its own line while the date and duration inputs stayed
   inline. */
.mh-wcard__when .form-control,
.mh-wcard__when .form-select { font-size: 0.875rem; width: auto; }
/* A number input's intrinsic width is far wider than a three-digit duration. */
.mh-wcard__when input[type="number"] { width: 5rem; }

.mh-wcard__body { padding: 0.8rem 0.85rem 0.9rem; }
.mh-wcard__foot { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; padding-top: 0.2rem; }
.mh-wcard__section-label { font-size: 0.8125rem; font-weight: 600; color: var(--bs-secondary-color); margin: 0.75rem 0 0.4rem; }
.mh-wcard__section-label:first-child { margin-top: 0; }

/* ── Compact line row ──────────────────────────────────────────────────── */
/* No "move to window" control: a line is removed and re-added where it
   belongs, so the only actions here are edit-in-place and remove. */
/* padding-left leaves a gutter for the Lisähuomio triangle, so the note toggle
   sits on the same row as the recipe instead of adding a second line. */
.mh-lrow { position: relative; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-body-bg); padding: 0.45rem 0.45rem 0.45rem 1.6rem; margin-bottom: 0.5rem; }
.mh-lrow__main { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mh-lrow__main .ts-wrapper { flex: 1 1 12rem; }
/* The recipe picker is a Tom Select whose control uses the full-size input
   padding from app.css; shrink it to Bootstrap's form-control-sm box so it
   lines up with the quantity input next to it. */
.mh-lrow__main .ts-wrapper .ts-control {
    min-height: calc(1.3125rem + 0.5rem + 2 * var(--bs-border-width));
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}
/* Keep the picker one line tall in every state. Tom Select gives the search
   input a 112px min-width, so on focus it wrapped under the selected recipe
   and the control grew to two lines; a long recipe name could do the same.
   Truncate the name instead, and let the input shrink. */
.mh-lrow__main .ts-wrapper .ts-control { flex-wrap: nowrap; overflow: hidden; }
.mh-lrow__main .ts-wrapper .ts-control > .item {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mh-lrow__main .ts-wrapper .ts-control > input {
    min-width: 1.5rem;
    flex: 1 1 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}
.mh-lrow__main input[type="text"].form-control,
.mh-lrow__main .form-select { width: auto; }
.mh-lrow__end { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.mh-lrow__unit { font-size: 0.875rem; color: var(--bs-secondary-color); min-width: 3rem; }
.mh-lrow__total { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 5rem; text-align: right; font-size: 0.875rem; }
/* Lisähuomio: a <details> after the main row. Its summary is taken out of the
   flow and pinned into the row's left gutter, level with the main row's
   controls, so a closed note adds no height. Same ▸ marker as
   details.mh-internal on the show page. */
.mh-lrow__note { margin: 0; }
.mh-lrow__note[open] { margin-top: 0.4rem; }
.mh-lrow__note > summary {
    position: absolute;
    top: calc(0.45rem + 1px); /* level with the 1px-inset controls of the main row */
    left: 0.3rem;
    width: 1.1rem;
    height: calc(1.3125rem + 0.5rem + 2 * var(--bs-border-width));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    list-style: none;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    border-radius: var(--mh-radius-sm);
    user-select: none;
}
.mh-lrow__note > summary::-webkit-details-marker { display: none; }
.mh-lrow__note > summary::before { content: "▸"; display: inline-block; transition: transform 0.15s; }
.mh-lrow__note[open] > summary::before { transform: rotate(90deg); }
.mh-lrow__note > summary:hover { color: var(--bs-body-color); }
.mh-lrow__note > summary:focus-visible { outline: 2px solid var(--mh-brand); outline-offset: 1px; }
.mh-lrow__note .form-control { font-size: 0.8125rem; }
@media (prefers-reduced-motion: reduce) {
    .mh-lrow__note > summary::before { transition: none; }
}

/* ── Alternative-group box ────────────────────────────────────────────── */
.mh-altbox { border: 1px solid var(--mh-brand-line); border-radius: var(--bs-border-radius); background: var(--mh-brand-light); padding: 0.6rem; margin-bottom: 0.5rem; }
.mh-altbox__head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.mh-altbox__head input.form-control { width: auto; }
.mh-altbox__foot { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; padding-top: 0.2rem; }
.mh-altbox__sum { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.8125rem; color: var(--bs-secondary-color); }
.mh-altbox .mh-lrow { background: var(--bs-body-bg); }