/*
 * Affiliate dashboard presentation layer.
 * The PHP renderer owns content, data, and form actions. This file only
 * establishes a restrained operational layout inside the dashboard root.
 */
html[data-axiowl-theme] body:has(.axiowl-affiliate-dashboard),
html[data-axiowl-theme] body:has(.axiowl-affiliate-dashboard) main#content,
html[data-axiowl-theme] body:has(.axiowl-affiliate-dashboard) main#content > :is(.elementor, .page-content) {
    background: var(--ax-page, #ffffff) !important;
    color: var(--ax-ink, #111429) !important;
}

.axiowl-affiliate-dashboard {
    --aad-border: color-mix(in srgb, var(--ax-ink, #111429) 16%, transparent);
    --aad-border-strong: color-mix(in srgb, var(--ax-ink, #111429) 28%, transparent);
    --aad-soft: color-mix(in srgb, var(--ax-primary, #ff3b4d) 9%, var(--ax-surface, #ffffff));
    --aad-soft-cool: color-mix(in srgb, var(--ax-cool, #2dd4ff) 10%, var(--ax-surface, #ffffff));
    --aad-control: var(--ax-surface, #ffffff);
    --aad-on-primary: var(--ax-button-ink, #071b29);
    box-sizing: border-box;
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 0 24px 72px;
    background: var(--ax-page, #ffffff);
    color: var(--ax-ink, #111429);
    font-size: 16px;
    line-height: 1.55;
}

.axiowl-affiliate-dashboard *,
.axiowl-affiliate-dashboard *::before,
.axiowl-affiliate-dashboard *::after {
    box-sizing: border-box;
}

.axiowl-affiliate-dashboard :is(h1, h2, h3, p, ul, ol, table, form) {
    margin-top: 0;
}

.axiowl-affiliate-dashboard :is(h1, h2, h3, p, li, th, td, label, legend, input, select, textarea, button) {
    letter-spacing: 0;
}

.axiowl-affiliate-dashboard :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ax-primary, #ff3b4d) 76%, #ffffff);
    outline-offset: 3px;
}

.axiowl-affiliate-dashboard a {
    color: color-mix(in srgb, var(--ax-primary, #ff3b4d) 62%, var(--ax-ink, #111429));
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.axiowl-affiliate-dashboard a:hover {
    color: var(--ax-primary, #ff3b4d);
}

/* Header */
.axiowl-affiliate-dashboard .aad-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 0 24px;
    border-bottom: 1px solid var(--aad-border-strong);
}

.axiowl-affiliate-dashboard .aad-header h1 {
    max-width: 760px;
    margin: 0;
    color: var(--ax-ink, #111429);
    font-size: 42px;
    font-weight: 760;
    line-height: 1.08;
}

.axiowl-affiliate-dashboard .aad-header__meta {
    flex: 0 1 300px;
    margin: 0;
    color: var(--ax-muted, #5b6370);
    font-size: 14px;
    line-height: 1.45;
    text-align: right;
}

.axiowl-affiliate-dashboard .aad-header__meta :is(p, span) {
    color: inherit;
}

/* Summary metrics are repeated items, not nested content cards. */
.axiowl-affiliate-dashboard :is(.aad-metrics, .axiowl-affiliate-dashboard__metrics) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0 34px;
}

.axiowl-affiliate-dashboard :is(.aad-metric, .axiowl-affiliate-dashboard__metric) {
    min-width: 0;
    padding: 18px 20px 20px;
    border: 1px solid var(--aad-border);
    border-top: 3px solid var(--ax-primary, #ff3b4d);
    background: var(--ax-surface, #ffffff);
}

.axiowl-affiliate-dashboard :is(.aad-metric--paid, [data-metric="paid"]) {
    border-top-color: var(--ax-cool, #2dd4ff);
}

.axiowl-affiliate-dashboard :is(.aad-metric--outstanding, [data-metric="outstanding"]) {
    border-top-color: var(--ax-accent, #4361ee);
}

.axiowl-affiliate-dashboard :is(.aad-metric__label, .axiowl-affiliate-dashboard__metric h3) {
    display: block;
    margin-bottom: 7px;
    color: var(--ax-muted, #5b6370);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.3;
    text-transform: uppercase;
}

.axiowl-affiliate-dashboard :is(.aad-metric__value, .axiowl-affiliate-dashboard__metric [data-metric-value]) {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ax-ink, #111429);
    font-size: 32px;
    font-weight: 760;
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
}

.axiowl-affiliate-dashboard :is(.aad-metric__note, .axiowl-affiliate-dashboard__metric small) {
    display: block;
    margin-top: 8px;
    color: var(--ax-muted, #5b6370);
    font-size: 13px;
    line-height: 1.4;
}

/* Full-width workflow sections keep the page scannable without nesting cards. */
.axiowl-affiliate-dashboard :is(.aad-section,
.pmpro_section,
.axiowl-affiliate-dashboard__section,
.aad-referrals,
.aad-sales,
.aad-withdrawal) {
    min-width: 0;
    margin: 0;
    scroll-margin-top: 100px;
    padding: 28px 0 32px;
    border-top: 1px solid var(--aad-border-strong);
    background: transparent;
}

.axiowl-affiliate-dashboard :is(.aad-section + .aad-section,
.aad-section + .pmpro_section,
.pmpro_section + .aad-section,
.pmpro_section + .pmpro_section,
.axiowl-affiliate-dashboard__section + .axiowl-affiliate-dashboard__section) {
    margin-top: 0;
}

.axiowl-affiliate-dashboard :is(.aad-section-heading, .pmpro_section_title, .aad-section > h2, .axiowl-affiliate-dashboard__section > h2) {
    margin: 0;
    color: var(--ax-ink, #111429);
    font-size: 21px;
    font-weight: 760;
    line-height: 1.2;
}

.axiowl-affiliate-dashboard :is(.aad-section__intro,
.axiowl-affiliate-dashboard__section > p,
.pmpro_section > p:first-of-type) {
    max-width: 780px;
    margin: 9px 0 18px;
    color: var(--ax-muted, #5b6370);
    font-size: 14px;
    line-height: 1.55;
}

.axiowl-affiliate-dashboard :is(.aad-section-heading + .aad-section__intro, .axiowl-affiliate-dashboard__section > h2 + p) {
    margin-bottom: 18px;
}

.axiowl-affiliate-dashboard .aad-section__heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.axiowl-affiliate-dashboard .aad-section__heading-row :is(h2, h3, p) {
    margin-bottom: 0;
}

/* Tables scroll in their own viewport on narrow screens. */
.axiowl-affiliate-dashboard :is(.aad-table-wrap, .axiowl-affiliate-dashboard__table-wrap) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--aad-border);
    background: var(--ax-surface, #ffffff);
    -webkit-overflow-scrolling: touch;
}

.axiowl-affiliate-dashboard :is(table.aad-table, table.pmpro_table, table[data-coupon-table], table[data-sales-table]) {
    width: 100%;
    min-width: 660px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: transparent;
    color: var(--ax-ink, #111429);
    font-size: 14px;
    line-height: 1.45;
}

.axiowl-affiliate-dashboard :is(table[data-affiliate-links-table], table[data-coupon-table]),
.axiowl-affiliate-dashboard .axiowl-affiliate-coupon-campaigns :is(table.aad-table, table.pmpro_table) {
    table-layout: fixed;
}

.axiowl-affiliate-dashboard :is(table[data-affiliate-links-table], table[data-coupon-table]) :is(th, td),
.axiowl-affiliate-dashboard .axiowl-affiliate-coupon-campaigns :is(th, td) {
    width: auto;
}

.axiowl-affiliate-dashboard :is(table[data-affiliate-links-table], table[data-coupon-table]) th:nth-child(1),
.axiowl-affiliate-dashboard .axiowl-affiliate-coupon-campaigns th:nth-child(1) {
    width: 23%;
}

.axiowl-affiliate-dashboard :is(table[data-affiliate-links-table], table[data-coupon-table]) th:nth-child(2),
.axiowl-affiliate-dashboard .axiowl-affiliate-coupon-campaigns th:nth-child(2) {
    width: 17%;
}

.axiowl-affiliate-dashboard :is(table[data-affiliate-links-table], table[data-coupon-table]) th:nth-child(3),
.axiowl-affiliate-dashboard .axiowl-affiliate-coupon-campaigns th:nth-child(3) {
    width: 60%;
}

.axiowl-affiliate-dashboard .aad-referrals table[data-affiliate-code-table] {
    min-width: 700px;
    table-layout: auto;
}

.axiowl-affiliate-dashboard .aad-referrals table[data-affiliate-code-table] th:nth-child(1) {
    width: 20%;
}

.axiowl-affiliate-dashboard .aad-referrals table[data-affiliate-code-table] th:nth-child(2) {
    width: 18%;
}

.axiowl-affiliate-dashboard .aad-referrals table[data-affiliate-code-table] th:nth-child(3) {
    width: 14%;
}

.axiowl-affiliate-dashboard .aad-referrals table[data-affiliate-code-table] th:nth-child(4) {
    width: 16%;
}

.axiowl-affiliate-dashboard .aad-referrals table[data-affiliate-code-table] th:nth-child(5) {
    width: 32%;
}

.axiowl-affiliate-dashboard .aad-referrals table[data-affiliate-links-table] th:nth-child(1) {
    width: 20%;
}

.axiowl-affiliate-dashboard .aad-referrals table[data-affiliate-links-table] th:nth-child(2) {
    width: 70%;
}

.axiowl-affiliate-dashboard .aad-referrals table[data-affiliate-links-table] th:nth-child(3) {
    width: 10%;
}

.axiowl-affiliate-dashboard :is(th, td) {
    padding: 13px 16px;
    border-bottom: 1px solid var(--aad-border);
    vertical-align: middle;
    text-align: left;
}

.axiowl-affiliate-dashboard thead th {
    background: var(--aad-soft);
    color: var(--ax-ink, #111429);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.35;
    text-transform: uppercase;
}

.axiowl-affiliate-dashboard tbody tr:last-child td {
    border-bottom: 0;
}

.axiowl-affiliate-dashboard tbody tr:hover {
    background: color-mix(in srgb, var(--ax-primary, #ff3b4d) 4%, transparent);
}

.axiowl-affiliate-dashboard td :is(code, .aad-code, .aad-coupon-code) {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px;
    border: 1px solid var(--aad-border);
    border-radius: 3px;
    background: var(--aad-soft-cool);
    color: var(--ax-ink, #111429);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .92em;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.axiowl-affiliate-dashboard td a.aad-referral-link {
    display: inline-block;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in srgb, var(--ax-primary, #ff3b4d) 62%, var(--ax-ink, #111429));
    overflow-wrap: anywhere;
    word-break: break-word;
    text-decoration: none;
}

.axiowl-affiliate-dashboard td a.aad-referral-link:hover,
.axiowl-affiliate-dashboard td a.aad-referral-link:focus-visible {
    border-color: var(--ax-primary, #ff3b4d);
    color: var(--ax-primary, #ff3b4d);
    text-decoration: underline;
}

.axiowl-affiliate-dashboard .aad-table-cell__action,
.axiowl-affiliate-dashboard .aad-code-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.axiowl-affiliate-dashboard .aad-table-cell__action > :is(code, .aad-code, .aad-referral-link, .aad-coupon-code),
.axiowl-affiliate-dashboard .aad-code-action > :is(code, .aad-code, .aad-referral-link, .aad-coupon-code) {
    min-width: 0;
}

.axiowl-affiliate-dashboard .aad-copy-button {
    position: relative;
    display: inline-grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--aad-border-strong);
    border-radius: 4px;
    background: var(--aad-control);
    color: var(--ax-ink, #111429);
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.axiowl-affiliate-dashboard .aad-copy-button:hover,
.axiowl-affiliate-dashboard .aad-copy-button:focus-visible {
    border-color: var(--ax-primary, #ff3b4d);
    background: var(--aad-soft);
    color: var(--ax-primary, #ff3b4d);
}

.axiowl-affiliate-dashboard .aad-copy-button[data-copy-state="success"] {
    border-color: var(--ax-cool, #2dd4ff);
    background: var(--aad-soft-cool);
    color: var(--ax-ink, #111429);
}

.axiowl-affiliate-dashboard .aad-copy-button[data-copy-state="error"] {
    border-color: var(--ax-primary, #ff3b4d);
}

.axiowl-affiliate-dashboard .aad-copy-button .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.axiowl-affiliate-dashboard .aad-copy-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sales table can contain more columns than the referral table. */
.axiowl-affiliate-dashboard :is(.aad-sales, [data-affiliate-sales]) :is(table.aad-table, table.pmpro_table, table[data-sales-table]) {
    min-width: 760px;
}

.axiowl-affiliate-dashboard .aad-sales :is(th, td) {
    font-variant-numeric: tabular-nums;
}

.axiowl-affiliate-dashboard .aad-sales td:first-child,
.axiowl-affiliate-dashboard .aad-sales th:first-child {
    white-space: nowrap;
}

.axiowl-affiliate-dashboard .aad-empty-state {
    margin: 0;
    padding: 20px;
    border: 1px dashed var(--aad-border-strong);
    background: var(--aad-soft-cool);
    color: var(--ax-muted, #5b6370);
}

/* Withdrawal form: preserve PMPro's action and fields while making the controls consistent. */
.axiowl-affiliate-dashboard .aad-payout-fields {
    min-width: 0;
    margin: 20px 0;
    padding: 18px 0 4px;
    border: 0;
    border-top: 1px solid var(--aad-border);
}

.axiowl-affiliate-dashboard .aad-payout-fields[hidden] {
    display: none !important;
}

.axiowl-affiliate-dashboard .aad-payout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.axiowl-affiliate-dashboard .aad-payout-grid label {
    min-width: 0;
    margin: 0;
}

/* CF7 auto-formatting wraps consecutive labels in a paragraph. */
.axiowl-affiliate-dashboard .aad-payout-grid > p {
    display: contents;
}

.axiowl-affiliate-dashboard [data-payout-required="true"] > .aad-payout-label::after {
    content: " *";
}

.axiowl-affiliate-dashboard .aad-payout-privacy {
    color: var(--ax-muted, #5b6370);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 620px) {
    .axiowl-affiliate-dashboard .aad-payout-grid {
        grid-template-columns: 1fr;
    }
}

.axiowl-affiliate-dashboard .aad-withdrawal__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr);
    gap: 28px;
    align-items: start;
}

.axiowl-affiliate-dashboard .aad-withdrawal__note {
    margin: 0;
    padding: 16px 18px;
    border-left: 3px solid var(--ax-cool, #2dd4ff);
    background: var(--aad-soft-cool);
    color: var(--ax-muted, #5b6370);
    font-size: 14px;
    line-height: 1.55;
}

.axiowl-affiliate-dashboard .aad-withdrawal :is(form, .pmpro_form) {
    max-width: 720px;
}

.axiowl-affiliate-dashboard .aad-withdrawal .wpcf7-form {
    max-width: 720px;
}

.axiowl-affiliate-dashboard .aad-withdrawal :is(label, legend) {
    display: block;
    margin-bottom: 6px;
    color: var(--ax-ink, #111429);
    font-size: 13px;
    font-weight: 700;
}

.axiowl-affiliate-dashboard .aad-withdrawal :is(input:not([type="submit"]):not([type="button"]):not([type="hidden"]), select, textarea) {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--aad-border-strong);
    border-radius: 4px;
    background: var(--aad-control);
    color: var(--ax-ink, #111429);
    font: inherit;
    line-height: 1.35;
}

.axiowl-affiliate-dashboard .aad-withdrawal textarea {
    min-height: 112px;
    resize: vertical;
}

.axiowl-affiliate-dashboard .aad-withdrawal :is(input, select, textarea):hover {
    border-color: color-mix(in srgb, var(--ax-ink, #111429) 44%, transparent);
}

.axiowl-affiliate-dashboard .aad-withdrawal :is(input, select, textarea):focus {
    border-color: var(--ax-primary, #ff3b4d);
    box-shadow: 0 0 0 1px var(--ax-primary, #ff3b4d);
    outline: 0;
}

.axiowl-affiliate-dashboard .aad-withdrawal :is(.pmpro_btn, button[type="submit"], input[type="submit"]) {
    min-height: 44px;
    padding: 10px 17px;
    border: 1px solid var(--ax-primary, #ff3b4d);
    border-radius: 4px;
    background: var(--ax-primary, #ff3b4d);
    color: var(--aad-on-primary);
    font: inherit;
    font-weight: 750;
    line-height: 1.25;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

.axiowl-affiliate-dashboard .aad-withdrawal :is(.pmpro_btn, button[type="submit"], input[type="submit"]):hover {
    filter: brightness(1.08);
}

.axiowl-affiliate-dashboard .aad-withdrawal :is(.pmpro_btn, button[type="submit"], input[type="submit"]):active {
    transform: translateY(1px);
}

.axiowl-affiliate-dashboard :is(.pmpro_message, .pmpro_error, .aad-notice, .wpcf7-response-output) {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--aad-border-strong);
    border-left: 3px solid var(--ax-primary, #ff3b4d);
    background: var(--aad-soft);
    color: var(--ax-ink, #111429);
    font-size: 14px;
}

/* Native details already provides disclosure semantics; this only keeps its rhythm. */
.axiowl-affiliate-dashboard .aad-disclosure {
    margin-top: 18px;
    border-top: 1px solid var(--aad-border);
    border-bottom: 1px solid var(--aad-border);
}

.axiowl-affiliate-dashboard .aad-disclosure > summary {
    padding: 13px 0;
    color: var(--ax-ink, #111429);
    font-weight: 700;
    cursor: pointer;
}

.axiowl-affiliate-dashboard .aad-disclosure[open] > summary {
    margin-bottom: 4px;
    color: var(--ax-primary, #ff3b4d);
}

.axiowl-affiliate-dashboard .aad-disclosure__content {
    padding: 0 0 16px;
    color: var(--ax-muted, #5b6370);
    font-size: 14px;
}

@media (max-width: 820px) {
    .axiowl-affiliate-dashboard .aad-header {
        align-items: start;
        flex-direction: column;
        gap: 10px;
    }

    .axiowl-affiliate-dashboard .aad-header__meta {
        flex-basis: auto;
        text-align: left;
    }

    .axiowl-affiliate-dashboard .aad-withdrawal__layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 620px) {
    .axiowl-affiliate-dashboard {
        padding-right: 16px;
        padding-left: 16px;
        padding-bottom: 48px;
    }

    .axiowl-affiliate-dashboard .aad-header {
        padding-top: 22px;
        padding-bottom: 18px;
    }

    .axiowl-affiliate-dashboard .aad-header h1 {
        font-size: 30px;
    }

    .axiowl-affiliate-dashboard .aad-metric__value {
        font-size: 26px;
    }

    .axiowl-affiliate-dashboard .aad-metrics {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 18px;
        margin-bottom: 26px;
    }

    .axiowl-affiliate-dashboard .aad-metric {
        padding: 15px 16px 16px;
    }

    .axiowl-affiliate-dashboard :is(.aad-section, .pmpro_section, .aad-referrals, .aad-sales, .aad-withdrawal) {
        padding-top: 22px;
        padding-bottom: 26px;
    }

    .axiowl-affiliate-dashboard :is(th, td) {
        padding: 11px 12px;
    }

    .axiowl-affiliate-dashboard .aad-table-wrap {
        margin-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .axiowl-affiliate-dashboard * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Actual renderer hooks. The proposed .aad-* names remain supported for future
 * markup, while these aliases keep the current PHP output in the same layout. */
.axiowl-affiliate-dashboard > :is(.axiowl-affiliate-dashboard__header, h1) {
    max-width: 100%;
}

.axiowl-affiliate-dashboard > .axiowl-affiliate-dashboard__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 0 24px;
    border-bottom: 1px solid var(--aad-border-strong);
}

.axiowl-affiliate-dashboard > .axiowl-affiliate-dashboard__header h1,
.axiowl-affiliate-dashboard > h1 {
    max-width: 760px;
    margin: 0;
    color: var(--ax-ink, #111429);
    font-size: 42px;
    font-weight: 760;
    line-height: 1.08;
}

.axiowl-affiliate-dashboard > .axiowl-affiliate-dashboard__header p {
    flex: 0 1 360px;
    margin: 0;
    color: var(--ax-muted, #5b6370);
    font-size: 14px;
    line-height: 1.45;
    text-align: right;
}

.axiowl-affiliate-dashboard > .axiowl-affiliate-dashboard__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    padding: 13px 0 4px;
    border-bottom: 1px solid var(--aad-border);
}

.axiowl-affiliate-dashboard > .axiowl-affiliate-dashboard__nav a {
    padding: 3px 0 9px;
    color: var(--ax-muted, #5b6370);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.axiowl-affiliate-dashboard > .axiowl-affiliate-dashboard__nav a:hover,
.axiowl-affiliate-dashboard > .axiowl-affiliate-dashboard__nav a:focus-visible {
    color: var(--ax-primary, #ff3b4d);
}

.axiowl-affiliate-dashboard .axiowl-affiliate-dashboard__section > h2 {
    margin: 0 0 9px;
}

.axiowl-affiliate-dashboard .axiowl-affiliate-dashboard__section > p {
    max-width: 780px;
    margin: 0 0 18px;
    color: var(--ax-muted, #5b6370);
    font-size: 14px;
    line-height: 1.55;
}

.axiowl-affiliate-dashboard .axiowl-affiliate-dashboard__link-list {
    display: grid;
    gap: 18px;
}

.axiowl-affiliate-dashboard .axiowl-affiliate-dashboard__affiliate-links {
    min-width: 0;
    padding-top: 17px;
    border-top: 1px solid var(--aad-border);
}

.axiowl-affiliate-dashboard .axiowl-affiliate-dashboard__affiliate-links h3 {
    margin: 0 0 13px;
    color: var(--ax-ink, #111429);
    font-size: 15px;
    line-height: 1.35;
}

.axiowl-affiliate-dashboard .axiowl-affiliate-dashboard__affiliate-links h3 code {
    margin-left: 5px;
}

.axiowl-affiliate-dashboard .axiowl-affiliate-dashboard__link-field {
    display: grid;
    grid-template-columns: minmax(170px, .32fr) minmax(0, 1fr);
    gap: 10px 16px;
    align-items: center;
    margin-top: 10px;
}

.axiowl-affiliate-dashboard .axiowl-affiliate-dashboard__link-field label {
    margin: 0;
    color: var(--ax-muted, #5b6370);
    font-size: 13px;
    font-weight: 700;
}

.axiowl-affiliate-dashboard .axiowl-affiliate-dashboard__link-field input[data-affiliate-link] {
    min-width: 0;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--aad-border-strong);
    border-radius: 4px;
    background: var(--aad-control);
    color: var(--ax-ink, #111429);
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.35;
}

.axiowl-affiliate-dashboard [data-affiliate-coupons] > table[data-coupon-table] {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--aad-border);
    background: var(--ax-surface, #ffffff);
}

.axiowl-affiliate-dashboard [data-affiliate-coupons] > table[data-coupon-table] :is(thead, tbody) {
    display: table;
    width: 100%;
    min-width: 660px;
    table-layout: fixed;
}

.axiowl-affiliate-dashboard [data-affiliate-sales] [data-sales-table] {
    min-width: 760px;
}

.axiowl-affiliate-dashboard [data-sale-status] {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid var(--aad-border);
    border-radius: 99px;
    background: var(--aad-soft-cool);
    color: var(--ax-ink, #111429);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
    white-space: nowrap;
}

.axiowl-affiliate-dashboard [data-sale-status="paid"] {
    border-color: color-mix(in srgb, var(--ax-cool, #2dd4ff) 60%, var(--aad-border));
}

.axiowl-affiliate-dashboard [data-empty-state] {
    margin-top: 2px;
    padding: 18px;
    border: 1px dashed var(--aad-border-strong);
    background: var(--aad-soft-cool);
    color: var(--ax-muted, #5b6370);
}

@media (max-width: 820px) {
    .axiowl-affiliate-dashboard > .axiowl-affiliate-dashboard__header {
        align-items: start;
        flex-direction: column;
        gap: 10px;
    }

    .axiowl-affiliate-dashboard > .axiowl-affiliate-dashboard__header p {
        flex-basis: auto;
        text-align: left;
    }
}

@media (max-width: 620px) {
    .axiowl-affiliate-dashboard > .axiowl-affiliate-dashboard__header {
        padding-top: 22px;
        padding-bottom: 18px;
    }

    .axiowl-affiliate-dashboard > .axiowl-affiliate-dashboard__header h1,
    .axiowl-affiliate-dashboard > h1 {
        font-size: 30px;
    }

    .axiowl-affiliate-dashboard :is(.axiowl-affiliate-dashboard__metrics, .aad-metrics) {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 18px;
        margin-bottom: 26px;
    }

    .axiowl-affiliate-dashboard :is(.axiowl-affiliate-dashboard__metric, .aad-metric) {
        padding: 15px 16px 16px;
    }

    .axiowl-affiliate-dashboard .axiowl-affiliate-dashboard__link-field {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}