/*
 * Dealer dashboard v2 — grid + card styling for /customer/dashboard/.
 *
 * The white card surface, soft shadow and 16px radius come from the theme's
 * shared .block-card rule (_extend.less). This file owns the welcome hero,
 * the dashboard GRID, the dark "hero" card variant, and the KPI-specific
 * internals (big number, stat badges, progress bar, ageing list). Plain CSS
 * (no LESS vars) — per-page stylesheet that also styles the AJAX card fragment.
 *
 * Layout:
 *   Hero   .dash-hero     welcome strip + Create Order
 *   Row 1  .dash-kpis     4 KPI cards
 *   Row 2  .dash-feature  banner (3fr) + Partner Resources (1fr)
 *   Row 3  .dash-lower    insights (1fr) + Recent Orders (3fr)
 */

.dash { width: 100%; }

/* Luma gives .page-main an explicit px width that overshoots the mobile viewport
   by a few px, causing a stray horizontal scrollbar. Fill the container instead;
   the theme's large-screen max-width cap still applies. */
.page-wrapper .page-main { width: 100%; }

/* Grid/flex items default to min-width:auto, so the dashboard columns and cards
   refuse to shrink below their content and overflow on small phones. Let them
   shrink so the page never scrolls sideways. */
.dash-lower > *,
.dash-feature > *,
.dash-insights > * { min-width: 0; }

/* Cards in the dashboard use grid gap, not the theme's per-block margin.
   !important because the theme's account-page `.block { margin-bottom: 10px }`
   out-specifies us — and in a grid that 10px margin inflates the ROW TRACK,
   making every KPI card 10px taller than its content needs. */
.dash .block { margin-bottom: 0 !important; }
/* Cards fill their grid row so heights are equal — Partner Resources matches
   the banner, and the 4 KPI cards match each other. `height: 100%` (resolving
   against the row track) is used rather than relying on align-items:stretch,
   which a content-sized track (the banner sets Row 2's height) doesn't honour
   for an auto-height card. Overrides the theme's `height: calc(100% - 10px)`. */
.dash-kpis > .block-card,
.dash-feature > .block-card { height: 100% !important; }

/* ---- Welcome hero (no card / no background; sits on the page) ---- */
.dash-hero {
    padding: 4px 2px 10px;
    margin-bottom: 24px;
}
.dash-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: #777;
    margin: 0 0 8px;
}
.dash-hero__rule {
    display: inline-block;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: #111;
}
.dash-hero__eyebrow i { color: #111; font-size: 13px !important; }
.dash-hero__title {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: #000;
    margin: 0 0 6px;
}
.dash-hero__sub { font-size: 1.3rem; color: #555; margin: 0 0 14px; }
.dash-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e2e2;
    font-size: 1.1rem;
    color: #333;
}
.dash-hero__pill i { font-size: 12px !important; opacity: 0.8; }
.dash-hero__pill--accent { border-color: #111; color: #000; font-weight: 600; }

/* Welcome hero + What's-New shortcut on one row. The shortcut sits opposite the hero
   (right); .dash-hero keeps its own margin-bottom (24px) as the gap to the cards, so the
   left side is unchanged. */
.dash-hero-row {
    display: flex;
    align-items: center;               /* centre the shortcut against the hero */
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-bottom: 24px;               /* the hero's own 24px gap, moved to the row */
}
.dash-hero-row .dash-hero { margin-bottom: 0; }
.dash-whatsnew-shortcut {
    flex: 0 1 auto;
    font-size: 1.25rem;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .dash-hero-row { align-items: flex-start; }
    .dash-whatsnew-shortcut { white-space: normal; }
}

/* ---- Section eyebrow (group header above a row of cards) ----
   Mirrors the hero eyebrow (rule + icon + uppercase label) so each card group
   gets a small category title, e.g. "Account Health" above the KPI row. */
.dash-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: #777;
    margin: 0 0 12px;
}
.dash-section-head::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1px;
    border-radius: 2px;
    background: #111;
    flex: 0 0 auto;
}
.dash-section-head i { color: #111; font-size: 13px !important; }
/* Recent Orders eyebrow carries the View All on the right (sized like the row
   View, no hover-grow); the label still uppercases via .dash-section-head. */
.dash-section-head .dash-viewall { margin-left: auto; padding: 0 14px; border-width: 2px; }
.dash-section-head .dash-viewall:hover { border-width: 2px; }

/* ---- Grid rows ---- */
/* Row groups get generous separation so the dashboard doesn't feel crowded. */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.dash-feature {
    display: grid;
    grid-template-columns: 4fr 1fr;
    gap: 16px;
    margin-top: 28px;
    margin-bottom: 28px;
    align-items: stretch;
}
.dash-lower {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 16px;
    align-items: start;
}
.dash-lower--full { grid-template-columns: 1fr; }

.dash-insights { display: flex; flex-direction: column; gap: 16px; }

/* Hidden parallel fill-loaders — present only to carry [data-url] for the
   loader's fill mode; never rendered. (display:none doesn't stop the fetch.) */
.dash-fillers { display: none !important; }

/* ---- Card internals ---- */
.dash-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
}
/* KPI cards run leaner than the 20px theme box padding: trimming the vertical
   padding shortens the whole (equal-height) row and cuts the empty space under
   Ageing's "Balance" row. !important + .block-card to beat the theme's
   higher-specificity `.block.block-card { padding: 20px }`. */
