/**
 * TDP Affiliate — Front-end + admin-module styles.
 *
 * Brand tokens (shared with the rest of the redesign):
 *   deep #06272f · teal #087d72 · green #18b47d · mint #e9fbf4 ·
 *   gold #f3b82f · ink #092b36 · line #dce9e7 · blue #1769e8 (accent only).
 *
 * This file is loaded BOTH on the front-end (affiliate dashboard /
 * "Become an Affiliate" endpoints + shortcodes) and on the affiliate admin
 * screens (TDP_Affiliate_Admin::enqueue_assets()), so all rules are scoped
 * to the module's own .tdp-* classes.
 *
 * @package Teach_Demy_Plus
 * @since  2.0.0  (restyled 2.4.0 — items 35/37/38/45)
 */

.tdp-affiliate-dashboard,
.tdp-become-affiliate,
.tdp-affiliate-approved,
.tdp-affiliate-pending {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        color: #092b36;
}

.tdp-affiliate-dashboard h2,
.tdp-become-affiliate h2 {
        color: #06272f;
        margin-top: 0;
}

/* ===== Stats grid (item 35 + Round 18/Edits-3: colored top border on ALL
   four boxes + the NUMBER inside each box takes its box's border color —
   brand palette only: mint / green / gold / deep teal) ===== */
