/* ============================================================================
 * Wex-Sales price list (F8) and the FG mapping screen.
 *
 * Split out of app.css on 19-08-2026 (was lines 1205-1220, 1316-1418). Rules are the
 * originals, sliced not retyped.
 * ========================================================================== */

/* -------------------------------------------- Wex-Sales price list (F8) */
/* Three filters on one line, wrapping to their own rows when there is no
   room. The search box takes whatever width is left over; the two dropdowns
   keep a readable minimum so a long category name is not clipped. */
.price-list__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 0.9rem 0 1rem;
}

.price-list__filters .field { margin: 0; }
.price-list__filters .field:first-child { flex: 1 1 18rem; }
.price-list__filters select { min-width: 12rem; }

/* ---------------------------------------------------- Wex-Sales FG mapping */
/* One row per brand on the product detail: which finished-goods code this
   brand is priced against, and what that price currently is. The price is a
   floor for a hand-typed rate, never a default — see src/WexSales.php. */
.fg-list { display: flex; flex-direction: column; gap: 0.45rem; }
.fg-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fg-row__brand {
    flex: 0 0 5.5rem; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px; color: var(--slate, #55648A);
}
.fg-row input { flex: 0 0 8rem; }
.fg-row__status { font-size: 0.72rem; color: var(--slate, #55648A); }
.fg-row__status--ok { color: var(--cyan-ink, #0A7A97); font-weight: 600; }
.fg-row__status--bad { color: var(--logout-red, #e05c5c); font-weight: 600; }
.fg-row__status--down { color: #8a5a12; font-weight: 600; }

/* Search results inside the FG picker modal. The price list carries several
   near-identical names per grade at different prices, so each row shows the
   code, the full name and the price — enough to choose between them. */
.fg-results { display: flex; flex-direction: column; gap: 2px; margin-top: 0.6rem; max-height: 46vh; overflow-y: auto; }
.fg-result {
    display: grid; grid-template-columns: 5rem 1fr auto; gap: 0.6rem; align-items: center;
    width: 100%; padding: 0.5rem 0.6rem; text-align: left;
    background: #fff; border: 1px solid var(--border-grey, #E3E4E9);
    border-radius: var(--radius-input, 6px); cursor: pointer; font: inherit;
}
.fg-result:hover { background: var(--pale-cyan, #EAF7FA); border-color: var(--cyan-ink, #0A7A97); }
.fg-result--linked { border-color: var(--cyan-ink, #0A7A97); border-width: 2px; }
.fg-result__name .badge { margin-left: 0.4rem; vertical-align: middle; }
.fg-result__code { font-size: 0.72rem; font-weight: 700; color: var(--cyan-ink, #0A7A97); }
.fg-result__name { font-size: 0.76rem; color: var(--text-dark, #0F1E45); }
.fg-result__price { font-size: 0.76rem; font-weight: 700; color: var(--text-dark, #0F1E45); }

/* Modal (conventions §6.6) */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    padding: 1rem;
}
.modal-content {
    background: #fff;
    border-radius: var(--radius-modal, 16px);
    box-shadow: var(--shadow-modal, 0 20px 60px rgba(0,0,0,0.3));
    animation: modalSlideIn 0.3s ease;
    width: 100%; max-width: 460px;
    max-height: 90vh; overflow-y: auto;
}
.modal-content__head {
    display: flex; align-items: center; justify-content: space-between;
    /* Stays put while a tall dialog is scrolled: with the screen help there is
       now content long enough to lose the title off the top, and a dialog you
       cannot see the name of is one you cannot tell apart from the last one. */
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--off-white, #F7F7F8);
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
    border-radius: var(--radius-modal, 16px) var(--radius-modal, 16px) 0 0;
    padding: 0.875rem 1.25rem;
}
.modal-content__title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dark, #0F1E45); }
.modal-close {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border-grey, #E3E4E9);
    background: #fff; color: var(--text-dark, #0F1E45);
    box-shadow: var(--shadow-float, 0 2px 8px rgba(0,0,0,0.1));
    cursor: pointer; transition: all 0.2s ease;
}
.modal-close:hover { background: var(--logout-red, #e05c5c); border-color: var(--logout-red, #e05c5c); color: #fff; transform: rotate(90deg); }
.modal-content__body { padding: 1rem 1.25rem 1.25rem; }

/* What a destructive confirm is about to take with it. Indented and marked so
   the consequences read as a list of losses rather than as prose. */
.confirm-list {
    margin: 0.5rem 0 0.75rem;
    padding-left: 1.15rem;
    list-style: disc;
    color: var(--text-dark, #0F1E45);
}
.confirm-list li { margin-bottom: 0.3rem; line-height: 1.45; }
.modal-content--narrow { max-width: 380px; }
/* Room for sentences and nested lists — the screen help, and the scenario
   explainer on Products Design. The 460px default is a paragraph's width. */
.modal-content--wide { max-width: 660px; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

/* Recovery address on the User Access screen: read-only until Edit. */
/* The employee code borrows this row layout but keeps its OWN class names.
 Sharing .email-row made every existing \`.email-row .btn\` selector ambiguous
 the moment a second row used it \u2014 six assertions in auth_ui_test started
 typing an email address into the employee-code box. */
.email-row, .code-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.email-row__value, .code-row__value { font-size: 0.85rem; }
.code-row__value { font-variant-numeric: tabular-nums; }
.email-row__missing, .code-row__missing {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #8a5a12;
}
.email-row--edit input, .code-row--edit input { width: auto; flex: 1 1 220px; margin: 0; }
.code-row--edit input { flex: 0 0 5rem; text-align: center; }