.dash-kpis .dash-card.block-card { padding: 14px 18px !important; }
/* Total Outstanding's whole body is one fill slot; keep it a flex column so the
   stat rows + Pay Now still pin to the card bottom (margin-top:auto on stats). */
.dash-card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.dash-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 6px;
}
.dash-card__title { font-size: 1.4rem; font-weight: 600; color: inherit; }
.dash-card__icon { font-size: 16px !important; opacity: 0.6; }
/* Right-side cluster in an insight card head: the decorative icon plus the info
   "?" tip, kept together so the "?" sits in the top-right corner (its bubble
   then drops left into the card, like the other cards' tips). */
.dash-card__head-aux { display: inline-flex; align-items: center; gap: 8px; }
/* Clickable card — "stretched link" anchored on the title (so the accessible
   link label is just the title, not the whole card). An invisible overlay makes
   the entire card the hit area; inner CTAs sit above it and keep their own
   click. Hover lifts the card and nudges the arrow; keyboard focus shows a ring. */
.dash-card--link { position: relative; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.dash-card--link:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); transform: translateY(-2px); }
.dash-card--link:focus-within { outline: 2px solid #000; outline-offset: 2px; }
/* Keep the title the card's own colour in every state — otherwise the theme's
   Bootstrap link colour (#0d6efd) bleeds through on hover/visited. */
.dash-card__nav,
.dash-card__nav:hover,
.dash-card__nav:focus,
.dash-card__nav:visited { text-decoration: none; color: inherit; }
.dash-card__nav::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.dash-card__arrow { font-size: 14px !important; color: #b0b0b0; flex: 0 0 auto; transition: transform 0.15s ease, color 0.15s ease; }
.dash-card--link:hover .dash-card__arrow { transform: translateX(3px); color: #000; }
/* Inner CTAs (Pay Now / Create Order) sit above the stretched link. */
.dash-card__pay, .dash-card__action { position: relative; z-index: 2; }
.dash-card__value {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 4px 0 0;
}
.dash-card__value--muted { color: #999; }
/* Credit headroom tier (mirrors the ageing value tiers): amber as the available
   figure runs low, red once it's gone. No green/ok tier — an unused limit stays
   the default neutral. */
.dash-card__value--warning { color: var(--status-warning, #c77f00); }
.dash-card__value--danger  { color: var(--status-danger, #ba3b45); }
.dash-card__currency { font-size: 1.1rem; color: #888; margin-bottom: 12px; }

/* Stat rows — stacked: circle number badge + label */
.dash-card__stats { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: auto; padding-top: 14px; }
.dash-card__stats--stacked { flex-direction: column; align-items: flex-start; gap: 10px; }
.dash-stat { display: flex; align-items: center; gap: 10px; }
.dash-stat__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;          /* circle for 1 digit; grows to a pill for 2–3+ */
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 1.2rem;
    font-weight: 700;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.dash-stat__text { font-size: 1.2rem; color: #555; }
/* ---- Open Orders card: a colored count badge + a clickable label pill ---- */
.dash-card--orders .dash-card__stats--stacked { gap: 8px; }
.dash-card--orders .dash-stat { gap: 8px; }
.dash-card--orders a.dash-stat--link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; cursor: pointer; }
/* The label pill is the button — rounded, bordered, with the caret at its end. */
.dash-stat__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    background: #fff;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.dash-card--orders .dash-stat__text { color: #333; font-weight: 500; }
.dash-card--orders a.dash-stat--link:hover .dash-stat__pill {
    background: #f7f7f7; border-color: #c9c9c9; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.dash-card--orders a.dash-stat--link:focus-visible .dash-stat__pill { outline: 2px solid #000; outline-offset: 2px; }
/* Arrow at the end of the pill signals it clicks through. Same icon, size and
   hover-nudge as the Total Outstanding card's arrow (.dash-card__arrow), so the
   whole dashboard reads consistently. */
.dash-stat__arrow { font-size: 11px !important; color: #b0b0b0; flex: 0 0 auto; transition: transform 0.15s ease, color 0.15s ease; }
.dash-card--orders a.dash-stat--link:hover .dash-stat__arrow { color: #000; transform: translateX(3px); }
/* Count-only rows (Pending): a quieter, non-interactive pill, no caret. */
.dash-stat__pill--static { background: #f4f4f4; }

/* Per-category count-badge colour. Uses the global --status-* palette; neutral
   keeps the default grey. */
.dash-stat--warning  .dash-stat__badge { background: rgba(199, 127, 0, 0.14); color: var(--status-warning, #c77f00); }
.dash-stat--ok       .dash-stat__badge { background: rgba(46, 125, 50, 0.14); color: var(--status-ok, #2e7d32); }
.dash-stat--elevated .dash-stat__badge { background: rgba(224, 108, 0, 0.15); color: var(--status-elevated, #e06c00); }
.dash-stat--brand    .dash-stat__badge { background: rgba(255, 203, 5, 0.30); color: #6f5500; }

/* "No open orders" placeholder when every bucket is empty — plain text. */
.dash-stat--empty .dash-stat__text { font-style: italic; color: #888; font-weight: 400; }

/* Credit card note when the limit is reached: orders still allowed, held for review. */
.dash-card__credit-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 10px; padding: 8px 10px;
    border-radius: 8px;
    background: rgba(199, 127, 0, 0.10);
    color: #6b4e00;
    font-size: 1.15rem; line-height: 1.4;
}
.dash-card__credit-note i { margin-top: 2px; flex: 0 0 auto; color: var(--status-warning, #c77f00); }
/* Plain coloured status text (Unpaid / Overdue) — no pill */
.dash-stat__plain { font-size: 1.3rem; font-weight: 600; }
/* Shares the global severity palette (see _extend.less :root --status-*). */
.dash-stat__plain--warning { color: var(--status-warning, #c77f00); }
.dash-stat__plain--danger { color: var(--status-danger, #ba3b45); }
/* Healthy: a zero count (0 Unpaid / 0 Overdue) reads green, not a warning tone. */
.dash-stat__plain--ok { color: var(--status-ok, #2e7d32); }

/* Card CTAs — right-aligned (Pay now, Create Order). */
.dash-card__pay { margin-top: 16px; text-align: right; }
.dash-card__action { margin-top: 14px; text-align: right; }
.dash-card__cta i { margin-left: 6px; }
.dash-card--orders .dash-card__cta i { margin-left: 0; margin-right: 6px; }
/* CTA icon micro-interactions on hover: Pay Now's arrow slides right (matching
   the cards' arrows); Create Order's plus spins a quarter turn. */
.dash-card__cta i { transition: transform 0.18s ease; }
.dash-card--outstanding .dash-card__cta:hover i { transform: translateX(3px); }
.dash-card--orders .dash-card__cta:hover i { transform: rotate(90deg); }

/* ---- Dark hero / resources card ---- */
.dash-card--dark {
    /* Wider tonal range than the old #2c2c2c→#000 (which read as flat charcoal):
       a lifted slate top-left falling to near-black then black reads as a clear,
       premium gradient and gives the feature card depth against the light siblings. */
    background: linear-gradient(135deg, #3a3f47 0%, #15171b 58%, #000 100%) !important;
    color: #fff;
}
.dash-card--dark .dash-card__currency { color: rgba(255, 255, 255, 0.7); }
.dash-card--dark .dash-card__arrow { color: rgba(255, 255, 255, 0.6); }
.dash-card--dark.dash-card--link:hover .dash-card__arrow { color: #fff; }
.dash-card--dark.dash-card--link:focus-within { outline-color: #fff; }
.dash-card--dark .dash-stat__badge { background: rgba(255, 255, 255, 0.15); color: #fff; }
.dash-card--dark .dash-stat__text { color: rgba(255, 255, 255, 0.7); }
/* Status text needs lighter tints to stay legible on the dark feature card. */
.dash-card--dark .dash-stat__plain--ok      { color: #4ade80; }
.dash-card--dark .dash-stat__plain--warning { color: #fbbf24; }
.dash-card--dark .dash-stat__plain--danger  { color: #f87171; }
/* Light CTA on dark cards (btn-custom-primary is black-on-white by default). */
.dash-card--dark .btn-custom-primary {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}
.dash-card--dark .btn-custom-primary:hover {
    background-color: #bfbfbf !important;
    border-color: #bfbfbf !important;
    color: #000 !important;
}

/* ---- Credit card: progress + meta (values left-aligned) ---- */
.dash-progress { height: 8px; border-radius: 999px; background: #ececec; overflow: hidden; margin: 14px 0 10px; }
.dash-progress__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #000 0%, #444 100%); }
/* Bar reds only at full exhaustion (0 available); below that the neutral fill
   conveys progress without a status hue. */
.dash-progress__fill--danger { background: linear-gradient(90deg, var(--status-danger, #ba3b45) 0%, #d4555f 100%); }
.dash-card__row { display: flex; justify-content: space-between; gap: 12px; font-size: 1.2rem; color: #555; margin-bottom: 12px; }
.dash-card__row strong { color: #000; }
/* "x% used" line under the credit bar. */
.dash-card__used { font-size: 1.2rem; color: #777; text-align: right; margin-bottom: 12px; }
.dash-card__meta { margin-top: auto; padding-top: 12px; border-top: 1px solid #eee; }
.dash-meta { display: grid; grid-template-columns: 120px 1fr; font-size: 1.2rem; padding: 3px 0; }
.dash-meta__label { color: #888; }
.dash-meta__value { color: #000; font-weight: 600; text-align: left; }
.dash-card__hold { margin-top: 10px; font-size: 1.1rem; font-weight: 700; color: #ba3b45; }

/* ---- Spend This Year card: year-to-date area-line sparkline + trend/count ----
   The sparkline flexes to fill the card's middle slack, so it doesn't grow the
   equal-height KPI row. Inline SVG (line + soft teal area), with a round HTML
   dot marking the current month and invisible hit columns for hover tooltips. */
.dash-spark {
    position: relative;
    flex: 1 1 auto;
    min-height: 48px;
    margin: 14px 0 8px;
    /* Lock the chart box to its SVG viewBox ratio (110×40). The loaded SVG sizes
       itself by that ratio while a plain skeleton div would collapse to min-height,
       so without this the card grew ~32px taller on data load and pushed the page
       down. With it, the skeleton placeholder and the real chart fill the same box
       at every width — zero layout shift. */
    aspect-ratio: 110 / 40;
}
.dash-spark__svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* A marker dot at every month point so each month reads clearly; the current
   month is larger with a white ring. */
.dash-spark__dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00a98c;
    transform: translate(-50%, 50%);
    pointer-events: none;
}
.dash-spark__dot--now {
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
/* Invisible per-month hover targets (keep the tooltip-on-hover UX). */
.dash-spark__hit { position: absolute; inset: 0; display: flex; }
.dash-spark__hit span { flex: 1 1 0; }

.dash-card__spend-foot { padding-top: 4px; }
.dash-card__trend { display: flex; align-items: center; gap: 6px; font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
.dash-card__trend i { font-size: 11px !important; }
.dash-card__trend--up { color: var(--status-ok, #2e7d32); }
/* Declines stay neutral grey — no alarming red on a spend dip. */
.dash-card__trend--down { color: #777; }
/* The figure the % is measured against — same period last year. */
.dash-card__spend-compare { font-size: 1.1rem; color: #888; margin: -6px 0 10px; }
.dash-card__spend-compare strong { color: #555; font-weight: 600; }
.dash-card__spend-count .dash-stat__text { color: #555; }

/* ---- Ageing Balance strip (full-width, columns) ----
   A single rounded card split into bucket columns: label / big tier-coloured
   amount / status subtext. Column padding replaces the card's own padding so the
   dividers run edge to edge. */
.dash-ageing-strip { padding: 0 !important; overflow: hidden; height: auto !important; }
.dash-ageing-strip__cols { display: grid; grid-template-columns: repeat(6, 1fr); }
.dash-age-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 22px;
    border-left: 1px solid #f0f0f0;
}
.dash-age-col:first-child { border-left: 0; }
.dash-age-col__label { font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase; color: #888; font-weight: 600; }
.dash-age-col__value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.dash-age-col__sub { font-size: 1.05rem; color: #999; }
/* Tier colours — global tokens; only non-zero overdue buckets get a class. */
.dash-age-col--mild .dash-age-col__value     { color: var(--status-mild, #b07a00); }
.dash-age-col--warning .dash-age-col__value  { color: var(--status-warning, #c77f00); }
.dash-age-col--elevated .dash-age-col__value { color: var(--status-elevated, #cf6a1f); }
.dash-age-col--danger .dash-age-col__value   { color: var(--status-danger, #ba3b45); }
/* Fully-clear balance ($0) reads green — a healthy "all clear" signal. */
.dash-age-col--ok .dash-age-col__value       { color: var(--status-ok, #2e7d32); }
/* Balance total column — subtle emphasis. */
.dash-age-col--total { background: #fafafa; }

/* ---- Ageing list (values left-aligned) ---- */
.dash-ageing { list-style: none; margin: 2px 0 0; padding: 0; }
.dash-ageing__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px 0;
    font-size: 1.2rem;
    line-height: 1.35;
    border-bottom: 1px solid #f0f0f0;
}
.dash-ageing__label { color: #555; }
.dash-ageing__value { font-weight: 600; text-align: left; }
/* Severity tiers — value colour escalates with overdue age. Tokens are global
   (_extend.less :root --status-*) so every tier retunes from one place. Applied
   only to non-zero overdue buckets (the template gates the class); "Not yet due"
   and any $0.00 bucket stay the neutral default. */
.dash-ageing__row--mild .dash-ageing__value     { color: var(--status-mild, #b07a00); }
.dash-ageing__row--warning .dash-ageing__value  { color: var(--status-warning, #c77f00); }
.dash-ageing__row--elevated .dash-ageing__value { color: var(--status-elevated, #cf6a1f); }
.dash-ageing__row--danger .dash-ageing__value   { color: var(--status-danger, #ba3b45); font-weight: 700; }
/* Drop the hairline under the last bucket (90+) so it doesn't stack with the
   total row's top border — that was the "double line before Balance". */
.dash-ageing__row:nth-last-child(2) { border-bottom: 0; }
.dash-ageing__row--total { border-bottom: 0; border-top: 2px solid #eee; margin-top: 0; padding-top: 5px; font-weight: 700; }
.dash-ageing__row--total .dash-ageing__label { color: #000; }

/* ---- Banner ---- */
.dash-banner { position: relative; border-radius: 16px; overflow: hidden; min-height: 240px; }
/* Shimmer held over the banner until its hero image loads (see
   dashboard-v2-data-loader.js revealBannerWhenImagesLoaded). */
.dash-banner__skeleton { position: absolute; inset: 0; z-index: 2; border-radius: 16px; }
.dash-banner img,
.dash-banner [data-content-type="image"] img { border-radius: 16px; }

/* ---- Partner Resources (photo background + dark overlay) ---- */
.dash-resources {
    position: relative;
    justify-content: space-between;
    color: #fff;
}
/* The theme's `main .columns .column.main .block.block-card` forces a white
   background at higher specificity (and a later `.block-card{background:#fff}`
   resets background-image), so the photo needs that full prefix to win.
   Dark overlay over the cropped sailing photo (the sailor + winch on the right)
   keeps the title and CTA legible. */
main .columns .column.main .block.block-card.dash-resources {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.88) 100%),
        url('../images/partner-resources-bg.jpg') right center / cover no-repeat;
}
.dash-resources .dash-card__title,
.dash-resources .dash-card__icon { color: #fff; }
.dash-resources .dash-card__icon { opacity: 0.85; }
.dash-resources__desc { font-size: 1.3rem; line-height: 1.5; margin: 8px 0 16px; color: rgba(255, 255, 255, 0.92); }
.dash-resources__cta { align-self: center; }
/* Light CTA on the photo card. */
.dash-resources .btn-custom-primary {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}
.dash-resources .btn-custom-primary:hover {
    background-color: #bfbfbf !important;
    border-color: #bfbfbf !important;
    color: #000 !important;
}

/* ---- Insights placeholder tiles ---- */
.dash-insight__sub { font-size: 1.15rem; color: #777; margin: 0 0 12px; }
.dash-insight__placeholder { display: flex; flex-direction: column; }
.dash-insight__soon { align-self: flex-start; margin-top: 14px; }

/* ---- Spend Trend bar chart (trailing 12 months) ----
   Teal matches the Spend This Year sparkline (same data family); the current
   month is the deep teal, prior months a lighter tint so the rhythm reads at a
   glance. Bars grow from the baseline; height % is relative to the fixed bars
   row. */
.dash-trend { margin-top: 4px; }
.dash-trend__bars { display: flex; align-items: flex-end; gap: 4px; height: 84px; }
.dash-trend__bar,
.dash-trend__skel {
    flex: 1 1 0;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
}
.dash-trend__bar { background: #bfe3da; }
.dash-trend__bar--now { background: #00a98c; }
.dash-trend__skel { align-self: flex-end; }
.dash-trend__labels { display: flex; gap: 4px; margin-top: 6px; }
.dash-trend__label { flex: 1 1 0; text-align: center; font-size: 1rem; color: #9a9a9a; }
.dash-trend__label--now { color: #00a98c; font-weight: 700; }

/* ---- Top SKUs carousel (network-wide) ----
   JS-driven (dashboardTopSkus): the module moves .is-active between slides/dots;
   the crossfade is a plain opacity transition (no transform — a scaling
   transform rasterised the image blurry mid-fade). Background matches the
   SO/SF order-form image cell (#f1f2f6). */
.dash-skus { display: flex; flex-direction: column; gap: 10px; }
.dash-skus__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f2f6;
}
.dash-skus__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    /* Only the visible slide is interactive — stacked hidden slides must not
       intercept clicks meant for the active one. */
    pointer-events: none;
    transition: opacity .45s ease;
}
.dash-skus__slide.is-active { opacity: 1; pointer-events: auto; }
/* Single product: no carousel, just show it. */
.dash-skus:not(.dash-skus--auto) .dash-skus__slide { opacity: 1; pointer-events: auto; }
.dash-skus__link { display: block; position: absolute; inset: 0; text-decoration: none; }
.dash-skus__link:hover { text-decoration: none; }
/* Hover cue that the slide is clickable → Reorder form. */
.dash-skus__cta {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%) translateY(6px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.dash-skus__link:hover .dash-skus__cta {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}
.dash-skus__link:hover .dash-skus__img { opacity: .35; transition: opacity .2s ease; }
.dash-skus__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px 14px 36px;
    box-sizing: border-box;
}
.dash-skus__rank {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    background: #000;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 999px;
}
.dash-skus__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 20px 12px 9px;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    color: #111;
    text-align: center;
    /* White fade panel behind the label so long names stay legible over the
       grey (#f1f2f6) stage and the product image. */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.97) 55%, rgba(255, 255, 255, 0));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Prev/next arrows — revealed on hover over the stage. */
.dash-skus__nav {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 4;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
}
.dash-skus__stage:hover .dash-skus__nav { opacity: 1; }
.dash-skus__nav:hover { background: #000; }
.dash-skus__nav--prev { left: 8px; }
.dash-skus__nav--next { right: 8px; }
.dash-skus__dots {
    display: flex;
    justify-content: center;
    gap: 7px;
}
.dash-skus__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #000;
    opacity: .22;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}
.dash-skus__dot:hover { opacity: .5; }
.dash-skus__dot.is-active { opacity: 1; transform: scale(1.15); }
.dash-skus__empty { font-size: 1.2rem; color: #777; margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) {
    .dash-skus__slide { transition: none; }
}

/* ---- Selling Fast / Low Stock list ---- */
.dash-stock { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-stock__item { margin: 0; }
.dash-stock__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}
/* Kill the theme's link-hover underline on the whole row. */
.dash-stock__link,
.dash-stock__link:hover,
.dash-stock__link:hover .dash-stock__name { text-decoration: none; }
.dash-stock__thumb {
    /* Portrait box (~3:4) — product shots are tall rectangles, so a square box
       would letterbox them and show a grey frame. */
    flex: 0 0 48px;
    width: 48px;
    height: 62px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f2f6;
}
.dash-stock__thumb img { width: 100%; height: 100%; object-fit: contain; }
.dash-stock__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-stock__name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #111;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-stock__pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}
.dash-stock__pill--fast { background: #fdeede; color: var(--status-elevated, #d2691e); }
.dash-stock__pill--low { background: #fff6e0; color: var(--status-warning, #c77f00); }
.dash-stock__arrow { flex: 0 0 auto; color: #c4c4c4; font-size: 1.2rem; transition: transform .15s ease, color .15s ease; }
.dash-stock__link:hover .dash-stock__arrow { color: #111; transform: translateX(3px); }
.dash-stock__empty { display: flex; align-items: center; gap: 7px; font-size: 1.2rem; color: #777; margin: 6px 0 0; }
.dash-stock__empty i { color: var(--status-ok, #2e8b57); }
/* Skeleton rows reserve the same height so the list doesn't shift on fill. */
.dash-stock--skeleton .dash-stock__item { padding: 6px; display: flex; align-items: center; gap: 10px; }

/* ---- Recent Orders ---- */
.dash-recent .block-dashboard-orders { height: auto; }
/* Each recent row is a bordered box (separate borders + 16px spacing), so keep
   the last row's bottom border — its box must read complete. Only drop Luma's
   .table-wrapper bottom border, which (with the 16px border-spacing) floated
   ~16px below the last row as a stray hairline. */
.dash-recent .table-wrapper { border-bottom: 0; }
.dash-recent .block-title.order { display: flex; align-items: center; gap: 10px; }
/* Vertically centre every cell (Status pill + View button included), and keep
   the date on one line now that the action column is fit-to-content. */
.dash-recent td { vertical-align: middle; }
.dash-recent td.date { white-space: nowrap; }
.dash-recent td.actions { text-align: center; }
.dash-recent .dash-viewall {
    margin-left: auto;
    /* Same base button size as the per-row View action so they're consistent. */
    padding: 0 14px;
    border-width: 2px;
}
/* Lock the 2px border on hover for both recent-orders buttons — the theme's
   shared button :hover otherwise restores the thicker base border (4px), which
   made "View All" visibly grow on hover. */
.dash-recent .dash-viewall:hover,
.dash-recent td.actions .action.view:hover {
    border-width: 2px;
}
/* View All sits at the bottom-right of Recent Orders, below the rows. */
/* The table's 16px trailing border-spacing already separates the last box from
   the footer, so keep this small — otherwise "View All" drifts too far down. */
.dash-recent-foot { text-align: right; padding-top: 2px; }
.dash-recent-foot .dash-viewall { margin-left: 0; padding: 0 22px; }
/* Per-row View button stays a one-line pill (don't collapse to a circle). */
.dash-recent td.actions { white-space: nowrap; }
.dash-recent td.actions .action.view {
    white-space: nowrap;
    padding: 0 14px;
    border-width: 2px;
}
.dash-recent td.actions .action.view i { margin-right: 6px; }

/* Phones (≤639px): one card per recent order with aligned label/value rows —
   matches the Orders/Invoices/Saved Orders list cards. Fixed label column via an
   absolute label. The extra table classes out-specify Magento core's responsive
   cell rule (`.table:not(.cart)…> td`). */
@media (max-width: 639px) {
    .dash-recent .table-wrapper.orders-recent .data.table tbody > tr {
        display: block;
        border: 1px solid #ccc;
        border-radius: var(--card-radius, 16px);
        background: #fff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
        padding: 6px 14px;
        margin-bottom: 12px;
    }
    .dash-recent .table-wrapper.orders-recent .data.table tbody > tr > td {
        display: block;
        position: relative;
        border: 0;
        padding: 4px 0 4px 120px;
        min-height: 0;
        text-align: left;
        white-space: normal;
    }
    .dash-recent .table-wrapper.orders-recent .data.table tbody > tr > td::before {
        content: attr(data-th);
        position: absolute;
        left: 0;
        top: 4px;
        width: 112px;
        margin: 0;
        padding: 0;
        float: none;
        text-align: left;
        color: #6b6b6b;
        font-weight: 400;
        font-size: 1.2rem;
    }
    .dash-recent .table-wrapper.orders-recent .data.table tbody > tr > td.actions {
        text-align: left;
    }
    .dash-recent .table-wrapper.orders-recent .data.table tbody > tr > td.status span {
        display: inline-flex;
        width: auto;
    }
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .dash-feature { grid-template-columns: 1fr; }
    .dash-lower { grid-template-columns: 1fr; }
    /* Insights span full width here, so place Top SKUs + Selling Fast side by
       side — same 2-up rhythm as the KPI cards on tablet. */
    .dash-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
    /* Ageing strip: 6 columns → 3 per row, add row dividers. */
    .dash-ageing-strip__cols { grid-template-columns: repeat(3, 1fr); }
    .dash-age-col:nth-child(3n+1) { border-left: 0; }
    .dash-age-col:nth-child(n+4) { border-top: 1px solid #f0f0f0; }
}
@media (max-width: 767px) {
    .dash-hero { flex-direction: column; align-items: flex-start; }
    .dash-hero__action { width: 100%; }
    .dash-hero__action .btn-custom-primary { width: 100%; }
    .dash-ageing-strip__cols { grid-template-columns: repeat(2, 1fr); }
    .dash-age-col { border-left: 0; }
    .dash-age-col:nth-child(odd) { border-right: 1px solid #f0f0f0; }
    .dash-age-col:nth-child(n+3) { border-top: 1px solid #f0f0f0; }
}
@media (max-width: 575px) {
    .dash-kpis { grid-template-columns: 1fr; }
    .dash-insights { grid-template-columns: 1fr; }
}

/* Fade-in on AJAX swap (mirrors the legacy loader; safe if already defined). */
.dash .fade-in { animation: dashFadeIn 0.25s ease-in; }
@keyframes dashFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Sales-rep "account not fully set up" notice (missing Salesperson reference id).
   Amber status treatment with a full border — not a left-accent bar. */
.dash-rep-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--status-warning, #c77f00);
    border-radius: 8px;
    background: #fdf4e3;
    color: #7a4f10;
    font-size: 14px;
    line-height: 1.45;
}
.dash-rep-warning > i {
    color: var(--status-warning, #c77f00);
    font-size: 16px;
    margin-top: 1px;
    flex: 0 0 auto;
}

/* ===== Sales-rep workspace (temporary rep dashboard body) =====
   Replaces the dealer-centric KPI / Ageing / Recent-Orders body for reps.
   Built on the shared .block-card; four equal cards on one row. */
.dash-rep-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 24px;
}

.dash-rep-card {
    display: flex;
    flex-direction: column;
    padding: 22px;
}

.dash-rep-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.dash-rep-card__icon {
    font-size: 20px;
    color: #31ffd7;
}

.dash-rep-card__title {
    font-weight: 700;
    font-size: 15px;
    color: #111;
}

.dash-rep-card__value {
    margin: 0 0 2px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: #111;
}

.dash-rep-card__desc {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
}

.dash-rep-card__list {
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
}

/* CTA / badge pin to the card bottom so the row's cards align. */
.dash-rep-card__cta,
.dash-rep-card__badge {
    margin-top: auto;
    align-self: flex-start;
}

.dash-rep-card__badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: #fdf4e3;
    color: #7a4f10;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 1024px) {
    .dash-rep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .dash-rep-grid { grid-template-columns: 1fr; }
}