/* ==========================================================================
   WCPE Creator Dashboard Styles — Divi-compatible
   
   Divi specifics addressed:
   - All selectors scoped under .wcpe-dashboard to beat .et_pb_* specificity
   - Button styles override Divi's .et_pb_button resets
   - CSS vars prefixed wcpe- to avoid collision with --et-global-* vars
   - No reliance on :root vars that Divi's builder preview breaks
   - Typography uses explicit values, not inheritance (Divi resets line-height etc.)
   ========================================================================== */

/* ── Scoped variables (not :root — Divi builder can drop :root context) ──── */
.wcpe-dashboard {
  --wcpe-primary:    #7c3aed;
  --wcpe-primary-lt: #ede9fe;
  --wcpe-green:      #059669;
  --wcpe-green-lt:   #d1fae5;
  --wcpe-amber:      #d97706;
  --wcpe-amber-lt:   #fef3c7;
  --wcpe-red:        #dc2626;
  --wcpe-red-lt:     #fee2e2;
  --wcpe-slate:      #64748b;
  --wcpe-border:     #e2e8f0;
  --wcpe-bg:         #f8fafc;
  --wcpe-radius:     10px;
  --wcpe-shadow:     0 1px 3px rgba(0,0,0,.1);

  max-width: 1100px;
  margin: 0 auto;
  /* Explicit font reset — Divi sets font on body but .et_pb_section can override */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1e293b;
  box-sizing: border-box;
}

