/* OHP Affiliate Manager — Frontend + Admin Styles */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --ohp-primary:   #2271b1;
  --ohp-success:   #00a32a;
  --ohp-warning:   #dba617;
  --ohp-danger:    #d63638;
  --ohp-gray:      #646970;
  --ohp-light:     #f6f7f7;
  --ohp-border:    #dcdcde;
  --ohp-radius:    6px;
  --ohp-shadow:    0 1px 3px rgba(0,0,0,.08);
}

/* ── Stat Grid ─────────────────────────────────────────────── */
.ohp-aff-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.ohp-aff-stat-card {
  background: #fff;
  border: 1px solid var(--ohp-border);
  border-radius: var(--ohp-radius);
  padding: 18px 16px;
  text-align: center;
  box-shadow: var(--ohp-shadow);
}

.ohp-aff-stat-number {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--ohp-primary);
  line-height: 1.1;
}

.ohp-aff-stat-label {
  display: block;
  font-size: 12px;
  color: var(--ohp-gray);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Dashboard Sections ────────────────────────────────────── */
.ohp-aff-section {
  background: #fff;
  border: 1px solid var(--ohp-border);
  border-radius: var(--ohp-radius);
  padding: 20px 24px;
  margin: 20px 0;
  box-shadow: var(--ohp-shadow);
}

.ohp-aff-section h3 {
  margin: 0 0 16px;
  font-size: 16px;
  border-bottom: 1px solid var(--ohp-border);
  padding-bottom: 10px;
}

/* ── Referral Link ─────────────────────────────────────────── */
.ohp-aff-referral-link-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ohp-aff-referral-link {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--ohp-border);
  border-radius: var(--ohp-radius);
  background: var(--ohp-light);
}

.ohp-aff-copy-btn {
  white-space: nowrap;
}

.ohp-aff-copy-btn.copied {
  background: var(--ohp-success);
  border-color: var(--ohp-success);
  color: #fff;
}

/* ── QR Code ───────────────────────────────────────────────── */
.ohp-aff-qr-wrap {
  text-align: center;
}

.ohp-aff-qr-code {
  border: 4px solid #fff;
  box-shadow: var(--ohp-shadow);
  display: block;
  margin: 0 auto 12px;
}

/* ── Table ─────────────────────────────────────────────────── */
.ohp-aff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ohp-aff-table th,
.ohp-aff-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ohp-border);
  text-align: left;
}

.ohp-aff-table th {
  background: var(--ohp-light);
  font-weight: 600;
}

/* ── Status badges ─────────────────────────────────────────── */
.ohp-aff-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.ohp-aff-status--active,
.ohp-aff-status--approved,
.ohp-aff-status--completed { background: #d1fae5; color: #065f46; }

.ohp-aff-status--pending    { background: #fef3c7; color: #92400e; }
.ohp-aff-status--paid       { background: #dbeafe; color: #1e40af; }
.ohp-aff-status--rejected,
.ohp-aff-status--failed     { background: #fee2e2; color: #991b1b; }
.ohp-aff-status--processing { background: #ede9fe; color: #5b21b6; }
.ohp-aff-status--disabled   { background: #f3f4f6; color: #6b7280; }

/* ── Creatives grid ─────────────────────────────────────────── */
.ohp-aff-creatives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.ohp-aff-creative-card {
  border: 1px solid var(--ohp-border);
  border-radius: var(--ohp-radius);
  padding: 14px;
  background: var(--ohp-light);
}

.ohp-aff-creative-name {
  font-weight: 600;
  margin: 0 0 10px;
}

.ohp-aff-creative-card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.ohp-aff-creative-code {
  width: 100%;
  font-size: 11px;
  font-family: monospace;
  min-height: 60px;
  border: 1px solid var(--ohp-border);
  border-radius: 4px;
  padding: 6px;
  resize: none;
  background: #fff;
}

/* ── Notices ────────────────────────────────────────────────── */
.ohp-aff-notice {
  padding: 12px 16px;
  border-radius: var(--ohp-radius);
  margin-bottom: 16px;
  font-size: 14px;
}

.ohp-aff-notice--success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.ohp-aff-notice--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.ohp-aff-notice--info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

/* ── Registration form ──────────────────────────────────────── */
.ohp-aff-register-form .ohp-aff-field {
  margin-bottom: 16px;
}

.ohp-aff-register-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
}

.ohp-aff-register-form input[type="text"],
.ohp-aff-register-form input[type="email"] {
  width: 100%;
  max-width: 400px;
  padding: 8px 12px;
  border: 1px solid var(--ohp-border);
  border-radius: var(--ohp-radius);
  font-size: 14px;
}

.ohp-aff-submit {
  margin-top: 8px;
}

/* ── Admin-specific overrides ───────────────────────────────── */
.ohp-aff-admin .ohp-aff-filter-bar {
  margin: 12px 0;
}

.ohp-aff-admin .ohp-aff-filter-bar a {
  margin-right: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 13px;
  color: var(--ohp-gray);
}

.ohp-aff-admin .ohp-aff-filter-bar a.current,
.ohp-aff-admin .ohp-aff-filter-bar a:hover {
  background: var(--ohp-primary);
  color: #fff;
}