/*
 * Plan / request summary — the read-back of what a user answered.
 *
 * The same grid is built in three places (Views/Activity/RequestView.cshtml server-side, and
 * wizard-engine.js / wizard-create.js while the wizard is still open), so it is styled once here
 * and every one of them gets the same behaviour. request-summary.js is the other half: it measures
 * each row and decides its layout — see the LONG QUESTIONS note below.
 *
 * LONG QUESTIONS. A label is a wizard question, and questions are sentences: "What adds the most
 * sugar to a typical day?" is wider than the column it lands in. The label used to be unshrinkable,
 * which meant the question pushed the ANSWER — the only part the reader came for — down to an
 * ellipsis. That is backwards, so:
 *
 *   1. The answer holds a floor of the row's width and the question gives way first.
 *   2. A question wide enough to crowd the answer moves onto its own line (--stack), which is
 *      usually all it takes: a full question fits the width of a column even when it cannot fit
 *      half of one.
 *   3. Whatever is still too long is cut to one line and the row grows a chevron. Opening the row
 *      shows the question and the answer in full, wrapped. Nothing expands on its own.
 *
 * Steps 2 and 3 are applied by the script, from measurement — the row markup carries no hint of how
 * long its text is. Without the script the row still reads correctly: rule 1 is plain CSS, and both
 * halves ellipsize rather than overflowing.
 */

/* ── The block ───────────────────────────────────────────────── */

.request-details {
    background-color: var(--bs-secondary-bg);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Two equal columns; a group holding wrapping free text spans both.
   minmax(0, …) rather than a bare 1fr: a bare one is minmax(auto, 1fr), and `auto` lets a column
   grow to its widest unbreakable content — one long question then widens its own column, takes the
   room from the other, and pushes the grid past the panel it sits in. Zero as the floor makes the
   halves genuinely equal and hands the shrinking down to the rows, which know what to give up. */
.request-groups-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
}

.req-group {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    padding: 4px 6px;
}

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

/* Hidden until schedule/delivery is saved. */
.req-group--pending { display: none; }

/* Group title (wizard step name) */
.req-group-title {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: #2563eb;
    line-height: 1.2;
    padding-bottom: 2px;
    margin-bottom: 3px;
    border-bottom: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .req-group-title { color: #93c5fd; }

/* ── One question and its answer ─────────────────────────────────
   Question and answer on one line while both fit. The right-hand gutter is always reserved, so the
   chevron appearing on a row never re-flows the text it belongs to. */

.req-field-row {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 1px;
    padding-right: 15px;
    border-radius: 4px;
    line-height: 1.3;
}

.req-field-row:last-child { margin-bottom: 0; }

/* Shrinks and ellipsizes; the answer does not give way to it. */
.req-field-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    color: var(--bs-secondary-color);
    opacity: 0.72;
    line-height: 1.4;
}

/* min-width is the floor rule: however long the question, the answer keeps this much of the row. */
.req-field-value {
    flex: 1 1 auto;
    min-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.99rem;
    font-weight: 600;
    color: var(--bs-body-color);
    line-height: 1.4;
}

/* STACKED — the question was wide enough to crowd the answer, so it takes the line above it
   (request-summary.js). Both halves then have the full column to themselves. */
.req-field-row--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 3px;
}

.req-field-row--stack > .req-field-label,
.req-field-row--stack > .req-field-value {
    flex: none;
    width: 100%;
    min-width: 0;
}

/* BLOCK — free text (a textarea answer). The label is on its own line by construction and the value
   wraps; it is held to a few lines until the reader opens it. */
.req-field-row--block {
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    margin-top: 3px;
}

.req-field-row--block .req-field-label { line-height: 1.2; }

.req-field-value--wrap {
    white-space: normal;
    font-size: 0.955rem;
    line-height: 1.35;
    width: 100%;
    word-break: break-word;
}

/* Free text over 50 chars: smaller font (height grows naturally). */
.req-field-value--wrap-long { font-size: 0.91rem; }

.req-field-row:not(.req-field-row--open) .req-field-value--wrap {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Rows the reader can open ────────────────────────────────────
   The class is added by the script only when something really is cut off, so a row that fits never
   looks clickable and never grows a control that does nothing. */

.req-field-row--clampable { cursor: pointer; }

.req-field-row--clampable:hover { background: var(--bs-secondary-bg); }

/* Open: everything wraps, nothing is cut. */
.req-field-row--open .req-field-label,
.req-field-row--open .req-field-value {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

.req-field-row--open .req-field-value--wrap { display: block; }

/* The chevron. Dimmed until the row is under the cursor: opening a row is optional, and the answer
   beside it is what the block is for. The whole row is the click target — this is here to be seen,
   and to give the keyboard something to land on. */
.req-field-toggle {
    position: absolute;
    top: -2px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--bs-secondary-color);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity .14s, color .14s, transform .16s;
}

.req-field-toggle svg { width: 12px; height: 12px; display: block; }

.req-field-row--clampable:hover .req-field-toggle,
.req-field-toggle:hover { opacity: 1; color: var(--bs-body-color); }

.req-field-toggle:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.45);
}

.req-field-row--open .req-field-toggle { transform: rotate(180deg); }

/* ── Schedule rows (framework fields, short labels by construction) ── */

.req-tw-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 2px;
    line-height: 1.35;
}

.req-tw-row:last-child { margin-bottom: 0; }

.req-tw-label {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    color: var(--bs-secondary-color);
    opacity: 0.72;
    flex-shrink: 0;
}

.req-tw-val {
    font-size: 0.99rem;
    font-weight: 700;
    color: var(--bs-body-color);
    min-width: 0;
    word-break: break-word;
}

/* ── Narrow ──────────────────────────────────────────────────── */

/* Below this a column is too narrow for a question and an answer to share it at all — one column
   gives every row the whole width and most of them stop needing to be opened. */
@media (max-width: 500px) {
    .request-groups-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .request-details { padding: 6px 8px; }
    .request-groups-grid { gap: 4px; }
    .req-group { padding: 4px 5px; }

    .req-group-title {
        font-size: 0.84rem;
        margin-bottom: 2px;
        padding-bottom: 2px;
    }

    .req-field-label { font-size: 0.70rem; }
    .req-field-value { font-size: 1.09rem; }
    .req-field-value--wrap { font-size: 1.04rem; }
    .req-field-value--wrap-long { font-size: 0.99rem; }
    .req-tw-label { font-size: 0.70rem; }
    .req-tw-val { font-size: 1.09rem; }
}

@media (prefers-reduced-motion: reduce) {
    .req-field-toggle { transition: none; }
}