/* ==============================================================================
   nav-top.css — Global Unified Top Pill Navigation & App Shell Standard
   Applied across Dashboard, Accounts, Payouts, Certificates, Affiliates, Settings
   ============================================================================== */

/* 1. Global Shell Reset — Strictly Single-Column Flex Layout across all pages */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.uf-app-shell,
.uf-dashboard-shell,
.pd-shell,
.af-page {
  display: flex !important;
  flex-direction: column !important;
  max-width: 1720px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 44px 56px !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  grid-template-columns: 1fr !important;
}

/* 2. Strictly remove all vertical sidebars and rails across all desktop & mobile views */
.uf-sidebar,
.uf-sidebar-left,
.uf-side-rail,
.pd-rail,
aside.uf-sidebar,
aside.uf-sidebar-left {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
}

/* 3. Main Workspace Canvas spans 100% full width */
.uf-main-area,
.uf-prop-main,
.pd-main {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}

/* 4. Global Top Header & Pill Navigation */
.af-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 100 !important;
}

.af-brand,
.af-brand.logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.af-brand .logo-mark {
  width: 32px !important;
  height: 20px !important;
  background: url('assets/brand/02_Monogram_Transparent.png') center/contain no-repeat !important;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.55)) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease !important;
}
.af-brand:hover .logo-mark {
  transform: scale(1.08) !important;
  filter: drop-shadow(0 0 16px rgba(96, 165, 250, 0.85)) !important;
}
.af-brand .logo-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: 1px !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.af-brand .logo-text b {
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}
.af-brand .logo-text i {
  font-style: normal !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: -0.01em !important;
}
.af-brand svg {
  width: 28px !important;
  height: 28px !important;
  color: #3b82f6 !important;
  flex-shrink: 0 !important;
}

.af-nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 auto !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.af-nav::-webkit-scrollbar { display: none !important; }

.af-nav a {
  display: inline-block !important;
  white-space: nowrap !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #1a2236 !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: transform !important;
}
.af-nav a:hover {
  background: #eef1f6 !important;
  color: #0f172a !important;
}
.af-nav a:active {
  transform: scale(0.93) translateY(1px) !important;
}
.af-nav a.active {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important;
}

.af-top-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.af-avatar {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.af-avatar:active {
  transform: scale(0.92) !important;
}
.af-avatar img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #243050 !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  display: block !important;
}

.af-circle-btn {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: transform !important;
}
.af-circle-btn svg {
  width: 18px !important;
  height: 18px !important;
}
.af-circle-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.af-circle-btn:active {
  transform: scale(0.92) !important;
}

/* Global Theme-Matched Logout Pill Button (Desktop & Mobile) */
.af-logout-btn {
  box-sizing: border-box !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.14) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
  border: 1px solid rgba(244, 63, 94, 0.35) !important;
  color: #fecdd3 !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.af-logout-btn span {
  display: inline-block !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  padding: 0 !important;
}
.af-logout-btn svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  color: #fb7185 !important;
  flex-shrink: 0 !important;
  display: block !important;
  transition: transform 0.18s ease, color 0.18s ease !important;
}
.af-logout-btn:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.24) 0%, rgba(30, 18, 38, 0.95) 100%) !important;
  border-color: rgba(251, 113, 133, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(244, 63, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-1px) scale(1.02) !important;
}
.af-logout-btn:hover svg {
  color: #fda4af !important;
  transform: translateX(1.5px) !important;
}
.af-logout-btn:active {
  transform: scale(0.95) translateY(1px) !important;
}

/* 5. Subheader Duplicate Profile / Bell cleanup */
.uf-topbar .uf-bell-btn,
.uf-topbar .uf-profile,
.uf-prop-actions,
.uf-topbar-actions-right,
.uf-subnav-row .uf-subnav-actions,
.uf-cert-subnav-row .uf-cert-user-meta {
  display: none !important;
}

