/* Sales-rep "Acting as <dealer>" control in the header (rendered only for reps).
   A LIGHT pill sitting on the dark header bar, floated right just before the dealer
   avatar; the dealer picker opens in a modal. */

.rep-acting {
    position: relative;
    float: right;                 /* join the right-floated group; lands left of the avatar */
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Vertically centre against the 43px logo bar (same trick as .dealer-avatar). */
    margin: 0 16px 0 0;
    padding: 8px 14px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.2;
}

/* When no dealer is chosen yet, draw attention with the brand-yellow accent. */
.rep-acting--empty {
    border-color: #ffcb05;
    box-shadow: inset 0 0 0 1px #ffcb05;
}

.rep-acting__icon {
    color: #d39e00;               /* darker brand-gold for contrast on white */
    font-size: 20px;
}

.rep-acting__text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}

.rep-acting__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a8a8a;
}

.rep-acting__name {
    font-weight: 700;
    font-size: 15px;
    color: #111;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rep-acting--empty .rep-acting__name {
    font-weight: 500;
    font-style: italic;
    color: #777;
}

.rep-acting__change {
    appearance: none;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rep-acting__change:hover {
    background: #333;
    border-color: #333;
    color: #fff;
}

.rep-acting__clear {
    appearance: none;
    border: none;
    background: transparent;
    color: #999;
    font-size: 16px;
    padding: 2px 4px;
    cursor: pointer;
    line-height: 1;
}

.rep-acting__clear:hover {
    color: #111;
}

/* Dealer picker modal (body-attached via mage/modal — no header clipping). */
.modal-popup.rep-dealer-modal .modal-inner-wrap {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

/* Tighten the stock modal chrome — the default 3rem padding leaves a lot of empty space. */
.modal-popup.rep-dealer-modal .modal-header {
    padding-top: 22px;
    padding-bottom: 10px;
}

.modal-popup.rep-dealer-modal .modal-content {
    /* Top padding gives the search field breathing room below the header
       (it was touching the title bar). */
    padding: 16px 24px 22px;
}

/* Positioning context for the "switching account" overlay. */
.rep-dealer-picker {
    position: relative;
}

/* Shown while the acting dealer is being switched (POST + full reload): a
   shimmer sweep over the dimmed picker so the click has immediate feedback.
   Reuses the global `skeleton-shimmer` keyframe. Overlay only, no text. */
.rep-dealer-picker .rep-dealer-switching {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.72);
}

.rep-dealer-picker .rep-dealer-switching::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .rep-dealer-picker .rep-dealer-switching::after {
        animation: none;
    }
}

.rep-dealer-picker .rep-dealer-search {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    margin-bottom: 10px;
}

.rep-dealer-picker .rep-dealer-search:focus {
    border-color: #111;
    outline: none;
}

.rep-dealer-picker .rep-dealer-more {
    margin: 0 0 8px;
    font-size: 12px;
    color: #767676;
}

.rep-dealer-picker .rep-dealer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 48vh;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 4px;
}

.rep-dealer-picker .rep-dealer-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
}

.rep-dealer-picker .rep-dealer-list__main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Price class, dot-separated after the dealer name. */
.rep-dealer-picker .rep-dealer-list__pc {
    color: #9a9a9a;
    font-weight: 400;
}

/* Currency, pinned to the opposite (right) side. */
.rep-dealer-picker .rep-dealer-list__cur {
    flex: 0 0 auto;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.rep-dealer-picker .rep-dealer-list__item:last-child {
    border-bottom: none;
}

.rep-dealer-picker .rep-dealer-list__item:hover {
    background: #fff7d6;
}

.rep-dealer-picker .rep-dealer-list__empty {
    padding: 14px 12px;
    color: #767676;
    font-style: italic;
}

/* Order-form prompt shown to a rep who has not picked a dealer yet. */
.rep-no-dealer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    margin: 0 0 20px;
}

.rep-no-dealer__icon {
    font-size: 22px;
    color: #ffcb05;
}

.rep-no-dealer__text {
    margin: 0;
    font-size: 14px;
    color: #444;
}

/* Gold the menu icons of the pages the "Acting as" selector drives, so a rep can
   see at a glance which pages reflect the chosen dealer. Rep-only: this stylesheet
   is loaded solely under the customer_group_rep layout handle. */
.nav-item-quickorder .nav-ico,
.nav-item-forwardorder .nav-ico,
.nav-item-rep_lookup .nav-ico {
    /* !important: the theme sets .nav-ico to the primary (black) at higher
       specificity; this is the one decorative override that marks the
       selector-driven pages. */
    color: #07ffd0 !important;
}

/* ===== Account Lookup page ===== */

/* Page header — mirrors the dashboard hero (eyebrow + big title + subtitle). The
   dashboard's own .dash-hero CSS isn't loaded here, so the styles live in this
   rep-only sheet. */
