/* ==========================================================================
   DCA member & customer portal (P3/P4).

   The storefront has no Tailwind — the shop layout loads only this directory's
   hand-written stylesheets. The portal screens were previously written with
   Tailwind utility classes, which meant ~50 classes per page with no CSS behind
   them: the markup was right and the pages rendered essentially unstyled.

   This is the portal's own design system, taken from the client's Member and
   Customer designs. Everything is scoped under .dca-portal so it cannot reach
   the rest of the storefront.

   Source designs: New-Scope/Member Pages/*, New-Scope/Customer Quote Page/*,
                   New-Scope/Customer Order Pages/*
   ========================================================================== */

.dca-portal {
    /* The portal is DARK. Four of the five member designs (Dashboard, My
       Network, Payouts, Statements) are black with a gold accent, and so is the
       storefront — only the Earnings mock is on white, which reads as an older
       comp. Dark is therefore the default and .dca-portal--light is the
       exception, not the other way round.

       Brand tokens match public/assets/style.css so the portal and the
       storefront cannot drift apart on colour or type. */
    --dca-ink: #ffffff;
    --dca-paper: #111111;
    --dca-canvas: #0a0a0a;
    --dca-muted: #9a9a9a;
    --dca-muted-soft: #6f6f6f;
    --dca-hairline: rgba(255, 255, 255, 0.22);
    --dca-rule: rgba(255, 255, 255, 0.1);

    /* The gold the designs use for links, icon rings, section labels and the
       active tab. Defined once so the client can change it in one place. */
    --dca-accent: #c9a227;
    --dca-accent-soft: rgba(201, 162, 39, 0.14);

    /* Stage colours, matching App\Support\OrderPipeline::COLOURS so a stage
       reads the same in the portal as it does in admin. */
    --dca-slate: #94a3b8;
    --dca-blue: #60a5fa;
    --dca-amber: #fbbf24;
    --dca-purple: #c084fc;
    --dca-indigo: #a5b4fc;
    --dca-teal: #2dd4bf;
    --dca-green: #4ade80;

    --dca-display: "TAN-PEARL", "Tan-pearl", Georgia, serif;
    --dca-body: "MontserratRegular", "Montserrat", -apple-system, sans-serif;

    color: var(--dca-ink);
    background: var(--dca-canvas);
    font-family: var(--dca-body);
    width: 100%;
    overflow-x: hidden;
}

.dca-portal *,
.dca-portal *::before,
.dca-portal *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Page masthead — the member's name in display type with flourishes, then the
   screen name in letterspaced caps.
   -------------------------------------------------------------------------- */

.dca-portal__masthead {
    text-align: center;
    padding: 40px 16px 28px;
}

.dca-portal__name {
    font-family: var(--dca-display);
    font-size: clamp(30px, 5vw, 54px);
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

/* The ✦ marks either side of the name in the designs. Decorative only, so they
   are drawn here rather than placed in the markup where a screen reader would
   announce them. */
.dca-portal__name::before,
.dca-portal__name::after {
    content: "✦";
    font-size: 0.34em;
    opacity: 0.55;
    font-family: var(--dca-body);
}

.dca-portal__screen {
    margin: 14px 0 0;
    font-size: 15px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    font-weight: 600;
}

.dca-portal__lede {
    margin: 10px auto 0;
    max-width: 620px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dca-muted);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.dca-portal__body {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px 72px;
    display: grid;
    gap: 18px;
}

.dca-grid {
    display: grid;
    gap: 18px;
}

.dca-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dca-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dca-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .dca-grid--3,
    .dca-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .dca-grid--2,
    .dca-grid--3,
    .dca-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Panel — the bordered white card the designs use for every block.
   -------------------------------------------------------------------------- */

.dca-panel {
    background: var(--dca-paper);
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    padding: 22px;
}

.dca-panel--flush { padding: 0; }

.dca-panel__title {
    font-family: var(--dca-display);
    font-size: 21px;
    letter-spacing: 0.02em;
    margin: 0 0 16px;
}

.dca-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--dca-rule);
}

.dca-panel__head .dca-panel__title { margin: 0; }

