/* ---------------------------------------------------------------------------
 * Partner Portal — header refinement + promo-card text fix.
 *
 * Loaded after pp-light. Header rules use --pp-* variables so they read
 * correctly in BOTH themes. Scoped to `.pp header` (the portal's own header),
 * never the client portal.
 * ------------------------------------------------------------------------- */

/* ===== Header bar ===== */
.pp header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--pp-card);
  box-shadow: 0 8px 24px -18px rgba(2, 8, 23, .55);
  /* The inline borderBottom:1px solid var(--pp-line) stays — this adds depth. */
}

/* Search field: sit on a raised surface with a clear focus ring. */
.pp header .pp-input { background: var(--pp-card2); }
.pp header .pp-input:focus {
  border-color: var(--pp-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-blue) 18%, transparent);
}

/* Icon ghost buttons (notifications, theme, mobile back): fully round, with a
 * branded hover so they read as interactive. */
.pp header .pp-btn-ghost {
  border-radius: 999px;
  color: var(--pp-sub);
}
.pp header .pp-btn-ghost:hover {
  background: color-mix(in srgb, var(--pp-blue) 12%, transparent);
  color: var(--pp-blue);
  border-color: color-mix(in srgb, var(--pp-blue) 35%, var(--pp-line));
}

/* Balance: from bare text into a pill chip. (The only font-semibold span that
 * is a direct child of the header.) */
.pp header > span.font-semibold {
  height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--pp-card2);
  border: 1px solid var(--pp-line);
}

/* Avatar chip: brand gradient + soft ring (overrides the inline flat fill). */
.pp header > span.rounded-full {
  background: linear-gradient(135deg, var(--pp-blue), #7c3aed) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-blue) 16%, transparent);
}

/* ===== Promo cards (always-dark gradient hero cards) =====
 * These two cards keep their dark gradient in every theme. In light mode the
 * portal's text variables turn dark, so their headings (which carry no explicit
 * colour) were rendering invisible on the dark gradient. Re-light the text
 * variables WITHIN these cards only — the inline `color:var(--pp-sub)` sub-text
 * and the inherited `var(--pp-ink)` heading both pick the lightened values up.
 * They are the only two linear-gradient(120deg …) backgrounds in the app. */
html:not(.dark) .pp [style*="linear-gradient(120deg"] {
  --pp-ink:   #f1f5fb;
  --pp-sub:   #c3cfe4;
  --pp-faint: #93a0ba;
  color: var(--pp-ink);
}