/* ============================================================================
   Aldeapath — Header component system
   ----------------------------------------------------------------------------
   Three (and only three) header variants exist in the app:

     1. .ap-header      PRIMARY   — logo + minimal actions. Only on primary
                                    navigation screens (Overview, Markets,
                                    Trade, Activity, More).
     2. .ap-pagehead    SECONDARY — back button + title (+ optional single
                                    action). Every sub-page / detail screen.
     3. .ap-modalhead   MODAL     — close/back + title, inside sheets & modals.

   Loaded AFTER aldeapath-system.css / aldeapath-polish.css so it wins.
   ========================================================================== */

:root {
  --ap-hd-h: 60px;              /* primary header height */
  --ap-hd-pad-x: var(--page-padding, 16px); /* single source of truth for L/R padding */
  --ap-hd-gap: var(--space-2, 8px);        /* spacing between action items */
  --ap-hd-tap: 44px;            /* minimum touch target */
  --ap-hd-logo: 30px;           /* logo mark size (was 40px) */
  --ap-hd-surface: var(--card, #fff);
  --ap-hd-border: var(--border, rgba(15, 23, 42, .08));
}

/* ─────────────────────────── 1. PRIMARY HEADER ─────────────────────────── */

.app-header,
.ap-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ap-hd-gap);
  min-height: var(--ap-hd-h);
  padding: 0 var(--ap-hd-pad-x);
  background: var(--ap-hd-surface);
  border-bottom: 1px solid var(--ap-hd-border);
  box-sizing: border-box;
}

/* Brand is the visual anchor — everything else is secondary. */
.app-header .header-brand,
.ap-header .header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-header .header-logo-img,
.ap-header .header-logo-img {
  width: var(--ap-hd-logo);
  height: var(--ap-hd-logo);
  flex-shrink: 0;
  object-fit: contain;
}

.app-header .header-brand > span,
.ap-header .header-brand > span {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Actions: evenly spaced, vertically centred, 44px targets. */
.app-header .header-controls,
.ap-header .header-controls {
  display: flex;
  align-items: center;
  gap: var(--ap-hd-gap);
  flex-shrink: 0;
  /* Optical alignment: icon buttons are wider than their glyph, so pull the
     last one back to keep the right padding visually equal to the left. */
  margin-right: -8px;
}

.app-header .header-controls .notif-btn,
.ap-header .header-controls .notif-btn,
.ap-hd-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ap-hd-tap);
  height: var(--ap-hd-tap);
  min-width: var(--ap-hd-tap);
  min-height: var(--ap-hd-tap);
  padding: 0;
  margin: 0 !important;          /* kill legacy inline margin-right hacks */
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text, #0f172a);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, transform .18s ease;
}

.app-header .header-controls .notif-btn:active,
.ap-hd-icon:active { transform: scale(.94); background: var(--muted-bg, rgba(15, 23, 42, .06)); }

.app-header .header-controls .notif-btn svg,
.ap-hd-icon svg { width: 21px; height: 21px; display: block; }

/* Badges sit on the glyph, not the 44px box edge. */
.app-header .header-controls .notif-badge,
.ap-hd-icon .notif-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  transform: translate(35%, -35%);
}

/* ── Overflow ("more") menu ── */
.ap-hd-overflow { position: relative; }

