/* ============================================================
   Affiliate portal — self-contained green-glass theme.
   Copied from the owner dashboard styling so the affiliate area
   matches the owner look, but WITHOUT sharing the owner layout
   (affiliates are never owners or staff, so they inherit none of
   the owner/user navbar chrome). The --owner-* custom properties
   are kept verbatim from the owner theme so the copied card/table
   rules work unchanged.
   ============================================================ */

:root {
  --owner-text-primary:   #fff;
  --owner-text-secondary: rgba(255, 255, 255, 0.75);
  --owner-text-muted:     rgba(255, 255, 255, 0.55);
  --owner-border:         rgba(255, 255, 255, 0.2);
  --owner-glass:          rgba(255, 255, 255, 0.12);
  --owner-glass-hover:    rgba(255, 255, 255, 0.2);
  --owner-glass-deep:     rgba(0, 0, 0, 0.25);
}

body {
  background: linear-gradient(160deg, #052e16 0%, #064e3b 50%, #0a3728 100%) !important;
  min-height: 100vh;
  color: var(--owner-text-primary);
}

/* ── Typography ── */
.page-h1  { font-size: 1.5rem; font-weight: 700; color: var(--owner-text-primary); margin: 0 0 4px; }
.page-sub { font-size: 0.9rem; color: var(--owner-text-secondary); margin: 0; }
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 28px;
}

/* ── Slim affiliate top bar ── */
.aff-topbar {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.aff-brand {
  font-weight: 700; font-size: 1.05rem; color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.aff-brand:hover { color: #fff; text-decoration: none; }
.aff-brand .aff-brand-tag {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--owner-text-secondary);
  border: 1px solid var(--owner-border); border-radius: 20px; padding: 2px 10px;
}

/* Utility text shades (also provided by bootstrap.min.css; defined here so the
   portal renders correctly even if that utility set changes). */
.text-white-75 { color: var(--owner-text-secondary) !important; }
.text-white-50 { color: var(--owner-text-muted) !important; }

/* ============================================================
   The one card. Mirrors owners_global.css.
   ============================================================ */
.glass-card,
.stat-card {
  background: var(--owner-glass) !important;
  border: 1px solid var(--owner-border) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
  color: var(--owner-text-primary) !important;
  overflow: hidden;
}

/* Card header strip (title + subtitle) */
.glass-card__head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.glass-card__head h2 { font-size: 0.95rem; font-weight: 700; color: var(--owner-text-primary); margin: 0 0 2px; }
.glass-card__head p  { font-size: 0.8rem; color: var(--owner-text-secondary); margin: 0; line-height: 1.5; }

/* ============================================================
   Bootstrap form controls — themed to the glass look.
   ============================================================ */
.glass-card .form-control,
.glass-card .form-select {
  background: var(--owner-glass);
  border: 1px solid var(--owner-border);
  color: var(--owner-text-primary);
}
.glass-card .form-control::placeholder { color: var(--owner-text-muted); }
.glass-card .form-control:focus,
.glass-card .form-select:focus {
  background: var(--owner-glass);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--owner-text-primary);
  box-shadow: none;
}
.glass-card .input-group-text {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--owner-border);
  color: var(--owner-text-muted);
}
.form-control[readonly] {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--owner-text-muted) !important;
}

/* ============================================================
   Opt-in glass tables. Use: <table class="table table-glass ...">
   ============================================================ */
.table-glass {
  --bs-table-bg: transparent;
  --bs-table-color: var(--owner-text-secondary);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-border-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
}
.table-glass thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--owner-text-muted);
  border-bottom-width: 1px;
}
.table-glass td,
.table-glass th {
  background: transparent !important;
  color: inherit;
}