/* Agentlo affiliate dashboard — front-end shortcode styles.
   Aesthetic: clean React Native-style card UI. Generous whitespace,
   soft surfaces, big numerics, single-screen mobile-first layout.

   Heavy use of !important is intentional — themes (especially
   GeneratePress + custom WP themes) apply aggressive form/typography
   styles via specificity that we have to bulldoze through to keep
   the dashboard looking like one product, not a Frankenstein. */

/* ── Page-level cleanups ─────────────────────────────────── */
/* When the [agco_dashboard] shortcode is on a page, the theme will
   render its own .entry-title / .page-title — that fights with our
   hero card. Hide them when our shortcode is on the page. The
   .agco-page-active class is added by the shortcode JS at runtime;
   for safety we also unconditionally hide entry-title on body.page
   when our root container is present via the :has() selector. */
body:has(.agco-dash) .entry-title,
body:has(.agco-dash) .page-title,
body:has(.agco-dash) .post-title,
body:has(.agco-dash-signedout) .entry-title {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body:has(.agco-dash) .entry-header,
body:has(.agco-dash) .page-header { padding: 0 !important; margin: 0 !important; }
body:has(.agco-dash) .site-content,
body:has(.agco-dash) .content-area {
    background: #F8FAFC !important;
}

.agco-dash {
    --agco-primary:       #8B5CF6;
    --agco-primary-dark:  #6D28D9;
    --agco-primary-soft:  rgba(139, 92, 246, 0.08);
    --agco-success:       #10B981;
    --agco-success-soft:  #ECFDF5;
    --agco-amber:         #F59E0B;
    --agco-amber-soft:    #FFFBEB;
    --agco-danger:        #EF4444;
    --agco-text:          #0F172A;
    --agco-text-muted:    #64748B;
    --agco-text-subtle:   #94A3B8;
    --agco-surface:       #FFFFFF;
    --agco-surface-alt:   #F8FAFC;
    --agco-border:        #E2E8F0;
    --agco-border-soft:   #F1F5F9;
    --agco-radius:        20px;
    --agco-radius-md:     14px;
    --agco-radius-sm:     10px;
    --agco-shadow-sm:     0 1px 2px rgba(15,23,42,0.04);
    --agco-shadow:        0 4px 16px rgba(15,23,42,0.06);

    color: var(--agco-text);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
    background: var(--agco-surface-alt);
}

.agco-dash *, .agco-dash *::before, .agco-dash *::after { box-sizing: border-box; }

/* ── Hero card ────────────────────────────────────────────── */
.agco-hero {
    position: relative;
    background: linear-gradient(140deg, var(--agco-primary) 0%, var(--agco-primary-dark) 100%);
    color: #fff;
    padding: 28px 24px 24px;
    border-radius: var(--agco-radius);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px -12px rgba(139,92,246,0.45);
}
.agco-hero::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 60%);
    pointer-events: none;
}
.agco-hero-left, .agco-hero-right { position: relative; z-index: 1; }

.agco-eyebrow {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 10.5px;
    font-weight: 700;
    opacity: 0.7;
}
.agco-hero-code {
    margin: 8px 0 6px;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1.4px;
    line-height: 1;
}
.agco-hero-tag {
    margin: 0 0 20px;
    opacity: 0.85;
    font-size: 14px;
    line-height: 1.45;
}

.agco-link-label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    opacity: 0.7;
    margin-bottom: 8px;
}
.agco-link-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(8px);
    border-radius: var(--agco-radius-md);
    padding: 6px;
}
.agco-link-input,
.agco-dash input[type="text"],
.agco-dash input[type="email"],
.agco-dash input[type="number"],
.agco-dash input[type="search"],
.agco-dash input[type="url"],
.agco-dash textarea {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: var(--agco-radius-sm) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 13px !important;
    background: transparent !important;
    color: #fff !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.agco-link-input:focus,
.agco-link-input:hover {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}
.agco-link-row .agco-btn-primary {
    background: #fff;
    color: var(--agco-primary-dark);
}

/* ── Stats — pill row ─────────────────────────────────────── */
.agco-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
@media (min-width: 600px) {
    .agco-stats { grid-template-columns: repeat(4, 1fr); }
}
.agco-stat {
    background: var(--agco-surface);
    border-radius: var(--agco-radius-md);
    padding: 14px 16px;
    box-shadow: var(--agco-shadow-sm);
}
.agco-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--agco-text-muted);
    letter-spacing: 0.2px;
}
.agco-stat-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.6px;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.agco-stat-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--agco-text-subtle);
    margin-top: 2px;
}