.dca-panel__foot {
    padding: 14px 22px;
    border-top: 1px solid var(--dca-rule);
}

/* --------------------------------------------------------------------------
   Metric — label, value and a link, with an optional ringed icon.
   -------------------------------------------------------------------------- */

.dca-metric {
    background: var(--dca-paper);
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    padding: 22px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dca-metric__ring {
    width: 46px;
    height: 46px;
    border: 1px solid var(--dca-accent);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dca-ink);
    margin-bottom: 6px;
}

.dca-metric__label {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dca-ink);
    margin: 0;
    line-height: 1.6;
}

.dca-metric__value {
    font-size: clamp(21px, 2.4vw, 30px);
    letter-spacing: 0.04em;
    font-weight: 600;
    margin: 2px 0 0;
}

.dca-metric__note {
    font-size: 12px;
    color: var(--dca-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Link — uppercase, accent-coloured, trailing arrow.
   -------------------------------------------------------------------------- */

.dca-link {
    color: var(--dca-accent);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

.dca-link:hover { text-decoration: underline; color: var(--dca-accent); }

.dca-link::after { content: "→"; letter-spacing: 0; }
.dca-link--plain::after { content: none; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.dca-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    border: 1px solid var(--dca-ink);
    background: transparent;
    color: var(--dca-ink);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.18s ease, color 0.18s ease;
}

.dca-btn:hover { background: var(--dca-ink); color: var(--dca-canvas); }

.dca-btn--solid { background: var(--dca-ink); color: var(--dca-canvas); }
.dca-btn--solid:hover { background: #fff; color: #000; }

/* The gold-outlined action buttons used for Export and Contact Support. */
.dca-btn--accent { border-color: var(--dca-accent); color: var(--dca-accent); }
.dca-btn--accent:hover { background: var(--dca-accent); color: #000; }

.dca-btn--sm { padding: 8px 16px; font-size: 11px; letter-spacing: 0.12em; }

/* --------------------------------------------------------------------------
   Business grid — the dashboard's 8 icon tiles.
   -------------------------------------------------------------------------- */

.dca-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 18px;
    padding: 8px 0 20px;
}

@media (max-width: 900px) { .dca-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dca-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dca-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    padding: 12px 6px;
    border-radius: 3px;
    transition: transform 0.18s ease;
    position: relative;
}

.dca-tile:hover { transform: translateY(-3px); color: inherit; }

.dca-tile__label {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
}

.dca-tile__art {
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dca-tile__art svg { width: 100%; height: 100%; }

/* Count of things waiting, on tiles that have any. */
.dca-tile__badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 52px);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--dca-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Section heading with a centred rule, as used above "YOUR BUSINESS".
   -------------------------------------------------------------------------- */

.dca-section-heading {
    text-align: center;
    margin: 26px 0 6px;
}

.dca-section-heading__text {
    font-family: var(--dca-display);
    font-size: 27px;
    letter-spacing: 0.04em;
    margin: 0;
}

.dca-section-heading__rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    color: var(--dca-muted-soft);
}

.dca-section-heading__rule::before,
.dca-section-heading__rule::after {
    content: "";
    width: 34px;
    height: 1px;
    background: currentColor;
}

.dca-section-heading__rule span { font-size: 11px; }

/* --------------------------------------------------------------------------
   Numbered steps — "HOW YOU EARN".
   -------------------------------------------------------------------------- */

.dca-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 34px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: dca-step;
}

@media (max-width: 760px) { .dca-steps { grid-template-columns: minmax(0, 1fr); } }

.dca-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 13px;
    line-height: 1.65;
}

.dca-step__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--dca-accent);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.dca-step__icon { flex: 0 0 auto; color: var(--dca-ink); opacity: 0.8; }

/* --------------------------------------------------------------------------
   Journey — the "WHEN YOU GET PAID" flow.
   -------------------------------------------------------------------------- */

