/*
 * AffTrack affiliate portal UI v2 - portal-specific pieces
 * Pilot: 2026-09-29 (instance 191 only, see public/affiliate/index.php "Affiliate portal UI v2 pilot").
 *
 * Loaded after admin-v2.css (tokens, shell, login card) and components.css (cards, KPIs, tables,
 * pills...). Everything shared with the admin UI stays in those two files; only what the
 * affiliate portal needs on top lives here.
 */

/* ------------------------------------------------------------------ */
/* Shell additions                                                     */
/* ------------------------------------------------------------------ */

.at-aff .at-nav-sep {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--at-border);
}

.at-aff .at-nav-home a.at-nav-home-link + a.at-nav-home-link {
    margin-top: 2px;
}

.at-aff .at-sidebar-brand strong {
    color: var(--at-text);
    font-size: .9375rem;
}

.at-balance {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    padding: 4px 12px;
    border-radius: 8px;
    background: rgba(var(--at-brand-rgb), .08);
    color: var(--at-text);
    text-decoration: none;
    margin-right: 6px;
}

.at-balance:hover {
    background: rgba(var(--at-brand-rgb), .14);
    color: var(--at-text);
}

.at-balance-label {
    font-size: .6875rem;
    color: var(--at-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.at-balance-value {
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.at-balance.is-negative .at-balance-value {
    color: var(--at-danger);
}

@media (max-width: 575.98px) {
    .at-aff .at-search {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Login                                                               */
/* ------------------------------------------------------------------ */

.at-aff .at-login-wrap {
    flex-direction: column;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(var(--at-brand-rgb), .10), transparent 70%),
        var(--at-bg);
}

.at-aff .at-login-card {
    max-width: 420px;
}

.at-login-company {
    font-size: 1.25rem;
    font-weight: 700;
}

.at-login-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 4px;
    letter-spacing: -.01em;
}

.at-login-sub {
    text-align: center;
    color: var(--at-text-muted);
    font-size: .8125rem;
    margin: 0 0 20px;
}

.at-aff .at-login-card .form-label {
    font-weight: 600;
    font-size: .8125rem;
    margin-bottom: 4px;
}

.at-aff .at-login-card input[type="text"],
.at-aff .at-login-card input[type="password"],
.at-aff .at-login-card input[type="email"] {
    min-height: 40px;
    padding: 8px 12px;
    font-size: .875rem;
}

.at-aff .at-login-card input[readonly] {
    background: var(--at-surface-2) !important;
    color: var(--at-text-muted);
}

.at-aff .at-login-card button[type="submit"].btn-lg,
.at-aff .at-login-card input[type="submit"].btn-lg {
    min-height: 42px;
    font-size: .875rem !important;
}

.at-aff .at-login-card button[type="submit"].btn-outline-secondary {
    background: var(--at-surface) !important;
    color: var(--at-text) !important;
    border-color: var(--at-border-strong) !important;
}

.at-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--at-text-muted);
    padding: 6px 8px;
    line-height: 1;
}

.at-pw-toggle:hover {
    color: var(--at-text);
}

.at-login-alt {
    text-align: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--at-border);
    font-size: .8125rem;
    color: var(--at-text-muted);
}

.at-login-alt a {
    font-weight: 600;
    color: var(--at-brand);
    text-decoration: none;
}

.at-login-foot {
    margin: 18px 0 0;
    font-size: .75rem;
    color: var(--at-text-muted);
}

.at-login-alerts {
    margin-bottom: 16px;
}

.at-login-alerts ul {
    margin: 0;
    padding-left: 18px;
}

/* ------------------------------------------------------------------ */
/* Copy-able values (tracking links, API keys, code)                   */
/* ------------------------------------------------------------------ */

.at-copy {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--at-border-strong);
    border-radius: var(--at-radius-sm);
    background: var(--at-surface-2);
    min-width: 0;
}

.at-copy code,
.at-copy .at-copy-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .78rem;
    color: var(--at-text);
    background: none;
    word-break: break-all;
    white-space: pre-wrap;
}

.at-copy textarea.at-copy-text {
    border: 0 !important;
    resize: vertical;
    min-height: 90px;
    outline: none;
    box-shadow: none !important;
}