/* ── Buckets — single feature card ─────────────────────────── */
.agco-buckets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--agco-surface);
    border-radius: var(--agco-radius);
    box-shadow: var(--agco-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.agco-bucket {
    padding: 18px 20px;
    border-bottom: 1px solid var(--agco-border-soft);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
}
.agco-bucket:last-child { border-bottom: none; }

.agco-bucket-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--agco-text-muted);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    grid-column: 1;
}
.agco-bucket-value {
    grid-row: 2;
    grid-column: 1;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.8px;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.agco-bucket-hint {
    grid-row: 3;
    grid-column: 1;
    font-size: 12px;
    color: var(--agco-text-subtle);
    margin-top: 2px;
}

/* The available row gets the sticky payout button */
.agco-bucket-available { background: linear-gradient(180deg, var(--agco-primary-soft) 0%, transparent 100%); }
.agco-bucket-available .agco-bucket-value { color: var(--agco-primary-dark); }

.agco-btn-payout {
    grid-row: 1 / span 3;
    grid-column: 2;
    align-self: center;
}

.agco-bucket-pending  .agco-bucket-value { color: var(--agco-amber); }
.agco-bucket-requested .agco-bucket-value { color: var(--agco-text); }

/* ── Buttons ───────────────────────────────────────────────── */
.agco-dash .agco-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.1px !important;
    cursor: pointer !important;
    transition: transform 0.05s, opacity 0.15s, background 0.15s !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.agco-dash .agco-btn:active { transform: translateY(1px) !important; }
.agco-dash .agco-btn:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }
.agco-dash .agco-btn-primary { background: var(--agco-primary) !important; color: #fff !important; }
.agco-dash .agco-btn-primary:hover:not(:disabled) { background: var(--agco-primary-dark) !important; }
.agco-dash .agco-link-row .agco-btn-primary {
    background: #fff !important;
    color: var(--agco-primary-dark) !important;
}

/* ── Section + tables ─────────────────────────────────────── */
.agco-section { margin-bottom: 16px; }
.agco-section h3 {
    margin: 0 0 10px;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--agco-text-muted);
}

.agco-table-wrap {
    background: var(--agco-surface);
    border-radius: var(--agco-radius);
    overflow: hidden;
    box-shadow: var(--agco-shadow-sm);
}
.agco-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.agco-table thead th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: var(--agco-text-subtle);
    padding: 14px 16px 8px;
    background: transparent;
}
.agco-table tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--agco-border-soft);
    vertical-align: middle;
}
.agco-table tbody tr:first-child td { border-top: 1px solid var(--agco-border); }

/* ── Status pills ─────────────────────────────────────────── */
.agco-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.agco-pill-pending   { background: var(--agco-amber-soft);   color: #92400E; }
.agco-pill-available { background: var(--agco-primary-soft); color: #5B21B6; }
.agco-pill-requested { background: #DBEAFE;                  color: #1E40AF; }
.agco-pill-paid      { background: var(--agco-success-soft); color: #065F46; }
.agco-pill-reversed  { background: #FEE2E2;                  color: #991B1B; }
.agco-pill-rejected  { background: #FEE2E2;                  color: #991B1B; }
.agco-pill-approved  { background: #DBEAFE;                  color: #1E40AF; }

/* ── Flash + empty ─────────────────────────────────────────── */
.agco-flash {
    margin: 12px 0 16px;
    padding: 14px 16px;
    border-radius: var(--agco-radius-md);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: var(--agco-shadow-sm);
}
.agco-flash.agco-flash-ok  { background: var(--agco-success-soft); color: #065F46; }
.agco-flash.agco-flash-err { background: #FEE2E2;                  color: #991B1B; }

.agco-empty-state {
    padding: 40px 24px;
    text-align: center;
    background: var(--agco-surface);
    border-radius: var(--agco-radius);
    box-shadow: var(--agco-shadow-sm);
    color: var(--agco-text-muted);
}
.agco-empty-state h3 {
    margin: 0 0 8px;
    color: var(--agco-text);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    text-transform: none;
    padding: 0;
}
.agco-empty-state p { margin: 0; font-size: 14px; line-height: 1.55; }

/* ── Signed-out variant ────────────────────────────────────── */
.agco-dash-signedout {
    background: linear-gradient(140deg, var(--agco-primary) 0%, var(--agco-primary-dark) 100%);
    color: #fff;
    border-radius: var(--agco-radius);
    padding: 48px 28px;
    text-align: center;
    margin: 16px auto;
    max-width: 540px;
    box-shadow: 0 16px 40px -16px rgba(139,92,246,0.5);
}
.agco-dash-signedout h2 {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.8px;
}
.agco-dash-signedout p { margin: 0 0 24px; opacity: 0.9; font-size: 15px; }
.agco-dash-signedout .agco-btn-primary {
    background: #fff;
    color: var(--agco-primary-dark);
    padding: 14px 24px;
}

/* ── Theme overrides — make our blocks ignore inherited theme weirdness ── */
.agco-dash h2,
.agco-dash h3 {
    font-family: inherit !important;
    line-height: 1.3 !important;
    border: none !important;
    padding: 0 !important;
}
.agco-dash a {
    box-shadow: none !important;
    text-decoration: none !important;
}
.agco-dash p { margin: 0 0 8px !important; }
.agco-dash table {
    border: none !important;
    margin: 0 !important;
}
.agco-dash table th,
.agco-dash table td {
    border: none !important;
}
.agco-dash code {
    background: transparent !important;
    padding: 0 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: inherit !important;
    color: inherit !important;
}

/* Hide the legacy headerRow stuff */
.agco-hero-left { margin-bottom: 8px; }
@media (min-width: 600px) {
    .agco-hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        align-items: end;
    }
    .agco-hero-left { margin-bottom: 0; }
}