.dca-journey {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.dca-journey__step {
    flex: 1 1 168px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.dca-journey__ring {
    width: 62px;
    height: 62px;
    border: 1px solid var(--dca-accent);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dca-journey__title {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
}

.dca-journey__note {
    font-size: 12px;
    color: var(--dca-muted);
    margin: 0;
    line-height: 1.6;
}

.dca-journey__arrow {
    align-self: center;
    color: var(--dca-muted-soft);
    padding-top: 22px;
}

@media (max-width: 760px) { .dca-journey__arrow { display: none; } }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.dca-table-wrap { overflow-x: auto; }

.dca-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.dca-table th {
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dca-muted);
    font-weight: 600;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dca-rule);
    white-space: nowrap;
}

.dca-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--dca-rule);
    vertical-align: middle;
}

.dca-table tbody tr:last-child td { border-bottom: 0; }
.dca-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

.dca-table__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dca-table__id { font-family: var(--dca-body); letter-spacing: 0.04em; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Stage badge — colours mirror App\Support\OrderPipeline::COLOURS.
   -------------------------------------------------------------------------- */

.dca-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.08);
    color: var(--dca-ink);
}

.dca-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.85;
}

.dca-badge--slate  { color: var(--dca-slate);  background: rgba(148, 163, 184, 0.14); }
.dca-badge--blue   { color: var(--dca-blue);   background: rgba(96, 165, 250, 0.14); }
.dca-badge--amber  { color: var(--dca-amber);  background: rgba(251, 191, 36, 0.14); }
.dca-badge--purple { color: var(--dca-purple); background: rgba(192, 132, 252, 0.14); }
.dca-badge--indigo { color: var(--dca-indigo); background: rgba(165, 180, 252, 0.14); }
.dca-badge--teal   { color: var(--dca-teal);   background: rgba(45, 212, 191, 0.14); }
.dca-badge--green  { color: var(--dca-green);  background: rgba(74, 222, 128, 0.14); }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.dca-tabs {
    display: flex;
    gap: 30px;
    border-bottom: 1px solid var(--dca-rule);
    padding: 0 22px;
    overflow-x: auto;
}

.dca-tab {
    background: none;
    border: 0;
    padding: 16px 0;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dca-muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: inherit;
}

.dca-tab.is-active { color: var(--dca-ink); border-bottom-color: var(--dca-accent); font-weight: 600; }

.dca-tab-panel { display: none; }
.dca-tab-panel.is-active { display: block; }

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.dca-empty {
    text-align: center;
    padding: 52px 22px;
    color: var(--dca-muted);
}

.dca-empty__title {
    font-family: var(--dca-display);
    font-size: 19px;
    color: var(--dca-ink);
    margin: 12px 0 6px;
}

.dca-empty__body { font-size: 13px; margin: 0 auto; max-width: 380px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Definition rows — label left, value right.
   -------------------------------------------------------------------------- */

.dca-rows { display: grid; gap: 12px; margin: 0; }

.dca-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    font-size: 13px;
}

.dca-row dt, .dca-row__label { color: var(--dca-muted); margin: 0; }
.dca-row dd, .dca-row__value { margin: 0; font-weight: 600; text-align: right; }