.ap-hd-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 4px;
  min-width: 224px;
  padding: 6px;
  background: var(--card, #fff);
  border: 1px solid var(--ap-hd-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .28);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.ap-hd-overflow.open .ap-hd-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.ap-hd-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text, #0f172a);
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ap-hd-menu-item:active { background: var(--muted-bg, rgba(15, 23, 42, .06)); }
.ap-hd-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.ap-hd-menu-item .ap-hd-menu-flag { font-size: 1.05rem; line-height: 1; }
.ap-hd-menu-item .notif-badge { position: static; margin-left: auto; transform: none; }
.ap-hd-menu-sep { height: 1px; margin: 6px 8px; background: var(--ap-hd-border); }
.ap-hd-menu-label {
  padding: 8px 12px 4px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}
.ap-hd-menu-item.active { color: var(--brand-dark, var(--brand, #064e3b)); }

/* Unread dot on the overflow trigger when a hidden action needs attention. */
.ap-hd-overflow > .ap-hd-icon[data-ap-alert="1"]::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger, #ef4444);
  box-shadow: 0 0 0 2px var(--card, #fff);
}

/* ── Hide the primary header on secondary screens ── */
body.ap-secondary-page .app-header,
body.ap-secondary-page .ap-header { display: none !important; }

/* ────────────────────────── 2. SECONDARY HEADER ────────────────────────── */

.ap-pagehead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px var(--ap-hd-pad-x);
  margin: 0 0 14px;
  background: var(--ap-hd-surface);
  border-bottom: 1px solid var(--ap-hd-border);
  box-sizing: border-box;
}

.ap-pagehead.ap-pagehead-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(1.4) blur(8px);
}

.ap-pagehead-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ap-hd-tap);
  height: var(--ap-hd-tap);
  min-width: var(--ap-hd-tap);
  min-height: var(--ap-hd-tap);
  margin-left: -10px;            /* glyph optically flush with content padding */
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text, #0f172a);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, transform .18s ease;
}

.ap-pagehead-back:active { transform: scale(.94); background: var(--muted-bg, rgba(15, 23, 42, .06)); }
.ap-pagehead-back svg { width: 20px; height: 20px; display: block; }

.ap-pagehead-titles { min-width: 0; }

.ap-pagehead-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-pagehead-sub {
  margin-top: 1px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional contextual action — only ever one. */
.ap-pagehead-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--ap-hd-tap);
  min-height: var(--ap-hd-tap);
  margin-right: -8px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--brand-dark, var(--brand, #064e3b));
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ap-pagehead-action svg { width: 20px; height: 20px; }
.ap-pagehead:not(:has(.ap-pagehead-action)) { grid-template-columns: auto minmax(0, 1fr); }

/* Standalone secondary pages (notifications inbox) share the same anatomy. */
.nx-topbar.ap-pagehead { margin-bottom: 0; }
.nx-topbar.ap-pagehead .nx-title {
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-topbar.ap-pagehead .nx-icon-btn {
  width: var(--ap-hd-tap);
  height: var(--ap-hd-tap);
  min-width: var(--ap-hd-tap);
  min-height: var(--ap-hd-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -10px;
  border-radius: 12px;
  color: var(--text, #0f172a);
  text-decoration: none;
}
.nx-topbar.ap-pagehead .nx-text-btn {
  min-height: var(--ap-hd-tap);
  margin-right: -8px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--brand-dark, var(--brand, #064e3b));
  font-size: .82rem;
  font-weight: 700;
}

/* ──────────────────────────── 3. MODAL HEADER ──────────────────────────── */

.ap-modalhead,
.ann-detail-topbar,
.support-hub-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px var(--ap-hd-pad-x);
  box-sizing: border-box;
}

.ap-modalhead-title,
.ann-detail-topbar-title {
  min-width: 0;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-modalhead-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ap-hd-tap);
  height: var(--ap-hd-tap);
  min-width: var(--ap-hd-tap);
  min-height: var(--ap-hd-tap);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ap-modalhead-btn svg { width: 20px; height: 20px; }

/* Desktop: the sidebar owns navigation, so the primary header can breathe. */
@media (min-width: 900px) {
  :root { --ap-hd-pad-x: 22px; --ap-hd-gap: 12px; --ap-hd-logo: 32px; }
}

/* ── Support action promoted into the header bar (next to the bell) ────────
   Shares the .notif-btn geometry so both icons keep identical 44px targets,
   optical centring and badge placement. */
.app-header .header-controls .support-btn,
.ap-header .header-controls .support-btn {
  order: -1;                      /* support sits left of the bell */
}

.app-header .header-controls .support-btn svg,
.ap-header .header-controls .support-btn svg {
  width: 21px;
  height: 21px;
  display: block;
}

/* Even, deliberate rhythm between the header actions. */
.app-header .header-controls,
.ap-header .header-controls { gap: 2px; }

/* Badges: identical anchor point on both icons, never clipped by the header. */
.app-header .header-controls .notif-badge,
.ap-header .header-controls .notif-badge {
  pointer-events: none;
  z-index: 2;
}