/* 6. Responsive Breakpoints */
@media (max-width: 1180px) {
  .af-top {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  .af-brand {
    order: 1 !important;
  }
  .af-top-right {
    order: 2 !important;
  }
  .af-nav {
    order: 3 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin: 4px 0 0 !important;
    padding: 5px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .uf-app-shell,
  .uf-dashboard-shell,
  .pd-shell,
  .af-page {
    padding: 16px 20px 40px !important;
  }
}

@media (max-width: 600px) {
  .af-nav a {
    padding: 8px 14px !important;
    font-size: 11.5px !important;
  }
  .af-circle-btn {
    width: 36px !important;
    height: 36px !important;
  }
  .af-avatar img {
    width: 36px !important;
    height: 36px !important;
  }
  .af-logout-btn {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    gap: 5px !important;
  }
  .af-logout-btn span {
    font-size: 11.5px !important;
    line-height: 1 !important;
  }
  .af-logout-btn svg {
    width: 13.5px !important;
    height: 13.5px !important;
    min-width: 13.5px !important;
    min-height: 13.5px !important;
  }
  .uf-app-shell,
  .uf-dashboard-shell,
  .pd-shell,
  .af-page {
    padding: 12px 14px 32px !important;
  }
}

/* ==============================================================================
   APPLE-GRADE PAGE TRANSITION & TACTILE SPRING SYSTEM
   ============================================================================== */

/* Fluid entrance on page ready */
.uf-app-shell,
.uf-dashboard-shell,
.pd-shell,
.af-page {
  animation: appleShellEnter 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform;
}

@keyframes appleShellEnter {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.995);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Page exit state when clicking another page link */
.apple-page-exiting {
  opacity: 0 !important;
  transform: translateY(-8px) scale(0.994) !important;
  filter: blur(1.5px) !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease !important;
  pointer-events: none !important;
}

/* Apple Tactile Spring Feedback on All Interactive Elements */
.af-nav a,
.af-circle-btn,
.af-avatar,
.eh-row,
.eh-tab,
.eh-btn-chevron,
.eh-btn-gear,
.eh-icon-btn,
.uf-btn-new-acc,
.uf-btn-back,
.uf-btn-payout-cta,
.uf-pill-tab,
.af-pill-btn,
.uf-acc-filter-tab,
.eh-page-btn,
button:not(:disabled) {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease, box-shadow 0.18s ease !important;
  will-change: transform;
}

.af-nav a:hover,
.af-circle-btn:hover,
.eh-icon-btn:hover,
.eh-btn-gear:hover,
.eh-btn-chevron:hover {
  transform: translateY(-1px) scale(1.02);
}

.af-nav a:active,
.af-circle-btn:active,
.eh-row:active,
.eh-tab:active,
.eh-btn-chevron:active,
.eh-btn-gear:active,
.eh-icon-btn:active,
.uf-btn-new-acc:active,
.uf-btn-back:active,
.uf-btn-payout-cta:active,
.eh-page-btn:active,
button:not(:disabled):active {
  transform: scale(0.972) translateY(1px) !important;
}

/* ===== shared mobile top bar (<=720px): logo + icons + logout on row 1, nav row 2, persona switch row 3 ===== */
@media (max-width: 720px) {
  .af-top { gap: 8px !important; }
  .af-top .af-brand { order: 1 !important; margin-right: auto; }
  .af-top .af-top-right { display: contents !important; }
  .af-top .af-top-right > .af-circle-btn,
  .af-top .af-top-right > .af-avatar,
  .af-top .af-top-right > .af-me,
  .af-top .af-top-right > .af-logout-btn { order: 2 !important; flex: none; }
  .af-top .af-top-right > #afBell,
  .af-top .af-top-right > #ufBellBtnTop { margin-left: auto; }
  .af-top .af-nav { order: 3 !important; }
  .af-top .mxf-persona-pill { order: 4 !important; flex: 1 1 100% !important; width: 100%; max-width: 100%; }
  .mxf-persona-pill .mxf-pill-toggle { flex: 1 1 0; justify-content: center; min-width: 0; padding: 7px 8px; font-size: 11px; }
}