.rep-lookup-hero {
    padding: 4px 2px 10px;
    margin: 0 0 4px;
}

.rep-lookup-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: #777;
}

.rep-lookup-hero__rule {
    display: inline-block;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: #111;
}

.rep-lookup-hero__eyebrow i {
    color: #111;
    font-size: 13px;
}

.rep-lookup-hero__title {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: #000;
    margin: 0 0 6px;
}

.rep-lookup-hero__sub {
    font-size: 1.3rem;
    color: #555;
    margin: 0;
}

/* Eyebrow rhythm: clear space above a section head, the default 12px below.
   The two heads inside the top row sit at the top of their column directly under
   the hero, so they carry no extra top gap. */
.rep-lookup .section-eyebrow {
    margin-top: 28px;
}

.rep-lookup-top .section-eyebrow {
    margin-top: 0;
}

/* Account Orders is a full-width section like Account Health / Ageing Balance,
   so match their eyebrow rhythm exactly: 28px above, 12px below, and no negative
   pull on the table (which previously left it touching the section above with a
   void beneath). */
.rep-lookup .rep-lookup-orders-head {
    margin-top: 28px;
    margin-bottom: 12px;
}
.rep-lookup .order-history {
    margin-top: 0;
}

/* Read-only lookup: the dealer-action CTA carried in from the dashboard's
   Total Outstanding card (Pay now) doesn't belong here. */
.rep-lookup .dash-card__pay { display: none; }

/* Top row: customer card (left) beside the sales-history chart (right). The
   chart column is the wider of the two — it's the page's focal panel. Stretch so
   both cards share one height (the chart card aligns with the customer card). */
.rep-lookup-top {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 1.8fr;
    gap: 24px 32px;
    align-items: stretch;
    margin-top: 24px;
}

/* Cards here use the grid gap, not the theme's per-block margin, so the row ends
   tight against the Account Orders section below. */
.rep-lookup-top .block { margin-bottom: 0; }

/* Chart card fills its (wider) column and stacks chart + legend; the canvas is
   sized to fit in JS (Chart.js 1.0.2 isn't responsive). */
.rep-lookup .dealers-data {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Legend below the chart as a clean right-aligned row. The stock rule floats each
   <li> right, which collapses #chart-legend to zero height and spills the legend
   over the card's bottom edge — lay it out in normal flow instead. */
.rep-lookup .dealers-data #chart-legend { margin-top: 12px; }
.rep-lookup .dealers-data #chart-legend ul {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
}
.rep-lookup .dealers-data #chart-legend li { float: none; margin: 0; }

@media (max-width: 900px) {
    .rep-lookup-top {
        grid-template-columns: 1fr;
    }
}

/* Account Lookup customer-info card (address | contact details). */
.rep-lookup-customer__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 12px;
}

.rep-lookup-customer__col {
    flex: 1 1 170px;
    min-width: 0;
}

.rep-lookup-customer .title {
    font-weight: 700;
    margin: 0 0 6px;
}

.rep-lookup-customer .title.inline {
    display: inline;
    font-weight: 400;
    color: #888;
}

.rep-lookup-customer address {
    font-style: normal;
    line-height: 1.7;
}

/* Account Orders — match the dealer's own Orders History desktop layout: pinned
   columns (the template's colgroup) so cells don't re-balance, single-line cells
   with ellipsis on the free-text columns, and the theme's tighter status-pill
   padding. The card-row look, per-cell labels, status-pill colours and the
   Order # open-link all come from the global theme (_extend.less +
   customer-account-tables.css), so only these refinements are page-scoped. */
.rep-lookup .table-wrapper.orders-history table {
    table-layout: fixed;
}

.rep-lookup .table-wrapper.orders-history table tbody > tr > td {
    vertical-align: middle;
    white-space: nowrap;
}

.rep-lookup .table-wrapper.orders-history table tbody > tr > td.status span {
    padding: 2px 8px;
}

/* Free-text cells (Type, Customer PO, Ship To) truncate to one line at their
   column width; the full value stays available via the native title tooltip. */
@media (min-width: 768px) {
    .rep-lookup td.type .hist-trunc,
    .rep-lookup td.customer-po .hist-trunc,
    .rep-lookup td.shipping .hist-trunc {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .rep-lookup .table-wrapper.orders-history table tbody > tr > td {
        white-space: normal;
    }
}

/* Tighten for narrow / mobile headers: keep the name + actions, drop the eyebrow. */
@media (max-width: 768px) {
    .rep-acting {
        margin-right: 8px;
        padding: 4px 8px;
    }

    .rep-acting__label {
        display: none;
    }

    .rep-acting__name {
        max-width: 120px;
    }
}