/* ============================================================
   referrals-ui.css — Referral program UI (nav item, page, admin)
   ============================================================ */

/* ---------- nav item ---------- */
aside.sidebar nav .ref-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  margin: 2px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.9;
}
aside.sidebar nav .ref-nav-item:hover { opacity: 1; background: rgba(255, 255, 255, 0.07); }
aside.sidebar nav .ref-nav-item.active {
  background: var(--lime, #dfff8f);
  color: var(--deep, #0d2b22);
  font-weight: 600;
  opacity: 1;
}
aside.sidebar nav .ref-nav-item .ref-nav-glyph svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.shell.nav-collapsed aside.sidebar nav .ref-nav-label { display: none; }
.shell.nav-collapsed aside.sidebar nav .ref-nav-item { justify-content: center; padding: 9px 0; }

/* hide default page content while on the referrals route. /wa/referrals is unknown
   to the app router, which falls back to the OVERVIEW page there — and the overview
   content (setup-card/connected-banner, .metrics, .dashboard-grid) is NOT .page-card,
   so the old .page-card rule matched nothing and the whole dashboard showed above the
   referral card. Hide every non-topbar child of .dashboard except the referral card. */
body.ref-route .dashboard > :not(header):not(#ref-root) { display: none !important; }

/* on the referrals route the router also marks the fallback "Overview" nav item
   active (route name resolves to "overview"), so BOTH Overview and Referrals lit up.
   Neutralize the app's active styles here so only the Referrals item stays active. */
body.ref-route aside.sidebar nav button.active,
body.ref-route aside.sidebar nav a.active:not(.ref-nav-item) {
  background: transparent;
  color: #a9c0b8;
}

/* ---------- shared ---------- */
.ref-page, .ref-admin-card { animation: refFade 0.25s ease; }
@keyframes refFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ref-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.ref-kpi {
  background: var(--soft, #ecf6f1);
  border: 1px solid var(--line, #dfe5e1);
  border-radius: 12px;
  padding: 14px 16px;
}
.ref-kpi-value { font-size: 22px; font-weight: 700; color: var(--deep, #0d2b22); line-height: 1.15; }
.ref-kpi-label { font-size: 12px; font-weight: 600; color: var(--muted, #63716b); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
.ref-kpi-sub { font-size: 11.5px; color: var(--muted, #63716b); margin-top: 2px; }

.ref-link-card {
  border: 1px solid var(--line, #dfe5e1);
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin: 18px 0;
}
.ref-link-card .eyebrow { display: block; margin-bottom: 8px; }
.ref-link-row { display: flex; gap: 8px; }
.ref-link-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--line, #dfe5e1);
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #10251e);
}
.ref-link-row .primary { flex: none; }
.ref-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--deep, #0d2b22);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.ref-share-btn:hover,
.ref-share-btn:focus,
.ref-share-btn:visited { background: #0a392d; color: #fff; text-decoration: none; }
.ref-link-hint { font-size: 12px; color: var(--muted, #63716b); margin: 10px 0 0; }

.ref-received-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--lime, #dfff8f);
  color: var(--deep, #0d2b22);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin: 14px 0 0;
}

.ref-how { margin: 22px 0 6px; }
.ref-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 10px; }
.ref-step {
  border: 1px solid var(--line, #dfe5e1);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}
.ref-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--deep, #0d2b22);
  color: var(--lime, #dfff8f);
  font-size: 13px;
  margin-bottom: 8px;
}
.ref-step-title { display: block; font-size: 13.5px; margin-bottom: 4px; }
.ref-step p { margin: 0; font-size: 12.5px; color: var(--muted, #63716b); }

.ref-table-head { margin-top: 22px; }
.ref-table-head h3 { margin: 2px 0 10px; }
.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--line, #dfe5e1);
  border-radius: 10px;
  overflow: hidden;
}
.ref-table th, .ref-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #dfe5e1);
  vertical-align: middle;
}
.ref-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #63716b); background: var(--soft, #ecf6f1); }
.ref-table tr:last-child td { border-bottom: 0; }
.ref-table code { background: var(--soft, #ecf6f1); border: 1px solid var(--line, #dfe5e1); padding: 1px 6px; border-radius: 5px; font-size: 12px; }

.ref-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ref-badge-ok { background: #e3f7ec; color: #0e7a45; }
.ref-badge-wait { background: #fdf1d8; color: #9a6b0c; }

.ref-empty {
  text-align: center;
  padding: 34px 16px;
  border: 1px dashed var(--line, #dfe5e1);
  border-radius: 12px;
  color: var(--muted, #63716b);
  background: #fbfcf9;
}
.ref-empty b { display: block; font-size: 14px; color: var(--ink, #10251e); margin-bottom: 4px; }
.ref-empty p { margin: 0; font-size: 12.5px; }

.ref-loading, .ref-error { padding: 26px; text-align: center; color: var(--muted, #63716b); font-size: 13.5px; }
.ref-error { color: #b3261e; }

.ref-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--deep, #0d2b22);
  color: var(--lime, #dfff8f);
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  max-width: min(90vw, 480px);
  text-align: center;
  transition: opacity 0.35s ease;
}
.ref-toast-error { background: #7f1d1d; color: #fff; }
.ref-toast-out { opacity: 0; }

/* admin section spacing */
.ref-admin-card { margin-top: 18px; }
.ref-admin-card .ref-kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

@media (max-width: 640px) {
  .ref-link-row { flex-direction: column; }
  .ref-table { display: block; overflow-x: auto; white-space: nowrap; }
}