/* ─────────────────────────────────────────────────────────────────────────────
   The post-load form, dressed for a host that is not the sales app.

   The sales handset already styles these class names globally in its own app.css
   and does not load this file. This exists for the back office, which is a
   Bootstrap site — and `.card`, `.row`, `.btn` and `.field` are all names
   Bootstrap already owns. So every rule here is scoped under `.sales-postload`,
   the wrapper the drawer puts around the form: inside it these mean what the
   sales app means by them, and outside it nothing has moved.

   The variables are redeclared on the wrapper rather than on :root for the same
   reason — the back office has its own palette and this must not repaint it.
   ───────────────────────────────────────────────────────────────────────────── */

.sales-postload {
    /* TrukZone green, matching the app icon and app.css. Declared again here rather than
       inherited because this form is also rendered inside the back office, which has its own
       palette — the form is meant to look like the Sales app wherever it is shown. */
    --brand: #0e6a4c;
    --brand-dark: #0a5239;
    --brand-soft: #ecfdf5;

    --ink: #1e293b;
    --ink-soft: #64748b;
    --line: #e2e8f0;
    --surface: #ffffff;
    --ground: #f8fafc;

    color: var(--ink);
    font-size: 15px;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.sales-postload .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
}

.sales-postload .muted { color: var(--ink-soft); font-size: 13px; }

/* ── Controls ────────────────────────────────────────────────────────────── */

.sales-postload .field { margin-bottom: 12px; }
.sales-postload .field label {
    display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px;
}

/* 16px, not 14: anything smaller and mobile Safari zooms the page on focus, which
   on a drawer means the form scrolls sideways under the salesperson's thumb. */
.sales-postload input,
.sales-postload select,
.sales-postload textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
}

.sales-postload input:focus,
.sales-postload select:focus,
.sales-postload textarea:focus {
    outline: none;
    border-color: var(--brand);
}

.sales-postload .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.sales-postload .btn:disabled { opacity: .5; }
.sales-postload .btn-block { width: 100%; }

/* WhatsApp's own green, because that is what the button opens. The brand purple here
   would read as a second way of posting the load rather than as sending it on. */
.sales-postload .btn-whatsapp { background: #25d366; color: #07301a; }

/* ── Typeahead ───────────────────────────────────────────────────────────── */

.sales-postload .ss-field { position: relative; }

.sales-postload .ss-list {
    position: absolute;
    left: 0; right: 0;
    z-index: 20;
    margin-top: 2px;
    max-height: 46vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}

.sales-postload .ss-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 12px;
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    font-size: 15px;
    color: var(--ink);
}

.sales-postload .ss-item:last-child { border-bottom: none; }
.sales-postload .ss-item .ss-detail {
    display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px;
}
.sales-postload .ss-item.ss-new {
    color: var(--brand-dark); background: var(--brand-soft); font-weight: 600;
}

/* ── Banners ─────────────────────────────────────────────────────────────── */

.sales-postload .banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 10px;
}

.sales-postload .banner-warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.sales-postload .banner-stop { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Odds and ends ───────────────────────────────────────────────────────── */

.sales-postload .spinner {
    width: 22px; height: 22px;
    border: 3px solid var(--line);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: sales-postload-spin .8s linear infinite;
}

@keyframes sales-postload-spin { to { transform: rotate(360deg); } }

.sales-postload .row { display: flex; gap: 8px; align-items: center; }
.sales-postload .grow { flex: 1; min-width: 0; }

/* The sales app pins this above its tab bar. A drawer has no tab bar, and sticky
   inside a scrolling panel puts the button halfway up the form. */
.sales-postload .action-bar {
    position: static;
    margin-top: 12px;
    padding: 8px 0 2px;
    background: transparent;
}

/* ── Dictating a load ────────────────────────────────────────────────────── */

/* The microphone reads as a second way of starting the form, not as a second way
   of posting it — outlined in the brand rather than filled with it, so it cannot
   be mistaken for the one solid button on this screen that puts a load on the
   board. */
.sales-postload .btn-voice {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border: 1px dashed var(--brand);
}

.sales-postload .voice { border-color: var(--brand); }

.sales-postload .voice-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}

.sales-postload .voice-title { flex: 1; font-weight: 600; font-size: 14px; }

.sales-postload .voice-close {
    width: 32px; height: 32px; padding: 0;
    border: none; border-radius: 16px;
    background: transparent; color: var(--ink-soft); font-size: 15px;
}

/* The turns so far. Capped and scrolled: a long call can run to a dozen of them
   and the boxes being filled in matter more than the history of filling them. */
.sales-postload .voice-log {
    max-height: 33vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 10px;
}

.sales-postload .voice-turn {
    padding: 8px 10px; border-radius: 12px;
    font-size: 14px; line-height: 1.35; max-width: 88%;
}

.sales-postload .voice-turn.mine {
    align-self: flex-end;
    background: var(--brand-soft); color: var(--brand-dark);
    border-bottom-right-radius: 4px;
}

.sales-postload .voice-turn.theirs {
    align-self: flex-start;
    background: var(--ground); color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
}

.sales-postload .voice-live {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; margin-bottom: 8px;
    border-radius: 12px;
    background: var(--ground);
    font-size: 14px; color: var(--ink);
    min-height: 44px;
}

/* Proof the phone is listening, for the six seconds in which nothing else on the
   screen changes. A microphone that looks inert is one people press twice, and the
   second press ends the recording they were halfway through. */
.sales-postload .voice-dot {
    width: 12px; height: 12px; border-radius: 6px;
    background: #dc2626;
    animation: sales-voice-pulse 1s ease-in-out infinite;
    flex: none;
}

@keyframes sales-voice-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.8); }
}

/* The question, in the voice of the person asking it — larger than a banner and
   without the warning colours, because nothing has gone wrong. */
.sales-postload .voice-ask {
    padding: 10px 12px; margin-bottom: 8px;
    border-left: 3px solid var(--brand);
    background: var(--brand-soft); color: var(--brand-dark);
    border-radius: 0 12px 12px 0;
    font-size: 15px; font-weight: 600;
}

.sales-postload .voice-banner { margin: 8px 0 0; }
.sales-postload .voice-manual { margin-top: 8px; }

/* ── Sending a posted load to the group ──────────────────────────────────────
   The message is written when the load posts, so this is normally one tap. The
   editor underneath is for the times the translator got a firm or a village
   wrong — it is about to reach two hundred drivers and cannot be recalled. */

.sales-postload .shareload { margin-top: 8px; }
.sales-postload .shareload-tools { gap: 6px; margin-top: 6px; }

.sales-postload .shareload-text {
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    /* Vertical only: a textarea a salesperson can drag wider than the phone is
       one that puts a horizontal scrollbar on the whole screen. */
    resize: vertical;
}

.sales-postload .shareload-note { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; }