/* ==========================================================================
   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` here was silently breaking the sticky sidebar.
       CSS does not allow one axis to be hidden while the other stays visible:
       the visible axis computes to `auto`, which turned .dca-portal into a
       scroll container. A sticky child sticks to its nearest scrolling
       ancestor, so .dca-shell__nav was sticking to this box — which never
       scrolls — and rode up the page with the content instead of staying put.

       `clip` is the axis-independent version: it clips horizontal overflow
       exactly as `hidden` did, but creates no scroll container, so overflow-y
       stays `visible` and the sidebar sticks to the viewport as intended.
    */
    overflow-x: clip;
}

.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 th` (class + element) outranks the plain `.dca-table__num`
   class on specificity, so a <th class="dca-table__num"> kept its
   left-aligned header text while the matching <td> right-aligned its value
   — the two visibly drifted apart in any numeric column. */
.dca-table th.dca-table__num { text-align: right; }
.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;
    overflow: hidden;
}

.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(22px, 2.4vw, 30px);
    font-family: var(--dca-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-top: 3px;
    max-width: 100%;
    white-space: nowrap;
    line-height: 1.15;
}

/*
 * A currency figure has no natural break point ("$87,000.00" is one token),
 * so a plain shrink-to-fit still overflows once there are enough digits, and
 * letting it wrap breaks mid-digit-group, which reads worse than the
 * overflow it was meant to fix. Shrinking further specifically for longer
 * values keeps the whole figure on one line at a size that actually fits,
 * while short values (a plain member count) keep their bigger, punchier
 * size. text-overflow/ellipsis is the last-resort backstop for a figure
 * that somehow still doesn't fit even at this size.
 */
.dca-network-metric .dca-metric__value.is-long {
    font-size: clamp(15px, 1.5vw, 20px);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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.
   -------------------------------------------------------------------------- */

/* The site header is sticky and 80px tall, so the columns that stick below it
   start there and are sized against the space that is left. */
.dca-shell {
    --dca-header-height: 80px;

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

/*
   `overflow: hidden` used to sit on .dca-shell to stop wide content stretching
   the grid. It also made the grid the nearest scroll container for anything
   sticky inside it — and that container never scrolls — so the nav had nothing
   to stick to and scrolled away with the page. min-width: 0 on the children
   does the containment job without breaking position: sticky.
*/
.dca-shell > * {
    min-width: 0;
}

.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: var(--dca-header-height);
    align-self: start;
    /*
       max-height, not height. A sticky element can only travel inside its own
       container, so a nav forced to the full viewport height made .dca-shell
       exactly as tall as itself on any page whose content was shorter than the
       screen — leaving zero room to stick, so it moved on the very first pixel
       of scroll. Sized to its content, the nav is shorter than the section it
       sits in and can hold position through it.

       The cap still bounds it to the viewport, so a menu taller than the screen
       scrolls on its own rather than having its last items clipped away with no
       way to reach them. overscroll-behavior stops that scroll chaining out to
       the page.
    */
    max-height: calc(100vh - var(--dca-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
}


/* Stacked layout below 860px: the nav sits above the content and scrolls with
   the page, so none of the sticky/height rules apply. */
@media (max-width: 860px) {
    .dca-shell__nav {
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--dca-rule);
        padding-bottom: 18px;
        max-height: none;
        overflow: visible;
    }

    .dca-shell__rail {
        position: static;
        height: auto;
        overflow: visible;
    }
}

.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;
}

/* The only column that scrolls with the page. */
.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: var(--dca-header-height);
    min-width: 0;
    width: 100%;
    height: calc(100vh - var(--dca-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   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; }


/* ==========================================================================
   Member bank account — the Payment Methods tab of the Payouts screen.

   Lives here rather than in a page-scoped <style> block because the field
   markup is a shared partial (customers/account/payouts/partials/bank-field),
   which has nowhere to carry styles of its own.
   ========================================================================== */

/* --- Payment Methods: member bank account --- */

.dca-bank {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

/* The form is collapsed behind the summary card once an account
   exists. With no account the panel ships already expanded, so adding
   one never depends on JavaScript. */
.dca-bank .dca-bank-form-wrap {
    display: none;
}

.dca-bank[data-bank-expanded] .dca-bank-form-wrap {
    display: block;
}

.dca-bank[data-bank-expanded] .dca-bank-summary [data-bank-toggle] {
    display: none;
}

.dca-bank-flash {
    border: 1px solid var(--dca-accent);
    border-radius: 4px;
    color: var(--dca-ink);
    font-size: 13px;
    margin-top: 12px;
    padding: 12px 18px;
}

.dca-bank-flash--error {
    border-color: #b3261e;
    color: #b3261e;
    margin-top: 0;
    margin-bottom: 16px;
}

.dca-bank-summary__grid {
    display: grid;
    gap: 2px 32px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin: 0 0 14px;
}

.dca-bank-summary__grid > div {
    border-bottom: 1px solid var(--dca-hairline);
    padding: 11px 0;
}

.dca-bank-summary__grid dt {
    color: var(--dca-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dca-bank-summary__grid dd {
    color: var(--dca-ink);
    font-size: 14px;
    margin: 4px 0 0;
}

.dca-bank-summary__note,
.dca-bank-lede {
    color: var(--dca-muted);
    font-size: 12px;
    margin: 0 0 16px;
}

.dca-bank-grid {
    display: grid;
    gap: 16px 22px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.dca-bank-country {
    margin-bottom: 18px;
    max-width: 380px;
}

.dca-bank-fieldset {
    border: 1px solid var(--dca-hairline);
    border-radius: 4px;
    margin: 0;
    padding: 18px 20px 22px;
}

.dca-bank-fieldset legend {
    color: var(--dca-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0 8px;
    text-transform: uppercase;
}

.dca-bank-fieldset[hidden] {
    display: none;
}

.dca-bank-optional {
    color: var(--dca-muted-soft);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.06em;
    margin-left: 6px;
}

.dca-bank-hint,
.dca-bank-error {
    font-size: 11px;
    font-style: normal;
    line-height: 1.5;
}

.dca-bank-hint {
    color: var(--dca-muted);
}

.dca-bank-error {
    color: #b3261e;
}

.dca-portal .dca-input--error {
    border-color: #b3261e;
}

.dca-bank-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

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

    .dca-bank-country {
        max-width: none;
    }
}