/* EVO TrustGuard — shared portal CSS
 *
 * Contains only rules that are identical across multiple portal HTML
 * files and are safe to centralize without changing any visual output.
 * Currently scoped to:
 *   - CSS custom properties (brand palette) — union of variables used
 *     across portal pages; files that reference the "extras"
 *     (--red-hover, --green, --amber) still work, files that don't
 *     simply ignore them.
 *   - Universal box-sizing + zero-margin reset.
 *
 * Anything page-specific (body, nav, cards, filter bar, bottom nav)
 * stays in the page's inline <style> block to keep this file from
 * becoming a catch-all. Add rules here only if they are byte-identical
 * across portal files AND will never need per-page divergence.
 */

:root {
  --red: #B31217;
  --red-light: #f9e8e8;
  --red-hover: #9a0f13;
  --dark: #1A1A1A;
  --mid: #444444;
  --light: #666666;
  --border: #e8e8e8;
  --bg: #1a1a1a;
  --white: #ffffff;
  --green: #16a34a;
  --amber: #ca8a04;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Nav avatar — the tappable profile entry point in the top-right of every
 * portal page. Fixed 38×38 rounded square, dark fallback with initials,
 * hosts a logo <img> overlay when the user has uploaded one. Identical
 * across every portal page (profile.html, dashboard.html, my-leads.html,
 * lead-detail.html, purchased-lead.html, reminders.html, credits.html,
 * credits-success.html, admin.html). Hydration is a small inline snippet
 * on each page that reads users.company_name + profiles.logo_url and
 * flips the display.
 *
 * Size is hard-constrained in both directions — width/height AND
 * min-width/min-height AND max-width/max-height — so a large source
 * image can never expand the avatar past 38px, even if a page-specific
 * rule or inline override tries to stretch it. The child <img> gets the
 * same belt-and-suspenders constraint so the image itself stays bounded
 * by the container. Without max-width/max-height on the <img>, a very
 * wide source file could push the container in a flex row via its
 * intrinsic dimensions before object-fit kicks in. */
.nav-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  background: var(--dark);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}
.nav-avatar img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}