.dca-row--total {
    border-top: 1px solid var(--dca-rule);
    padding-top: 12px;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   Chart — server-drawn SVG, as on the admin dashboard.
   -------------------------------------------------------------------------- */

.dca-chart { width: 100%; height: auto; }
.dca-chart__grid { stroke: rgba(255, 255, 255, 0.1); }
.dca-chart__axis { fill: var(--dca-muted); font-size: 10px; }
.dca-chart__bar-markup { fill: #e8e8e8; }
.dca-chart__bar-commission { fill: #6f6f6f; }
.dca-chart__line { stroke: var(--dca-accent); fill: none; stroke-width: 1.6; }
.dca-chart__point { fill: var(--dca-accent); }
.dca-chart__value { fill: var(--dca-accent); font-size: 9px; }

.dca-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    font-size: 11px;
    color: var(--dca-muted);
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.dca-legend__key { display: inline-flex; align-items: center; gap: 7px; }
.dca-legend__swatch { width: 12px; height: 10px; border-radius: 1px; display: inline-block; }

/* --------------------------------------------------------------------------
   Light variant.

   Only the Earnings comp is on white. Kept as a modifier so that screen can be
   flipped without a second stylesheet, but nothing uses it by default.
   -------------------------------------------------------------------------- */

.dca-portal--light {
    --dca-ink: #141414;
    --dca-paper: #ffffff;
    --dca-canvas: #f7f6f4;
    --dca-muted: #898989;
    --dca-muted-soft: #a7a7a7;
    --dca-hairline: rgba(20, 20, 20, 0.18);
    --dca-rule: rgba(20, 20, 20, 0.08);
    --dca-accent: #d4552b;

    --dca-slate: #64748b;
    --dca-blue: #2563eb;
    --dca-amber: #d97706;
    --dca-purple: #7c3aed;
    --dca-indigo: #4f46e5;
    --dca-teal: #0d9488;
    --dca-green: #16a34a;
}

.dca-portal--light .dca-chart__bar-markup { fill: #141414; }
.dca-portal--light .dca-chart__bar-commission { fill: #b6b6b6; }
.dca-portal--light .dca-chart__grid { stroke: rgba(20, 20, 20, 0.08); }
.dca-portal--light .dca-badge { background: rgba(20, 20, 20, 0.05); }

/* --------------------------------------------------------------------------
   Utilities kept deliberately small — this is a component sheet, not a
   utility framework. Anything reached for more than twice becomes a component.
   -------------------------------------------------------------------------- */

.dca-muted { color: var(--dca-muted); }
.dca-center { text-align: center; }
.dca-nowrap { white-space: nowrap; }
.dca-mt { margin-top: 18px; }
.dca-stack { display: grid; gap: 10px; }
.dca-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dca-small { font-size: 12px; }
.dca-caps { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* Gold section label, as used above "NEXT PAYMENT" and "PAYOUT METHOD". */
.dca-label {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dca-accent);
    font-weight: 600;
    margin: 0 0 12px;
}

/* Info strip — the bordered note explaining how commissions work. */
.dca-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    padding: 16px 20px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--dca-muted);
}

.dca-note__ring {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--dca-accent);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dca-accent);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   My Network dashboard.
   -------------------------------------------------------------------------- */

.dca-portal--network .dca-portal__masthead {
    padding: 28px 16px 18px;
}

.dca-portal--network .dca-portal__name {
    font-size: clamp(36px, 4.2vw, 58px);
}

.dca-portal--network .dca-portal__screen {
    margin-top: 8px;
    font-size: 14px;
}

.dca-portal--network .dca-portal__lede {
    margin-top: 8px;
    font-size: 11px;
}

.dca-portal--network .dca-portal__body {
    max-width: 1080px;
    gap: 14px;
}

.dca-portal--network .dca-panel__title {
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dca-portal--network .dca-panel__head {
    padding: 13px 18px;
}

.dca-network__actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 0;
    margin-bottom: 8px;
}

.dca-network__dates,
.dca-network__buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dca-network__buttons {
    align-items: stretch;
    flex-direction: column;
    min-width: 162px;
}

.dca-network-date-range {
    min-height: 46px;
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: #060606;
}

.dca-network-date-range .dca-input {
    width: 120px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--dca-ink);
    font-size: 14px;
}

.dca-network-date-range > span {
    color: var(--dca-muted);
}

.dca-network-date-range svg {
    color: var(--dca-ink);
    opacity: 0.88;
}

.dca-network__metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.dca-network-metric {
    min-width: 0;
    background: var(--dca-paper);
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    min-height: 230px;
    padding: 18px 14px;
    text-align: center;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 7px;
}

.dca-network-metric .dca-metric__label {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 180px;
}

.dca-network-metric .dca-metric__ring {
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
}

.dca-network-metric .dca-metric__value {
    font-size: clamp(25px, 2.4vw, 34px);
    font-family: var(--dca-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-top: 3px;
}

.dca-network-metric .dca-metric__note {
    font-size: 14px;
    color: var(--dca-ink);
}

.dca-network-metric__delta {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 700;
}

.dca-network-metric__delta.is-up {
    color: var(--dca-green);
}

.dca-network-metric__delta.is-down {
    color: #ff6b6b;
}

.dca-network-metric__compare {
    color: var(--dca-muted);
    margin: -5px 0 0;
    font-size: 13px;
}

.dca-network__main {
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(250px, 0.75fr);
    gap: 12px;
    align-items: stretch;
}

.dca-network-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}

.dca-network-card {
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    padding: 14px;
    min-width: 0;
}

.dca-network-card__head,
.dca-network-member {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dca-network-card__head .dca-metric__ring {
    width: 38px;
    height: 38px;
    margin: 0;
    flex: 0 0 auto;
}

.dca-network-card__title {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
}

.dca-network-card__value,
.dca-network-payout__date {
    font-family: var(--dca-display);
    font-size: 25px;
    line-height: 1.1;
    margin: 20px 0 4px;
}

.dca-network-card__copy {
    color: var(--dca-muted);
    font-size: 12px;
    line-height: 1.65;
    min-height: 50px;
    margin: 12px 0;
}

.dca-network-member__avatar {
    width: 32px;
    height: 32px;
    border: 1px solid var(--dca-accent);
    border-radius: 999px;
    color: var(--dca-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex: 0 0 auto;
}

.dca-network-member strong,
.dca-network-member span span {
    display: block;
}

.dca-network-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dca-muted);
    font-size: 12px;
}

.dca-network-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

.dca-network-status.is-active {
    color: var(--dca-green);
}

.dca-network__side-stack {
    display: grid;
    gap: 12px;
}

.dca-network-panel-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dca-network-table-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
}

