/* ==========================================================================
   Partner App Shell
   Layout: app wrapper · sidebar · topbar · main · mobile drawer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. App wrapper
   -------------------------------------------------------------------------- */
.partner-app {
  display: flex;
  min-height: 100vh;
  background: #f1f5f9;
}

/* --------------------------------------------------------------------------
   2. Sidebar — desktop only, sticky scroll container
   -------------------------------------------------------------------------- */
.partner-sidebar {
  /* Layout */
  position: sticky;
  top: 0;
  display: none;           /* hidden by default; shown at lg via media query */
  width: 19rem;
  height: 100vh;
  flex-shrink: 0;
  flex-direction: column;

  /* Overflow — sidebar is the ONE and ONLY scroll container */
  overflow-x: clip;        /* clip (not hidden) — avoids forcing overflow-y:auto */
  overflow-y: auto;

  /* Scrollbar — thin white ghost bar, invisible when not needed */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;

  /* Visual */
  background:
    radial-gradient(ellipse 110% 70% at 12% -5%, rgba(16, 185, 129, 0.22), transparent 52%),
    linear-gradient(145deg, rgba(4, 175, 91, 0.18) 0%, transparent 42%),
    linear-gradient(155deg, #059669 0%, #047857 26%, #065f46 52%, #064e3b 78%, #022c22 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.06),
    12px 0 40px -14px rgba(2, 44, 34, 0.45);
}

@media (min-width: 1024px) {
  .partner-sidebar {
    display: flex;
  }
}

/* Webkit scrollbar — must match scrollbar-color above */
.partner-sidebar::-webkit-scrollbar              { width: 4px; }
.partner-sidebar::-webkit-scrollbar-track        { background: transparent; }
.partner-sidebar::-webkit-scrollbar-thumb        { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
.partner-sidebar::-webkit-scrollbar-thumb:hover  { background: rgba(255, 255, 255, 0.28); }

/* Decorative glow layer — pointer-events none, purely visual */
.partner-sidebar-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 65% at 0% 0%,   rgba(255, 255, 255, 0.08), transparent 55%),
    radial-gradient(ellipse 90%  55% at 100% 100%, rgba(16, 185, 129, 0.12), transparent 52%);
}

/* Inner content div — grows with content so the sidebar <aside> scrolls */
.partner-sidebar-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: 100%;   /* fills viewport; grows taller when content exceeds 100vh */
  min-width: 0;
  padding: 1.35rem 1rem 1.5rem 1.2rem;
  /* No overflow here — sidebar <aside> is the only scroll container */
}