.wcpe-dashboard *, .wcpe-dashboard *::before, .wcpe-dashboard *::after {
  box-sizing: inherit;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.wcpe-dashboard .wcpe-dash-header { margin-bottom: 28px; }

.wcpe-dashboard .wcpe-dash-title {
  font-size: 1.6rem !important; /* Divi resets h2 inside .et_pb_wc_tabs */
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}

.wcpe-dashboard .wcpe-dash-subtitle {
  color: var(--wcpe-slate);
  margin: 0 0 16px;
  font-size: .95rem;
}

/* Time filter */
.wcpe-dashboard .wcpe-time-filter     { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wcpe-dashboard .wcpe-time-filter label { font-size: .85rem; font-weight: 600; color: var(--wcpe-slate); }
.wcpe-dashboard .wcpe-filter-btns     { display: flex; gap: 6px; flex-wrap: wrap; }

/* Override Divi's button reset on these pill buttons */
.wcpe-dashboard .wcpe-filter-btn,
.wcpe-dashboard .wcpe-filter-btn:visited {
  background: #fff !important;
  border: 1px solid var(--wcpe-border) !important;
  color: #374151 !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  cursor: pointer;
  font-size: .82rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: all .15s !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.wcpe-dashboard .wcpe-filter-btn:hover {
  border-color: var(--wcpe-primary) !important;
  color: var(--wcpe-primary) !important;
  background: #fff !important;
}
.wcpe-dashboard .wcpe-filter-btn.active {
  background: var(--wcpe-primary) !important;
  border-color: var(--wcpe-primary) !important;
  color: #fff !important;
}

/* ── Metrics Grid ────────────────────────────────────────────────────────── */
.wcpe-dashboard .wcpe-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.wcpe-dashboard .wcpe-metric-card {
  background: #fff;
  border: 1px solid var(--wcpe-border);
  border-radius: var(--wcpe-radius);
  padding: 20px 18px 16px;
  box-shadow: var(--wcpe-shadow);
  text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.wcpe-dashboard .wcpe-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.wcpe-dashboard .wcpe-metric-card--accent { border-top: 3px solid var(--wcpe-primary); }
.wcpe-dashboard .wcpe-metric-card--green  { border-top: 3px solid var(--wcpe-green); }

.wcpe-dashboard .wcpe-metric-icon  { font-size: 1.5rem; display: block; margin-bottom: 8px; line-height: 1; }
.wcpe-dashboard .wcpe-metric-value { font-size: 1.4rem !important; font-weight: 700 !important; color: #1e293b !important; line-height: 1.1 !important; margin-bottom: 6px !important; }
/* Divi wraps wc_price output in spans — target the amount */
.wcpe-dashboard .wcpe-metric-value .woocommerce-Price-amount { font-size: inherit !important; font-weight: inherit !important; }
.wcpe-dashboard .wcpe-metric-label { font-size: .75rem; color: var(--wcpe-slate); text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }

/* ── Two-col layout ──────────────────────────────────────────────────────── */
.wcpe-dashboard .wcpe-dash-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .wcpe-dashboard .wcpe-dash-cols { grid-template-columns: 1fr; }
  .wcpe-dashboard .wcpe-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Panels ──────────────────────────────────────────────────────────────── */
.wcpe-dashboard .wcpe-panel {
  background: #fff;
  border: 1px solid var(--wcpe-border);
  border-radius: var(--wcpe-radius);
  padding: 22px;
  box-shadow: var(--wcpe-shadow);
}
.wcpe-dashboard .wcpe-panel--full { grid-column: 1 / -1; }
.wcpe-dashboard .wcpe-panel-head  { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }

.wcpe-dashboard .wcpe-panel-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 0 16px !important;
  line-height: 1.3 !important;
}
.wcpe-dashboard .wcpe-panel-head .wcpe-panel-title { margin-bottom: 0 !important; }

/* ── Commission List ─────────────────────────────────────────────────────── */
.wcpe-dashboard .wcpe-commission-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.wcpe-dashboard .wcpe-commission-row  { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--wcpe-border); font-size: .9rem; }
.wcpe-dashboard .wcpe-commission-row--total { font-weight: 700; font-size: 1rem; border-bottom: none; }
.wcpe-dashboard .wcpe-status-pending    { color: var(--wcpe-amber) !important; }
.wcpe-dashboard .wcpe-status-processing { color: var(--wcpe-primary) !important; }
.wcpe-dashboard .wcpe-status-paid       { color: var(--wcpe-green) !important; }

/* Payout progress */
.wcpe-dashboard .wcpe-payout-progress  { margin-top: 12px; }
.wcpe-dashboard .wcpe-payout-label     { font-size: .8rem; color: var(--wcpe-slate); margin: 0 0 6px; }
.wcpe-dashboard .wcpe-progress-bar     { height: 8px; background: var(--wcpe-border); border-radius: 99px; overflow: hidden; }
.wcpe-dashboard .wcpe-progress-fill    { height: 100%; background: linear-gradient(90deg, var(--wcpe-primary), #a855f7); border-radius: 99px; transition: width .4s ease; }

/* ── Link Generator ──────────────────────────────────────────────────────── */
.wcpe-dashboard .wcpe-link-section { margin-bottom: 16px; }
.wcpe-dashboard .wcpe-label        { font-size: .8rem; font-weight: 600; color: var(--wcpe-slate); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; display: block; }
.wcpe-dashboard .wcpe-code-badge   { background: var(--wcpe-primary-lt); color: var(--wcpe-primary); padding: 4px 10px; border-radius: 6px; font-size: .9rem; font-family: monospace; }
.wcpe-dashboard .wcpe-link-row     { display: flex; gap: 8px; }

/* Inputs — reset Divi's input styles */
.wcpe-dashboard .wcpe-link-input,
.wcpe-dashboard .wcpe-input {
  flex: 1;
  font-size: .85rem !important;
  padding: 8px 10px !important;
  border: 1px solid var(--wcpe-border) !important;
  border-radius: 6px !important;
  background: var(--wcpe-bg) !important;
  color: #374151 !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100%;
  line-height: 1.4 !important;
  height: auto !important; /* Divi sets fixed input heights */
}
.wcpe-dashboard .wcpe-link-input:focus,
.wcpe-dashboard .wcpe-input:focus {
  border-color: var(--wcpe-primary) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12) !important;
}
.wcpe-dashboard .wcpe-mt-sm { margin-top: 8px !important; display: block; }

/* ── Buttons — comprehensive Divi override ───────────────────────────────── */
/*
 * Divi applies aggressive styles via:
 *   .et_pb_section .et_pb_row .et_pb_column .et_pb_module a.button
 *   .woocommerce a.button, .woocommerce button.button
 * We use !important throughout to win the specificity war.
 */
.wcpe-dashboard .button,
.wcpe-dashboard .wcpe-copy-btn,
.wcpe-dashboard #wcpe-generate-link,
.wcpe-dashboard .wcpe-filter-btn {
  display: inline-block !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: 1px solid var(--wcpe-border) !important;
  background: #fff !important;
  color: #374151 !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background .15s, border-color .15s, color .15s !important;
  white-space: nowrap;
}
.wcpe-dashboard .button:hover,
.wcpe-dashboard .wcpe-copy-btn:hover,
.wcpe-dashboard #wcpe-generate-link:hover {
  background: var(--wcpe-bg) !important;
  border-color: #94a3b8 !important;
  color: #1e293b !important;
}

/* Primary button variant */
.wcpe-dashboard .button.button-primary {
  background: var(--wcpe-primary) !important;
  border-color: var(--wcpe-primary) !important;
  color: #fff !important;
}
.wcpe-dashboard .button.button-primary:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  color: #fff !important;
}

/* ── Referral Table ──────────────────────────────────────────────────────── */
.wcpe-dashboard .wcpe-table-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wcpe-dashboard .wcpe-table       { width: 100%; border-collapse: collapse; font-size: .85rem; }
/* Divi adds border to all table cells — reset */
.wcpe-dashboard .wcpe-table th,
.wcpe-dashboard .wcpe-table td   { border: none !important; }
.wcpe-dashboard .wcpe-table th   { text-align: left; padding: 10px 12px; background: var(--wcpe-bg); border-bottom: 2px solid var(--wcpe-border) !important; font-size: .73rem; text-transform: uppercase; letter-spacing: .05em; color: var(--wcpe-slate); font-weight: 700; }
.wcpe-dashboard .wcpe-table td   { padding: 10px 12px; border-bottom: 1px solid var(--wcpe-border) !important; color: #374151; vertical-align: middle; }
.wcpe-dashboard .wcpe-table tbody tr:hover { background: var(--wcpe-bg); }
.wcpe-dashboard .wcpe-loading-row,
.wcpe-dashboard .wcpe-empty-row  { text-align: center !important; color: var(--wcpe-slate); padding: 24px !important; }

/* Status badges */
.wcpe-dashboard .wcpe-status-badge           { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .73rem; font-weight: 700; line-height: 1.5; }
.wcpe-dashboard .wcpe-status-badge--pending  { background: var(--wcpe-amber-lt);  color: var(--wcpe-amber); }
.wcpe-dashboard .wcpe-status-badge--approved { background: var(--wcpe-green-lt);  color: var(--wcpe-green); }
.wcpe-dashboard .wcpe-status-badge--rejected { background: var(--wcpe-red-lt);    color: var(--wcpe-red); }
.wcpe-dashboard .wcpe-status-badge--paid     { background: var(--wcpe-primary-lt);color: var(--wcpe-primary); }

/* Loading spinner */
.wcpe-dashboard .wcpe-loading-spinner { font-size: 1.2rem; animation: wcpe-spin 1s linear infinite; display: inline-block; }
@keyframes wcpe-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Divi My Account tab active state fix ────────────────────────────────── */
/* Divi's WC My Account module hides non-active tab content with display:none.
   The creator dashboard endpoint content is inside a standard wc-account div,
   not a Divi tab, so this shouldn't conflict — but guard against it: */
.woocommerce-MyAccount-content .wcpe-dashboard { display: block !important; }

/* ── Custom date range picker ─────────────────────────────────────────────── */
.wcpe-dashboard #wcpe-custom-range-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--wcpe-border);
  border-radius: 10px;
  width: 100%;
}
.wcpe-dashboard #wcpe-custom-range-picker input[type="date"] {
  padding: 7px 10px !important;
  border: 1px solid var(--wcpe-border) !important;
  border-radius: 6px !important;
  background: var(--wcpe-bg) !important;
  color: #374151 !important;
  font-size: .85rem !important;
  height: auto !important;
  box-shadow: none !important;
  width: 150px !important;
}
.wcpe-dashboard #wcpe-custom-range-picker input[type="date"]:focus {
  border-color: var(--wcpe-primary) !important;
  outline: none !important;
}

