/* AffiliateHub Frontend — Responsive Polish v1.1.0 */

/* ══════════════════════════════════════════════
   BASE RESET (scoped to plugin elements)
══════════════════════════════════════════════ */
.ahd *, .ah-reg-wrap * { box-sizing: border-box; }

/* ══════════════════════════════════════════════
   DASHBOARD — TOP BAR
══════════════════════════════════════════════ */
.ahd-topbar {
  padding: 10px 16px;
  gap: 8px;
  flex-wrap: nowrap;
}
@media (max-width: 380px) {
  .ahd-topbar { padding: 8px 12px; }
  .ahd-brand  { font-size: 14px; }
  .ahd-logout { padding: 6px 10px; font-size: 11px; }
  .ahd-avatar { width: 30px; height: 30px; font-size: 12px; }
}
/* Hide name text on very small, keep avatar */
@media (max-width: 360px) {
  .ahd-uname-wrap { display: none !important; }
}

/* ══════════════════════════════════════════════
   DASHBOARD — INNER WRAP PADDING
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ahd-wrap { padding: 14px 10px 0; }
}
@media (max-width: 360px) {
  .ahd-wrap { padding: 10px 8px 0; }
}

/* ══════════════════════════════════════════════
   STATS GRID — 4 col → 2 → 1
══════════════════════════════════════════════ */
.ahd-stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
  .ahd-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 320px) {
  .ahd-stats { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ahd-stat { padding: 12px 10px; border-radius: 10px; }
  .ahd-stat-val { font-size: 18px; }
  .ahd-stat-lbl { font-size: 9px; }
}

/* ══════════════════════════════════════════════
   REFERRAL BOX
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ahd-ref { padding: 12px; }
  .ahd-ref-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .ahd-ref-row .ahd-btn { width: 100%; justify-content: center; }
  .ahd-ref-input { font-size: 11px; }
}

/* ══════════════════════════════════════════════
   NAV TAB BAR — scrollable on mobile
══════════════════════════════════════════════ */
.ahd-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.ahd-nav::-webkit-scrollbar { display: none; }
@media (max-width: 480px) {
  .ahd-nav-btn { padding: 7px 11px; font-size: 11px; }
}
@media (max-width: 360px) {
  .ahd-nav-btn { padding: 6px 9px; font-size: 10px; }
}

/* ══════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ahd-card { padding: 14px; border-radius: 10px; }
  .ahd-card-title { font-size: 13px; margin-bottom: 12px; }
}

/* ══════════════════════════════════════════════
   COMMISSION LEVELS — 2 col always on mobile
══════════════════════════════════════════════ */
@media (max-width: 360px) {
  .ahd-levels { grid-template-columns: 1fr; }
  .ahd-level-rate { font-size: 28px; }
}

/* ══════════════════════════════════════════════
   HOW IT WORKS — 3 → 1 on mobile
══════════════════════════════════════════════ */
@media (max-width: 500px) {
  .ahd-how { grid-template-columns: 1fr; gap: 8px; }
  .ahd-how-step { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 12px; }
  .ahd-how-icon { font-size: 20px; flex-shrink: 0; margin-bottom: 0; }
}

/* ══════════════════════════════════════════════
   TABLES — horizontally scrollable
══════════════════════════════════════════════ */
.ahd-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}
@media (max-width: 480px) {
  .ahd-table { font-size: 12px; min-width: 360px; }
  .ahd-table th { font-size: 9px; padding: 8px 8px; }
  .ahd-table td { padding: 9px 8px; }
  .ahd-pill    { font-size: 10px; padding: 2px 7px; }
}

/* ══════════════════════════════════════════════
   FORMS — 2-col → 1-col
══════════════════════════════════════════════ */
@media (max-width: 500px) {
  .ahd-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ahd-fg label { font-size: 10px; }
  .ahd-fg input,
  .ahd-fg select,
  .ahd-fg textarea { font-size: 14px; padding: 9px 11px; border-radius: 8px; }
}

/* ══════════════════════════════════════════════
   PAYOUT STATS GRID — 3 → 1
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ahd-pstats { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 400px) {
  .ahd-mstats { grid-template-columns: 1fr; gap: 8px; }
}

/* ══════════════════════════════════════════════
   LINKS TABLE — action buttons stack
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ahd-actions { flex-wrap: wrap; gap: 4px; }
  .ahd-btn-sm  { padding: 5px 9px; font-size: 11px; }
  .ahd-link-input { max-width: 130px; font-size: 10px; }
}

/* ══════════════════════════════════════════════
   BANNER (profile bottom)
══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ahd-banner { flex-direction: column; text-align: center; padding: 16px; }
}

/* ══════════════════════════════════════════════
   REGISTER PAGE
══════════════════════════════════════════════ */
.ah-reg-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
@media (max-width: 520px) {
  .ah-reg-wrap { padding: 12px; }
  .ah-reg-card { padding: 22px 16px !important; border-radius: 14px !important; }
  .ah-reg-title { font-size: 19px !important; }
  .ah-reg-logo-icon { width: 48px !important; height: 48px !important; font-size: 22px !important; }
}
@media (max-width: 380px) {
  .ah-reg-card { padding: 16px 12px !important; border-radius: 12px !important; }
  .ah-perks { grid-template-columns: 1fr !important; gap: 6px; }
  .ah-perk  { font-size: 11px; padding: 8px 10px; }
  .ah-row-2 { grid-template-columns: 1fr !important; }
  .ah-submit { font-size: 14px; padding: 12px; }
}

/* Touch-friendly tap targets — min 44×44px */
.ahd-btn, .ahd-nav-btn, .ah-tab, .ah-submit, .ahd-logout {
  min-height: 40px;
}
@media (max-width: 480px) {
  .ahd-btn     { min-height: 42px; }
  .ahd-btn-sm  { min-height: 34px; }
  .ah-submit   { min-height: 48px; }
}