/* ─────────────────────────────────────────────────────────────────────────────
   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 {
    --brand: #7c3aed;
    --brand-dark: #6d28d9;
    --brand-soft: #f5f3ff;

    --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;
}