/* No overflow on nav elements */
.partner-sidebar nav {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

/* Prevent wide images from blowing out sidebar width */
.partner-sidebar picture,
.partner-sidebar img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. Sidebar — brand / logo block
   -------------------------------------------------------------------------- */
.partner-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(6, 78, 59, 0.35) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 24px -12px rgba(2, 44, 34, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.partner-sidebar .logo-back {
  min-width: 0;
  max-width: 100%;
  background: linear-gradient(145deg, #064e3b 0%, #065f46 50%, #064e3b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 16px rgba(2, 44, 34, 0.35);
}

/* --------------------------------------------------------------------------
   4. Sidebar — area meta label (e.g. "Affiliate area")
   -------------------------------------------------------------------------- */
.partner-sidebar-meta {
  margin-top: 1rem;
  padding-left: 0.35rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(209, 250, 229, 0.88);
}

/* --------------------------------------------------------------------------
   5. Nav section labels (OVERVIEW, AFFILIATE PROGRAM, …)
   -------------------------------------------------------------------------- */
.partner-nav-section-label {
  margin-top: 1.35rem;
  margin-bottom: 0.4rem;
  padding-left: 0.65rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(167, 243, 208, 0.55);
}

.partner-nav-section-label:first-of-type {
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   6. Nav links
   -------------------------------------------------------------------------- */
.partner-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.7rem 0.9rem 0.7rem 0.95rem;
  border-radius: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(236, 253, 245, 0.9);
  overflow-wrap: anywhere;
  text-decoration: none;
  transition:
    background  0.2s ease,
    color       0.2s ease,
    box-shadow  0.28s ease,
    transform   0.2s ease;
}

/* Active indicator bar */
.partner-nav-link::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 9999px;
  background: linear-gradient(180deg, #ecfdf5, #a7f3d0);
  transform: translateY(-50%);
  opacity: 0;
  transition:
    height  0.25s ease,
    opacity 0.2s ease;
  box-shadow: 0 0 10px rgba(236, 253, 245, 0.35);
}

.partner-nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateX(1px);
}

.partner-nav-link.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 68%, transparent 100%);
  box-shadow:
    0 0 20px -8px rgba(16, 185, 129, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.partner-nav-link.is-active::before {
  height: 58%;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   7. Main content area
   -------------------------------------------------------------------------- */
.partner-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   8. Topbar
   -------------------------------------------------------------------------- */
.partner-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgb(226 232 240);
  backdrop-filter: blur(14px);
}

/* --------------------------------------------------------------------------
   9. KPI cards
   -------------------------------------------------------------------------- */
.partner-kpi-card {
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  padding: 1.15rem 1.25rem;
  box-shadow: 0 4px 24px -12px rgba(15, 23, 42, 0.1);
  transition:
    transform    0.25s ease,
    box-shadow   0.25s ease;
}

.partner-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(4, 175, 91, 0.18);
}

.partner-kpi-val {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}

/* --------------------------------------------------------------------------
   10. Content panels
   -------------------------------------------------------------------------- */
.partner-panel {
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 24px -12px rgba(15, 23, 42, 0.08);
}

/* --------------------------------------------------------------------------
   11. Timeline (application status page)
   -------------------------------------------------------------------------- */
.partner-timeline-item {
  position: relative;
  padding-left: 1.75rem;
  padding-bottom: 1.5rem;
}

.partner-timeline-item::before {
  content: '';
  position: absolute;
  left: 0.35rem;
  top: 0.45rem;
  bottom: -0.25rem;
  width: 2px;
  background: linear-gradient(180deg, var(--hz-brand), rgba(4, 175, 91, 0.15));
}

.partner-timeline-item:last-child::before {
  bottom: auto;
  height: 0.75rem;
}

.partner-dot {
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: var(--hz-brand);
  box-shadow: 0 0 14px rgba(4, 175, 91, 0.65);
}

.partner-dot--muted {
  background: rgb(148 163 184);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   12. Mobile drawer (< 1024px)
   -------------------------------------------------------------------------- */
#partner-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(2, 44, 34, 0.4);
  backdrop-filter: blur(6px);
}

#partner-mobile-drawer .partner-drawer-panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: min(19rem, 92vw);
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
  background:
    radial-gradient(ellipse 110% 70% at 12% -5%, rgba(16, 185, 129, 0.22), transparent 52%),
    linear-gradient(145deg, rgba(4, 175, 91, 0.18) 0%, transparent 42%),
    linear-gradient(155deg, #059669 0%, #047857 26%, #065f46 52%, #064e3b 78%, #022c22 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 12px 0 40px -14px rgba(2, 44, 34, 0.45);
  padding: 1.15rem 1rem 1.5rem;
  animation: drawer-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#partner-mobile-drawer .partner-drawer-panel::-webkit-scrollbar             { width: 4px; }
#partner-mobile-drawer .partner-drawer-panel::-webkit-scrollbar-track       { background: transparent; }
#partner-mobile-drawer .partner-drawer-panel::-webkit-scrollbar-thumb       { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
#partner-mobile-drawer .partner-drawer-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

#partner-mobile-drawer nav {
  min-width: 0;
  max-width: 100%;
}

@keyframes drawer-in {
  from { transform: translateX(-100%); opacity: 0.85; }
  to   { transform: translateX(0);     opacity: 1;    }
}

@media (prefers-reduced-motion: reduce) {
  #partner-mobile-drawer .partner-drawer-panel {
    animation: none;
  }
}