/* ==========================================================================
   DARK MODE — .wcpe-theme-dark applied to .wcpe-dashboard
   ========================================================================== */

.wcpe-dashboard.wcpe-theme-dark {
  --wcpe-primary:    #a78bfa;
  --wcpe-primary-lt: rgba(167,139,250,0.15);
  --wcpe-green:      #34d399;
  --wcpe-green-lt:   rgba(52,211,153,0.15);
  --wcpe-amber:      #fbbf24;
  --wcpe-amber-lt:   rgba(251,191,36,0.15);
  --wcpe-red:        #f87171;
  --wcpe-red-lt:     rgba(248,113,113,0.15);
  --wcpe-slate:      #8892b0;
  --wcpe-border:     #2e3250;
  --wcpe-bg:         #0f1117;
  --wcpe-radius:     10px;
  --wcpe-shadow:     0 4px 20px rgba(0,0,0,.4);
  color: #e2e8f0;
}

/* Surfaces */
.wcpe-dashboard.wcpe-theme-dark .wcpe-metric-card,
.wcpe-dashboard.wcpe-theme-dark .wcpe-panel,
.wcpe-dashboard.wcpe-theme-dark #wcpe-custom-range-picker {
  background: #1a1d27 !important;
  border-color: #2e3250 !important;
}