.tdp-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin: 24px 0;
}
.tdp-stat {
        background: #fff;
        padding: 24px;
        border-radius: 14px;
        border: 1px solid #dce9e7;
        text-align: center;
        box-shadow: 0 1px 4px rgba(9, 43, 54, 0.05);
        border-top: 4px solid #16a673; /* Referrals — mint (default) */
}
.tdp-stat-num {
        font-size: 28px;
        font-weight: 700;
        color: #16a673; /* matches the mint top border */
        line-height: 1;
        font-variant-numeric: tabular-nums;
}
.tdp-stat-label {
        font-size: 13px;
        color: #52696e;
        margin-top: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
}
/* Course Sales — green */
.tdp-stat.tdp-stat--sales { border-top-color: #27c58b; }
.tdp-stat.tdp-stat--sales .tdp-stat-num { color: #27c58b; }
/* Pending — gold */
.tdp-stat.tdp-stat--pending,
.tdp-stat.pending { border-top-color: #f7bd31; }
.tdp-stat.tdp-stat--pending .tdp-stat-num,
.tdp-stat.pending .tdp-stat-num { color: #d99e1a; } /* darker gold for AA contrast */
/* Pay Out — deep teal */
.tdp-stat.tdp-stat--paid,
.tdp-stat.paid { border-top-color: #087d72; }
.tdp-stat.tdp-stat--paid .tdp-stat-num,
.tdp-stat.paid .tdp-stat-num { color: #087d72; }
/* The numbers keep the box color even when WooCommerce's own price
   markup (woocommerce-Price-amount spans) carries a theme color. */
.tdp-stat .tdp-stat-num .woocommerce-Price-amount,
.tdp-stat .tdp-stat-num .woocommerce-Price-currencySymbol {
        color: inherit;
        font-weight: inherit;
}
/* Legacy modifier aliases kept so any cached markup still matches. */
.tdp-stat.tdp-stat--referrals { border-top-color: #16a673; }
.tdp-stat.tdp-stat--referrals .tdp-stat-num { color: #16a673; }

/* ===== Dashboard sections ===== */
.tdp-dashboard-section {
        background: #fff;
        padding: 24px;
        border-radius: 16px;
        border: 1px solid #dce9e7;
        margin: 24px 0;
        box-shadow: 0 1px 4px rgba(9, 43, 54, 0.05);
}
.tdp-dashboard-section h3 {
        margin-top: 0;
        color: #06272f;
        border-bottom: 2px solid #dce9e7;
        padding-bottom: 10px;
}

/* ===== Performance charts (item 35) ===== */
.tdp-chart-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin: 4px 0 18px;
}
.tdp-chart-box {
        background: #fff;
        border: 1px solid #dce9e7;
        border-radius: 14px;
        padding: 14px 16px 16px;
        min-width: 0;
}
.tdp-chart-title {
        font-size: 12.5px;
        font-weight: 700;
        color: #06272f;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
}
.tdp-chart-canvas {
        position: relative;
        height: 260px; /* canvas height ~260px (item 35) */
}

/* ===== Referral link box ===== */
.tdp-referral-link-box {
        display: flex;
        gap: 10px;
        align-items: center;
        background: #f4faf8;
        padding: 14px 18px;
        border-radius: 10px;
        border: 1px solid #dce9e7;
}
.tdp-referral-link-box code {
        flex: 1;
        font-family: 'Courier New', monospace;
        font-size: 14px;
        color: #06272f;
        word-break: break-all;
}
.tdp-referral-code {
        margin-top: 10px;
        font-size: 14px;
        color: #52696e;
}
.tdp-referral-code code {
        background: #e9fbf4;
        color: #087d72;
        padding: 3px 10px;
        border-radius: 6px;
        font-weight: 600;
}

/* ===== Forms ===== */
.tdp-form { margin-top: 16px; }
.tdp-form-row { margin-bottom: 16px; }
.tdp-form-row label {
        display: block;
        font-weight: 600;
        color: #06272f;
        margin-bottom: 6px;
}
.tdp-form-row input[type="text"],
.tdp-form-row input[type="email"],
.tdp-form-row input[type="url"],
.tdp-form-row input[type="number"],
.tdp-form-row input[type="date"],
.tdp-form-row textarea,
.tdp-form-row select {
        width: 100%;
        max-width: 500px;
        padding: 10px 14px;
        border: 1px solid #dce9e7;
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
        background: #fff;
        color: #092b36;
}
.tdp-form-row input:focus,
.tdp-form-row textarea:focus,
.tdp-form-row select:focus {
        border-color: #087d72;
        outline: none;
        box-shadow: 0 0 0 3px rgba(8, 125, 114, 0.12);
}
.tdp-form-row input[type="number"].small-text { width: 80px; }
.tdp-form-row textarea { resize: vertical; }
.required { color: #d63638; }
.tdp-flat-rate-input {
        display: inline-block;
        width: 80px !important;
        margin: 0 8px;
}
.tdp-form-status, .tdp-save-status { display: block; margin-top: 12px; font-size: 14px; }
.tdp-success, .tdp-error { padding: 12px 16px; border-radius: 8px; }
.tdp-success { background: #e9fbf4; color: #0c7a52; border-left: 3px solid #18b47d; }
.tdp-error { background: #fdeaea; color: #a12726; border-left: 3px solid #d63638; }

/* ===== Buttons ===== */
.tdp-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #087d72;
        color: #fff !important;
        border: none;
        border-radius: 10px;
        padding: 11px 22px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.2s;
}
.tdp-btn:hover { background: #06655c; color: #fff !important; }
.tdp-btn-small { padding: 8px 14px; font-size: 13px; border-radius: 8px; }

/* ===== Referral filter row (item 35/45) ===== */
.tdp-referral-filters {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
}
.tdp-referral-filters select,
.tdp-referral-filters input { width: auto; min-width: 150px; }

/* ===== Item 35: visible filter selects/inputs (front-end + admin) ===== */
/* The theme renders form controls with a light background and (in dark mode)
   light text, which made the dashboard filter dropdown white-on-white. Force
   the readable combination on every affiliate-module control. */
.tdp-affiliate-dashboard select,
.tdp-affiliate-dashboard input[type="text"],
.tdp-affiliate-dashboard input[type="date"],
.tdp-affiliate-dashboard input[type="number"],
.tdp-become-affiliate .tdp-form-row select,
.tdp-become-affiliate .tdp-form-row input,
.tdp-select {
        background: #ffffff !important;
        border: 1px solid #dce9e7 !important;
        color: #092b36 !important;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1.4;
        min-height: 40px;
        color-scheme: light; /* native date-picker icon visible on white */
}
.tdp-affiliate-dashboard select:focus,
.tdp-affiliate-dashboard input:focus,
.tdp-select:focus {
        border-color: #087d72 !important;
        outline: none;
        box-shadow: 0 0 0 3px rgba(8, 125, 114, 0.12);
}
/* Dark mode (Woodmart dark classes). */
.dark-mode .tdp-affiliate-dashboard select,
.dark-mode .tdp-affiliate-dashboard input,
.dark-mode .tdp-become-affiliate .tdp-form-row select,
.dark-mode .tdp-become-affiliate .tdp-form-row input,
.dark-mode .tdp-select,
.woodmart-dark .tdp-affiliate-dashboard select,
.woodmart-dark .tdp-affiliate-dashboard input,
.woodmart-dark .tdp-become-affiliate .tdp-form-row select,
.woodmart-dark .tdp-become-affiliate .tdp-form-row input,
.woodmart-dark .tdp-select {
        background: #10262b !important;
        border-color: #1e3f42 !important;
        color: #e6f2f0 !important;
        color-scheme: dark;
}
.dark-mode .tdp-affiliate-dashboard select:focus,
.dark-mode .tdp-select:focus,
.woodmart-dark .tdp-affiliate-dashboard select:focus,
.woodmart-dark .tdp-select:focus {
        border-color: #18b47d !important;
        box-shadow: 0 0 0 3px rgba(24, 180, 125, 0.18);
}

/* ===== Item 37: application status panel ===== */
.tdp-app-status-panel {
        background: #fff;
        border: 1px solid #dce9e7;
        border-radius: 14px;
        padding: 22px 24px;
        margin-top: 16px;
}
.tdp-app-status-head {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 12px;
}
.tdp-app-status-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 14px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-transform: uppercase;
}
.tdp-app-status--pending {
        background: #fdf3dc;           /* amber tint */
        color: #8a6414;
        border: 1px solid rgba(243, 184, 47, 0.55);
}
.tdp-app-status--approved {
        background: rgba(24, 180, 125, 0.14); /* green tint */
        color: #0c7a52;
        border: 1px solid rgba(24, 180, 125, 0.45);
}
.tdp-app-status--rejected {
        background: #fdeaea;           /* red tint */
        color: #a12726;
        border: 1px solid rgba(214, 54, 56, 0.45);
}
.tdp-app-submitted {
        font-size: 13px;
        color: #52696e;
}
.tdp-app-reason {
        background: #fdeaea;
        border: 1px solid rgba(214, 54, 56, 0.35);
        border-radius: 8px;
        color: #a12726;
        padding: 10px 14px;
        margin: 10px 0;
        font-size: 13.5px;
}
.tdp-app-summary-title {
        margin: 20px 0 10px;
        font-size: 14px;
        font-weight: 700;
        color: #06272f;
        text-transform: uppercase;
        letter-spacing: 0.5px;
}
.tdp-app-summary {
        display: grid;
        grid-template-columns: minmax(140px, max-content) 1fr;
        gap: 8px 18px;
        margin: 0;
        font-size: 13.5px;
}
.tdp-app-summary dt {
        color: #52696e;
        font-weight: 600;
        margin: 0;
}
.tdp-app-summary dd {
        margin: 0;
        color: #092b36;
        overflow-wrap: anywhere;
}
.tdp-app-timeline {
        list-style: none;
        margin: 0;
        padding: 0 0 0 4px;
        border-left: 2px solid #dce9e7;
}
.tdp-app-timeline li {
        position: relative;
        padding: 2px 0 14px 20px;
        font-size: 13.5px;
}
.tdp-app-timeline li:last-child { padding-bottom: 2px; }
.tdp-tl-dot {
        position: absolute;
        left: -7px;
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #087d72;
        border: 2px solid #fff;
        box-shadow: 0 0 0 2px #dce9e7;
}
.tdp-tl-submitted .tdp-tl-dot { background: #087d72; }
.tdp-tl-approved .tdp-tl-dot { background: #18b47d; }
.tdp-tl-rejected .tdp-tl-dot { background: #d63638; }
.tdp-tl-event { font-weight: 600; color: #092b36; margin-right: 8px; }
.tdp-tl-date { color: #52696e; font-size: 12.5px; }
.tdp-tl-reason {
        display: block;
        color: #a12726;
        margin-top: 2px;
}
.tdp-reapply-title {
        margin: 22px 0 0;
        font-size: 15px;
        font-weight: 700;
        color: #06272f;
}

/* ===== Tier editor ===== */
.tdp-tier-editor { margin: 12px 0 20px; padding: 16px; background: #f4faf8; border-radius: 10px; }
.tdp-tier-table { width: 100%; max-width: 600px; }
.tdp-tier-table th {
        background: #06272f;
        color: #fff;
        padding: 8px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: left;
}
.tdp-tier-table td { padding: 6px; }
.tdp-tier-table input { width: 100%; max-width: 80px; padding: 6px; border: 1px solid #dce9e7; border-radius: 6px; }
.tdp-remove-tier { background: #fdeaea; color: #d63638; border: 1px solid #d63638; }

/* ===== Tables (item 35: centered on wide screens, centered numerics;
   Round 18/Edits-3: the DATE, COURSE and CATEGORY header cells — and their
   data cells — are CENTERED in the Recent Referrals table, and every cell
   of the Performance table above it is centered too) ===== */
.tdp-table {
        width: 100%;
        max-width: 1080px;
        margin: 16px auto; /* centered on wide screens */
        border-collapse: collapse;
        font-size: 14px;
        font-variant-numeric: tabular-nums;
}
.tdp-table th {
        background: #f4faf8;
        color: #06272f;
        padding: 12px 14px;
        text-align: left;
        font-weight: 600;
        font-size: 13px;
        border-bottom: 2px solid #087d72;
}
.tdp-table td {
        padding: 12px 14px;
        border-bottom: 1px solid #dce9e7;
        color: #092b36;
}
.tdp-table tr:hover td { background: #f7fbfa; }
/* Numeric columns (class="tdp-num" added by the renderers). */
.tdp-table th.tdp-num,
.tdp-table td.tdp-num {
        text-align: center;
        white-space: nowrap;
}
/* Item 87 (client edits list): text columns whose header should be
   centered to match its data (Month / Date / Course / Category).
   Added as an explicit class (used directly in the PHP templates)
   rather than relying only on the :nth-child rule below, since that
   one is scoped to .tdp-affiliate-dashboard and this table also
   renders on the admin-side Referral Purchases screen, which may not
   carry that wrapper class. */
.tdp-table th.tdp-center,
.tdp-table td.tdp-center {
        text-align: center;
}
/* Round 18/Edits-3 — Recent Referrals table: center the Date (1),
   Course (4) and Category (5) columns, headers AND data cells. */
.tdp-affiliate-dashboard .tdp-table:not(.tdp-perf-table) th:nth-child(1),
.tdp-affiliate-dashboard .tdp-table:not(.tdp-perf-table) td:nth-child(1),
.tdp-affiliate-dashboard .tdp-table:not(.tdp-perf-table) th:nth-child(4),
.tdp-affiliate-dashboard .tdp-table:not(.tdp-perf-table) td:nth-child(4),
.tdp-affiliate-dashboard .tdp-table:not(.tdp-perf-table) th:nth-child(5),
.tdp-affiliate-dashboard .tdp-table:not(.tdp-perf-table) td:nth-child(5) {
        text-align: center;
}
/* Round 18/Edits-3 — the table ABOVE the recent referrals (the Performance
   month/sales/earnings table): every header + data cell centered. */
.tdp-affiliate-dashboard .tdp-perf-table th,
.tdp-affiliate-dashboard .tdp-perf-table td {
        text-align: center;
}
.tdp-table-wrap { width: 100%; }
.tdp-showing-count {
        font-size: 13px;
        color: #52696e;
        margin: 0 0 8px;
        text-align: center;
}

/* ===== Item 45: pagination links ===== */
.tdp-pagination-nav {
        margin: 16px 0 4px;
        text-align: center;
}
.tdp-pagination-nav .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        margin: 2px;
        border: 1px solid #dce9e7;
        border-radius: 8px;
        background: #fff;
        color: #092b36;
        font-size: 13px;
        text-decoration: none;
}
.tdp-pagination-nav .page-numbers.current {
        background: #087d72;
        border-color: #087d72;
        color: #fff;
        font-weight: 600;
}
.tdp-pagination-nav a.page-numbers:hover {
        border-color: #087d72;
        color: #087d72;
}
.tdp-pagination-nav .page-numbers.dots {
        border: none;
        background: none;
        min-width: 20px;
}

/* ===== Approved / Pending messages ===== */
.tdp-affiliate-approved,
.tdp-affiliate-pending {
        background: #fff;
        padding: 32px;
        border-radius: 16px;
        border: 1px solid #dce9e7;
        text-align: center;
        box-shadow: 0 1px 4px rgba(9, 43, 54, 0.05);
}
.tdp-affiliate-approved h2 { color: #18b47d; }
.tdp-affiliate-pending h2 { color: #f3b82f; }

/* ===== Dark-mode panels ===== */
.dark-mode .tdp-dashboard-section,
.dark-mode .tdp-stat,
.dark-mode .tdp-chart-box,
.dark-mode .tdp-app-status-panel,
.dark-mode .tdp-affiliate-approved,
.dark-mode .tdp-affiliate-pending,
.woodmart-dark .tdp-dashboard-section,
.woodmart-dark .tdp-stat,
.woodmart-dark .tdp-chart-box,
.woodmart-dark .tdp-app-status-panel,
.woodmart-dark .tdp-affiliate-approved,
.woodmart-dark .tdp-affiliate-pending {
        background: #10262b;
        border-color: #1e3f42;
}
.dark-mode .tdp-table th,
.woodmart-dark .tdp-table th {
        background: #16333a;
        color: #e6f2f0;
}
.dark-mode .tdp-table td,
.woodmart-dark .tdp-table td {
        border-bottom-color: #1e3f42;
        color: #e6f2f0;
}
.dark-mode .tdp-table tr:hover td,
.woodmart-dark .tdp-table tr:hover td {
        background: #14303b;
}
.dark-mode .tdp-affiliate-dashboard h2,
.dark-mode .tdp-become-affiliate h2,
.dark-mode .tdp-dashboard-section h3,
.dark-mode .tdp-app-summary-title,
.woodmart-dark .tdp-affiliate-dashboard h2,
.woodmart-dark .tdp-become-affiliate h2,
.woodmart-dark .tdp-dashboard-section h3,
.woodmart-dark .tdp-app-summary-title {
        color: #e6f2f0;
}
.dark-mode .tdp-app-summary dd,
.dark-mode .tdp-tl-event,
.woodmart-dark .tdp-app-summary dd,
.woodmart-dark .tdp-tl-event {
        color: #e6f2f0;
}
.dark-mode .tdp-pagination-nav .page-numbers,
.woodmart-dark .tdp-pagination-nav .page-numbers {
        background: #10262b;
        color: #e6f2f0;
        border-color: #1e3f42;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
        .tdp-chart-grid { grid-template-columns: 1fr; } /* charts stack on mobile */
}
@media (max-width: 768px) {
        .tdp-stats-grid { grid-template-columns: repeat(2, 1fr); }
        .tdp-referral-link-box { flex-direction: column; align-items: stretch; }
        .tdp-app-summary { grid-template-columns: 1fr; gap: 2px 0; }
        .tdp-app-summary dt { margin-top: 8px; }
        .tdp-dashboard-section { padding: 18px 16px; }
        .tdp-table { font-size: 13px; }
        .tdp-table th, .tdp-table td { padding: 10px 10px; }
}

/* ===== Round 15 — government-style identity Step 1 + profile photo ===== */

.tdp-aff-identity-panel {
        border: 1px solid #dcebe6;
        border-left: 4px solid #16a673;
        border-radius: 12px;
        background: #f7fdfa;
        padding: 18px 20px 14px;
        margin: 18px 0 8px;
}
.tdp-aff-identity-title {
        margin: 0 0 8px;
        font-size: 16px;
        color: #062b2b;
}
.tdp-aff-identity-note {
        margin: 0 0 12px;
        font-size: 13px;
        color: #6b7b90;
        line-height: 1.55;
}
.tdp-aff-identity-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 16px;
}
.tdp-aff-identity-grid .tdp-form-row { margin-bottom: 12px; }
.tdp-aff-identity-actions { margin: 4px 0 0; }
.tdp-aff-identity-done {
        margin: 10px 0 0;
        font-size: 13px;
        color: #0c7a52;
        line-height: 1.6;
}
.tdp-aff-identity-done .tdp-aff-ok { font-weight: 700; }
.tdp-aff-identity-done .tdp-btn-small { margin-left: 8px; }

.tdp-aff-app-fields { padding-top: 6px; }

.tdp-aff-photo {
        position: relative;
        width: 100%;
        max-width: 220px;
        aspect-ratio: 1 / 1;
        border: 2px dashed #bcd9d0;
        border-radius: 14px;
        background-color: #f4fbf8;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        overflow: hidden;
        transition: border-color 0.15s ease;
}
.tdp-aff-photo:hover,
.tdp-aff-photo:focus-visible {
        border-color: #16a673;
        outline: none;
}
.tdp-aff-photo-hint {
        font-size: 12px;
        color: #6b7b90;
        text-align: center;
        padding: 0 12px;
        line-height: 1.5;
}
.tdp-aff-photo.is-uploading { border-color: #16a673; }
.tdp-aff-photo.has-photo .tdp-aff-photo-hint { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

.tdp-app-photo {
        margin-top: 14px;
}
.tdp-app-photo img {
        width: 140px;
        height: 140px;
        object-fit: cover;
        border-radius: 14px;
        border: 1px solid #dcebe6;
        background: #fff;
}

/* Dark mode */
.dark-mode .tdp-aff-identity-panel,
.woodmart-dark .tdp-aff-identity-panel {
        background: #10262b;
        border-color: #1e3f42;
        border-left-color: #16a673;
}
.dark-mode .tdp-aff-identity-title,
.woodmart-dark .tdp-aff-identity-title {
        color: #e6f2f0;
}
.dark-mode .tdp-aff-identity-note,
.woodmart-dark .tdp-aff-identity-note,
.dark-mode .tdp-aff-photo-hint,
.woodmart-dark .tdp-aff-photo-hint {
        color: #9db3b8;
}
.dark-mode .tdp-aff-photo,
.woodmart-dark .tdp-aff-photo {
        background-color: #10262b;
        border-color: #1e3f42;
}

/* Responsive */
@media (max-width: 600px) {
        .tdp-aff-identity-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Round 17 — MOBILE PASS (phones)
   Companion to the theme's global td-mobile-fix.css. The affiliate
   dashboard collapses to single/2-column stat cards, charts go
   full-width, tables scroll horizontally, the application form
   stacks its rows.
   ========================================================= */
@media (max-width:768px){
  .tdp-affiliate-dashboard{
    padding:16px 12px;
    max-width:100%;
    min-width:0;
  }
  .tdp-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
  }
  .tdp-stats-grid > *,
  .tdp-stat-card{
    min-width:0;
    padding:14px 12px !important;
  }
  .tdp-chart-grid,
  .tdp-charts-grid{
    grid-template-columns:1fr !important;
  }
  .tdp-chart-box,
  .tdp-chart-wrapper,
  .tdp-chart-container{
    padding:14px 10px;
    min-width:0;
  }
  .tdp-chart-canvas{
    max-width:100% !important;
    height:auto !important;
  }
  .tdp-flex-table,
  .tdp-app-summary + table,
  .tdp-affiliate-dashboard table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    max-width:100%;
  }
  .tdp-aff-identity-grid{grid-template-columns:1fr}
  .tdp-aff-app-fields .tdp-form-row,
  .tdp-become-affiliate .tdp-form-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .tdp-aff-app-fields input[type="text"],
  .tdp-aff-app-fields input[type="email"],
  .tdp-aff-app-fields textarea,
  .tdp-become-affiliate input,
  .tdp-become-affiliate textarea{
    width:100%;
    font-size:16px !important;  /* iOS zoom guard */
  }
  .tdp-app-summary{grid-template-columns:1fr 1fr}
  .tdp-app-timeline{padding-left:18px}
  .tdp-feature-card{padding:16px 14px}
  .tdp-app-status-head{flex-wrap:wrap;gap:10px}
}
@media (max-width:480px){
  .tdp-stats-grid{grid-template-columns:1fr !important}
  .tdp-app-summary{grid-template-columns:1fr}
  .tdp-affiliate-dashboard{padding:12px 8px}
  .tdp-aff-app-fields input[type="text"],
  .tdp-aff-app-fields input[type="email"],
  .tdp-aff-app-fields textarea,
  .tdp-become-affiliate input,
  .tdp-become-affiliate textarea{
    font-size:16px !important;
  }
}

/* =========================================================
   Round 18 — Edits (3)
   A) Referral-link SHARE row (desktop icon buttons; phones get
      full-width buttons + the native share sheet via JS).
   B) "Purchased Course Types" horizontal CSS bar chart.
   C) Become-an-Affiliate REVIEW panel (before submit).
   Brand tokens only: #16a673 / #27c58b / #f7bd31 / #087d72 /
   #06272f / #dce9e7 / #e9fbf4.
   ========================================================= */

/* --- A) Share row --- */
.tdp-share-row {
        margin: 14px 0 0;
        padding-top: 14px;
        border-top: 1px dashed #d6e5e0;
}
.tdp-share-label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: #52696e;
        margin-bottom: 10px;
}
.tdp-share-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}
.tdp-share-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 10px 16px;
        border-radius: 10px;
        border: 1px solid #dce9e7;
        background: #fff;
        color: #092b36;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.tdp-share-btn svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
        flex: 0 0 auto;
}
.tdp-share-btn:hover {
        border-color: #087d72;
        background: #f4faf8;
        transform: translateY(-1px);
}
.tdp-share-btn:focus-visible {
        outline: none;
        border-color: #16a673;
        box-shadow: 0 0 0 3px rgba(22, 166, 115, 0.2);
}
.tdp-share-btn.is-copied {
        border-color: #16a673;
        background: #e9fbf4;
        color: #0c7a52;
}
/* Per-network accents — brand tokens only (the site's no-blue rule applies
   to layout colors; the icons themselves stay teal-family and the visible
   text labels identify each network). */
.tdp-share-btn--whatsapp,
.tdp-share-btn--telegram,
.tdp-share-btn--facebook,
.tdp-share-btn--twitter,
.tdp-share-btn--linkedin,
.tdp-share-btn--email,
.tdp-share-btn--copy,
.tdp-share-btn--native { color: #087d72; }
/* Desktop shows icon+label; the labels are always present for a11y. */
.tdp-share-btn-label { white-space: nowrap; }

/* --- B) Purchased Course Types (CSS horizontal bars) --- */
.tdp-coursetypes {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 860px;
}
.tdp-coursetypes-row {
        display: grid;
        grid-template-columns: minmax(120px, 220px) 1fr minmax(96px, auto);
        gap: 12px;
        align-items: center;
}
.tdp-coursetypes-label {
        font-size: 13px;
        font-weight: 600;
        color: #092b36;
        text-align: right;
        overflow-wrap: anywhere;
}
.tdp-coursetypes-track {
        position: relative;
        height: 18px;
        background: #eef5f3;
        border-radius: 9px;
        overflow: hidden;
}
.tdp-coursetypes-bar {
        display: block;
        height: 100%;
        border-radius: 9px;
        background: linear-gradient(90deg, #16a673, #27c58b);
        min-width: 4px;
        transition: width 0.4s ease;
}
.tdp-coursetypes-row:nth-child(even) .tdp-coursetypes-bar {
        background: linear-gradient(90deg, #087d72, #16a673);
}
.tdp-coursetypes-meta {
        font-size: 12.5px;
        color: #52696e;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
}

/* --- C) Become-an-Affiliate review panel --- */
.tdp-aff-review {
        margin: 18px 0 16px;
        padding: 16px 18px;
        background: #f7fdfa;
        border: 1px solid #d6e5e0;
        border-left: 4px solid #16a673;
        border-radius: 12px;
}
.tdp-aff-review-title {
        margin: 0 0 4px;
        font-size: 16px;
        color: #062b2b;
}
.tdp-aff-review-note {
        margin: 0 0 12px;
        font-size: 12.5px;
        color: #6b7b90;
}
.tdp-aff-review-row {
        display: grid;
        grid-template-columns: minmax(130px, 190px) 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 8px 4px;
        border-bottom: 1px solid #e3efec;
}
.tdp-aff-review-row:last-of-type { border-bottom: none; }
.tdp-aff-review-label {
        font-size: 12px;
        font-weight: 700;
        color: #52696e;
        text-transform: uppercase;
        letter-spacing: 0.3px;
}
.tdp-aff-review-value {
        font-size: 13.5px;
        color: #092b36;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
}
.tdp-aff-review-edit {
        padding: 6px 12px;
        font-size: 12px;
        background: #fff;
}
.tdp-aff-review-actions {
        margin-top: 14px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
}

/* Dark mode for the Round 18 blocks */
.dark-mode .tdp-share-btn,
.woodmart-dark .tdp-share-btn {
        background: #10262b;
        border-color: #1e3f42;
        color: #e6f2f0;
}
.dark-mode .tdp-share-btn:hover,
.woodmart-dark .tdp-share-btn:hover {
        background: #14303b;
        border-color: #27c58b;
}
.dark-mode .tdp-coursetypes-track,
.woodmart-dark .tdp-coursetypes-track {
        background: #16333a;
}
.dark-mode .tdp-coursetypes-label,
.woodmart-dark .tdp-coursetypes-label,
.dark-mode .tdp-coursetypes-meta,
.woodmart-dark .tdp-coursetypes-meta {
        color: #e6f2f0;
}
.dark-mode .tdp-aff-review,
.woodmart-dark .tdp-aff-review {
        background: #10262b;
        border-color: #1e3f42;
        border-left-color: #16a673;
}
.dark-mode .tdp-aff-review-title,
.woodmart-dark .tdp-aff-review-title,
.dark-mode .tdp-aff-review-value,
.woodmart-dark .tdp-aff-review-value {
        color: #e6f2f0;
}
.dark-mode .tdp-aff-review-note,
.woodmart-dark .tdp-aff-review-note,
.dark-mode .tdp-aff-review-label,
.woodmart-dark .tdp-aff-review-label {
        color: #9db3b8;
}
.dark-mode .tdp-aff-review-row,
.woodmart-dark .tdp-aff-review-row {
        border-bottom-color: #1e3f42;
}

/* Mobile (≤768px): share buttons become full-width, stacked; the
   course-types bars and review rows stack too; 16px/44px targets. */
@media (max-width: 768px) {
        .tdp-share-buttons {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
        }
        .tdp-share-btn {
                width: 100%;
                justify-content: center;
                min-height: 48px;
                font-size: 14px;
        }
        .tdp-share-btn--native {
                grid-column: 1 / -1;
        }
        .tdp-coursetypes-row {
                grid-template-columns: 1fr;
                gap: 6px;
                text-align: left;
        }
        .tdp-coursetypes-label { text-align: left; }
        .tdp-coursetypes-meta { text-align: left; }
        .tdp-aff-review-row {
                grid-template-columns: 1fr;
                gap: 4px;
        }
        .tdp-aff-review-edit { justify-self: start; }
        .tdp-aff-review-actions .tdp-btn {
                width: 100%;
                justify-content: center;
                min-height: 46px;
        }
}
@media (max-width: 480px) {
        .tdp-share-buttons { grid-template-columns: 1fr; }
        .tdp-coursetypes-track { height: 14px; }
}

/* =====================================================================
   Round 23 (Edits-1, item 51): chart time-range chips — 7/30/90 days
   or 12 months, rendered above the Performance charts. GET links, so
   they work without JS and keep the referral-table filters intact.
   ===================================================================== */
.tdp-perf-range {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0 0 18px;
}
.tdp-perf-range__chip {
        display: inline-block;
        padding: 7px 15px;
        border-radius: 999px;
        border: 1.5px solid #bfd9d3;
        background: #fff;
        color: #2b5a54;
        font-size: 12.5px;
        font-weight: 700;
        text-decoration: none;
        line-height: 1.4;
        transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tdp-perf-range__chip:hover,
.tdp-perf-range__chip:focus-visible {
        background: #eefaf5;
        border-color: #27c58b;
        color: #0b6d5c;
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(22, 166, 115, 0.14);
}
.tdp-perf-range__chip[aria-current="true"] {
        background: #16a673;
        border-color: #16a673;
        color: #fff;
        box-shadow: 0 4px 12px rgba(22, 166, 115, 0.3);
}
.tdp-perf-empty {
        margin: 4px 0 0;
        color: #52696e;
}
/* The course-types section notes which window the bars follow (Round 23). */
.tdp-coursetypes-range {
        margin: -6px 0 14px;
        font-size: 12.5px;
        color: #52696e;
}

/* Dark mode — chips + range note. */
.dark-mode .tdp-perf-range__chip,
.woodmart-dark .tdp-perf-range__chip {
        background: #10262b;
        border-color: #1e3f42;
        color: #c8e2dd;
}
.dark-mode .tdp-perf-range__chip:hover,
.dark-mode .tdp-perf-range__chip:focus-visible,
.woodmart-dark .tdp-perf-range__chip:hover,
.woodmart-dark .tdp-perf-range__chip:focus-visible {
        background: #14312f;
        border-color: #27c58b;
        color: #9adbc2;
}
.dark-mode .tdp-perf-range__chip[aria-current="true"],
.woodmart-dark .tdp-perf-range__chip[aria-current="true"] {
        background: #16a673;
        border-color: #16a673;
        color: #06272f;
}
.dark-mode .tdp-perf-empty,
.dark-mode .tdp-coursetypes-range,
.woodmart-dark .tdp-perf-empty,
.woodmart-dark .tdp-coursetypes-range {
        color: #9fb8b3;
}

/* =====================================================================
   Round 23 (Edits-1, item 50): center the headers/cells of the affiliate
   ADMIN tables — Applications, All Affiliates, Referral Purchases and
   Platform Status (this file is the one those admin screens enqueue).
   Scoped to the WordPress admin body classes only, so the front-end
   dashboard is untouched.
   ===================================================================== */
body.toplevel_page_tdp-affiliates .wp-list-table th,
body.toplevel_page_tdp-affiliates .wp-list-table td,
body.affiliates_page_tdp-affiliates-list .wp-list-table th,
body.affiliates_page_tdp-affiliates-list .wp-list-table td,
body.affiliates_page_tdp-referral-purchases .wp-list-table th,
body.affiliates_page_tdp-referral-purchases .wp-list-table td,
body.toplevel_page_tdp-platform-stats .wp-list-table th,
body.toplevel_page_tdp-platform-stats .wp-list-table td,
body.platform-status_page_tdp-platform-stats .wp-list-table th,
body.platform-status_page_tdp-platform-stats .wp-list-table td {
        text-align: center;
        vertical-align: middle;
}
/* The JS-rendered tables on the same screens (withdrawal review etc.). */
body.toplevel_page_tdp-affiliates table th,
body.toplevel_page_tdp-affiliates table td,
body.affiliates_page_tdp-affiliates-list table th,
body.affiliates_page_tdp-affiliates-list table td,
body.affiliates_page_tdp-referral-purchases table th,
body.affiliates_page_tdp-referral-purchases table td,
body.toplevel_page_tdp-platform-stats table th,
body.toplevel_page_tdp-platform-stats table td,
body.platform-status_page_tdp-platform-stats table th,
body.platform-status_page_tdp-platform-stats table td {
        text-align: center;
        vertical-align: middle;
}