/* Suppliers/Index cards: the second row holds the phone and the email side by side (the email wraps
   rather than being cut off). */
.suppliers-card-reach {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .75rem;
    min-width: 0;
}

.suppliers-card-phone {
    flex: none;
    white-space: nowrap;
}

.suppliers-card-email {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Suppliers/QuickView (_SupplierQuickView), built after the map modal, with a compact header of three
   rows: the Supplier chip with the labelled Tax ID chip; the name with the e-mail icon and the phone
   (as large as the map modal's, for reading off to dial) at its end; the full name with the address
   (icon and text one link to Google Maps, cut short with an ellipsis when the screen is narrow) at
   its end. The map itself is modal-modern.css's .mm-map-body / .mm-map. */
.supplier-qv-header {
    row-gap: 10px;
}

/* The map inset from the card's sides by the header's own padding, not edge to edge (modal-modern.css's
   .mm-map-body has none, which the standalone map modal keeps): a mini card inside the card, a hairline
   in the look's own line colour 3px off the map, its corners the card's own (18px, 16px in v3's glass
   windows, v3.css §7) and the map's 4px less, so the two curves run parallel. An inset map leaves the
   header's and the footer's hairlines hanging across the card, so they go; :not(#_) outweighs every
   look's line (v2-night, v2-night2). */
.modal-modern .mm-map-body.supplier-qv-body {
    padding-left: var(--mm-pad);
    padding-right: var(--mm-pad);
}

.supplier-qv-mapcard {
    padding: 3px;
    border: 1px solid var(--mm-line);
    border-radius: 18px;
}

    .modal-modern .supplier-qv-mapcard .mm-map {
        border-radius: 14px;
        overflow: hidden;
    }

body.shell-v2.v3.v3-modal-glass:not(#_) .modal-modern .supplier-qv-mapcard {
    border-radius: 16px;
}

    body.shell-v2.v3.v3-modal-glass:not(#_) .modal-modern .supplier-qv-mapcard .mm-map {
        border-radius: 12px;
    }

.modal-modern:not(#_) .modal-header.supplier-qv-header {
    border-bottom: 0;
}

.modal-modern:not(#_) .supplier-qv-body + .modal-footer {
    border-top: 0;
}

/* Less white under the last row than the header's default (modal-modern.css gives a header with a
   title row 14px, at a specificity this has to match). */
.modal-modern .modal-header.supplier-qv-header:has(> .mm-title-row) {
    padding-bottom: 6px;
}

/* The phone and the e-mail on the title's own line, not hanging below its baseline. */
.supplier-qv-header .mm-title-row {
    align-items: center;
}

.supplier-qv-taxid-label {
    font-weight: 500;
    opacity: 0.8;
}

.supplier-qv-reach {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.supplier-qv-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mm-ink);
    font-size: 1.2rem;
    line-height: 1;
    white-space: nowrap;
}

/* The e-mail: just the icon, as large as the phone's (and the same ink), to its left. */
.supplier-qv-mail {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mm-ink);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

    .supplier-qv-mail:hover,
    .supplier-qv-mail:focus-visible {
        color: var(--mm-blue);
    }
/* The full name close under the title (the header's row gap is wider than that), the address at its
   right. */
.supplier-qv-ident {
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: -8px;
}

.supplier-qv-fullname {
    min-width: 0;
    overflow-wrap: anywhere;
}

.supplier-qv-address {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    color: var(--mm-accent);
    font-weight: 600;
    text-decoration: none;
}

    .supplier-qv-address > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    a.supplier-qv-address:hover,
    a.supplier-qv-address:focus-visible {
        text-decoration: underline;
    }

    .supplier-qv-address.is-plain {
        color: var(--mm-muted);
        font-weight: 400;
    }

@media (max-width: 575.98px) {
    /* Very small screens: the phone a little smaller so the name keeps most of its row, and the full
       name and the address share the next row, the address cut short. */
    .supplier-qv-reach {
        gap: 8px;
    }

    .supplier-qv-phone,
    .supplier-qv-mail {
        font-size: 1rem;
    }

    .supplier-qv-phone {
        gap: 4px;
    }
    .supplier-qv-fullname {
        flex: 1 1 50%;
    }

    .supplier-qv-address {
        flex: 1 1 50%;
        justify-content: flex-end;
    }
}
/* Suppliers/Details' Admin tools (the Normalize button, the Merge group), under the Supplier Invoices /
   Orders toggles in the record card. The Merge field and its buttons joined in an input group sit flush:
   the same zero margins site.css gives them (.input-group .form-control / .btn), written out for Phase 3. */
.supplier-admin-tools .input-group > * {
    margin: 0 !important;
}

/* The Merge form up to 400px wide, narrower when the card is (it wraps under Normalize first). */
.supplier-admin-tools > form:has(.supplier-merge-group) {
    flex: 0 1 400px;
    min-width: 0;
}