.dca-network-table-actions a,
.dca-network-table-actions span {
    min-height: 30px;
    border: 1px solid var(--dca-hairline);
    border-left: 0;
    padding: 8px 11px;
    color: var(--dca-ink);
    font-size: 9px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
}

.dca-network-table-actions a:first-child {
    border-left: 1px solid var(--dca-hairline);
    border-radius: 3px 0 0 3px;
}

.dca-network-table-actions span:last-child {
    border-radius: 0 3px 3px 0;
}

.dca-network-table-actions .is-active {
    border-color: var(--dca-accent);
    color: var(--dca-accent);
}

.dca-portal--network .dca-table {
    min-width: 720px;
}

.dca-portal--network .dca-table th {
    padding: 12px 12px;
    font-size: 10px;
}

.dca-portal--network .dca-table td {
    padding: 13px 12px;
    font-size: 12px;
}

.dca-portal--network .dca-table th:first-child,
.dca-portal--network .dca-table td:first-child {
    padding-left: 22px;
}

.dca-network-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.dca-network-rank li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed var(--dca-hairline);
}

.dca-network-rank li:last-child {
    border-bottom: 0;
}

.dca-network-rank span {
    color: var(--dca-accent);
    font-family: var(--dca-display);
    font-size: 22px;
}

.dca-network-rank strong {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dca-network-rank em {
    font-style: normal;
    font-size: 13px;
    color: var(--dca-ink);
    white-space: nowrap;
}

.dca-network__breakdown-row {
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(250px, 0.75fr);
    gap: 12px;
    align-items: stretch;
}

.dca-network-range-chip {
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    padding: 8px 14px;
    color: var(--dca-ink);
    font-size: 12px;
}

.dca-panel__info {
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dca-body);
    font-size: 11px;
    line-height: 1;
    margin-left: 8px;
    vertical-align: middle;
}

.dca-network-chart {
    padding: 14px 18px 18px;
    display: grid;
    gap: 14px;
}

.dca-network-chart__legend {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    color: var(--dca-ink);
    font-size: 12px;
}

.dca-network-chart__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.dca-network-chart__legend-item::before {
    content: "";
    width: 21px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-radius: 999px;
}

.dca-network-chart__legend-item--pipeline {
    color: #e7a980;
}

.dca-network-chart__legend-item--delivered {
    color: #b9bcc4;
}

.dca-network-chart__legend-item--completed {
    color: #ffffff;
}

.dca-chart__line--pipeline {
    stroke: #e7a980;
}

.dca-chart__line--delivered {
    stroke: #b9bcc4;
}

.dca-chart__line--completed {
    stroke: #ffffff;
}