.at-copy-btn {
    flex-shrink: 0;
    border: 0;
    border-left: 1px solid var(--at-border-strong);
    background: var(--at-surface);
    color: var(--at-text-muted);
    padding: 0 12px;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 0 var(--at-radius-sm) var(--at-radius-sm) 0;
    white-space: nowrap;
}

.at-copy-btn:hover {
    color: var(--at-brand);
    background: rgba(var(--at-brand-rgb), .06);
}

.at-copy-btn.is-done {
    color: #1a7f4b;
}

.at-code-block {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--at-border);
    border-radius: var(--at-radius-sm);
    background: var(--at-surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .78rem;
    white-space: pre-wrap;
    word-break: break-all;
}

code.at-token {
    font-size: .78rem;
    color: var(--at-brand);
    background: rgba(var(--at-brand-rgb), .07);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Offers                                                              */
/* ------------------------------------------------------------------ */

.at-offer-cats {
    min-height: 150px;
}

.at-offer-id {
    font-variant-numeric: tabular-nums;
    color: var(--at-text-muted);
    white-space: nowrap;
}

.at-offer-id .fa-circle {
    font-size: .5rem;
    vertical-align: middle;
    margin-right: 4px;
}

.at-payout {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.at-payout.is-custom {
    color: #1a7f4b;
}

.at-offer-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

.at-meter {
    height: 8px;
    border-radius: 4px;
    background: var(--at-surface-2);
    border: 1px solid var(--at-border);
    overflow: hidden;
    margin: 6px 0 4px;
}

.at-meter > span {
    display: block;
    height: 100%;
    background: var(--at-brand);
}

.at-meter.is-high > span {
    background: #d97706;
}

.at-meter.is-full > span {
    background: var(--at-danger);
}

.at-creative {
    border: 1px solid var(--at-border);
    border-radius: var(--at-radius);
    padding: 14px;
    background: var(--at-surface);
}

.at-creative + .at-creative {
    margin-top: 12px;
}

.at-creative-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    font-size: .8125rem;
}

.at-creative-head strong {
    font-size: .875rem;
}

.at-creative-img {
    max-width: 100%;
    overflow: auto;
    padding: 10px;
    border: 1px dashed var(--at-border-strong);
    border-radius: var(--at-radius-sm);
    background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 50% / 16px 16px;
    margin-bottom: 10px;
}

.at-creative-img img {
    max-width: 100%;
    height: auto;
}

.at-creative-preview {
    border: 1px solid var(--at-border);
    border-radius: var(--at-radius-sm);
    padding: 10px;
    max-height: 420px;
    overflow: auto;
    background: #fff;
}

.at-field-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--at-text-muted);
    margin: 10px 0 4px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.at-field-label:first-child {
    margin-top: 0;
}

.at-import-note {
    color: var(--at-danger);
    font-size: .75rem;
    font-weight: 600;
    margin: 8px 0 4px;
}

.at-requirements {
    white-space: pre-wrap;
}

/* ------------------------------------------------------------------ */
/* Reports                                                             */
/* ------------------------------------------------------------------ */

.at-aff .at-table tr.is-inactive > td {
    background: #fffbeb;
}

.at-aff .at-table tr.is-inactive > td:first-child {
    box-shadow: inset 3px 0 0 #f59e0b;
}

.at-aff .at-table tfoot td {
    font-weight: 700;
    background: var(--at-surface-2);
    border-top: 1px solid var(--at-border-strong);
    padding: 9px 12px;
    font-variant-numeric: tabular-nums;
}