/* Text */
.wcpe-dashboard.wcpe-theme-dark .wcpe-dash-title,
.wcpe-dashboard.wcpe-theme-dark .wcpe-metric-value,
.wcpe-dashboard.wcpe-theme-dark .wcpe-panel-title,
.wcpe-dashboard.wcpe-theme-dark .wcpe-commission-row {
  color: #e2e8f0 !important;
}
.wcpe-dashboard.wcpe-theme-dark .wcpe-dash-subtitle,
.wcpe-dashboard.wcpe-theme-dark .wcpe-metric-label,
.wcpe-dashboard.wcpe-theme-dark .wcpe-label,
.wcpe-dashboard.wcpe-theme-dark .wcpe-payout-label {
  color: #8892b0 !important;
}

/* Inputs */
.wcpe-dashboard.wcpe-theme-dark .wcpe-link-input,
.wcpe-dashboard.wcpe-theme-dark .wcpe-input,
.wcpe-dashboard.wcpe-theme-dark #wcpe-custom-range-picker input[type="date"] {
  background: #0f1117 !important;
  border-color: #2e3250 !important;
  color: #e2e8f0 !important;
}

/* Buttons */
.wcpe-dashboard.wcpe-theme-dark .button,
.wcpe-dashboard.wcpe-theme-dark .wcpe-copy-btn,
.wcpe-dashboard.wcpe-theme-dark #wcpe-generate-link {
  background: #22263a !important;
  border-color: #2e3250 !important;
  color: #e2e8f0 !important;
}
.wcpe-dashboard.wcpe-theme-dark .button:hover,
.wcpe-dashboard.wcpe-theme-dark .wcpe-copy-btn:hover {
  background: #2e3250 !important;
  border-color: #3d4270 !important;
}
.wcpe-dashboard.wcpe-theme-dark .button.button-primary {
  background: var(--wcpe-primary) !important;
  border-color: var(--wcpe-primary) !important;
  color: #fff !important;
}

/* Filter pills */
.wcpe-dashboard.wcpe-theme-dark .wcpe-filter-btn {
  background: #1a1d27 !important;
  border-color: #2e3250 !important;
  color: #8892b0 !important;
}
.wcpe-dashboard.wcpe-theme-dark .wcpe-filter-btn:hover {
  border-color: var(--wcpe-primary) !important;
  color: var(--wcpe-primary) !important;
}
.wcpe-dashboard.wcpe-theme-dark .wcpe-filter-btn.active {
  background: var(--wcpe-primary) !important;
  border-color: var(--wcpe-primary) !important;
  color: #fff !important;
}

/* Table */
.wcpe-dashboard.wcpe-theme-dark .wcpe-table th {
  background: #0f1117;
  border-bottom-color: #2e3250 !important;
  color: #8892b0;
}
.wcpe-dashboard.wcpe-theme-dark .wcpe-table td {
  border-bottom-color: #2e3250 !important;
  color: #e2e8f0;
}
.wcpe-dashboard.wcpe-theme-dark .wcpe-table tbody tr:hover {
  background: #22263a;
}

/* Commission rows */
.wcpe-dashboard.wcpe-theme-dark .wcpe-commission-row {
  border-bottom-color: #2e3250 !important;
}
.wcpe-dashboard.wcpe-theme-dark .wcpe-progress-bar {
  background: #2e3250;
}

/* Code badge */
.wcpe-dashboard.wcpe-theme-dark .wcpe-code-badge {
  background: rgba(167,139,250,0.15);
  color: var(--wcpe-primary);
}

/* ── Theme toggle button ──────────────────────────────────────────────────── */
.wcpe-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--wcpe-border);
  background: #fff;
  color: #374151;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  margin-left: auto;
}
.wcpe-theme-toggle:hover {
  border-color: var(--wcpe-primary);
  color: var(--wcpe-primary);
}
.wcpe-dashboard.wcpe-theme-dark .wcpe-theme-toggle {
  background: #1a1d27 !important;
  border-color: #2e3250 !important;
  color: #8892b0 !important;
}
.wcpe-dashboard.wcpe-theme-dark .wcpe-theme-toggle:hover {
  border-color: var(--wcpe-primary) !important;
  color: var(--wcpe-primary) !important;
}
.wcpe-theme-toggle .wcpe-toggle-icon { font-size: 1rem; line-height: 1; }