/* =====================================================
   NeoXtream Affiliate — Frontend base styles
   Uses the same design tokens as the main NeoXtream site:
   dark background, burnt-orange accent, Inter typeface.
===================================================== */

.nxa-shell,
.nxa-shell * ,
.nxa-shell *::before,
.nxa-shell *::after {
  box-sizing: border-box;
}

.nxa-shell {
  --nxa-bg:      #111214;
  --nxa-card:    #1a1b1e;
  --nxa-border:  rgba(255,255,255,.08);
  --nxa-accent:  #ff6b1a;
  --nxa-accent2: #ffb347;
  --nxa-accent3: #cc5514;
  --nxa-green:   #3ddc84;
  --nxa-text:    #ffffff;
  --nxa-muted:   #9a9a9a;

  font-family: 'Inter', sans-serif;
  color: var(--nxa-text);
  width: 100%;
  padding: 40px 16px;
}

.nxa-card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--nxa-card);
  border: 1px solid var(--nxa-border);
  border-radius: 18px;
  padding: 32px 28px;
}

.nxa-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: .78rem;
  color: var(--nxa-accent2);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,107,26,.35);
  background: rgba(255,107,26,.08);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.nxa-title {
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 10px;
}

.nxa-muted {
  font-size: .92rem;
  color: var(--nxa-muted);
  line-height: 1.6;
}

/* Shared form primitives, ready for Module 2 */
.nxa-field {
  margin-bottom: 16px;
}

.nxa-field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--nxa-muted);
  margin-bottom: 6px;
}

.nxa-field input,
.nxa-field select,
.nxa-field textarea {
  width: 100%;
  background: var(--nxa-bg);
  border: 1px solid var(--nxa-border);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: .92rem;
  transition: border-color .2s ease;
}

.nxa-field input:focus,
.nxa-field select:focus,
.nxa-field textarea:focus {
  outline: none;
  border-color: var(--nxa-accent);
}

.nxa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-weight: 700;
  font-size: .92rem;
  color: #1a1108;
  background: linear-gradient(135deg, var(--nxa-accent), var(--nxa-accent2));
  border: none;
  border-radius: 10px;
  padding: 13px 20px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.nxa-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,107,26,.25);
}

.nxa-error {
  background: rgba(255,60,60,.1);
  border: 1px solid rgba(255,60,60,.3);
  color: #ff8080;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .85rem;
  margin-bottom: 16px;
}

.nxa-success {
  background: rgba(61,220,132,.1);
  border: 1px solid rgba(61,220,132,.3);
  color: var(--nxa-green);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .85rem;
  margin-bottom: 16px;
}

/* =====================================================
   DASHBOARD — premium redesign
===================================================== */

.nxa-card--dash {
  max-width: 1200px !important;
  width: 100% !important;
  padding: 36px 36px 40px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) !important;
  background: linear-gradient(180deg, #1c1d21 0%, var(--nxa-card) 140px) !important;
}

.nxa-preview-banner {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: rgba(255,107,26,.1);
  border: 1px solid rgba(255,107,26,.35);
  color: var(--nxa-accent2);
  font-size: .85rem;
  font-weight: 600;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.nxa-preview-banner-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.nxa-preview-banner-icon svg { width: 100%; height: 100%; }

/* ---- Header ---- */

.nxa-dash-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.nxa-dash-header-left {
  display: flex !important;
  align-items: center;
  gap: 16px;
}

.nxa-avatar {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: #1a1108;
  background: linear-gradient(135deg, var(--nxa-accent), var(--nxa-accent2));
  box-shadow: 0 8px 20px rgba(255,107,26,.28);
}

.nxa-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--nxa-muted);
  vertical-align: middle;
}

.nxa-status-dot--active    { background: var(--nxa-green); box-shadow: 0 0 8px rgba(61,220,132,.6); }
.nxa-status-dot--pending   { background: var(--nxa-accent2); box-shadow: 0 0 8px rgba(255,179,71,.6); }
.nxa-status-dot--suspended { background: #ffb347; }
.nxa-status-dot--rejected  { background: #ff6b6b; }

/* ---- Nav ---- */

.nxa-dash-nav {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--nxa-border);
  margin-bottom: 28px;
  padding-bottom: 0;
}

.nxa-dash-nav-link {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-radius: 10px 10px 0 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--nxa-muted);
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.nxa-dash-nav-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  opacity: .75;
  transition: opacity .2s ease;
}

.nxa-dash-nav-icon svg { width: 100%; height: 100%; }

.nxa-dash-nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.03);
}

.nxa-dash-nav-link:hover .nxa-dash-nav-icon { opacity: 1; }

.nxa-dash-nav-link.is-active {
  color: var(--nxa-accent2);
  border-bottom-color: var(--nxa-accent);
  background: linear-gradient(180deg, rgba(255,107,26,.08), transparent);
}

.nxa-dash-nav-link.is-active .nxa-dash-nav-icon { opacity: 1; }

