/**
 * Bond — the little that is Bond's own on a customer page.
 *
 * The heading, the sections, the cards, the fields, the lists, the chips,
 * the save bar and the empty states all come from the shared portal shell
 * now, so Bond's four customer pages match every other portal page and
 * follow any change made there.
 *
 * WHAT IS LEFT, AND WHY IT CANNOT BE SHARED
 * ---------------------------------------------------------------------
 *  - the photo control on "My details", which no other page has;
 *  - turning a whole figure card on the overview into a link.
 *
 * ⚠ THE OVERVIEW CARD'S NAME CONTAINS "btn" ON PURPOSE. The portal paints
 * every link with a rule far heavier than any class, which would wipe out
 * the figure and the label inside the card — and the one thing that rule
 * excludes is anything with "btn" in its class name.
 *
 * Namespaces: bpacc-* (the photo) and bph-* (the overview). No !important,
 * and not one colour decided here that is not a theme label.
 */

/* ── The photo ───────────────────────────────────────────────────────── */
/* Shown round and at a real size, with the picker beside it on anything
   wider than a phone and beneath it on one. The picker itself is the
   platform's own file control, so Theme Studio's File Picker label paints
   it exactly as it paints every other one. */
.bpacc-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--pd-cd-card-border, var(--at-color-border, #c1c7cf));
}
.bpacc-photo-img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--pd-cd-card-border, var(--at-color-border, #c1c7cf));
    background: var(--at-color-muted, #f1f5f9);
}
.bpacc-photo-side {
    flex: 1 1 240px;
    min-width: 0;
}
.bpacc-photo-label {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

/* The buttons sit in a row and wrap onto the next line rather than being
   squeezed, so neither ever shrinks below a comfortable size on a phone. */
.bpacc-photo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* THE BROWSER'S OWN FILE BOX, MOVED OUT OF SIGHT — not switched off.
   display:none would take it out of the tab order and leave the button
   useless to anybody working without a mouse. This is the long-established
   way of hiding something while leaving it reachable and operable. */
.bpacc-photo-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The button people actually see. It is a label pointed at the control, so
   clicking it opens the picker with no script involved.

   It carries the platform's own button classes on purpose: Theme Studio's
   Button labels paint it, so it matches every other button in the workspace
   and follows any re-labelling there. This file sets shape and size only,
   and not one colour. */
.bpacc-photo-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
/* A label cannot hold focus, so the ring the browser would have drawn on
   the control lands nowhere anybody can see. It is put back on the button,
   which is the thing a keyboard user is looking at. The plain edge is set
   first, so a browser without color-mix still shows something. */
.bpacc-photo-input:focus + .bpacc-photo-pick {
    border-color: var(--at-color-ring, var(--at-color-primary, #2563eb));
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
    .bpacc-photo-input:focus + .bpacc-photo-pick {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-color-ring, var(--at-color-primary, #2563eb)) 26%, transparent);
    }
}

/* Taking a photo off is a quiet action, not a red one — it is easily undone
   by choosing another. An edge rather than a fill, so no writing ever has to
   be readable against a colour this file chose. */
.bpacc-photo-remove {
    min-height: 44px;
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    border: 1px solid var(--pd-cd-card-border, var(--at-color-border, #c1c7cf));
    border-radius: 10px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.bpacc-photo-remove:hover,
.bpacc-photo-remove:focus {
    border-color: var(--at-color-ring, var(--at-color-primary, #2563eb));
}

/* Which file is chosen — what the browser's grey box used to say. Allowed to
   wrap and to break a long name, so it can never push the card sideways. */
.bpacc-photo-file {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE OVERVIEW — a whole figure card that is a link.
   ═══════════════════════════════════════════════════════════════════════ */

.bph-tile-btn {
    display: block;
    text-decoration: none;
    transition: transform .14s ease, border-color .14s ease;
}
.bph-tile-btn:hover,
.bph-tile-btn:focus {
    transform: translateY(-2px);
    border-color: var(--at-color-primary, #2563eb);
    text-decoration: none;
}
/* A second line under the label — how much of it is late, how many are
   finished. Quiet, because it explains the figure rather than being it. */
.bph-tile-note {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
}

/* Somebody who would rather not have things move under the pointer. */
@media (prefers-reduced-motion: reduce) {
    .bph-tile-btn { transition: none; }
    .bph-tile-btn:hover,
    .bph-tile-btn:focus { transform: none; }
}

/* ── The platform's own account links, put away (2026-08-24) ─────────── */
/*
 * Bond replaced "My details" and "Company details" with its own full-width
 * pages, and the grouped top bar points "My account" at them. But the
 * platform ALSO prints its own Profile and Company details inside the little
 * dropdown behind the avatar, and those still went to the stock pages — so
 * anyone who reached for the avatar instead of the tab landed on the old
 * layout. That is the only route left to them.
 *
 * WHY CSS AND NOT A REDIRECT. The stock addresses are where the platform's
 * own save posts land (its controller redirects back to them), so turning
 * them into redirects would break saving for anyone who does get there. This
 * hides the two links; it does not close the pages.
 *
 * WHY HERE. This stylesheet is only served while Bond's customer pages are
 * switched on. Switch them off and the platform's links come straight back,
 * with nothing to undo.
 *
 * ⚠ :first-child IS load-bearing. The platform gives its Profile entry and
 * its Contacts entry the SAME class, and Contacts must keep working. Profile
 * is the first child of that dropdown unconditionally, while Contacts only
 * appears for a primary contact who may manage people — so first-child is
 * what separates them. Company details has a class of its own.
 *
 * Scoped to the dropdown behind the avatar, so nothing on any page is
 * touched. No colour, no !important.
 */
.customers-nav-item-profile > .dropdown-menu > li.customers-nav-item-edit-profile:first-child,
.customers-nav-item-profile > .dropdown-menu > li.customers-nav-item-company-info {
    display: none;
}