.at-amount-payable { color: #1a7f4b; font-weight: 600; }
.at-amount-hold { color: #b45309; font-weight: 600; }
.at-amount-reversed { color: var(--at-danger); font-weight: 600; text-decoration: line-through; }

/* Server-built pager from includes/affiliate/report_summary.php ($pagination is a table + form) */
.at-pager-legacy {
    padding: 10px 14px;
    border-top: 1px solid var(--at-border);
    font-size: .8125rem;
    color: var(--at-text-muted);
}

.at-pager-legacy table {
    width: 100%;
    background: none !important;
}

.at-pager-legacy td {
    padding: 2px 4px;
    vertical-align: middle;
    background: none !important;
}

.at-pager-legacy form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.at-pager-legacy label {
    margin: 0;
}

.at-pager-legacy select {
    display: inline-block !important;
    width: auto !important;
    min-height: 28px !important;
    padding: 2px 24px 2px 8px !important;
}

.at-pager-legacy .label {
    display: inline-block;
    min-width: 24px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--at-brand);
    color: var(--at-brand-contrast);
    font-weight: 700;
    text-align: center;
}

.at-pager-legacy td[width="1200"] {
    width: auto;
}

.at-radio-seg {
    display: inline-flex;
    border: 1px solid var(--at-border-strong);
    border-radius: var(--at-radius-sm);
    overflow: hidden;
}

.at-radio-seg input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.at-radio-seg label {
    padding: 6px 12px;
    font-size: .8125rem;
    cursor: pointer;
    margin: 0;
    border-left: 1px solid var(--at-border-strong);
    background: var(--at-surface);
    color: var(--at-text);
}

.at-radio-seg label:first-of-type {
    border-left: 0;
}

.at-radio-seg input:checked + label {
    background: rgba(var(--at-brand-rgb), .12);
    color: var(--at-brand);
    font-weight: 600;
}

.at-radio-seg input:focus-visible + label {
    outline: 2px solid var(--at-brand);
    outline-offset: -2px;
}

/* ------------------------------------------------------------------ */
/* Account / tax forms                                                 */
/* ------------------------------------------------------------------ */

.at-setting-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--at-border);
}

.at-setting-row:last-child {
    border-bottom: 0;
}

.at-setting-row > .at-setting-main {
    flex: 1 1 260px;
    min-width: 0;
}

.at-setting-row .at-setting-title {
    font-weight: 600;
}

.at-setting-row .at-setting-sub {
    font-size: .75rem;
    color: var(--at-text-muted);
}

.at-setting-row form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    flex-wrap: wrap;
}

.at-taxform fieldset + fieldset {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--at-border);
}

.at-taxform legend {
    font-size: .875rem;
    font-weight: 700;
    margin-bottom: 10px;
    float: none;
}

.at-signature {
    font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
    font-size: 1.25rem !important;
}

/* ------------------------------------------------------------------ */
/* Terms                                                               */
/* ------------------------------------------------------------------ */

.at-prose {
    max-width: 820px;
    line-height: 1.65;
    font-size: .875rem;
}

.at-terms-box {
    max-height: 260px;
    overflow: auto;
    padding: 12px 14px;
    border: 1px solid var(--at-border);
    border-radius: var(--at-radius-sm);
    background: var(--at-surface-2);
    white-space: pre-wrap;
    font-size: .8125rem;
}

/* Offer preview button: $preview_link is a server-built opening <a> tag */
.at-preview-link {
    padding: 0 !important;
}

.at-preview-link > a {
    display: inline-flex;
    align-items: center;
    padding: var(--bs-btn-padding-y, 6px) var(--bs-btn-padding-x, 12px);
    color: inherit;
    text-decoration: none;
}

/* Tables fill their card (admin pages add Bootstrap's .table for this) */
.at-aff .at-table {
    width: 100%;
}

/* List rows built with <span>s: title above subtitle */
.at-aff .at-list-main > .at-list-title,
.at-aff .at-list-main > .at-list-sub {
    display: block;
}

/* ------------------------------------------------------------------ */
/* Server-side sortable tables + pager (added 2026-09-29)              */
/* ------------------------------------------------------------------ */

.at-aff .at-table th a.at-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.at-aff .at-table th a.at-sort:hover {
    color: var(--at-brand);
}

.at-aff .at-table th a.at-sort i {
    font-size: .625rem;
    opacity: .45;
}

.at-aff .at-table th a.at-sort.active {
    color: var(--at-brand);
}

.at-aff .at-table th a.at-sort.active i {
    opacity: 1;
}

.at-aff .at-table th.at-right a.at-sort {
    flex-direction: row;
}

.at-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.at-pager-per {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .8125rem;
}

.at-pager-per select {
    width: auto;
}

.at-aff .at-tz select {
    display: block;
    width: 100%;
}