/* =============================================================================
 * offers.css — Ops v4 · the offers and replies screens. A3 owns this file.
 *
 * LAYOUT ONLY. The kit owns colour and meaning.
 * -------------------------------------------------------------------------
 * CONTRACTS §9: "Agents use the kit and do not restyle it." So nothing here
 * redefines a status colour, a date tile, a face, a button height or a sheet.
 * What is here is the arrangement of the panels the two boards lay out — the
 * three-column replies screen, the people / offer / phone split, the booking
 * table — which is genuinely this screen's business and nobody else's.
 *
 * The one place a colour appears is `--opsv4-card-bg` and the hairlines, which
 * are surface chrome and carry no status meaning. A status colour never appears
 * in this file; a screen that needs one asks LRESOpsV4Kit.STATUS for it, so
 * there is exactly one definition of "green means done" in the build.
 *
 * Loaded once from index.html. With ops_v4_crew off nothing renders these class
 * names, so the stylesheet's mere presence changes nothing — the same promise
 * the kit's "renders nothing on load" test pins on the JS side.
 * ========================================================================== */

.opsv4-offers-root,
.opsv4-replies-root {
    font-family: Inter, Arial, sans-serif;
    color: #0F1419;
    padding: 20px 32px 28px;
    max-width: 1560px;
    margin: 0 auto;
}

/* ── The card ───────────────────────────────────────────────────────────────
   One rounded white panel. Every section on both boards is one of these, so it
   is defined once rather than inline on each. */
.opsv4-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.opsv4-h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

/* One person, one line. Used on the crew list, the sent list and the vans. */
.opsv4-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 14px;
    background: #F4F5F7;
    min-width: 0;
}

/* ── Step 7 · vans, hotels, kit ─────────────────────────────────────────────
   Narrow left column of what is allocated, wide right column of the letter, so
   the ops manager reads the request itself rather than a summary of it. */
.opsv4-alloc {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 16px;
}

.opsv4-alloc-side {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.opsv4-rapid {
    flex-grow: 1;
    min-width: 0;
}

/* The email, shown as an email — a bordered block, not a form. Reading it as a
   letter is what makes "change anything before it goes" a real offer. */
.opsv4-letter {
    border: 2px solid #E5E7EB;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

/* The booking table. Scrolls inside itself on a narrow screen rather than
   pushing the page sideways. */
.opsv4-rooms {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    display: block;
    overflow-x: auto;
}

.opsv4-rooms th,
.opsv4-rooms td {
    padding: 6px 8px;
    text-align: left;
    border-top: 1px solid #F1F3F5;
    white-space: nowrap;
}

.opsv4-rooms thead th {
    background: #F4F5F7;
    font-weight: 800;
    border-top: none;
}

/* ── Step 8 · the offer ─────────────────────────────────────────────────────
   People, the offer, the phone. The phone is fixed-width because it is a
   picture of a phone; the offer takes whatever is left. */
.opsv4-offer {
    display: flex;
    gap: 16px;
    align-items: stretch;
    margin-top: 16px;
}

.opsv4-people {
    width: 330px;
    flex-shrink: 0;
    padding: 14px;
    gap: 6px;
}

.opsv4-detail {
    flex-grow: 1;
    min-width: 0;
}

.opsv4-phone {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Step 10 · replies ──────────────────────────────────────────────────────
   Crew, gaps, back-and-forth. The gaps column grows because it is the one that
   needs the ops manager; the other two are reference. */
.opsv4-replies-main {
    display: flex;
    gap: 16px;
    align-items: stretch;
    margin-top: 16px;
}

.opsv4-crew {
    width: 400px;
    flex-shrink: 0;
    padding: 16px;
    gap: 6px;
}

.opsv4-gaps {
    flex-grow: 1;
    min-width: 0;
}

.opsv4-feed {
    width: 420px;
    flex-shrink: 0;
    gap: 8px;
}

/* ── Secondary button ───────────────────────────────────────────────────────
   Outlined, never green. There is ONE big green button per screen (CONTRACTS
   §9) and "Withdraw" is not it — a destructive action that looks like the
   primary one is how somebody takes an offer back by reflex. 44px, not 56px,
   for the same reason: it must be comfortably tappable and visibly secondary. */
.opsv4-ghost {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    border: 2px solid #E5E7EB;
    background: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    color: #0F1419;
    cursor: pointer;
    font-family: inherit;
}

.opsv4-ghost:hover {
    background: #F4F5F7;
}

/* Focus is never removed — these screens are used with a keyboard in the ops
   room and the boards set a 3px ring. */
.opsv4-offers-root button:focus-visible,
.opsv4-offers-root a:focus-visible,
.opsv4-replies-root button:focus-visible,
.opsv4-replies-root a:focus-visible {
    outline: 3px solid #009A42;
    outline-offset: 2px;
}

/* ── Narrow screens ─────────────────────────────────────────────────────────
   An ops manager opens these on a laptop and on a tablet in the yard. Below
   1200px the columns stack rather than shrink: a 200px-wide letter is not a
   letter, and a 200px-wide phone preview is not a preview. */
@media (max-width: 1200px) {
    .opsv4-offers-root,
    .opsv4-replies-root {
        padding: 16px;
    }

    .opsv4-alloc,
    .opsv4-offer,
    .opsv4-replies-main {
        flex-direction: column;
    }

    .opsv4-alloc-side,
    .opsv4-people,
    .opsv4-phone,
    .opsv4-crew,
    .opsv4-feed {
        width: auto;
    }
}