.dca-chart__point--pipeline {
    fill: var(--dca-canvas);
    stroke: #e7a980;
}

.dca-chart__point--delivered {
    fill: var(--dca-canvas);
    stroke: #b9bcc4;
}

.dca-chart__point--completed {
    fill: var(--dca-canvas);
    stroke: #ffffff;
}

.dca-chart__point {
    stroke-width: 2;
}

.dca-network-monthly {
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    padding: 12px 14px;
}

.dca-network-monthly h3 {
    margin: 0 0 10px;
    font-family: var(--dca-display);
    font-size: 17px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 400;
}

.dca-network-monthly .dca-table-wrap {
    margin-bottom: 10px;
}

.dca-network-top-panel {
    display: flex;
    flex-direction: column;
}

.dca-network-top-panel .dca-network-rank {
    margin-top: 18px;
}

.dca-network-top-panel .dca-link {
    margin-top: auto;
    padding-top: 20px;
}

.dca-portal--network .dca-network-chart .dca-chart {
    height: 230px;
    max-height: 230px;
    width: 100%;
}

.dca-network-breakdown-panel .dca-panel__head {
    min-height: 55px;
}

@media (max-width: 1120px) {
    .dca-network__metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dca-network__main,
    .dca-network__breakdown-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .dca-network__metrics,
    .dca-network-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .dca-network__actions {
        justify-content: stretch;
    }

    .dca-network-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dca-network-table-actions {
        overflow-x: auto;
        max-width: 100%;
    }

    .dca-network__dates,
    .dca-network__buttons,
    .dca-network-date-range {
        width: 100%;
    }

    .dca-network-date-range .dca-input {
        width: min(120px, 38vw);
    }
}

/* Delta figure under a metric — green up, red down. */
.dca-delta { font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.dca-delta--up { color: #4ade80; }
.dca-delta--down { color: #f87171; }

/* --------------------------------------------------------------------------
   Portal shell — the persistent left navigation from the Orders and Quotes
   designs, plus the optional right rail for inbound messages.

   The member designs show this shell on the working screens (Orders, Quotes)
   and not on the Dashboard, which is a full-bleed hero. Both are supported:
   .dca-shell wraps the ones that need navigation.
   -------------------------------------------------------------------------- */

.dca-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
    min-height: 70vh;
    width: 100%;
    overflow: hidden;
}

.dca-shell--rail {
    grid-template-columns: 232px minmax(0, 1fr) minmax(280px, 300px);
    column-gap: 16px;
}

@media (max-width: 1180px) {
    .dca-shell--rail { grid-template-columns: 232px minmax(0, 1fr); }
    .dca-shell__rail { display: none; }
}

@media (max-width: 860px) {
    .dca-shell,
    .dca-shell--rail { grid-template-columns: minmax(0, 1fr); }
}

.dca-shell__nav {
    border-right: 1px solid var(--dca-rule);
    padding: 26px 18px 40px;
    position: sticky;
    top: 0;
    align-self: start;
}

@media (max-width: 860px) {
    .dca-shell__nav {
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--dca-rule);
        padding-bottom: 18px;
    }
}

.dca-shell__brand {
    font-family: var(--dca-display);
    font-size: 27px;
    text-align: center;
    display: block;
    color: var(--dca-ink);
    text-decoration: none;
    margin-bottom: 26px;
}

.dca-nav-group {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dca-accent);
    margin: 22px 0 10px 12px;
    font-weight: 600;
}

.dca-nav-group:first-of-type { margin-top: 0; }

.dca-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.dca-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 2px;
    color: var(--dca-muted);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-left: 2px solid transparent;
}

.dca-nav__link:hover { color: var(--dca-ink); background: rgba(255, 255, 255, 0.04); }

.dca-nav__link.is-active {
    color: var(--dca-ink);
    background: rgba(255, 255, 255, 0.06);
    border-left-color: var(--dca-accent);
}

.dca-nav__count {
    margin-left: auto;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
}

.dca-shell__main {
    padding: 26px 24px 60px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 860px) { .dca-shell__main { padding: 22px 16px 48px; } }

