/* ═══════════════════════════════════════════════════════════════
   North Peak Care Portal — Shared Stylesheet
   Brand identity & chrome styles used on every page.
   Page-specific layout (sidebar width, main area, cards) lives
   in each file's own <style> tag.
   ═══════════════════════════════════════════════════════════════ */

/* ── Brand colors (change once, updates everywhere) ── */
:root {
  --npc-blue:      #1C75BC;
  --npc-navy:      #262262;
  --npc-deep-blue: #2B3990;
  --npc-teal:      #0097B2;
  --npc-cyan:      #27AAE1;
  --npc-charcoal:  #231F20;

  --tint-blue:  #EAF4FB;
  --tint-teal:  #E8F9FB;
  --tint-cyan:  #EDF8FF;

  --border-soft: #E3E7ED;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--npc-charcoal);
  visibility: hidden;   /* auth.js reveals body after auth check */
}

/* ── Header bar ── */
.top-bar {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-soft);
  background: #ffffff;
  z-index: 100;
  height: 64px;
}

/* Brand logo link */
.brand { display: flex; align-items: center; height: 100%; }
.brand a,
.brand-link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  line-height: 0;
}
.brand-logo { height: 44px; width: auto; display: block; }

/* ── Top-right action cluster ── */
.top-actions { display: flex; align-items: center; gap: 16px; }

/* Role pill */
.pill {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  font-size: 12px;
  line-height: 1;
  color: #6C7280;
  background: #fff;
  white-space: nowrap;
  text-decoration: none;
}
.pill--admin {
  background: rgba(28, 117, 188, 0.07);
  border-color: rgba(28, 117, 188, 0.3);
  color: var(--npc-blue);
  font-weight: 600;
}
.pill--role-link { cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.pill--role-link:hover {
  background: rgba(28, 117, 188, 0.08);
  border-color: rgba(28, 117, 188, 0.35);
  color: var(--npc-blue);
}

/* Sign-out button */
.btn-signout {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: #4B5263;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  user-select: none;
}
.btn-signout:hover {
  background: rgba(28, 117, 188, 0.06);
  border-color: rgba(28, 117, 188, 0.35);
  color: var(--npc-blue);
}
.btn-signout:active { transform: translateY(0.5px); }

/* Avatar circle */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--npc-blue), var(--npc-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Sidebar unread badge ── */
.nav-badge {
  margin-left: auto;
  background: #EF4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1.4;
}

/* ── Toast notification ── */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.22s, transform 0.22s;
  z-index: 400;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Primary button (used across pages) ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--npc-blue);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-primary:hover { background: #1560a0; }

/* ── Status badges (visit pipeline) ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.status-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.status--open             { background: rgba(239,68,68,0.10);   color: #EF4444; }
.status--assigned_pending { background: rgba(217,119,6,0.10);   color: #D97706; }
.status--accepted         { background: rgba(28,117,188,0.10);  color: #1C75BC; }
.status--in_progress      { background: rgba(0,151,178,0.10);   color: #0097B2; }
.status--chart_submitted  { background: rgba(124,58,237,0.10);  color: #7C3AED; }
.status--chart_reviewed   { background: rgba(124,58,237,0.10);  color: #7C3AED; }
.status--pending_payment  { background: rgba(108,114,128,0.10); color: #6C7280; }
.status--paid             { background: rgba(22,163,74,0.10);   color: #16A34A; }