@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root {
  --purple: #4DBDAD;
  --purple-light: #E0F5F2;
  --orange: #F0C040;
  --orange-light: #FDF6D8;
  --coral: #F87C6E;
  --sky: #7EC8E3;
  --navy: #2D3561;
}
body { font-family: 'Nunito', 'Segoe UI', sans-serif; background: #F5F0EB; color: var(--navy); }
/* Per-portal background colors */
body.portal-volunteer    { background: #f2f0eb; }
body.portal-parent       { background: #e4ecf2; }
body.portal-organization { background: #e8ede4; }
body.portal-school       { background: #eceae4; }
.navbar-brand { color: var(--navy) !important; font-weight: 900; font-size: 1.4rem; letter-spacing: -.01em; }
.nav-link { color: var(--navy) !important; font-weight: 700; }
.nav-link.nav-active { color: var(--purple) !important; font-weight: 800; }
.navbar { background: #fff !important; }
/* ── Button system ── */
.btn { border-radius: 30px; font-weight: 800; padding: 8px 22px; transition: all .15s; }
.btn-sm { padding: 5px 14px; font-size: .82rem; }
.btn-lg { padding: 11px 32px; font-size: 1.05rem; }
.btn-purple { background: var(--purple); color: #fff; border: none; }
.btn-purple:hover { background: #3aada0; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(77,189,173,.35); }
.btn-outline-purple { background: transparent; color: var(--purple); border: 2px solid var(--purple); }
.btn-outline-purple:hover { background: var(--purple); color: #fff; transform: translateY(-1px); }
.btn-orange { background: var(--orange); color: var(--navy); border: none; }
.btn-orange:hover { background: #e0b030; color: var(--navy); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(240,192,64,.35); }
.btn-outline-secondary { border-radius: 30px; font-weight: 700; }
.btn-outline-danger { border-radius: 30px; font-weight: 700; }
.btn-outline-success { border-radius: 30px; font-weight: 700; }
.btn-success { border-radius: 30px; font-weight: 700; }
.btn-danger { border-radius: 30px; font-weight: 700; }
.btn-light { border-radius: 30px; font-weight: 700; }
.text-purple { color: var(--purple); }
.bg-purple { background: var(--purple); }
a { color: var(--purple); }
a:hover { color: #3aada0; }
/* Cards */
.card { border-radius: 20px !important; border: none !important; box-shadow: 0 2px 16px rgba(45,53,97,.07) !important; }
/* Auto-style Django form inputs */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
select, textarea {
  display: block; width: 100%; padding: .375rem .75rem;
  font-size: 1rem; line-height: 1.5; color: var(--navy);
  background: #fff; border: 1.5px solid #dde8e6; border-radius: 12px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--purple);
  box-shadow: 0 0 0 .2rem rgba(77,189,173,.2);
}
/* ── Global sub-nav tabs ── */
.subnav { border-bottom: 2px solid #F0E8FF; margin-bottom: 24px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav .nav-link { color: #6b7280; font-weight: 600; border: none; border-bottom: 3px solid transparent; border-radius: 0; padding: 11px 20px; margin-bottom: -2px; background: none; font-size: .9rem; transition: color .15s; white-space: nowrap; }
.subnav .nav-link:hover { color: #C47EC8; }
.subnav .nav-link.active { color: #5B5EA6; border-bottom-color: #C47EC8; }
.subnav .nav-link i { opacity: .8; }
/* ── Waypoints shared UI ── */
/* Category colors for wish list cards */
.cat-achievement { --cat-solid: #e8920a; --cat-tri: rgba(0,0,0,.14); }
.cat-recognition { --cat-solid: #d63a7a; --cat-tri: rgba(0,0,0,.14); }
.cat-impact      { --cat-solid: #0e9068; --cat-tri: rgba(0,0,0,.14); }
.cat-growth      { --cat-solid: #2563c0; --cat-tri: rgba(0,0,0,.14); }
.cat-connection  { --cat-solid: #6d35c4; --cat-tri: rgba(0,0,0,.14); }
.cat-purpose     { --cat-solid: #c42828; --cat-tri: rgba(0,0,0,.14); }
.cat-material    { --cat-solid: #3d4ab8; --cat-tri: rgba(0,0,0,.14); }
/* Wish list card */
.wl-card {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px 18px;
  background: var(--cat-solid, #555);
  border: none; border-radius: 14px; margin-bottom: 10px;
  color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.18);
  transition: opacity .2s;
}
.wl-card::before {
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  pointer-events: none; z-index: 0;
}
.wl-card::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 0; height: 0; border-style: solid;
  border-width: 0 44px 44px 0;
  border-color: transparent var(--cat-tri, rgba(0,0,0,.14)) transparent transparent;
  border-radius: 0 14px 0 0; pointer-events: none;
}
.wl-card-inner { position: relative; z-index: 1; flex: 1; min-width: 0; }
.wl-scatter { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.wl-scatter span { position: absolute; font-size: .65rem; opacity: .18; user-select: none; color: #fff; }
.wl-cat-badge {
  display: inline-block; font-size: .58rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px; padding: 2px 8px; margin-bottom: 7px;
}
.wl-title { font-size: .92rem; font-weight: 700; color: #fff; line-height: 1.4; }
.wl-why { font-size: .76rem; color: rgba(255,255,255,.68); font-style: italic; margin-top: 4px; line-height: 1.5; }
.wl-card.received { opacity: .5; }
.wl-card.received .wl-title { text-decoration: line-through; color: rgba(255,255,255,.6); }
/* Wish list interactive elements */
.wl-privacy-tag {
  font-size: .62rem; font-weight: 700;
  color: rgba(255,255,255,.5); background: rgba(255,255,255,.12);
  border-radius: 20px; padding: 2px 8px; margin-top: 6px; display: inline-block;
  cursor: pointer; border: none; transition: color .15s, background .15s;
}
.wl-privacy-tag.shared { color: #fff; background: rgba(255,255,255,.28); }
.wl-privacy-tag:hover { color: #fff; background: rgba(255,255,255,.22); }
.wl-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.wl-check {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.1); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: .75rem; font-weight: 900;
  transition: border-color .15s, background .15s, color .15s; padding: 0;
}
.wl-check:hover { border-color: #fff; background: rgba(255,255,255,.25); color: #fff; }
.btn-remove { font-size: .7rem; color: rgba(255,255,255,.35); background: none; border: none; cursor: pointer; padding: 0; }
.btn-remove:hover { color: rgba(255,255,255,.75); }
/* Grant this button (parent page) */
.wish-grant-btn { flex-shrink:0; font-size:.72rem; font-weight:700; border-radius:20px; padding:5px 14px; background:transparent; border:1.5px solid #44b878; color:#2a8860; cursor:pointer; white-space:nowrap; }
.wish-grant-btn:hover { background:#44b878; color:#fff; }
.wish-grant-btn:disabled { opacity:.5; cursor:default; }
/* Secondary text-link actions (card expanded area) */
.card-action-links { display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; }
.card-action-link {
  font-size:.74rem; font-weight:700; opacity:.65;
  background:none; border:none; cursor:pointer;
  color:inherit; padding:0; text-decoration:underline;
  text-underline-offset:3px;
}
.card-action-link:hover { opacity:1; }
.card-action-link.danger { opacity:.5; }
.card-action-link.danger:hover { opacity:.85; }
/* Reply link on parent notes */
.reply-link { font-size:.68rem; font-weight:700; background:none; border:none; color:rgba(255,255,255,.45); cursor:pointer; padding:0; margin-top:4px; text-decoration:underline; text-underline-offset:3px; }
.reply-link:hover { color:#fff; }

/* ── Hover effects (replaces inline onmouseover/onmouseout) ── */
.hover-lift { transition: transform .15s; }
.hover-lift:hover { transform: translateY(-2px); }

/* !important to beat Bootstrap's .shadow-sm which uses !important. */
.hover-shadow-purple { transition: box-shadow .15s; }
.hover-shadow-purple:hover { box-shadow: 0 4px 18px rgba(124,58,237,.15) !important; }

/* Danger flag button: subtle gray base, red-tint on hover. Base colors
   (background, color) are set on the element via inline style; the !important
   on the hover rule is required to beat inline-style specificity. */
.hover-flag { transition: background .15s, color .15s; }
.hover-flag:hover { background: #fee2e2 !important; color: #dc2626 !important; }

/* Border darkens to near-black on hover. !important required because the
   border-color is typically set via inline `border:` shorthand. */
.hover-border-dark { transition: border-color .12s; }
.hover-border-dark:hover { border-color: #1a1a1a !important; }

/* Border + text both turn coral on hover. !important to beat inline border. */
.hover-border-coral { transition: border-color .15s, color .15s; }
.hover-border-coral:hover { border-color: var(--coral) !important; color: var(--coral) !important; }

/* Scale up 20% on hover (e.g. color swatches) */
.hover-scale { transition: transform .15s; }
.hover-scale:hover { transform: scale(1.2); }

/* Fade slightly on hover (subtle press feedback) */
.hover-fade { transition: opacity .15s; }
.hover-fade:hover { opacity: .88; }