.dca-shell__rail {
    border-left: 1px solid var(--dca-rule);
    padding: 26px 18px 40px;
    align-self: start;
    position: sticky;
    top: 0;
    min-width: 0;
    width: 100%;
}

/* --------------------------------------------------------------------------
   Stage counter strip — the coloured dots and counts above the Orders list.
   -------------------------------------------------------------------------- */

.dca-stages {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 22px 0;
    overflow-x: auto;
}

.dca-stage {
    position: relative;
    flex: 1 1 0;
    min-width: 132px;
    padding: 0 16px;
    border-right: 1px solid var(--dca-rule);
    text-decoration: none;
    color: inherit;
    display: block;
}

.dca-stage:last-child { border-right: 0; }
.dca-stage:hover .dca-stage__count { color: var(--dca-accent); }

.dca-stage__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dca-muted);
    line-height: 1.5;
    padding-right: 28px;
}

.dca-stage__dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }

.dca-stage__count {
    font-family: var(--dca-display);
    font-size: 32px;
    margin: 8px 0 0;
    color: var(--dca-accent);
}

.dca-stage.is-active .dca-stage__count { text-decoration: underline; text-underline-offset: 6px; }

/* Optional icon badge, top-right of a stage segment — used by the Quotes
   pages' four-bucket strip, matching the client's mockup icon-per-bucket. */
.dca-stage__icon {
    position: absolute;
    top: 2px;
    right: 16px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dca-stage__icon--slate  { background: rgba(148, 163, 184, 0.14); color: var(--dca-slate); }
.dca-stage__icon--blue   { background: rgba(96, 165, 250, 0.14);  color: var(--dca-blue); }
.dca-stage__icon--amber  { background: rgba(251, 191, 36, 0.14);  color: var(--dca-amber); }
.dca-stage__icon--purple { background: rgba(192, 132, 252, 0.14); color: var(--dca-purple); }
.dca-stage__icon--green  { background: rgba(74, 222, 128, 0.14);  color: var(--dca-green); }

/* --------------------------------------------------------------------------
   Job card — the order and quote rows in the designs.
   -------------------------------------------------------------------------- */

.dca-job {
    display: grid;
    grid-template-columns: 132px minmax(0, 1.3fr) minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    padding: 16px;
    background: var(--dca-paper);
}

@media (max-width: 960px) {
    .dca-job { grid-template-columns: 96px minmax(0, 1fr); }
    .dca-job__meta, .dca-job__actions { grid-column: 1 / -1; }
}

.dca-job__media {
    width: 132px;
    height: 108px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dca-muted-soft);
}

@media (max-width: 960px) { .dca-job__media { width: 96px; height: 84px; } }

.dca-job__media img { width: 100%; height: 100%; object-fit: cover; }

.dca-job__title {
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.dca-job__ref { font-size: 11px; color: var(--dca-muted); margin: 4px 0 10px; letter-spacing: 0.1em; }

.dca-job__facts { display: grid; gap: 4px; font-size: 12px; color: var(--dca-muted); }
.dca-job__facts strong { color: var(--dca-ink); font-weight: 600; }

.dca-job__meta { display: grid; gap: 10px; font-size: 11px; }

.dca-job__meta-label {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dca-muted-soft);
    display: block;
    margin-bottom: 2px;
}

.dca-job__actions { display: grid; gap: 10px; justify-items: end; }

/* --------------------------------------------------------------------------
   Message rail entries.
   -------------------------------------------------------------------------- */

.dca-msg {
    padding: 14px 0;
    border-bottom: 1px solid var(--dca-rule);
    display: block;
    text-decoration: none;
    color: inherit;
}

.dca-msg:last-child { border-bottom: 0; }
.dca-msg:hover .dca-msg__from { color: var(--dca-accent); }

