/* ============================================================================
   PARENT-RAIL THEME (2026-07-02)
   The parent family account reuses the kid left-rail machinery (kid-sidebar.js
   → .pmkid-nav under body.pm-kid-shell), but with an EMERALD/TEAL shiny theme
   + a twinkling-stars overlay + a subtle glow. Scoped under body.pm-parent-rail
   so the CHILD rail stays exactly purple. Also fixes the dashboard content
   overflow that the wider rail introduced. Nothing here touches the kid view.
   ============================================================================ */

/* ---- 1. Emerald/teal rail (override the gradient variable) ---------------- */
body.pm-parent-rail {
  /* This var feeds both .pmkid-nav's background AND the pre-paint skeleton
     (body.pm-kid-shell::before), so overriding it recolors both at once. */
  --pmkid-nav-grad: linear-gradient(180deg, #0c6b5e 0%, #109c86 52%, #18c8a1 100%);
  /* Kid ACCENT purples → emerald, so the active pill icon, the flyout header
     ("PLAN & HOURS"), and the flyout icon-chips are green, not kid-purple.
     These three vars feed every accent in kid-sidebar.css. */
  --pmkid-purple-deep:   #0a6b5e;
  --pmkid-purple-bright: #10a086;
  --pmkid-purple-soft:   #18c8a1;
}
/* Hardcoded (non-variable) purple bits in kid-sidebar.css → emerald. */
body.pm-parent-rail .pmkid-fly__item__icon,
body.pm-parent-rail .pmkid-fly__item:hover {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}
body.pm-parent-rail .pmkid-fly__item:hover { color: #0a6b5e; }
body.pm-parent-rail .pmkid-fly__item.is-active {
  background: linear-gradient(135deg, #0f9d8a 0%, #16c8a1 100%);
}

/* Shiny sheen + soft outer glow on the rail itself. */
body.pm-parent-rail .pmkid-nav {
  box-shadow:
    6px 0 34px -14px rgba(16, 185, 129, .55),
    inset -1px 0 0 rgba(255, 255, 255, .10);
}
/* Brighter diagonal sheen than the kid rail — reads as "shiny". */
body.pm-parent-rail .pmkid-nav::before {
  background:
    linear-gradient(150deg, rgba(255,255,255,.22) 0%, transparent 38%),
    radial-gradient(circle at 22% 8%,  rgba(255,255,255,.20), transparent 46%),
    radial-gradient(circle at 82% 96%, rgba(190,255,235,.14), transparent 50%);
}

/* ---- 2. Twinkling stars overlay ------------------------------------------ */
/* A field of tiny white stars that gently twinkle + drift up the rail, so the
   parent menu feels alive + memorable. Sits above the gradient, below the
   nav items (which are z-index:2). prefers-reduced-motion turns it static. */
body.pm-parent-rail .pmkid-nav {
  overflow: visible; /* keep flyout escaping; stars are clipped by ::after box */
}
body.pm-parent-rail .pmkid-nav::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.55));
  background-image:
    radial-gradient(2.6px 2.6px at 18% 12%, rgba(255,255,255,1),   transparent 62%),
    radial-gradient(1.6px 1.6px at 62% 22%, rgba(255,255,255,.92), transparent 62%),
    radial-gradient(3px 3px   at 38% 33%, var(--kt-star,#d6fff2),   transparent 62%),
    radial-gradient(1.6px 1.6px at 80% 44%, rgba(255,255,255,.9),  transparent 62%),
    radial-gradient(2.4px 2.4px at 26% 55%, rgba(255,255,255,1),   transparent 62%),
    radial-gradient(1.7px 1.7px at 70% 65%, var(--kt-star,#d6fff2), transparent 62%),
    radial-gradient(2.8px 2.8px at 46% 77%, rgba(255,255,255,1),   transparent 62%),
    radial-gradient(1.6px 1.6px at 84% 86%, rgba(255,255,255,.9),  transparent 62%),
    radial-gradient(2.2px 2.2px at 30% 92%, var(--kt-star,#d6fff2),   transparent 62%),
    radial-gradient(1.7px 1.7px at 58% 6%,  rgba(255,255,255,.92), transparent 62%),
    radial-gradient(2px 2px   at 74% 15%, rgba(255,255,255,.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 14% 40%, var(--kt-star,#d6fff2),  transparent 62%);
  background-repeat: repeat;
  background-size: 100% 60%;
  animation: pmParStarTwinkle 4.2s ease-in-out infinite,
             pmParStarDrift 26s linear infinite;
}
@keyframes pmParStarTwinkle {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}
@keyframes pmParStarDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 -60%; }
}
@media (prefers-reduced-motion: reduce) {
  body.pm-parent-rail .pmkid-nav::after { animation: none; opacity: .7; }
}

/* Logo + active pill tuned for the emerald backdrop. */
body.pm-parent-rail .pmkid-nav__logo {
  background: rgba(255,255,255,.20);
  box-shadow: 0 6px 18px -8px rgba(0, 60, 45, .5);
}

/* ---- 3. Dashboard layout fix (stop the right-edge overflow) --------------- */
/* The wider rail (138px body padding) left the 2-col dashboard grid
   (.dash-shell: 1fr 320px) unable to shrink — grid items default to
   min-width:auto, so the right calendar column spilled off-screen + caused a
   horizontal scroll. min-width:0 lets the columns shrink to fit; the overflow
   guards kill any residual sideways scroll. Scoped to the PARENT view only
   (pm-parent-rail) so admin/assistant/child layouts are untouched. */
body.pm-parent-rail .dash-shell > *,
body.pm-parent-rail .nx-row > *,
body.pm-parent-rail [class*="nx-grid"] > * {
  min-width: 0;
}
body.pm-parent-rail .nx-shell,
body.pm-parent-rail .dash-shell,
body.pm-parent-rail .nx-row {
  max-width: 100%;
  box-sizing: border-box;
}
/* Fresher near-white page background for parents (was flat gray-50 #f9fafb,
   which read "grey"). The green-outlined widgets keep their own separation, so
   the page can go whiter without the white cards blending in.
   NOTE: overflow-x:hidden was REMOVED here — it was clipping the family
   portfolio's rounded top-right corner flush against the viewport edge. The
   portfolio now stays contained on its own (min-width:0 caps the card +
   overflow-x:clip on .pmpf__panes keeps the calendar inside it), so there is
   no stray horizontal overflow left to hide. */
/* The visible "grey" around the widgets is NOT the page/body bg (that's already
   white via html,body{background:var(--card)!important}) — it comes from the
   inner layout wrappers .dash-shell + .dash-main-wrap, which paint var(--bg)
   (#f9fafb, gray-50). Override those to a bright near-white for parents; the
   green widget outlines keep the white cards distinct. THIS is why an earlier
   `body{background}` change showed no visible difference. */
body.pm-parent-rail,
body.pm-parent-rail .dash-shell,
body.pm-parent-rail .dash-main-wrap {
  background: #ffffff !important;   /* Caleb 2026-07-29: pure white for parents (was #fdfeff near-white; read grey) */
}
/* A touch more right breathing room so cards (esp. the family portfolio) never
   sit flush against the clip edge — which was squaring off / "breaking" the
   portfolio's rounded top-right corner. */
body.pm-parent-rail .nx-shell {
  padding-right: 40px;
}
/* THE PORTFOLIO CORNER FIX (2026-07-02c). The calendar's min-content made the
   .pmpf card wider than its column, so it pushed past the viewport edge and the
   body's overflow-x:hidden chopped the rounded top-right corner flush (looked
   broken). min-width:0 defeats the default min-width:auto (=min-content) so the
   card + its panes actually honor max-width:100% and stay inside the column;
   overflow-x:clip on the panes keeps a too-wide calendar clipped to the rounded
   card (clean corner) without a page scroll, while leaving vertical layout (the
   tuned 680px min-height / iframe height) untouched. Verified in a harness:
   2000px content caps cleanly, corner intact, no scroll. */
body.pm-parent-rail #clientPortfolio,
body.pm-parent-rail .pmpf,
body.pm-parent-rail .pmpf__panes,
body.pm-parent-rail .pmpf__pane {
  min-width: 0;
  max-width: 100%;
}
/* Clip the (square) calendar to the card's rounded corners so it sits FLUSH
   inside the green border — no white square edge poking out at the corners.
   The earlier "disconnected border" was the STALE page-level overflow-x:hidden
   clipping at the viewport (now removed), NOT this. The panes has auto height
   (min-height only), so it grows to fit the month grid — nothing gets cut
   vertically; this only rounds the horizontal corners of the content. */
body.pm-parent-rail .pmpf__panes {
  overflow: hidden;
}

/* ---- 4. Green outline on the dashboard widgets (matches the rail) --------- */
/* The KPI hours strip, the notifications strip, every .nx-card (calendar,
   messages, homework, charts, activity map…) and the family-portfolio folder
   trim all get a soft emerald outline so the dashboard reads as one intact,
   organised set. Scoped to parents only. */
/* IMPORTANT: border goes on the VISIBLE card only, never on a wrapper that
   already contains a bordered card — else you get a double ring. The
   notifications widget is wrapper (.nx-notif-strip) + inner card
   (.nx-notif-trigger); border ONLY the inner card (matches the KPI card). */
body.pm-parent-rail .nx-card,
body.pm-parent-rail .nx-stats,
body.pm-parent-rail #nxStatsCard,
body.pm-parent-rail #nxNotifStrip .nx-notif-trigger {
  border: 1.5px solid rgba(13, 148, 136, .40) !important;
}
/* The family portfolio uses a delicate "folder-tab" border (tabs notch into
   the card top) drawn from --pmpf-trim. A saturated teal exposed the tab/card
   seams. Use a SOFT teal — close to the original soft blue's subtlety — so it
   reads green-to-match without breaking the corners. */
body.pm-parent-rail .pmpf {
  --pmpf-trim: #7fd8cb;
}

/* ---- 5. Parent QUICK-ACTIONS bar (top-right of the Dashboard heading) ----- */
/* A green, shimmering pill row — the parent counterpart to the kids'
   .pmch-icons row. Injected into .nx-head by kid-sidebar.js (parent mode);
   .nx-head is made a flex row (title left, actions right). */
body.pm-parent-rail .nx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
body.pm-parent-rail .nx-head__title { min-width: 0; }

/* DARK emerald bar (matches the rail) — strong + confident, icon-only pills
   with hover tooltips, twinkling stars + a shimmer sweep. overflow stays
   VISIBLE so the tooltips can escape below the bar; the star/shimmer fx are
   clipped to the pill shape via border-radius:inherit on the pseudos (their
   backgrounds respect the rounding), so no clip container is needed. */
.par-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 6px;
  border-radius: 999px;
  position: relative;
  overflow: visible;
  background: linear-gradient(135deg, #0b6b5e 0%, #10967f 55%, #17c39c 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 26px -10px rgba(9, 80, 70, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* Twinkling stars — same family as the rail. */
.par-actions::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 30%, rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.3px 1.3px at 28% 72%, var(--kt-star,#d6fff2), transparent 60%),
    radial-gradient(1.7px 1.7px at 50% 24%, rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 66%, rgba(255,255,255,.9),  transparent 60%),
    radial-gradient(1.6px 1.6px at 86% 34%, var(--kt-star,#d6fff2),   transparent 60%),
    radial-gradient(1.3px 1.3px at 40% 84%, rgba(255,255,255,.9),  transparent 60%);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.5));
  animation: parActTwinkle 3.4s ease-in-out infinite;
}
@keyframes parActTwinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* Shimmer sweep (moves via background-position so it stays clipped to the pill). */
.par-actions::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.45) 50%, transparent 58%);
  background-size: 250% 100%;
  background-position: 190% 0;
  animation: parActShimmer 5s ease-in-out infinite;
}
@keyframes parActShimmer { 0%, 16% { background-position: 190% 0; } 64%, 100% { background-position: -90% 0; } }
@media (prefers-reduced-motion: reduce) { .par-actions::before, .par-actions::after { animation: none; } }

.par-action {
  position: relative;
  z-index: 1;
  width: 40px; height: 40px;
  border-radius: 999px;
  display: grid; place-items: center;
  text-decoration: none;
  color: #ffffff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), background .18s ease, box-shadow .18s ease, color .18s ease;
}
.par-action svg { width: 18px; height: 18px; stroke: currentColor; display: block; }
.par-action:hover {
  background: #ffffff;
  color: #0b6b5e;
  transform: translateY(-3px) scale(1.09);
  box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .42);
}
/* Hover tooltip — "hover to see what is what". */
.par-action__tip {
  position: absolute;
  bottom: -33px; left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0d2b24; color: #eafff8;
  font: 700 11px/1 'Inter', system-ui, sans-serif; letter-spacing: .01em;
  padding: 6px 10px; border-radius: 8px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
}
.par-action__tip::before {
  content: ''; position: absolute; top: -3px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px; background: #0d2b24; border-radius: 2px;
}
.par-action:hover .par-action__tip { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ---- Quick-actions bar RELOCATED into the emerald topbar (2026-07-02) ----
   Sits between the search field and the Install App button. The topbar is
   already the same emerald with its own stars + shimmer, so here we drop the
   pill's own gradient/twinkle/shimmer and give it a subtle glass group that
   matches the glassy search field. Auto margins centre it in the open space. */
html body.pm-parent-rail .nx-topbar .par-actions {
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  padding: 5px;
}
html body.pm-parent-rail .nx-topbar .par-actions::before,
html body.pm-parent-rail .nx-topbar .par-actions::after { display: none; }
/* On narrow screens the search field hides; let the bar sit left, no auto gap. */
@media (max-width: 760px) {
  html body.pm-parent-rail .nx-topbar .par-actions { margin-left: 0; margin-right: 0; }
}

/* ── EMERALD TOPBAR (2026-07-02, per Caleb: "make that upper header part
   that nice premium emerald green with some sparkles") ──────────────────
   Same family as the rail + quick-actions bar: deep→bright emerald sweep,
   twinkling stars, soft shimmer. Everything inside goes glassy-white.
   REVERT: delete this whole section (one block, nothing else touched).
   NOTE: sidebar.css ships a frosted-white light-theme skin
   (html[data-dash-theme="light"] .nx-topbar { ... !important }) that beat
   the first version of this block — hence the html-prefixed selectors
   (higher specificity) and !important on every contested property. */
html body.pm-parent-rail .nx-topbar {
  background: linear-gradient(120deg, #0b6b5e 0%, #10967f 55%, #17c39c 100%) !important;
  border-bottom: 1px solid rgba(9, 80, 70, .55) !important;
  box-shadow: 0 10px 24px -14px rgba(9, 80, 70, .65), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: sticky;
}
/* Twinkling stars, spread across the full width */
html body.pm-parent-rail .nx-topbar::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 6% 34%,  rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.2px 1.2px at 14% 70%, var(--kt-star,#d6fff2), transparent 60%),
    radial-gradient(1.7px 1.7px at 24% 26%, rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.2px 1.2px at 35% 76%, rgba(255,255,255,.9),  transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 30%, var(--kt-star,#d6fff2),   transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 68%, rgba(255,255,255,.9),  transparent 60%),
    radial-gradient(1.7px 1.7px at 69% 24%, rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.2px 1.2px at 79% 72%, var(--kt-star,#d6fff2),  transparent 60%),
    radial-gradient(1.6px 1.6px at 90% 36%, rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.2px 1.2px at 97% 62%, rgba(255,255,255,.85), transparent 60%);
  /* Phase 40r (POINT 6) — tile the field + add the rail's horizontal DRIFT so the
     header sparkles actually move like the left rail's, not just twinkle. */
  background-repeat: repeat;
  background-size: 60% 100%;
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.5));
  animation: parActTwinkle 4.2s ease-in-out infinite,
             pmTopStarDrift 26s linear infinite;
}
@keyframes pmTopStarDrift { from { background-position: 0 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  html body.pm-parent-rail .nx-topbar::before { animation: none; }
}
/* Gentle shimmer sweep — slower + softer than the pills (it's a big surface) */
html body.pm-parent-rail .nx-topbar::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 44%, rgba(255,255,255,.22) 50%, transparent 56%);
  background-size: 260% 100%;
  background-position: 200% 0;
  animation: parActShimmer 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  html body.pm-parent-rail .nx-topbar::before,
  html body.pm-parent-rail .nx-topbar::after { animation: none; }
}
/* Children ride above the star/shimmer layers */
html body.pm-parent-rail .nx-topbar > * { position: relative; z-index: 1; }

/* Glassy search field on the dark emerald */
html body.pm-parent-rail .nx-topbar .nx-search input {
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 2px rgba(9, 80, 70, .25) !important;
}
html body.pm-parent-rail .nx-topbar .nx-search input::placeholder { color: rgba(255, 255, 255, .75) !important; }
html body.pm-parent-rail .nx-topbar .nx-search input:hover {
  background: rgba(255, 255, 255, .20) !important;
  border-color: rgba(255, 255, 255, .40) !important;
}
html body.pm-parent-rail .nx-topbar .nx-search input:focus {
  background: rgba(255, 255, 255, .24) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .18) !important;
}
html body.pm-parent-rail .nx-topbar .nx-search svg { color: rgba(255, 255, 255, .85) !important; }

/* Install App button — glassy pill (inline styles need the !important) */
html body.pm-parent-rail .nx-topbar [data-pm-install] {
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .32) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

/* Theme toggle — glassy circle */
html body.pm-parent-rail .nx-topbar .dash-theme-toggle {
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  color: #fff !important;
}
html body.pm-parent-rail .nx-topbar .dash-theme-toggle svg { color: #fff; }

/* User pod — glassy chip, emerald avatar */
html body.pm-parent-rail .nx-topbar .nx-userpod {
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
}
html body.pm-parent-rail .nx-topbar .nx-userpod__name { color: #fff !important; }
html body.pm-parent-rail .nx-topbar .nx-userpod__avatar {
  background: linear-gradient(135deg, #0d8571 0%, #2ee6b8 100%) !important;
  box-shadow: 0 2px 6px -1px rgba(9, 80, 70, .5) !important;
}

/* ── EMERALD SEARCH PANEL (2026-07-02, per Caleb: the open search dropdown
   "looks like a white thing… I want it to look intentional, designed, to
   match everything"). Parent accounts only — kid/staff search keeps its
   indigo look. Content surfaces stay light for readability; the emerald
   lives in the frame, accents, chips, hovers and buttons so the panel
   reads as part of the same design system as the rail + topbar.
   REVERT: delete this whole section. */

/* Panel frame — emerald-tinted border/shadow + a gradient accent along the top */
html body.pm-parent-rail .ms-panel {
  border: 1px solid rgba(13, 148, 136, .32);
  border-radius: 16px;
  box-shadow:
    0 24px 64px -16px rgba(9, 80, 70, .38),
    0 4px 18px -6px rgba(16, 185, 129, .22);
}
html body.pm-parent-rail .ms-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 6;
  background: linear-gradient(90deg, #0b6b5e 0%, #17c39c 55%, #7ff0d4 100%);
  pointer-events: none;
}

/* Sticky strips get a faint mint wash instead of grey */
html body.pm-parent-rail .ms-summary {
  background: linear-gradient(180deg, #f4fdfa 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(13, 148, 136, .14);
}
html body.pm-parent-rail .ms-browse-head {
  background: linear-gradient(180deg, #f4fdfa 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(13, 148, 136, .14);
}
html body.pm-parent-rail .ms-browse-title { color: #0f766e; }

/* Headings — deep teal instead of slate */
html body.pm-parent-rail .ms-empty-header,
html body.pm-parent-rail .ms-gallery-grouphead,
html body.pm-parent-rail .ms-section__head { color: #0f766e; }

/* Category cards — mint borders, emerald hover ring + glow, mint sparkles */
html body.pm-parent-rail .ms-gallery-card {
  border: 1px solid #d6f3ec;
  background: linear-gradient(135deg, #ffffff 0%, #fbfffd 100%);
}
html body.pm-parent-rail .ms-gallery-card::before {
  background: linear-gradient(135deg, #0d9488, #10b981, #5eead4);
}
html body.pm-parent-rail .ms-gallery-card:hover {
  background: linear-gradient(135deg, #f4fdfa 0%, #ecfdf7 100%);
  box-shadow:
    0 12px 28px -8px rgba(16, 185, 129, .34),
    0 2px 8px -2px rgba(13, 148, 136, .18);
}
html body.pm-parent-rail .ms-gallery-card:hover .ms-gallery-card__icon { color: #0d9488; }
html body.pm-parent-rail .ms-gallery-card .ms-spark {
  background: radial-gradient(circle, #FFFFFF 0%, #a7f3d0 60%, transparent 100%);
}
html body.pm-parent-rail .ms-gallery-card__hint { color: #86bfb2; }

/* Chips — emerald active pills, mint hovers */
html body.pm-parent-rail .ms-chip:hover {
  background: linear-gradient(135deg, #f4fdfa 0%, #ecfdf7 100%);
  border-color: #99f6e4;
  color: #065f46;
  box-shadow: 0 4px 10px -4px rgba(16, 185, 129, .25);
}
html body.pm-parent-rail .ms-chip.is-active {
  background: linear-gradient(135deg, #0b6b5e 0%, #10a086 100%);
  color: #ffffff;
  box-shadow:
    0 4px 12px -2px rgba(9, 80, 70, .40),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}
html body.pm-parent-rail .ms-chip.is-active:hover {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  box-shadow: 0 6px 16px -2px rgba(16, 185, 129, .45);
}
html body.pm-parent-rail .ms-subchip.is-active {
  background: #ecfdf5;
  border-color: #99f6e4;
  color: #065f46;
}
html body.pm-parent-rail .ms-subchip.is-active .ms-chip__n {
  background: rgba(6, 95, 70, .12);
  color: #065f46;
}

/* Result rows — emerald accent bar, mint hover wash, teal title/icon/badge */
html body.pm-parent-rail .ms-item::before {
  background: linear-gradient(180deg, #0d9488 0%, #34d399 100%);
}
html body.pm-parent-rail .ms-item:hover,
html body.pm-parent-rail .ms-item.is-selected {
  background: linear-gradient(90deg, rgba(16, 185, 129, .07) 0%, rgba(13, 148, 136, .03) 100%);
}
html body.pm-parent-rail .ms-item:hover .ms-item__icon,
html body.pm-parent-rail .ms-item.is-selected .ms-item__icon { color: #0d9488; }
html body.pm-parent-rail .ms-item:hover .ms-item__title,
html body.pm-parent-rail .ms-item.is-selected .ms-item__title { color: #115e54; }
html body.pm-parent-rail .ms-item:hover .ms-badge,
html body.pm-parent-rail .ms-item.is-selected .ms-badge {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #047857;
}

/* Preview pane + primary buttons — emerald instead of blue */
html body.pm-parent-rail .ms-panel__preview {
  background: #fafcfb;
  border-left: 1px solid rgba(13, 148, 136, .16);
}
html body.pm-parent-rail .ms-pv__btn--primary {
  background: linear-gradient(135deg, #0b6b5e 0%, #12b891 100%);
}
html body.pm-parent-rail .ms-pv__btn--primary:hover {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
}
html body.pm-parent-rail .ms-drawer__btn--primary {
  background: linear-gradient(135deg, #0b6b5e 0%, #12b891 100%);
}
html body.pm-parent-rail .ms-drawer__btn--primary:hover {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
}

/* Quiet emerald scrollbar inside the panel */
html body.pm-parent-rail .ms-panel__results::-webkit-scrollbar,
html body.pm-parent-rail .ms-panel__preview::-webkit-scrollbar { width: 8px; }
html body.pm-parent-rail .ms-panel__results::-webkit-scrollbar-thumb,
html body.pm-parent-rail .ms-panel__preview::-webkit-scrollbar-thumb {
  background: #c9ece4; border-radius: 8px;
}
/* Soft mint wash at the top of the results column so the panel visibly
   "flows" out of the emerald bar instead of starting as flat white. */
html body.pm-parent-rail .ms-panel__results {
  background: linear-gradient(180deg, #f2fbf8 0%, #ffffff 110px);
}
html body.pm-parent-rail .ms-empty-sub { color: #6ba99c; }
/* Breathing room under the panel's top edge (per Caleb 2026-07-02: the
   "Browse by category" header sat cramped against the accent line). */
html body.pm-parent-rail .ms-empty-header { padding-top: 24px; }
html body.pm-parent-rail .ms-empty-sub { padding-bottom: 14px; }
html body.pm-parent-rail .ms-browse-head { padding-top: 16px; }

/* ═══════════════════════════════════════════════════════════════════════
   PARENT DASHBOARD PREMIUM PASS (2026-07-02, Caleb: "go through all the
   fine detail and make it look much better… match this green emerald
   aesthetic"). Everything scoped to body.pm-parent-rail — kid + staff
   views untouched. REVERT: delete from this banner to end of file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- A. Accent variables: one sweep recolors every var-driven accent
   (links, "View all →" CTAs, reserved pills, icon tiles, action buttons,
   focus rings). The locked Claude-generate look is hardcoded elsewhere and
   does NOT consume these vars — verified before overriding. ---- */
body.pm-parent-rail {
  --primary: #0f9d8a;
  --primary-hover: #0b8171;
  --primary-soft: rgba(16, 185, 129, .13);
  --primary-ink: #0f766e;
  --action-bg: #0f9d8a;
  --action-bg-hover: #0b8171;
  --blue-soft: #d3f7ee;   --blue-ink: #0f766e;
  --indigo-soft: #d3f7ee; --indigo-ink: #0b6b5e;
  --icon-blue-bg: #d1fae5;   --icon-blue-fg: #059669;
  --icon-purple-bg: #ccfbf1; --icon-purple-fg: #0d9488;
  --icon-indigo-bg: #d1fae5; --icon-indigo-fg: #0f9d8a;
  --chart-blue: #10b981; --chart-indigo: #0d9488; --chart-purple: #f59e0b;
}
[data-dash-theme="dark"] body.pm-parent-rail {
  --primary: #2dd4bf;
  --primary-hover: #5eead4;
  --primary-soft: rgba(45, 212, 191, .16);
  --primary-ink: #5eead4;
  --blue-soft: rgba(16, 185, 129, .16);   --blue-ink: #6ee7c7;
  --indigo-soft: rgba(16, 185, 129, .16); --indigo-ink: #6ee7c7;
  --icon-blue-bg: rgba(16, 185, 129, .18);   --icon-blue-fg: #34d399;
  --icon-purple-bg: rgba(13, 148, 136, .18); --icon-purple-fg: #2dd4bf;
  --icon-indigo-bg: rgba(16, 185, 129, .18); --icon-indigo-fg: #34d399;
}

/* ---- B. Family portfolio: navy/indigo hovers → emerald ---- */
body.pm-parent-rail .pmpf__tab:hover {
  color: #0b6b5e;
  background: #f2fbf8;
}
body.pm-parent-rail .pmpf__tab.is-active { color: #0b5d52; }
body.pm-parent-rail .pmpf__panes {
  box-shadow: 0 2px 6px rgba(15, 23, 42, .04),
              0 14px 36px -12px rgba(16, 185, 129, .26);
}
body.pm-parent-rail .pmpf__subchip:hover {
  background: rgba(16, 185, 129, .07);
  border-color: rgba(13, 148, 136, .35);
}
body.pm-parent-rail .pmpf__subchip.is-active {
  background: rgba(16, 185, 129, .13);
  border-color: #0f9d8a;
  color: #0b5d52;
}
body.pm-parent-rail .pmpf__subchip-avatar {
  background: linear-gradient(135deg, #0f9d8a, #0b6b5e);
}
body.pm-parent-rail .pmpf-jcard {
  background:
    linear-gradient(180deg, rgba(16, 185, 129, .03) 0%, rgba(255, 255, 255, 1) 60%),
    var(--card, #fff);
  border-color: rgba(13, 148, 136, .18);
}
body.pm-parent-rail .pmpf-jcard:hover {
  border-color: rgba(13, 148, 136, .45);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px -4px rgba(16, 185, 129, .22);
}
body.pm-parent-rail .pmpf-map-open { color: #0b6b5e; }

/* ---- C. Notification strip + hours/stats card: indigo tints → emerald ---- */
body.pm-parent-rail .nx-notif-trigger {
  background:
    linear-gradient(180deg, rgba(16, 185, 129, .045) 0%, var(--card, #fff) 60%),
    var(--card, #fff);
}
body.pm-parent-rail .nx-notif-trigger:hover {
  border-color: rgba(13, 148, 136, .50);
  box-shadow: 0 4px 14px -6px rgba(16, 185, 129, .25);
}
body.pm-parent-rail .nx-stats,
body.pm-parent-rail #nxStatsCard {
  background:
    linear-gradient(180deg, rgba(16, 185, 129, .045) 0%, var(--card, #fff) 60%),
    var(--card, #fff);
}
body.pm-parent-rail .nx-stats__cell { border-right-color: rgba(13, 148, 136, .16); }
body.pm-parent-rail .nx-stats__usage { border-top-color: rgba(13, 148, 136, .16); }
@media (max-width: 900px) {
  body.pm-parent-rail .nx-stats__cell:nth-child(3),
  body.pm-parent-rail .nx-stats__cell:nth-child(4) { border-top-color: rgba(13, 148, 136, .16); }
}
body.pm-parent-rail #dbnbCard.is-cache-painted::after {
  background: #ecfdf5;
  color: #0f766e;
}

/* ---- D. Messages avatar + small hardcoded blues ---- */
body.pm-parent-rail .nx-convo__avatar {
  background: linear-gradient(135deg, #0f9d8a 0%, #0b6b5e 100%);
  box-shadow: 0 3px 8px -2px rgba(16, 185, 129, .30);
}
body.pm-parent-rail .nx-contract:hover { background: rgba(16, 185, 129, .05); }
body.pm-parent-rail .nx-task-tab.is-active .nx-tab-count { background: #0f9d8a; }

/* ---- E. Counter-proposal modal: purple → emerald (inline styles need
   !important to lose) ---- */
html body.pm-parent-rail #cbSubmit {
  background: linear-gradient(135deg, #0f9d8a, #0b6b5e) !important;
}
html body.pm-parent-rail #cbModal label:has(input[type="radio"]:checked) {
  border-color: #0f9d8a !important;
  background: rgba(16, 185, 129, .07) !important;
  color: #115e54 !important;
}

/* ---- F. Install App hover: inline JS sets a BLUE glow; static !important
   out-ranks inline styles so the glow stays emerald ---- */
html body.pm-parent-rail .nx-topbar [data-pm-install]:hover {
  box-shadow: 0 4px 14px rgba(16, 185, 129, .45) !important;
}

/* ---- G. Premium card system: consistent teal frame, gentle emerald hover
   glow (border+shadow only — transform hovers flicker in Chrome per
   NX28YYY), and a small emerald kicker before every card title so each
   section reads as designed, not default ---- */
body.pm-parent-rail .nx-card {
  transition: box-shadow .22s ease, border-color .22s ease;
}
body.pm-parent-rail .nx-card:hover {
  border-color: rgba(13, 148, 136, .55);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .04),
              0 18px 40px -18px rgba(16, 185, 129, .30);
}
body.pm-parent-rail .nx-card__title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 15px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0f9d8a, #34d399);
  margin-right: 9px;
  vertical-align: -2px;
}
/* KPI hover glow: the light-theme skin forces a BLUE ambient !important */
html[data-dash-theme="light"] body.pm-parent-rail .nx-kpi {
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, .06),
    0 1px 3px rgba(15, 23, 42, .04),
    0 16px 36px -18px rgba(16, 185, 129, .22) !important;
}
html[data-dash-theme="light"] body.pm-parent-rail .nx-kpi:hover {
  box-shadow:
    0 0 0 1px rgba(13, 148, 136, .18),
    0 4px 10px rgba(15, 23, 42, .05),
    0 18px 40px -16px rgba(16, 185, 129, .32) !important;
}

/* ---- H. Dark-theme hardcoded blue chips (light theme handled by vars) ---- */
[data-dash-theme="dark"] body.pm-parent-rail .nx-up__type,
[data-dash-theme="dark"] body.pm-parent-rail .nx-hw__subj,
[data-dash-theme="dark"] body.pm-parent-rail .nx-pill--draft {
  background: rgba(16, 185, 129, .16);
  color: #6ee7c7;
}

/* ---- I. Client Calendar (in-page pmcal): today-cell + week-view blues →
   emerald. Event chips themselves are handled in js/session-calendar.js
   (defaultTuple — emerald under the parent rail). ---- */
body.pm-parent-rail .pmcal-cell.is-today { background: #ecfdf5; border-color: #a7f3d0; }
body.pm-parent-rail .pmcal-cell.is-today:hover { background: #d1fae5; }
body.pm-parent-rail .pmcal-cell.is-today .pmcal-day { color: #065f46; }
body.pm-parent-rail .pmcal-week-dayhead.is-today .pmcal-week-dayhead__wd { color: #10b981; }
body.pm-parent-rail .pmcal-week-dayhead.is-today .pmcal-week-dayhead__num { background: #10b981; }
body.pm-parent-rail .pmcal-week-col.is-today { background-color: #f2fbf8; }

/* ---- J. Notifications "View all" — hard emerald sparkle bar (per Caleb
   2026-07-02: the light text version was too easy to miss at the bottom
   of the strip). Same family as the rail/quick-actions: deep gradient,
   twinkling stars, shimmer sweep. ---- */
body.pm-parent-rail .nx-notif-viewall {
  position: relative;
  overflow: hidden;
  width: calc(100% - 20px);
  margin: 8px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #0b6b5e 0%, #10967f 55%, #17c39c 100%);
  color: #fff;
  font: 800 13px Inter, sans-serif;
  letter-spacing: .01em;
  box-shadow: 0 10px 22px -10px rgba(9, 80, 70, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
body.pm-parent-rail .nx-notif-viewall::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 35%,  rgba(255,255,255,1),  transparent 60%),
    radial-gradient(1.2px 1.2px at 22% 70%, var(--kt-star,#d6fff2), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 25%, rgba(255,255,255,1),  transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 72%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.6px 1.6px at 72% 30%, var(--kt-star,#d6fff2),  transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 65%, rgba(255,255,255,.9), transparent 60%);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.5));
  animation: parActTwinkle 3.4s ease-in-out infinite;
}
body.pm-parent-rail .nx-notif-viewall::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%);
  background-size: 250% 100%; background-position: 190% 0;
  animation: parActShimmer 5s ease-in-out infinite;
}
body.pm-parent-rail .nx-notif-viewall:hover {
  background: linear-gradient(135deg, #0d8571 0%, #14b8a6 100%);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(9, 80, 70, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.pm-parent-rail .nx-notif-viewall svg { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  body.pm-parent-rail .nx-notif-viewall::before,
  body.pm-parent-rail .nx-notif-viewall::after { animation: none; }
}
/* Notification quick-scroll window: emerald thumb for parents */
body.pm-parent-rail .nx-notif-scroll::-webkit-scrollbar-thumb { background: #c9ece4; }

/* ---- K. Page-end sign-off: emerald mark + tag for parents ---- */
body.pm-parent-rail .nx-footer__mark {
  background: linear-gradient(135deg, #0b6b5e, #17c39c);
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(9, 80, 70, .55);
}
body.pm-parent-rail .nx-footer__rule {
  background: linear-gradient(90deg, transparent, rgba(13, 148, 136, .28) 18%, rgba(13, 148, 136, .28) 82%, transparent);
}
body.pm-parent-rail .nx-footer__tag { color: #0f766e; }

/* ---- L. Install App: arrow on the RIGHT of the label; horizontal position
   is set by kid-sidebar.js (alignInstallOverActions) so the button sits
   dead-center ABOVE the emerald quick-actions bar (per Caleb 2026-07-02).
   pwa-install.js wipes the button's inline display when showing it — restore
   the flex layout here (no !important, so its display:none hide still wins). */
html body.pm-parent-rail .nx-topbar [data-pm-install] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-direction: row-reverse;
  z-index: 2;
}

/* ---- M. Page-end: breathing room under the sign-off (was 4px — the
   © line was touching the bottom edge of the screen) ---- */
body.pm-parent-rail .nx-footer { margin: 48px auto 48px; }
body.pm-parent-rail .nx-shell { padding-bottom: 14px; }


/* ---- N. HEADER CONSOLIDATION (mockup approved 2026-07-03): one emerald bar,
   three zones — search | kids' quick actions (recessed premium pill, center) |
   language · Install · gold avatar. ---- */
body.pm-parent-rail .nx-topbar .nx-search { flex: 0 1 340px; }
body.pm-parent-rail .par-actions--bar {
  margin: 0 auto !important;
  padding: 4px; gap: 2px; border-radius: 999px;
  background: rgba(6, 60, 52, .38);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .20), 0 1px 0 rgba(255, 255, 255, .10);
}
body.pm-parent-rail .par-actions--bar .par-actions__lbl {
  position: relative; z-index: 1; padding: 0 11px 0 10px;
  font: 800 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .88); white-space: nowrap;
}
body.pm-parent-rail .par-actions--bar .par-action {
  width: 38px; height: 34px; border-radius: 999px;
  background: transparent; box-shadow: none; color: #eafff8;
  transition: background .16s ease;
}
body.pm-parent-rail .par-actions--bar .par-action:hover { background: rgba(255, 255, 255, .22); transform: none; }
body.pm-parent-rail .par-actions--bar .par-action svg { width: 17px; height: 17px; }
html body.pm-parent-rail .nx-topbar .nx-userpod__avatar {
  background: linear-gradient(135deg, #f7e08a, #d4a531); color: #5a4300;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
@media (max-width: 1100px) { body.pm-parent-rail .par-actions--bar .par-actions__lbl { display: none; } }
@media (max-width: 900px)  { body.pm-parent-rail .par-actions--bar { display: none; } }

/* ---- O. Header polish (Caleb 2026-07-03): label is "Child", not shouty
   caps; and with the actions gone from .nx-head, the old flex row left
   "Dashboard" and the greeting stranded at opposite edges — stack normally. ---- */
body.pm-parent-rail .par-actions--bar .par-actions__lbl {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 12px;
}
body.pm-parent-rail .nx-head { display: block; }