/* MindBrightly Affiliate Dashboard — layout on top of the site's styles.css */

.dash-body{ background: var(--paper-dim); }

.dash-shell{ display: flex; min-height: 100vh; }

.dash-sidebar{
  width: 250px; flex-shrink: 0; background: var(--ink); color: var(--white);
  padding: 24px 20px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.dash-sidebar-label{
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-faint); margin: 6px 0 14px;
}
.dash-nav{ display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.dash-nav a{
  padding: 11px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem;
  color: #C7CCDC; transition: background .15s ease, color .15s ease;
}
.dash-nav a:hover{ background: rgba(255,255,255,.06); color: var(--white); }
.dash-nav a.active{ background: linear-gradient(180deg, rgba(31,174,107,.25), rgba(31,174,107,.14)); color: var(--white); box-shadow: inset 0 0 0 1px rgba(31,174,107,.4); }
.dash-logout{
  margin-top: 16px; padding: 11px 14px; border-radius: var(--radius-sm); font-weight: 700; font-size: .9rem;
  color: #F2A0A0; border: 1px solid rgba(255,255,255,.12); text-align: center;
}
.dash-logout:hover{ background: rgba(255,255,255,.06); }

.dash-main{ flex-grow: 1; min-width: 0; }
.dash-topbar{
  background: var(--white); border-bottom: 1px solid var(--border); padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 20;
}
.dash-menu-toggle{ display: none; background: none; border: none; font-size: 1.3rem; color: var(--ink); }
.dash-topbar-user{ display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--slate); margin-left: auto; }
.dash-status-pill{ font-family: var(--f-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.dash-status-active{ background: var(--green-tint); color: var(--green-deep); }
.dash-status-suspended{ background: #FCE8E6; color: #B3261E; }

.dash-content{ padding: 28px; max-width: 1180px; margin: 0 auto; }
.dash-content h1{ font-size: 1.6rem; margin-bottom: 6px; }
.dash-sub{ color: var(--slate-dim); margin-bottom: 26px; }

/* Stat cards */
.dash-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 30px; }
@media (max-width: 980px){ .dash-stats{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .dash-stats{ grid-template-columns: 1fr; } }
.dash-stat-card{
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-xs);
}
.dash-stat-label{ font-family: var(--f-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-faint); margin-bottom: 8px; }
.dash-stat-value{ font-family: var(--f-display); font-size: 1.7rem; font-weight: 700; color: var(--ink); }
.dash-stat-value.green{ color: var(--green-deep); }

/* Referral link box */
.dash-reflink{
  background: var(--ink); color: var(--white); border-radius: var(--radius-lg); padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px;
}
.dash-reflink code{
  background: rgba(255,255,255,.08); border: 1px solid var(--ink-line); border-radius: var(--radius-sm);
  padding: 10px 14px; font-family: var(--f-mono); font-size: .88rem; color: var(--green); word-break: break-all;
}

/* Tables */
.dash-card{ background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-xs); margin-bottom: 24px; }
.dash-card h2{ font-size: 1.15rem; margin-bottom: 16px; }

/* Wrap every dash-table in a .dash-table-wrap div: on narrow screens the
   table itself scrolls horizontally INSIDE the white card, instead of the
   whole card overflowing past its own edges (which used to make action
   buttons look like they'd floated off onto the bare page background). */
.dash-table-wrap{ overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
.dash-table{ width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9rem; }
.dash-table th, .dash-table td{ text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dash-table th{ font-family: var(--f-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-faint); }
.dash-table tr:last-child td{ border-bottom: none; }
.dash-empty{ color: var(--slate-faint); font-size: .9rem; padding: 18px 0; text-align: center; }

/* Small stat-card row for the admin overview (orders/revenue/payouts at a glance) */
.dash-admin-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 980px){ .dash-admin-stats{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .dash-admin-stats{ grid-template-columns: 1fr; } }

.status-chip{ font-family: var(--f-mono); font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: capitalize; }
.status-confirmed, .status-paid{ background: var(--green-tint); color: var(--green-deep); }
.status-pending, .status-requested, .status-processing{ background: var(--gold-tint); color: var(--gold-deep); }
.status-cancelled, .status-rejected{ background: #FCE8E6; color: #B3261E; }

@media (max-width: 860px){
  .dash-sidebar{ position: fixed; left: -270px; top: 0; z-index: 300; transition: left .25s ease; box-shadow: var(--shadow-lg); }
  .dash-shell.dash-sidebar-open .dash-sidebar{ left: 0; }
  .dash-menu-toggle{ display: block; }
}

/* ---- Referral link box: link + QR code + share button ---- */
.dash-reflink{ align-items: flex-start; }
.dash-reflink-main{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; flex-grow:1; }
.dash-reflink-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.dash-reflink-qr{
  background: var(--white); padding: 6px; border-radius: var(--radius-sm); flex-shrink: 0;
  width: 76px; height: 76px; display:flex; align-items:center; justify-content:center;
}
.dash-reflink-qr img{ width: 100%; height: 100%; display: block; border-radius: 4px; }
.btn-whatsapp{
  background: #25D366; color: #06301D; border: none; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-whatsapp:hover{ background: #1EBE5A; transform: translateY(-2px); }

/* ---- Badge / milestone tier ---- */
.dash-badge-card{
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.dash-badge-icon{
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(180deg, var(--gold-tint), var(--gold));
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.dash-badge-info{ flex-grow: 1; min-width: 200px; }
.dash-badge-name{ font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.dash-badge-next{ font-size: .85rem; color: var(--slate-dim); margin-top: 2px; }
.dash-progress-track{
  width: 100%; height: 8px; background: var(--paper-dim); border-radius: 999px; margin-top: 10px; overflow: hidden;
}
.dash-progress-fill{
  height: 100%; background: linear-gradient(90deg, var(--green), var(--green-deep)); border-radius: 999px;
  transition: width .4s ease;
}

/* ---- Getting-started checklist (shown to brand-new affiliates) ---- */
.dash-getstarted{
  background: linear-gradient(135deg, var(--gold-tint), #fff); border: 1px solid var(--gold);
  border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 24px;
}
.dash-getstarted h2{ font-size: 1.05rem; margin-bottom: 4px; }
.dash-getstarted p{ color: var(--slate-dim); font-size: .9rem; margin-bottom: 14px; }
.dash-getstarted-list{ display: flex; flex-direction: column; gap: 10px; }
.dash-getstarted-item{
  display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600; color: var(--ink);
}
.dash-getstarted-item .tick{
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; background: var(--border); color: var(--slate-faint);
}
.dash-getstarted-item.done .tick{ background: var(--green); color: #06301D; }
.dash-getstarted-item.done{ color: var(--slate-dim); text-decoration: line-through; text-decoration-color: var(--border); }

/* ---- Simple monthly earnings trend chart (single series — no legend needed) ---- */
.dash-chart{ display: flex; align-items: flex-end; gap: 10px; height: 140px; padding: 8px 4px 0; }
.dash-chart-col{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; }
.dash-chart-bar{
  width: 100%; max-width: 34px; background: linear-gradient(180deg, var(--green), var(--green-deep));
  border-radius: 6px 6px 3px 3px; min-height: 3px; position: relative;
}
.dash-chart-bar[data-empty="1"]{ background: var(--paper-dim); }
.dash-chart-label{ font-family: var(--f-mono); font-size: .68rem; color: var(--slate-faint); text-transform: uppercase; }
.dash-chart-amount{ font-size: .7rem; font-weight: 700; color: var(--ink); }