/* HansMed Patient Portal — Healing Courtyard shell (Phase 3a).
   Self-contained top-bar shell adapted from the design's portal-styles.css.
   Strangler Fig: the legacy .nav + .sidebar are HIDDEN (not removed) so all
   existing JS still finds its elements; panels render full-width beneath the
   new bar. Loaded LAST in portal.html. */

:root {
  --court-cream-50:  #FBF7EE;
  --court-cream-100: #F5EEDF;
  --court-cream-200: #ECE2CC;
  --court-clay-200:  #C9B393;
  --court-clay-500:  #8B6B47;
  --court-ink-700:   #4A3326;
  --court-ink-900:   #261810;
  --court-font-ui:   "DM Sans", "Inter", system-ui, sans-serif;
  --court-font-disp: "Cormorant Garamond", Georgia, serif;
}

/* warm courtyard paper backdrop */
body {
  background:
    radial-gradient(ellipse 90% 70% at 50% 22%, rgba(255,250,235,0.85) 0%, rgba(244,234,210,0) 70%),
    linear-gradient(180deg, #F4EAD2 0%, #EBDDBC 100%) fixed !important;
}

/* hide the legacy chrome; run main full-width */
.nav { display: none !important; }
.portal-layout { grid-template-columns: 1fr !important; }
.sidebar { display: none !important; }
.main { max-width: 1120px; margin: 0 auto; width: 100%; }

/* ── New top bar ── */
.p-bar {
  position: sticky; top: 0; z-index: 60;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 28px;
  padding: 14px 28px;
  background: var(--court-ink-900);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  font-family: var(--court-font-ui);
}
/* dark bar: keep the floating pills light, lift the bare elements to cream */
.p-bell { color: rgba(245,238,223,0.85); }
.p-bar .p-signout { color: var(--court-cream-50) !important; border-color: rgba(245,238,223,0.38) !important; }
.p-bar .p-signout:hover { background: rgba(245,238,223,0.12) !important; }
.p-logo-plate {
  display: inline-flex; align-items: center; gap: 12px;
  background: #F5EBD6; color: var(--court-ink-900);
  padding: 8px 16px 8px 10px; border-radius: 14px;
  text-decoration: none; justify-self: start;
}
.p-logo-plate svg { display: block; width: 30px; height: 30px; color: var(--court-ink-900); }
.p-logo-text { display: flex; flex-direction: column; line-height: 1; }
.p-logo-en { font-family: var(--court-font-ui); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.p-logo-zh { font-family: "Noto Serif SC","Source Han Serif SC",serif; font-weight: 500; font-size: 11.5px; margin-top: 4px; color: rgba(245,238,223,.8); letter-spacing: .04em; }

.p-nav {
  display: flex; align-items: stretch; gap: 2px; justify-self: center;
  background: var(--court-cream-100); border: 1px solid rgba(78,52,34,.08);
  border-radius: 999px; padding: 4px; max-width: 100%; overflow-x: auto;
}
.p-nav-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  color: var(--court-ink-700); text-decoration: none;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: color .2s, background .25s;
}
.p-nav-btn:hover { color: var(--court-ink-900); background: rgba(78,52,34,.05); }
.p-nav-btn.active { background: var(--court-ink-900); color: var(--court-cream-50); }
.p-nav-icon { width: 16px; height: 16px; display: inline-flex; }
.p-nav-icon svg { width: 100%; height: 100%; }
.p-nav-btn .p-nav-label span[lang] { } /* lang spans toggled by existing i18n */

.p-bar-right { display: flex; align-items: center; gap: 12px; justify-self: end; }
.p-bell { position: relative; text-decoration: none; font-size: 18px; line-height: 1; color: var(--court-ink-700); }
.p-bell-badge {
  position: absolute; top: -6px; right: -8px;
  background: #c97157; color: var(--court-cream-50);
  font-size: 9px; font-weight: 700; border-radius: 999px; padding: 1px 5px;
}
.p-lang { display: flex; background: var(--court-cream-200); border-radius: 999px; padding: 3px; }
.p-lang button { border: none; background: transparent; padding: 5px 11px; border-radius: 999px; font-family: var(--court-font-ui); font-weight: 600; font-size: 12px; color: var(--court-ink-700); cursor: pointer; }
.p-lang button.active { background: var(--court-ink-900); color: var(--court-cream-50); }
.p-avatar-pill {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 5px; background: var(--court-cream-100);
  border: 1px solid rgba(78,52,34,.08); border-radius: 999px; text-decoration: none;
}
.p-avatar-pill:hover { background: var(--court-cream-200); }
.p-avatar-mini {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(160deg, var(--court-clay-200), var(--court-clay-500));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--court-font-disp); font-style: italic; font-weight: 600; font-size: 14px;
  color: var(--court-cream-50);
}
.p-avatar-name { font-size: 13px; font-weight: 500; color: var(--court-ink-900); }

/* hide the right cluster's text labels are bilingual; lang handled globally */

/* ── Responsive ── */
@media (max-width: 820px) {
  .p-bar { grid-template-columns: 1fr auto; gap: 12px; padding: 10px 14px; }
  .p-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; order: 3; }
  .p-logo-zh { display: none; }
  .p-avatar-name { display: none; }
}