.dca-msg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dca-msg__from { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.dca-msg__when { font-size: 10px; color: var(--dca-muted-soft); white-space: nowrap; }
.dca-msg__subject { font-size: 12px; margin: 6px 0 4px; }
.dca-msg__body { font-size: 12px; color: var(--dca-muted); line-height: 1.6; margin: 0; }

.dca-tag-new {
    display: inline-block;
    margin-top: 8px;
    background: #d92d20;
    color: #fff;
    font-size: 9px;
    letter-spacing: 0.12em;
    padding: 2px 7px;
    border-radius: 2px;
}

/* Filter bar */
.dca-filters {
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    padding: 18px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 18px;
}

/* Modifier: an explicit two-row layout instead of one flex-wrapped row —
   the client's mockup groups fields into two visually distinct rows rather
   than letting them wrap unpredictably. Opt-in so the existing single-row
   callers are unaffected. */
.dca-filters--rows { display: block; }

.dca-filters__row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.dca-filters__row + .dca-filters__row {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--dca-rule);
}

.dca-field { display: grid; gap: 7px; min-width: 170px; flex: 1 1 auto; }

.dca-field > span {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dca-muted);
}

.dca-input,
.dca-portal select.dca-input {
    background: var(--dca-canvas);
    color: var(--dca-ink);
    border: 1px solid var(--dca-hairline);
    border-radius: 2px;
    padding: 10px 13px;
    font-family: inherit;
    font-size: 13px;
    width: 100%;
}

.dca-input::placeholder { color: var(--dca-muted-soft); }

/* --------------------------------------------------------------------------
   Step tracker — the four numbered cards across the top of the customer quote
   and order screens, joined by arrows.
   -------------------------------------------------------------------------- */

.dca-track { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 22px 0; }

.dca-track__step {
    flex: 1 1 220px;
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    padding: 16px 18px;
}

.dca-track__step.is-current { border-color: var(--dca-accent); }

.dca-track__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.dca-track__num {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: 0 0 auto;
}

.dca-track__title {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
    flex: 1 1 auto;
}

.dca-track__body { font-size: 12px; color: var(--dca-muted); line-height: 1.65; margin: 0; }

.dca-track__arrow { align-self: center; color: var(--dca-muted-soft); }

@media (max-width: 860px) { .dca-track__arrow { display: none; } }

/* --------------------------------------------------------------------------
   Checklist — the "Pipeline Stage" multi-select filter next to the search
   bar (Member Quotes page).
   -------------------------------------------------------------------------- */

.dca-checklist {
    display: grid;
    gap: 8px;
}

.dca-checklist__item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: var(--dca-ink);
    cursor: pointer;
}

.dca-checklist__item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--dca-accent);
    flex: 0 0 auto;
}

.dca-checklist__dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Per-row messages indicator on a job card.
   -------------------------------------------------------------------------- */

.dca-job__messages {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--dca-muted);
}

/* --------------------------------------------------------------------------
   Kebab (⋯) row menu.
   -------------------------------------------------------------------------- */

.dca-kebab { position: relative; }

.dca-kebab__btn {
    background: none;
    border: 0;
    color: var(--dca-muted);
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    font-size: 18px;
}

.dca-kebab__btn:hover { color: var(--dca-ink); }

.dca-kebab__menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 190px;
    background: var(--dca-paper);
    border: 1px solid var(--dca-hairline);
    border-radius: 3px;
    padding: 6px;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dca-kebab__menu.is-open { display: grid; gap: 2px; }

.dca-kebab__item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    color: var(--dca-ink);
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.dca-kebab__item:hover { background: rgba(255, 255, 255, 0.06); }

/* --------------------------------------------------------------------------
   Search field with a leading icon (Member Quotes search box).
   -------------------------------------------------------------------------- */

.dca-search { position: relative; }

.dca-search svg {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dca-muted-soft);
    pointer-events: none;
}

.dca-search .dca-input { padding-right: 36px; }

/* --------------------------------------------------------------------------
   Pagination.
   -------------------------------------------------------------------------- */

.dca-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.dca-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--dca-hairline);
    border-radius: 2px;
    color: var(--dca-muted);
    text-decoration: none;
    font-size: 12px;
}

.dca-pagination__link:hover { color: var(--dca-ink); border-color: var(--dca-ink); }

.dca-pagination__link.is-current {
    color: var(--dca-canvas);
    background: var(--dca-accent);
    border-color: var(--dca-accent);
    font-weight: 600;
}

.dca-pagination__link.is-disabled { opacity: 0.35; cursor: default; }