.nxa-dash-tab { display: none; }
.nxa-dash-tab.is-active { display: block; animation: nxaFadeIn .25s ease; }

@keyframes nxaFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nxa-subheading {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  margin: 30px 0 14px;
  letter-spacing: -.01em;
}

/* ---- Stat cards ---- */

.nxa-stats-grid {
  display: grid !important;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.nxa-stat-card {
  display: flex !important;
  align-items: center;
  gap: 14px;
  background: linear-gradient(160deg, #17181b, var(--nxa-bg));
  border: 1px solid var(--nxa-border);
  border-radius: 14px;
  padding: 18px 18px;
  transition: transform .2s ease, border-color .2s ease;
}

.nxa-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,107,26,.3);
}

.nxa-stat-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,107,26,.1);
  color: var(--nxa-accent2);
}

.nxa-stat-icon svg { width: 19px; height: 19px; }

.nxa-stat-card--green  .nxa-stat-icon { background: rgba(61,220,132,.12); color: var(--nxa-green); }
.nxa-stat-card--orange .nxa-stat-icon { background: rgba(255,179,71,.14); color: var(--nxa-accent2); }
.nxa-stat-card--red    .nxa-stat-icon { background: rgba(255,107,107,.12); color: #ff8080; }
.nxa-stat-card--accent { border-color: rgba(255,107,26,.35); background: linear-gradient(160deg, rgba(255,107,26,.08), var(--nxa-bg)); }

.nxa-stat-body { min-width: 0; }

.nxa-stat-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 3px;
  white-space: nowrap;
}

.nxa-stat-card--green  .nxa-stat-value { color: var(--nxa-green); }
.nxa-stat-card--orange .nxa-stat-value { color: var(--nxa-accent2); }
.nxa-stat-card--red    .nxa-stat-value { color: #ff8080; }
.nxa-stat-card--accent .nxa-stat-value {
  background: linear-gradient(90deg, var(--nxa-accent), var(--nxa-accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.nxa-stat-label {
  font-size: .74rem;
  color: var(--nxa-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}

/* ---- Tables (hardened against theme/global "white table" styles) ---- */

.nxa-table-wrap {
  background: var(--nxa-bg) !important;
  border: 1px solid var(--nxa-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  overflow-x: auto;
}

.nxa-table,
.nxa-table thead,
.nxa-table tbody,
.nxa-table tr {
  background: transparent !important;
}

.nxa-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: .86rem !important;
  color: #eaeaea !important;
}

.nxa-table th,
.nxa-table td {
  background: transparent !important;
  color: #eaeaea !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--nxa-border) !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  text-align: left;
}

.nxa-table th {
  color: var(--nxa-muted) !important;
  font-weight: 600 !important;
  font-size: .74rem !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(255,255,255,.02) !important;
}

.nxa-table tbody tr {
  transition: background .15s ease;
}

.nxa-table tbody tr:hover {
  background: rgba(255,255,255,.025) !important;
}

.nxa-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ---- Pills / badges ---- */

.nxa-pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  background: rgba(255,255,255,.08);
  color: var(--nxa-muted);
  letter-spacing: .01em;
}

.nxa-pill--green  { background: rgba(61,220,132,.14); color: var(--nxa-green); }
.nxa-pill--orange { background: rgba(255,179,71,.14); color: var(--nxa-accent2); }
.nxa-pill--red    { background: rgba(255,107,107,.14); color: #ff8080; }

.nxa-hold-countdown {
  font-size: .72rem;
  color: var(--nxa-muted);
  margin-top: 4px;
}

/* ---- Chart ---- */

.nxa-chart-controls {
  display: flex !important;
  gap: 8px;
  margin-bottom: 16px;
}

.nxa-chart-range-btn {
  background: var(--nxa-bg);
  border: 1px solid var(--nxa-border);
  color: var(--nxa-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: .8rem;
  padding: 8px 16px;
  border-radius: 9px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.nxa-chart-range-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,.18);
}

.nxa-chart-range-btn.is-active {
  color: #1a1108;
  background: linear-gradient(135deg, var(--nxa-accent), var(--nxa-accent2));
  border-color: transparent;
}

.nxa-chart-wrap {
  background: var(--nxa-bg) !important;
  border: 1px solid var(--nxa-border);
  border-radius: 14px;
  padding: 20px;
}

/* ---- Mobile ---- */

@media (max-width: 782px) {
  .nxa-card--dash { padding: 22px 16px 28px !important; border-radius: 14px; }
  .nxa-dash-nav { overflow-x: auto; flex-wrap: nowrap; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .nxa-dash-nav-link { flex-shrink: 0; }
  .nxa-dash-nav-text { display: none; }
  .nxa-dash-nav-icon { width: 18px; height: 18px; }
  .nxa-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .nxa-avatar { width: 44px; height: 44px; font-size: 1.05rem; border-radius: 12px; }
  .nxa-title { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .nxa-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .nxa-stat-card { padding: 14px; }
  .nxa-stat-value { font-size: 1.2rem; }
}