/* Reusable sidebar component for Private Mentorship dashboards.
   Loaded by admin-dashboard, admin-application, client-dashboard, etc.
   Vanilla port of the shadcn-ui SessionNavBar pattern. */

:root{
  /* NX18.2 — Sidebar flipped to LIGHT tokens to match site-wide light
     mode. Was a hardcoded near-black bar at every page (incl. messages,
     which intentionally uses its own dark content theme but still
     loaded sidebar.css). Now: clean white sidebar, dark slate text,
     blue accent for active items, hairline border on the right edge
     to separate from page content. Affects every page that mounts
     pmSidebar (admin, assistant, client, messages). */
  --pm-sb-bg:#FFFFFF;
  --pm-sb-bg-hover:rgba(15,23,42,0.045);
  --pm-sb-bg-active:rgba(37,99,235,0.10);
  --pm-sb-ink:#0F172A;
  --pm-sb-ink-mute:#64748B;
  --pm-sb-ink-tert:#94A3B8;
  --pm-sb-hair:#E2E8F0;
  --pm-sb-accent:#2563EB;
  --pm-sb-accent-bg:rgba(37,99,235,0.10);
  --pm-sb-collapsed:54px;
  --pm-sb-expanded:272px;
  /* NX28UU — was cubic-bezier(0.22,1,0.36,1) which is "ease-out
     overshoot" / spring curve. Caleb reported the sidebar felt
     "shaky" and "finicky" — that's the overshoot bouncing at the
     end. Replacing with Material's standard easing (firm, no
     overshoot) gives a much tighter feel. Submenu label fade-ins
     still use this variable so they get the same firm motion. */
  --pm-sb-ease:cubic-bezier(0.4,0,0.2,1);
  --pm-sb-dur:0.22s;
}

/* NX18 — Theme toggle ripped out site-wide. Some pages have their own
   topbar that still renders a moon/sun toggle button (admin-dashboard,
   client-dashboard, assistant-dashboard topbars, etc.). Force-hide
   them here so the visual cruft is gone, even before the host pages
   are individually edited. theme.js is also neutered so clicks would
   no-op anyway. */
[data-pm-theme-toggle],
.dash-theme-toggle{ display:none !important; }

/* Wrapper so page content can shift right when sidebar is present */
body.pm-has-sidebar{
  padding-left:var(--pm-sb-collapsed);
  /* NX28UU — duration was .25s here but .22s on the sidebar width
     below, causing a 30ms desync that visibly "shudders" at the
     end of the open animation. Both now share --pm-sb-dur so they
     finish in lockstep. will-change hints the compositor to hold
     a layer for the body during the animation. */
  transition:padding-left var(--pm-sb-dur) var(--pm-sb-ease);
  will-change:padding-left;
}

/* The sidebar itself */
.pm-sidebar{
  position:fixed;top:0;left:0;bottom:0;z-index:50;
  width:var(--pm-sb-collapsed);
  background:var(--pm-sb-bg);
  color:var(--pm-sb-ink);
  border-right:1px solid var(--pm-sb-hair);
  display:flex;flex-direction:column;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* NX28UU — duration synced with body padding (var --pm-sb-dur) so
     the two halves of the animation finish at the same moment. */
  transition:width var(--pm-sb-dur) var(--pm-sb-ease);
  will-change:width;
  overflow:hidden;
}
.pm-sidebar:hover,.pm-sidebar.is-open{
  width:var(--pm-sb-expanded);
}

/* Top: organization / brand picker */
.pm-sb-top{
  height:54px;flex-shrink:0;
  display:flex;align-items:center;gap:10px;
  padding:0 12px;border-bottom:1px solid var(--pm-sb-hair);
  cursor:pointer;
  white-space:nowrap;
}
.pm-sb-top:hover{background:var(--pm-sb-bg-hover);}
.pm-sb-top__avatar{
  width:24px;height:24px;flex-shrink:0;
  border-radius:6px;background:linear-gradient(135deg,#6366F1,#8B5CF6);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;letter-spacing:-0.02em;
}
.pm-sb-top__label{
  flex:1;font-size:13.5px;font-weight:600;color:var(--pm-sb-ink);
  opacity:0;transform:translateX(-6px);
  transition:opacity .18s var(--pm-sb-ease), transform .18s var(--pm-sb-ease);
}
.pm-sidebar:hover .pm-sb-top__label,.pm-sidebar.is-open .pm-sb-top__label{opacity:1;transform:translateX(0);}
.pm-sb-top__chev{
  width:14px;height:14px;flex-shrink:0;color:var(--pm-sb-ink-tert);
  opacity:0;transition:opacity .18s var(--pm-sb-ease);
}
.pm-sidebar:hover .pm-sb-top__chev,.pm-sidebar.is-open .pm-sb-top__chev{opacity:1;}

/* Middle scroll area + nav */
.pm-sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px;}
.pm-sb-scroll::-webkit-scrollbar{width:0;}
.pm-sb-scroll{scrollbar-width:none;}

.pm-sb-list{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0;}

.pm-sb-link{
  display:flex;align-items:center;gap:10px;
  height:36px;padding:0 10px;border-radius:7px;
  color:var(--pm-sb-ink-mute);
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s var(--pm-sb-ease), color .15s var(--pm-sb-ease);
  cursor:pointer;
  font-size:14px;font-weight:500;font-family:inherit;
  letter-spacing:-0.005em;
  background:transparent;border:none;text-align:left;width:100%;
  position:relative; /* anchor for collapsed-state floating notification badge */
}
.pm-sb-link:hover{background:var(--pm-sb-bg-hover);color:var(--pm-sb-ink);}
/* NX28NN — Active sidebar link is non-clickable. User is already on
   this page, so the link doesn't lead anywhere new -- clicking it
   would just reload (wasted click) and feel like the sidebar
   "collapsed for no reason" since hover-out closes the sidebar after
   the click. cursor:default signals "not interactive" and
   pointer-events:none physically prevents clicks from registering. */
.pm-sb-link.is-active{background:var(--pm-sb-bg-active);color:var(--pm-sb-accent);cursor:default;pointer-events:none;}
.pm-sb-link__icon{flex:0 0 16px;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;}
.pm-sb-link__icon svg{width:16px;height:16px;display:block;}
.pm-sb-link__label{
  flex:1;
  opacity:0;transform:translateX(-6px);
  transition:opacity .18s var(--pm-sb-ease), transform .18s var(--pm-sb-ease);
}
.pm-sidebar:hover .pm-sb-link__label,.pm-sidebar.is-open .pm-sb-link__label{opacity:1;transform:translateX(0);}
.pm-sb-link__badge{
  font:800 10.5px/1 Inter,sans-serif;letter-spacing:0;
  background:#EF4444;color:#fff;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:1;
  box-shadow:0 2px 6px -1px rgba(239,68,68,0.55);
}
/* Hard hide — CSS display override beats the HTML [hidden] attr otherwise */
.pm-sb-link__badge[hidden]{display:none !important;}
/* When sidebar is collapsed (icon-only), float the badge over the icon's
   top-right corner with a thin background-colored cutout ring (iOS-style) */
.pm-sidebar:not(:hover):not(.is-open) .pm-sb-link__badge{
  position:absolute;top:3px;right:3px;
  min-width:16px;height:16px;font-size:9.5px;padding:0 4px;
  box-shadow:0 0 0 2px var(--pm-sb-bg),0 2px 6px -1px rgba(239,68,68,0.55);
}

.pm-sb-divider{height:1px;background:var(--pm-sb-hair);margin:8px 0;}
.pm-sb-section-label{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pm-sb-ink-tert);
  padding:10px 10px 6px;
  opacity:0;transition:opacity .18s var(--pm-sb-ease);
}
.pm-sidebar:hover .pm-sb-section-label,.pm-sidebar.is-open .pm-sb-section-label{opacity:1;}

/* Tools collapsible group */
.pm-sb-group__toggle{
  display:flex;align-items:center;gap:10px;
  height:36px;padding:0 10px;border-radius:7px;
  color:var(--pm-sb-ink-mute);
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;
  letter-spacing:-0.005em;
  width:100%;text-align:left;white-space:nowrap;
  transition:background .15s var(--pm-sb-ease), color .15s var(--pm-sb-ease);
}
.pm-sb-group__toggle:hover{background:var(--pm-sb-bg-hover);color:var(--pm-sb-ink);}
.pm-sb-group__chev{
  margin-left:auto;width:14px;height:14px;flex-shrink:0;
  transition:transform .2s var(--pm-sb-ease);
  opacity:0;
}
.pm-sidebar:hover .pm-sb-group__chev,.pm-sidebar.is-open .pm-sb-group__chev{opacity:1;}
.pm-sb-group.is-open .pm-sb-group__chev{transform:rotate(90deg);}
.pm-sb-group__items{
  display:none;flex-direction:column;gap:2px;
  margin:2px 0 4px 22px;padding-left:8px;border-left:1px solid var(--pm-sb-hair);
  /* CHILD-PHASE3G.38 — Sub-items inherit the solid sidebar background so
     they never appear transparent or glitchy when the parent expands. */
  background:var(--pm-sb-bg);
  position:relative;z-index:1;
}
.pm-sb-group.is-open .pm-sb-group__items{display:flex;}
.pm-sb-group .pm-sb-link{
  height:32px;padding:0 8px;font-size:13px;
  background:var(--pm-sb-bg); /* solid base so hover/active overlays read clearly */
}
.pm-sb-group .pm-sb-link:hover{background:var(--pm-sb-bg-hover);}
.pm-sb-group .pm-sb-link.is-active{background:var(--pm-sb-bg-active);}

/* Bottom: settings + account */
.pm-sb-bottom{
  flex-shrink:0;padding:8px;border-top:1px solid var(--pm-sb-hair);
  display:flex;flex-direction:column;gap:4px;
}
.pm-sb-account{
  display:flex;align-items:center;gap:10px;
  height:36px;padding:0 10px;border-radius:7px;
  background:transparent;border:none;cursor:pointer;
  width:100%;text-align:left;white-space:nowrap;
  font-family:inherit;color:var(--pm-sb-ink-mute);
  transition:background .15s var(--pm-sb-ease), color .15s var(--pm-sb-ease);
}
.pm-sb-account:hover{background:var(--pm-sb-bg-hover);color:var(--pm-sb-ink);}
.pm-sb-account__avatar{
  /* NX18.2 — flipped for light sidebar: blue-tint disc with blue initial */
  flex:0 0 16px;width:16px;height:16px;border-radius:50%;
  background:var(--pm-sb-accent-bg);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--pm-sb-accent);letter-spacing:.01em;
}
.pm-sb-account__body{flex:1;min-width:0;display:flex;align-items:center;gap:6px;
  opacity:0;transform:translateX(-6px);
  transition:opacity .18s var(--pm-sb-ease), transform .18s var(--pm-sb-ease);
}
.pm-sidebar:hover .pm-sb-account__body,.pm-sidebar.is-open .pm-sb-account__body{opacity:1;transform:translateX(0);}
.pm-sb-account__label{font-size:14px;font-weight:500;color:inherit;letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.pm-sb-account__chev{width:14px;height:14px;flex-shrink:0;color:var(--pm-sb-ink-tert);}

/* Account popover — lives on <body>, positioned via JS.
   NX18.2 — flipped from a dark popover to a light/white popover so it
   matches the now-light sidebar. */
.pm-sb-popover{
  position:fixed;
  left:0;
  width:256px;
  box-sizing:border-box;
  background:#FFFFFF;
  color:var(--pm-sb-ink);
  border:1px solid var(--pm-sb-hair);
  border-radius:10px;
  padding:4px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 12px 28px -8px rgba(15,23,42,0.18);
  z-index:1200;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  visibility:hidden;
  transform:translateY(4px) scale(.98);
  transform-origin:bottom left;
  transition:opacity .14s var(--pm-sb-ease), transform .16s var(--pm-sb-ease), visibility 0s linear .16s;
  pointer-events:none;
}
.pm-sb-popover.is-shown{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .14s var(--pm-sb-ease), transform .16s var(--pm-sb-ease), visibility 0s;
  pointer-events:auto;
}
.pm-sb-popover__head{
  padding:8px;
  display:flex;align-items:center;gap:10px;
  margin-bottom:0;
}
.pm-sb-popover__sep{
  height:1px;background:var(--pm-sb-hair);margin:4px 0;
}
.pm-sb-popover__avatar{
  width:24px;height:24px;border-radius:50%;
  background:var(--pm-sb-accent-bg);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--pm-sb-accent);flex-shrink:0;letter-spacing:.01em;
}
.pm-sb-popover__body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;}
.pm-sb-popover__name{
  font-size:14px;font-weight:700;color:var(--pm-sb-ink);
  letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pm-sb-popover__email{
  font-size:12px;color:var(--pm-sb-ink-mute);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pm-sb-popover__item{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;border-radius:6px;cursor:pointer;
  font-size:14px;color:var(--pm-sb-ink);font-weight:500;line-height:1.4;
  letter-spacing:-0.005em;
  background:transparent;border:none;width:100%;text-align:left;font-family:inherit;
  text-decoration:none;
  transition:background .12s var(--pm-sb-ease), color .12s var(--pm-sb-ease);
}
.pm-sb-popover__item:hover{background:var(--pm-sb-bg-hover);}
.pm-sb-popover__item svg{width:16px;height:16px;flex-shrink:0;color:var(--pm-sb-ink-mute);}
.pm-sb-popover__item--danger{color:#B91C1C;}
.pm-sb-popover__item--danger:hover{background:#FEF2F2;color:#991B1B;}
.pm-sb-popover__item--danger svg{color:#B91C1C;}

/* Mobile: hidden by default, opened with hamburger */
@media (max-width:760px){
  body.pm-has-sidebar{padding-left:0;}
  .pm-sidebar{transform:translateX(-100%);width:var(--pm-sb-expanded);transition:transform .25s var(--pm-sb-ease);}
  .pm-sidebar.is-open{transform:translateX(0);}
  .pm-sidebar:hover{width:var(--pm-sb-expanded);}
  .pm-sb-link__label,.pm-sb-top__label,.pm-sb-top__chev,.pm-sb-link__badge,.pm-sb-section-label,.pm-sb-group__chev{opacity:1;transform:none;display:block;}
  .pm-sb-account__body{opacity:1;transform:none;display:flex;}
}

/* Mobile burger button — host page can include this */
.pm-sb-burger{
  position:fixed;top:14px;left:14px;z-index:48;
  width:40px;height:40px;border-radius:9px;
  background:#0F172A;border:1px solid var(--pm-sb-hair);
  color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;
}
.pm-sb-burger svg{width:18px;height:18px;}
@media (max-width:760px){.pm-sb-burger{display:flex;}}

.pm-sb-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:49;
  opacity:0;pointer-events:none;transition:opacity .25s var(--pm-sb-ease);
}
.pm-sb-scrim.is-shown{opacity:1;pointer-events:auto;}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME — activated by [data-pm-theme="light"] on <html>.
   Dark stays the default (no class needed).
   ════════════════════════════════════════════════════════════ */
[data-pm-theme="light"] .pm-sidebar{
  background:#ffffff;
  color:#0f172a;
  border-right:1px solid #e5e7eb;
}
[data-pm-theme="light"] .pm-sb-top{color:#0f172a;}
[data-pm-theme="light"] .pm-sb-top:hover{background:#f8fafc;}
[data-pm-theme="light"] .pm-sb-top__label{color:#0f172a;}
[data-pm-theme="light"] .pm-sb-top__chev{color:#94a3b8;}
[data-pm-theme="light"] .pm-sb-top__avatar{
  background:linear-gradient(135deg,#3b82f6 0%,#4f46e5 100%);
  box-shadow:0 2px 6px -1px rgba(59,130,246,0.30);
}
[data-pm-theme="light"] .pm-sb-link{color:#475569;}
[data-pm-theme="light"] .pm-sb-link:hover{background:#f1f5f9;color:#0f172a;}
/* Active state uses the SAME accent blue as dark mode (--pm-sb-accent #60A5FA)
   so the icon + text color matches across themes. Only the bg differs. */
[data-pm-theme="light"] .pm-sb-link.is-active{background:rgba(96,165,250,0.12);color:#60A5FA;}
/* NX23.5 — badge style is intentionally identical across both themes:
   solid red pill, white digits, soft red glow. Owner spec: "same size
   same colour same everything" for every notification across admin /
   assistant / client. Previously the light theme overrode the background
   to pale blue but NOT the red box-shadow, producing the "blue pill with
   red shine leaking behind" effect on the dashboard sidebar. Removing
   the override lets the base style (line ~119) show through everywhere. */
[data-pm-theme="light"] .pm-sb-divider{background:#e5e7eb;}
[data-pm-theme="light"] .pm-sb-section-label{color:#94a3b8;}
[data-pm-theme="light"] .pm-sb-group__toggle{color:#475569;}
[data-pm-theme="light"] .pm-sb-group__toggle:hover{background:#f1f5f9;color:#0f172a;}
[data-pm-theme="light"] .pm-sb-group__items{border-left-color:#e5e7eb;}
[data-pm-theme="light"] .pm-sb-account{color:#475569;}
[data-pm-theme="light"] .pm-sb-account:hover{background:#f1f5f9;color:#0f172a;}
[data-pm-theme="light"] .pm-sb-account__avatar{background:#e5e7eb;color:#0f172a;}
[data-pm-theme="light"] .pm-sb-account__chev{color:#94a3b8;}
[data-pm-theme="light"] .pm-sb-bottom{border-top:1px solid #e5e7eb;}
[data-pm-theme="light"] .pm-sb-burger{background:#ffffff;color:#0f172a;border-color:#e5e7eb;}

/* Account popover — light variant */
[data-pm-theme="light"] .pm-sb-popover{
  background:#ffffff;color:#0f172a;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 25px -5px rgba(15,23,42,0.15), 0 4px 6px -4px rgba(15,23,42,0.08);
}
[data-pm-theme="light"] .pm-sb-popover__sep{background:#e5e7eb;}
[data-pm-theme="light"] .pm-sb-popover__avatar{background:#e5e7eb;color:#0f172a;}
[data-pm-theme="light"] .pm-sb-popover__name{color:#0f172a;}
[data-pm-theme="light"] .pm-sb-popover__email{color:#64748b;}
[data-pm-theme="light"] .pm-sb-popover__item{color:#0f172a;}
[data-pm-theme="light"] .pm-sb-popover__item:hover{background:#f1f5f9;}
[data-pm-theme="light"] .pm-sb-popover__item svg{color:#475569;}
[data-pm-theme="light"] .pm-sb-popover__item--danger{color:#dc2626;}
[data-pm-theme="light"] .pm-sb-popover__item--danger svg{color:#dc2626;}
[data-pm-theme="light"] .pm-sb-popover__item--danger:hover{background:#fef2f2;}


/* ════════════════════════════════════════════════════════════
   RIGHT-SIDE CALENDAR (injected by js/right-calendar.js)
   Two layout modes:
     • Default (sticky)  — used inside the dashboard's grid
     • .dash-cal--fixed  — used on pages that don't have a grid shell
                           (with body.pm-has-calendar adding right offset)
   Uses dashboard color vars: var(--card)/(--bg)/(--border)/(--primary)/etc.
   Theme tokens come from the host page's :root + [data-pm-theme="light"].
   ════════════════════════════════════════════════════════════ */

/* Theme tokens for client pages that don't define their own — minimal set
   so the calendar reads correctly even on pages without the dashboard palette. */
:root{
  --dash-card:#ffffff;
  --dash-bg:#f9fafb;
  --dash-border:#e5e7eb;
  --dash-border-soft:#f3f4f6;
  --dash-ink:#1f2937;
  --dash-ink-2:#111827;
  --dash-ink-mute:#6b7280;
  --dash-ink-tert:#9ca3af;
  --dash-primary:#2563eb;
}
[data-pm-theme="light"]{
  --dash-card:#ffffff;
  --dash-bg:#f9fafb;
  --dash-border:#e5e7eb;
  --dash-border-soft:#f3f4f6;
  --dash-ink:#1f2937;
  --dash-ink-2:#111827;
  --dash-ink-mute:#6b7280;
  --dash-ink-tert:#9ca3af;
  --dash-primary:#2563eb;
}
[data-pm-theme="dark"], :root:not([data-pm-theme="light"]):not([data-pm-theme="dark"]){
  /* Only kicks in when explicitly dark — keeps the dashboard's own variables intact */
}
[data-pm-theme="dark"]{
  --dash-card:#16171c;
  --dash-bg:#0b0c10;
  --dash-border:#262830;
  --dash-border-soft:#1c1d23;
  --dash-ink:#f1f5f9;
  --dash-ink-2:#ffffff;
  --dash-ink-mute:#94a3b8;
  --dash-ink-tert:#64748b;
  --dash-primary:#3b82f6;
}

.dash-cal{
  background:var(--dash-card);border-left:1px solid var(--dash-border);
  position:sticky;top:0;height:100vh;
  overflow-y:auto;padding:14px 0;flex-shrink:0;
  width:320px;
}
.dash-cal::-webkit-scrollbar{width:6px;}
.dash-cal::-webkit-scrollbar-thumb{background:var(--dash-border);border-radius:99px;}

/* Fixed-position mode for pages without the dashboard grid */
.dash-cal--fixed{
  position:fixed;top:0;right:0;bottom:0;
  height:100vh;width:320px;z-index:30;
}
body.pm-has-calendar{padding-right:320px;}
@media (max-width:1180px){
  body.pm-has-calendar{padding-right:0;}
  .dash-cal--fixed{display:none;}
}

.dash-cal-user{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px 14px;margin:0 6px 6px;
  border-bottom:1px solid var(--dash-border);
}
.dash-cal-user__avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#3b82f6 0%,#4f46e5 100%);
  color:#fff;font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 6px -1px rgba(59,130,246,0.30);
}
.dash-cal-user__body{flex:1;min-width:0;}
.dash-cal-user__name{font-size:13px;font-weight:700;color:var(--dash-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.005em;}
.dash-cal-user__email{font-size:11px;color:var(--dash-ink-tert);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-cal-user__chev{color:var(--dash-ink-tert);}

.dash-cal-month{padding:10px 16px;}
.dash-cal-month__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.dash-cal-month__nav{
  width:26px;height:26px;border:none;background:transparent;
  color:var(--dash-ink-mute);border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .14s ease, color .14s ease;
}
.dash-cal-month__nav:hover{background:var(--dash-border-soft);color:var(--dash-ink-2);}
.dash-cal-month__nav svg{width:14px;height:14px;}
.dash-cal-month__label{font-size:13.5px;font-weight:700;color:var(--dash-ink-2);letter-spacing:-.005em;}
.dash-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:11.5px;}
.dash-cal-grid__dow{text-align:center;color:var(--dash-ink-tert);padding:6px 0 4px;font-weight:600;font-size:10.5px;}
.dash-cal-grid__day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:7px;color:var(--dash-ink);cursor:pointer;
  transition:background .12s ease, color .12s ease;
  font-variant-numeric:tabular-nums;font-weight:500;
}
.dash-cal-grid__day:hover{background:var(--dash-border-soft);}
.dash-cal-grid__day--other{color:var(--dash-ink-tert);opacity:.6;}
.dash-cal-grid__day--today{background:var(--dash-primary);color:#fff;font-weight:700;box-shadow:0 2px 6px -1px rgba(59,130,246,0.35);}
.dash-cal-grid__day--today:hover{filter:brightness(.92);}
[data-pm-theme="dark"] .dash-cal-grid__day--today{box-shadow:none;}

.dash-cal-section{margin-top:14px;padding:0 14px;}
.dash-cal-section__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 4px;cursor:pointer;border-radius:6px;
  transition:background .12s ease;
}
.dash-cal-section__head:hover{background:var(--dash-border-soft);}
.dash-cal-section__title{font-size:12.5px;font-weight:700;color:var(--dash-ink-2);letter-spacing:-.005em;}
.dash-cal-section__chev{color:var(--dash-ink-tert);width:13px;height:13px;transition:transform .15s ease;}
.dash-cal-section.is-collapsed .dash-cal-section__chev{transform:rotate(-90deg);}
.dash-cal-section.is-collapsed .dash-cal-section__list{display:none;}
.dash-cal-section__list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;}
.dash-cal-section__row{
  display:flex;align-items:center;gap:9px;
  padding:6px 4px;cursor:pointer;border-radius:6px;
  transition:background .12s ease;
}
.dash-cal-section__row:hover{background:var(--dash-border-soft);}
.dash-cal-checkbox{
  width:16px;height:16px;border:1.5px solid var(--dash-border);
  border-radius:5px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .14s ease;background:var(--dash-card);
}
.dash-cal-checkbox svg{width:11px;height:11px;color:#fff;display:none;}
.dash-cal-section__row.is-on .dash-cal-checkbox{background:var(--dash-primary);border-color:var(--dash-primary);}
.dash-cal-section__row.is-on .dash-cal-checkbox svg{display:block;}
.dash-cal-section__label{font-size:12.5px;color:var(--dash-ink-mute);flex:1;min-width:0;font-weight:500;}
.dash-cal-section__row.is-on .dash-cal-section__label{color:var(--dash-ink-2);font-weight:600;}

/* ════════════════════════════════════════════════════════════
   Deep-link flash — applied to any element whose id matches the
   URL hash on page load (or after a hashchange). Triggered by
   js/deep-link-flash.js. The animation pulses an amber outline +
   soft tint so the user immediately sees which row was targeted
   without changing the row's natural look afterward.
   ════════════════════════════════════════════════════════════ */
/* The flash now pulses TWICE so it's impossible to miss, and stays
   on a soft amber halo for the duration instead of fading instantly. */
@keyframes pm-deep-link-flash{
  0%   { box-shadow:0 0 0 0   rgba(245,158,11,0.0); background-color:transparent; }
  10%  { box-shadow:0 0 0 6px rgba(245,158,11,0.55); background-color:rgba(245,158,11,0.22); }
  30%  { box-shadow:0 0 0 3px rgba(245,158,11,0.35); background-color:rgba(245,158,11,0.10); }
  55%  { box-shadow:0 0 0 6px rgba(245,158,11,0.55); background-color:rgba(245,158,11,0.22); }
  100% { box-shadow:0 0 0 0   rgba(245,158,11,0.0); background-color:transparent; }
}
.deep-link-flash{
  animation:pm-deep-link-flash 2.6s cubic-bezier(.22,1,.36,1) forwards;
  border-radius:12px;
  scroll-margin-top:96px; /* don't tuck under sticky topbar */
  position:relative;
  z-index:1;
}
[data-pm-theme="dark"] .deep-link-flash,
[data-dash-theme="dark"] .deep-link-flash{
  animation-name:pm-deep-link-flash-dark;
}
@keyframes pm-deep-link-flash-dark{
  0%   { box-shadow:0 0 0 0   rgba(251,191,36,0.0); background-color:transparent; }
  10%  { box-shadow:0 0 0 6px rgba(251,191,36,0.55); background-color:rgba(251,191,36,0.18); }
  30%  { box-shadow:0 0 0 3px rgba(251,191,36,0.35); background-color:rgba(251,191,36,0.10); }
  55%  { box-shadow:0 0 0 6px rgba(251,191,36,0.55); background-color:rgba(251,191,36,0.18); }
  100% { box-shadow:0 0 0 0   rgba(251,191,36,0.0); background-color:transparent; }
}

/* Cmd-F style text highlight applied to occurrences of the search
   query inside the targeted row. Persists ~5s then is removed by JS.
   Slightly brighter than the dropdown .ms-mark so it pops in context. */
.deep-link-mark{
  background:rgba(245,158,11,0.45);
  color:inherit;
  border-radius:3px;
  padding:0 3px;
  box-shadow:0 0 0 1px rgba(245,158,11,0.65);
  font-weight:inherit;
  /* Subtle fade-in so it doesn't feel jarring */
  animation:pm-deep-link-mark-in .25s ease-out;
}
[data-pm-theme="dark"] .deep-link-mark,
[data-dash-theme="dark"] .deep-link-mark{
  background:rgba(251,191,36,0.48);
  color:#fef3c7;
  box-shadow:0 0 0 1px rgba(251,191,36,0.70);
}
@keyframes pm-deep-link-mark-in{
  0%   { background:rgba(245,158,11,0.85); }
  100% { background:rgba(245,158,11,0.45); }
}


/* ════════════════════════════════════════════════════════════
   Master search — dropdown panel below .nx-search input.
   Powered by js/master-search.js. Theme-aware via the same
   --card / --border / --ink tokens every page defines.
   ════════════════════════════════════════════════════════════ */
.nx-search{ position: relative; }              /* anchor for the dropdown */

/* Two-column dropdown: results on the left, preview pane on the right.
   The wrap sets the size; the inner columns scroll independently. */
.ms-panel{
  position:absolute; top:calc(100% + 6px); left:0;
  width:min(820px, calc(100vw - 80px));         /* widened to fit preview */
  display:grid; grid-template-columns:minmax(280px, 360px) 1fr;
  background:var(--card, var(--dash-card, #ffffff));
  border:1px solid var(--border, var(--dash-border, #e5e7eb));
  border-radius:12px;
  box-shadow:0 18px 40px -14px rgba(15,23,42,0.18), 0 6px 14px -6px rgba(15,23,42,0.10);
  max-height:560px; overflow:hidden;
  z-index:1000;
  opacity:0; transform:translateY(-4px);
  transition:opacity .14s ease, transform .14s ease;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
}
/* Phase 19c.17 — bug fix: `display:grid` above was overriding the browser's
   default [hidden] {display:none} so the dropdown was rendered invisibly
   (opacity:0) over the upper page area and eating clicks. Force it gone
   when hidden, and belt-and-braces with pointer-events when not shown. */
.ms-panel[hidden]{ display:none !important; }
.ms-panel:not(.is-shown){ pointer-events:none; }
.ms-panel.is-shown{ opacity:1; transform:translateY(0); pointer-events:auto; }
.ms-panel__results{
  overflow-y:auto;
  border-right:1px solid var(--border, var(--dash-border, #e5e7eb));
  max-height:560px;
}
.ms-panel__preview{
  overflow-y:auto;
  padding:18px 20px;
  background:var(--bg, var(--dash-bg, #f9fafb));
  max-height:560px;
}
/* On narrow viewports collapse to a single column (preview hidden) */
@media (max-width:880px){
  .ms-panel{ grid-template-columns:1fr; width:min(520px, calc(100vw - 32px)); }
  .ms-panel__preview{ display:none; }
  .ms-panel__results{ border-right:none; }
}
[data-pm-theme="dark"] .ms-panel,
[data-dash-theme="dark"] .ms-panel{
  box-shadow:0 18px 40px -14px rgba(0,0,0,0.55), 0 6px 14px -6px rgba(0,0,0,0.40);
}

.ms-empty{
  padding:18px 16px;
  font:500 13px Inter,sans-serif;
  color:var(--ink-mute, var(--dash-ink-mute, #6b7280));
  text-align:center;
}
.ms-empty strong{ color:var(--ink-2, var(--dash-ink-2, #111827)); }

/* Top summary strip — total match count + per-category jump chips */
.ms-summary{
  padding:12px 14px 10px;
  background:var(--bg, var(--dash-bg, #f9fafb));
  border-bottom:1px solid var(--border, var(--dash-border, #e5e7eb));
  position:sticky; top:0; z-index:2;
}
.ms-summary__total{
  font:500 12.5px Inter,sans-serif;
  color:var(--ink-mute, var(--dash-ink-mute, #6b7280));
  margin-bottom:8px;
  letter-spacing:-.005em;
}
.ms-summary__total strong{
  color:var(--ink-2, var(--dash-ink-2, #111827));
  font-weight:700;
}
.ms-summary__total em{
  font-style:normal;
  color:var(--ink-2, var(--dash-ink-2, #111827));
  background:rgba(245,158,11,0.18);
  padding:1px 5px;
  border-radius:4px;
}
.ms-summary__chips{
  display:flex; flex-wrap:wrap; gap:5px;
}
.ms-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px;
  border:1px solid var(--border, var(--dash-border, #e5e7eb));
  background:var(--card, var(--dash-card, #ffffff));
  border-radius:9999px;
  font:600 10.5px Inter,sans-serif;
  color:var(--ink-mute, var(--dash-ink-mute, #6b7280));
  text-decoration:none;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.ms-chip:hover{
  background:var(--border-soft, var(--dash-border-soft, #f3f4f6));
  color:var(--ink-2, var(--dash-ink-2, #111827));
  border-color:var(--ink-tert, var(--dash-ink-tert, #9ca3af));
}
.ms-chip__n{
  font-weight:700;
  color:var(--primary, var(--dash-primary, #3b82f6));
}

.ms-section{ padding:6px 0; }
.ms-section + .ms-section{ border-top:1px solid var(--border-soft, var(--dash-border-soft, #f3f4f6)); }
.ms-section__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px 4px;
  font:700 10.5px Inter,sans-serif;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-tert, var(--dash-ink-tert, #9ca3af));
}
.ms-section__count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:18px; padding:0 6px;
  background:var(--border-soft, var(--dash-border-soft, #f3f4f6));
  color:var(--ink, var(--dash-ink, #1f2937));
  border-radius:9999px;
  font:700 10px Inter,sans-serif;
  letter-spacing:0;
}
.ms-more{
  display:block; width:calc(100% - 28px); margin:6px 14px 4px;
  padding:7px 10px;
  background:transparent;
  border:1px dashed var(--border, var(--dash-border, #e5e7eb));
  border-radius:8px;
  color:var(--primary, var(--dash-primary, #3b82f6));
  font:600 12px Inter,sans-serif; letter-spacing:-.005em;
  cursor:pointer;
  text-align:center;
  transition:background .12s ease, border-color .12s ease;
}
.ms-more:hover{
  background:var(--border-soft, var(--dash-border-soft, #f3f4f6));
  border-color:var(--primary, var(--dash-primary, #3b82f6));
  border-style:solid;
}

.ms-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 14px;
  text-decoration:none; color:inherit;
  border-left:2px solid transparent;
  transition:background .12s ease, border-color .12s ease;
}
.ms-item:hover,
.ms-item.is-selected{
  background:var(--border-soft, var(--dash-border-soft, #f3f4f6));
  border-left-color:var(--primary, var(--dash-primary, #3b82f6));
}
.ms-item__icon{
  flex:0 0 28px; width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(59,130,246,0.10);
  color:var(--primary, var(--dash-primary, #3b82f6));
  border-radius:7px;
}
.ms-item__icon svg{ width:14px; height:14px; display:block; }
.ms-item__body{
  display:flex; flex-direction:column; min-width:0; flex:1;
}
.ms-item__title{
  font:600 13.5px Inter,sans-serif;
  color:var(--ink-2, var(--dash-ink-2, #111827));
  letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ms-item__sub{
  font:500 11.5px Inter,sans-serif;
  color:var(--ink-mute, var(--dash-ink-mute, #6b7280));
  margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ms-mark{
  background:rgba(245,158,11,0.30);
  color:inherit;
  border-radius:3px;
  padding:0 2px;
}
[data-pm-theme="dark"] .ms-mark,
[data-dash-theme="dark"] .ms-mark{
  background:rgba(245,158,11,0.36);
  color:#FBBF24;
}

/* On narrower viewports give the panel a touch more breathing room */
@media (max-width:780px){
  .ms-panel{ max-height:60vh; }
}



/* ════════════════════════════════════════════════════════════
   Shared topbar userpod — pinned avatar + name pill that lives at
   the right end of every page's .nx-topbar. Populated by
   js/topbar-userpod.js. Uses --card / --border tokens defined per
   page so it picks up dark/light automatically.
   ════════════════════════════════════════════════════════════ */
.nx-userpod{
  display:flex;align-items:center;gap:10px;
  padding:5px 12px 5px 5px;
  border:1px solid var(--border, var(--dash-border, #e5e7eb));
  border-radius:9999px;
  background:var(--card, var(--dash-card, #ffffff));
  flex-shrink:0;
}
.nx-userpod__avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#3b82f6 0%,#4f46e5 100%);
  color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 6px -1px rgba(59,130,246,0.30);
  letter-spacing:.01em;
}
.nx-userpod__name{
  font:600 13px Inter,sans-serif;
  color:var(--ink, var(--dash-ink, #1f2937));
  letter-spacing:-.005em;
  max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media(max-width:640px){
  .nx-userpod__name{display:none;}
  .nx-userpod{padding:5px;}
}

/* ════════════════════════════════════════════════════════════
   Phase 19r — Collapse / show toggle
   ────────────────────────────────────────────────────────────
   Lets the user hide the right-side calendar so the main page
   fills the full viewport. When collapsed:
     • body.pm-cal-collapsed hides the aside (with a slide-out)
     • the host grid (.dash-shell) flattens to 1fr
     • the fixed-mode body padding is removed
     • a labeled "Calendar" pill appears on the right edge
   ════════════════════════════════════════════════════════════ */

/* Small topbar row inside the calendar — gives the close button its own
   space so it doesn't visually collide with the user-pod's chevron. */
.dash-cal-topbar{
  display:flex; align-items:center; justify-content:flex-end;
  padding:4px 12px 0;
}
.dash-cal-close{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 10px;
  border:1px solid var(--dash-border);
  background:var(--dash-card);
  color:var(--dash-ink-mute);
  border-radius:7px; cursor:pointer;
  font:600 11.5px Inter,sans-serif; letter-spacing:.005em;
  transition:background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.dash-cal-close:hover{
  background:var(--dash-border-soft);
  color:var(--dash-ink-2);
  border-color:var(--dash-ink-tert);
}
.dash-cal-close:active{ transform:scale(.96); }
.dash-cal-close svg{ width:12px; height:12px; display:block; }
.dash-cal-close__label{ line-height:1; }

/* Slide the aside out smoothly when collapsed (instead of a hard hide) */
.dash-cal{
  transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .22s ease;
  will-change:transform;
}
body.pm-cal-collapsed .dash-cal{
  transform:translateX(110%);
  opacity:0;
  pointer-events:none;
}
/* Once the slide finishes, drop the aside out of the flow on the @1180+
   layouts so it can't catch clicks or steal width. */
@media (min-width:1181px){
  body.pm-cal-collapsed .dash-cal{
    /* keep transform for the animation */
  }
}

/* Remove the fixed-mode body padding when hidden, so the page fills width */
body.pm-cal-collapsed.pm-has-calendar{
  padding-right:0 !important;
  transition:padding-right .26s cubic-bezier(.22,1,.36,1);
}
body.pm-has-calendar{
  transition:padding-right .26s cubic-bezier(.22,1,.36,1);
}

/* Flatten any host grid that reserved a column for the calendar.
   Covers the dashboard shell used by client-dashboard. */
body.pm-cal-collapsed .dash-shell{
  grid-template-columns:1fr !important;
}

/* ── Subtle "Calendar" tab pinned to the right edge of the viewport ──
   Default state: a slim ~12px tab peeking out of the edge with a single
   chevron — enough to notice without competing with page content.
   Hover/focus: expands to reveal the calendar icon + "Calendar" label.
   ─────────────────────────────────────────────────────────────────── */
.dash-cal-show-pill{
  position:fixed; top:50%; right:0;
  transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:0;
  height:56px; width:14px;             /* slim by default */
  padding:0; overflow:hidden;
  border:1px solid var(--dash-border);
  border-right:none;
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
  background:var(--dash-card);
  color:var(--dash-ink-mute);
  cursor:pointer; z-index:60;
  box-shadow:-2px 0 8px -3px rgba(15,23,42,0.10);
  transition:width .20s cubic-bezier(.22,1,.36,1),
             padding .20s cubic-bezier(.22,1,.36,1),
             background .14s ease, color .14s ease, gap .20s ease;
  font-family:inherit;
}
.dash-cal-show-pill::after{
  /* "Calendar" label — only visible on hover */
  content:"Calendar";
  font:600 12px Inter,sans-serif;
  letter-spacing:-.005em;
  white-space:nowrap;
  opacity:0;
  transition:opacity .14s ease .06s;
}
.dash-cal-show-pill:hover,
.dash-cal-show-pill:focus-visible{
  width:120px; gap:8px; padding:0 14px 0 12px;
  background:var(--dash-border-soft);
  color:var(--dash-ink-2);
  outline:none;
}
.dash-cal-show-pill:hover::after,
.dash-cal-show-pill:focus-visible::after{
  opacity:1;
}
.dash-cal-show-pill__chev{
  width:12px; height:12px; display:block; flex-shrink:0; margin:0 auto;
}
.dash-cal-show-pill__icon{
  width:15px; height:15px; display:none; flex-shrink:0;
}
.dash-cal-show-pill:hover .dash-cal-show-pill__icon,
.dash-cal-show-pill:focus-visible .dash-cal-show-pill__icon{
  display:block;
}
.dash-cal-show-pill[hidden]{ display:none; }

/* Dark mode — pin to the dark surface explicitly. Covers both possible
   attributes (theme.js sets both data-pm-theme and data-dash-theme). */
[data-pm-theme="dark"] .dash-cal-show-pill,
[data-dash-theme="dark"] .dash-cal-show-pill{
  background:#16171c;
  border-color:#262830;
  color:#94a3b8;
  box-shadow:-2px 0 10px -3px rgba(0,0,0,0.55);
}
[data-pm-theme="dark"] .dash-cal-show-pill:hover,
[data-pm-theme="dark"] .dash-cal-show-pill:focus-visible,
[data-dash-theme="dark"] .dash-cal-show-pill:hover,
[data-dash-theme="dark"] .dash-cal-show-pill:focus-visible{
  background:#1c1d23;
  color:#f1f5f9;
}

/* On small screens the calendar is already hidden by the @media rule above,
   so the pill should not appear there either. */
@media (max-width:1180px){
  .dash-cal-show-pill{ display:none !important; }
}


/* ════════════════════════════════════════════════════════════
   Phase 19z — Master search PREMIUM polish overlay
   ────────────────────────────────────────────────────────────
   Loaded AFTER the original .ms-* rules so it wins via source
   order (same specificity). Tightens the Linear/Notion/Vercel
   aesthetic: larger confident typography, sharper borders,
   layered shadow, kbd-style count badges, accent gradient on
   row hover, real primary CTA in preview pane.
   ════════════════════════════════════════════════════════════ */

/* Panel shell — wider, taller, sharper shadow */
.ms-panel{
  width:min(940px, calc(100vw - 64px));
  grid-template-columns:minmax(320px, 380px) 1fr;
  border-radius:14px;
  max-height:640px;
  box-shadow:
    0 1px 0 rgba(15,23,42,0.04),
    0 6px 18px -8px rgba(15,23,42,0.10),
    0 24px 48px -16px rgba(15,23,42,0.18);
  transform:translateY(-6px) scale(0.985);
  transform-origin:top left;
  transition:opacity .16s cubic-bezier(.22,1,.36,1), transform .16s cubic-bezier(.22,1,.36,1);
  font-feature-settings:"ss01","cv11","cv02";
  -webkit-font-smoothing:antialiased;
}
.ms-panel.is-shown{ transform:translateY(0) scale(1); }
.ms-panel__results{ max-height:640px; background:var(--card, var(--dash-card, #ffffff)); }
.ms-panel__preview{ max-height:640px; padding:24px 26px; }
@media (max-width:880px){
  .ms-panel{ width:min(560px, calc(100vw - 28px)); max-height:75vh; }
  .ms-panel__results{ max-height:75vh; }
}
[data-pm-theme="dark"] .ms-panel,
[data-dash-theme="dark"] .ms-panel{
  box-shadow:
    0 1px 0 rgba(0,0,0,0.30),
    0 6px 18px -8px rgba(0,0,0,0.50),
    0 24px 48px -16px rgba(0,0,0,0.65);
}
/* Thin custom scrollbars */
.ms-panel__results::-webkit-scrollbar,
.ms-panel__preview::-webkit-scrollbar{ width:8px; }
.ms-panel__results::-webkit-scrollbar-thumb,
.ms-panel__preview::-webkit-scrollbar-thumb{
  background:var(--border, var(--dash-border, #e5e7eb));
  border-radius:99px; border:2px solid transparent; background-clip:padding-box;
}

/* Summary strip — title-bar feel */
.ms-summary{
  padding:16px 20px 14px;
  background:var(--card, var(--dash-card, #ffffff));
}
.ms-summary__total{
  font:600 13px Inter,sans-serif;
  margin-bottom:12px;
  letter-spacing:-.008em;
}
.ms-summary__total strong{ font-variant-numeric:tabular-nums; }
.ms-summary__total em{
  background:rgba(245,158,11,0.22);
  padding:1px 6px; border-radius:5px;
  font-weight:700;
}

/* Chips — neutral pills (no permanent border) */
.ms-chip{
  padding:5px 10px;
  border:1px solid transparent;
  background:transparent;
  border-radius:7px;
  font:600 11.5px Inter,sans-serif;
  letter-spacing:-.005em;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.ms-chip:hover{
  border-color:var(--border, var(--dash-border, #e5e7eb));
  background:var(--border-soft, var(--dash-border-soft, #f3f4f6));
}
/* kbd-style count badge */
.ms-chip__n{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:17px; padding:0 5px;
  background:var(--border-soft, var(--dash-border-soft, #f3f4f6));
  border:1px solid var(--border, var(--dash-border, #e5e7eb));
  color:var(--ink-2, var(--dash-ink-2, #111827));
  border-radius:5px;
  font:700 10px "JetBrains Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

/* Sections — bolder dividers */
.ms-section + .ms-section{
  border-top:1px solid var(--border, var(--dash-border, #e5e7eb));
}
.ms-section__head{
  padding:14px 20px 8px;
  font:700 10.5px Inter,sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
}
.ms-section__count{
  min-width:22px; height:18px; padding:0 6px;
  background:var(--border-soft, var(--dash-border-soft, #f3f4f6));
  border:1px solid var(--border, var(--dash-border, #e5e7eb));
  color:var(--ink-2, var(--dash-ink-2, #111827));
  border-radius:5px;
  font:700 10px "JetBrains Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.ms-more{
  width:calc(100% - 36px); margin:8px 18px 6px;
  padding:9px 12px;
  border:1px solid var(--border, var(--dash-border, #e5e7eb));
  background:var(--card, var(--dash-card, #ffffff));
  border-radius:9px;
  color:var(--ink-mute, var(--dash-ink-mute, #6b7280));
  font:600 12px Inter,sans-serif;
  letter-spacing:-.005em;
}
.ms-more:hover{
  background:var(--border-soft, var(--dash-border-soft, #f3f4f6));
  color:var(--ink-2, var(--dash-ink-2, #111827));
  border-color:var(--ink-tert, var(--dash-ink-tert, #9ca3af));
  border-style:solid;
}

/* Result rows — larger, gradient hover */
.ms-item{
  gap:13px;
  padding:11px 20px;
}
.ms-item:hover,
.ms-item.is-selected{
  background:linear-gradient(90deg, rgba(59,130,246,0.06) 0%, rgba(59,130,246,0.02) 60%, transparent 100%);
}
.ms-item__icon{
  flex:0 0 32px; width:32px; height:32px;
  background:var(--border-soft, var(--dash-border-soft, #f3f4f6));
  border:1px solid var(--border, var(--dash-border, #e5e7eb));
  color:var(--ink-mute, var(--dash-ink-mute, #6b7280));
  border-radius:8px;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.ms-item:hover .ms-item__icon,
.ms-item.is-selected .ms-item__icon{
  background:rgba(59,130,246,0.10);
  border-color:rgba(59,130,246,0.32);
  color:var(--primary, var(--dash-primary, #3b82f6));
}
.ms-item__icon svg{ width:15px; height:15px; }
.ms-item__body{ gap:3px; }
.ms-item__title{
  font:600 14px Inter,sans-serif;
  letter-spacing:-.010em;
}
.ms-item__sub{
  font:500 12px Inter,sans-serif;
  margin-top:0;
  letter-spacing:-.003em;
}
.ms-mark{
  padding:0 3px;
  font-weight:600;
}

/* Empty / no-match state */
.ms-empty{
  padding:42px 24px;
  font:500 13px Inter,sans-serif;
  line-height:1.55;
}


.ms-item{
  background:transparent; border:none;
  width:100%; text-align:left; font-family:inherit;
  cursor:pointer;
}


/* ════════════════════════════════════════════════════════════
   Phase 19ac — LIGHT MODE PREMIUM RESKIN
   ────────────────────────────────────────────────────────────
   Dark mode is perfect already and is NOT touched. This block
   only fires when the user has explicitly chosen light theme.

   Goal: real React-app polish, not "raw HTML with borders".
   What we do:
     • Page background: subtle cool-grey LINEAR GRADIENT (top → bottom)
       so the surface has motion instead of looking like flat paper
     • Cards: pure white with MULTI-LAYER shadows (hairline ring +
       2px drop + 16px ambient) — Stripe/Linear pattern that gives
       real 3D float
     • Topbar: STICKY with backdrop-blur + translucent white so it
       feels like a real app shell when you scroll
     • KPI cards: tinted primary-blue accent shadow when hovered —
       gives the dashboard "alive" feel
     • Inputs: visible grey-tinted fill with primary focus ring
     • Status pills: inset rings in matching hue (paid green, etc.)
     • Buttons: gentle gradient + crisp shadow
     • Border separators have actual presence

   Every selector scoped to html[data-dash-theme="light"] —
   dark mode untouched, guaranteed.
   ════════════════════════════════════════════════════════════ */

html[data-dash-theme="light"],
html[data-pm-theme="light"]{
  /* Full token set — pages that ONLY defined dark tokens (like
     client-gift.html) had no color values at all in light mode,
     which is why everything looked like raw unstyled HTML. */
  --bg:#eef1f6            !important;
  --card:#ffffff          !important;
  --border:#d4dae3        !important;
  --border-soft:#e8ecf2   !important;
  --input-bg:#f2f4f8      !important;
  --ink:#1e293b           !important;
  --ink-2:#0f172a         !important;
  --ink-mute:#64748b      !important;
  --ink-tert:#94a3b8      !important;
  --primary:#2563eb       !important;
  --primary-hover:#1d4ed8 !important;
  --primary-soft:rgba(37,99,235,0.10) !important;
  /* Dash-token namespace mirrors */
  --dash-bg:#eef1f6            !important;
  --dash-card:#ffffff          !important;
  --dash-border:#d4dae3        !important;
  --dash-border-soft:#e8ecf2   !important;
  --dash-ink:#1e293b           !important;
  --dash-ink-2:#0f172a         !important;
  --dash-ink-mute:#64748b      !important;
  --dash-ink-tert:#94a3b8      !important;
  --dash-primary:#2563eb       !important;
}

/* Page background — subtle COOL GRADIENT instead of flat fill.
   The top is a touch lighter than the bottom, giving the surface
   a "lit from above" feel that pure-flat HTML never has. */
html[data-dash-theme="light"] body{
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(59,130,246,0.06), transparent 60%),
    linear-gradient(180deg, #f3f5fa 0%, #ecf0f6 100%) !important;
  background-attachment:fixed !important;
}

/* Cards — Stripe/Linear-grade triple-layer shadow on pure white.
   The hairline ring (`0 0 0 1px`) keeps the edges crisp even
   without an opaque border. The 2px drop reads as the resting
   shadow. The 16px ambient gives the card real lift. */
html[data-dash-theme="light"] .nx-card,
html[data-dash-theme="light"] .nx-kpi,
html[data-dash-theme="light"] .nx-listrow,
html[data-dash-theme="light"] .nx-sess,
html[data-dash-theme="light"] .nx-day,
html[data-dash-theme="light"] .nx-contract,
html[data-dash-theme="light"] .as-card,
html[data-dash-theme="light"] .lj-card,
html[data-dash-theme="light"] .ca-card,
html[data-dash-theme="light"] .ca-filterbar,
html[data-dash-theme="light"] .pm-tier,
html[data-dash-theme="light"] .ms-panel,
html[data-dash-theme="light"] .nx-modal__card,
html[data-dash-theme="light"] .nx-invnote-modal__card{
  background:#ffffff !important;
  border-color:transparent !important;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.06),
    0 1px 3px rgba(15,23,42,0.04),
    0 12px 32px -16px rgba(15,23,42,0.12) !important;
  border-radius:14px;
}

/* Hover: deeper lift + a primary-blue accent ring */
html[data-dash-theme="light"] .nx-kpi:hover,
html[data-dash-theme="light"] .nx-card:hover,
html[data-dash-theme="light"] .lj-card:hover{
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.20),
    0 4px 14px -2px rgba(59,130,246,0.10),
    0 18px 40px -16px rgba(15,23,42,0.18) !important;
  transform:translateY(-2px);
}

/* KPI cards specifically get a permanent very-subtle blue tint
   in their ambient shadow — makes the dashboard feel "alive" */
html[data-dash-theme="light"] .nx-kpi{
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.06),
    0 1px 3px rgba(15,23,42,0.04),
    0 16px 36px -18px rgba(59,130,246,0.18) !important;
}

/* Topbar — translucent frosted glass that floats above content
   as the page scrolls. */
html[data-dash-theme="light"] .nx-topbar{
  background:rgba(255,255,255,0.78) !important;
  backdrop-filter:saturate(180%) blur(16px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(16px) !important;
  border-bottom:1px solid rgba(15,23,42,0.06) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.85) inset, 0 4px 24px -12px rgba(15,23,42,0.10);
}

/* Search input — readable grey fill, real border, premium focus ring */
html[data-dash-theme="light"] .nx-search input{
  background:rgba(15,23,42,0.04) !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  transition:background .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}
html[data-dash-theme="light"] .nx-search input:hover{
  background:rgba(15,23,42,0.06) !important;
  border-color:rgba(15,23,42,0.12) !important;
}
html[data-dash-theme="light"] .nx-search input:focus{
  background:#ffffff !important;
  border-color:#3b82f6 !important;
  box-shadow:0 0 0 4px rgba(59,130,246,0.15) !important;
  outline:none;
}

/* Userpod — frosted-glass treatment that matches the topbar */
html[data-dash-theme="light"] .nx-userpod{
  background:rgba(255,255,255,0.85) !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.05),
    0 4px 12px -4px rgba(15,23,42,0.08);
}

/* Theme toggle + outline buttons */
html[data-dash-theme="light"] .dash-theme-toggle{
  background:rgba(255,255,255,0.92) !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:0 1px 2px rgba(15,23,42,0.05);
}
html[data-dash-theme="light"] .dash-theme-toggle:hover{
  background:#f8f9fc !important;
  box-shadow:0 2px 6px -2px rgba(15,23,42,0.12);
}

/* Outline-style sub buttons get the same treatment */
html[data-dash-theme="light"] .nx-sub__btn--outline{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}
html[data-dash-theme="light"] .nx-sub__btn--outline:hover{
  background:#f8f9fc !important;
  border-color:rgba(15,23,42,0.14) !important;
  box-shadow:0 2px 6px -2px rgba(15,23,42,0.12);
}

/* Primary buttons get a subtle gradient + colored shadow */
html[data-dash-theme="light"] .nx-sub__btn--primary{
  background:linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.10),
    0 6px 18px -4px rgba(59,130,246,0.40),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
html[data-dash-theme="light"] .nx-sub__btn--primary:hover{
  box-shadow:
    0 1px 2px rgba(15,23,42,0.12),
    0 10px 22px -4px rgba(59,130,246,0.50),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* Calendar aside (right side) — give the left border real presence */
html[data-dash-theme="light"] .dash-cal{
  background:#ffffff !important;
  border-left:1px solid rgba(15,23,42,0.06) !important;
  box-shadow:-12px 0 32px -20px rgba(15,23,42,0.10);
}

/* Status pills/badges — inset hue rings, not flat fills */
html[data-dash-theme="light"] .nx-pill--paid,
html[data-dash-theme="light"] .nx-badge--paid,
html[data-dash-theme="light"] .nx-badge--active{
  box-shadow:inset 0 0 0 1px rgba(22,163,74,0.25);
}
html[data-dash-theme="light"] .nx-pill--open,
html[data-dash-theme="light"] .nx-badge--open{
  box-shadow:inset 0 0 0 1px rgba(245,158,11,0.30);
}
html[data-dash-theme="light"] .nx-badge--draft{
  box-shadow:inset 0 0 0 1px rgba(37,99,235,0.25);
}
html[data-dash-theme="light"] .nx-badge--completed{
  box-shadow:inset 0 0 0 1px rgba(139,92,246,0.25);
}
html[data-dash-theme="light"] .nx-badge--expired,
html[data-dash-theme="light"] .nx-badge--cancelled{
  box-shadow:inset 0 0 0 1px rgba(15,23,42,0.10);
}

/* Section dividers + tables get visible lines */
html[data-dash-theme="light"] .nx-row{
  border-bottom-color:rgba(15,23,42,0.06) !important;
}
html[data-dash-theme="light"] .nx-table th{
  border-bottom:1px solid rgba(15,23,42,0.08) !important;
  background:rgba(15,23,42,0.025) !important;
}
html[data-dash-theme="light"] .nx-table td{
  border-bottom:1px solid rgba(15,23,42,0.05) !important;
}
html[data-dash-theme="light"] .nx-table tbody tr:hover{
  background:rgba(59,130,246,0.03) !important;
}

/* Master search panel inherits the new shadows + the backdrop blur
   feel via the existing tokens; no additional rules needed there. */


/* ────────────────────────────────────────────────────────────
   GIFT PAGE — premium upgrade
   ────────────────────────────────────────────────────────────
   SIZE/TYPOGRAPHY rules apply to BOTH themes (per user request:
   "same size on everything, just different colour").
   COLOR/BACKGROUND/SHADOW rules stay light-mode only — dark
   mode keeps its own existing colour palette.
   ──────────────────────────────────────────────────────────── */

/* ── SIZING + TYPOGRAPHY (both themes) ──────────────────────── */
.pm-gift{ padding:8px 4px; }

/* Hero typography on the gift page (bumped 20px→32px) — both themes */
body:has(.pm-gift) .nx-h1{
  font:700 32px Inter,sans-serif !important;
  letter-spacing:-.022em !important;
  line-height:1.1 !important;
  margin:0 0 8px !important;
}
body:has(.pm-gift) .nx-sub{
  font:500 15px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
  line-height:1.55 !important;
  max-width:620px !important;
}

/* Preview column padding + radius (the surface) — both themes */
.pm-gift__preview-col{
  padding:32px 28px !important;
  border-radius:18px !important;
}

/* Form field sizing + shape — both themes */
.pm-gift__field,
.pm-gift__input,
.pm-gift input[type="text"],
.pm-gift input[type="email"],
.pm-gift input[type="number"],
.pm-gift textarea,
.pm-gift select{
  border-radius:10px !important;
  padding:11px 14px !important;
  font:500 14px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
  transition:border-color .14s ease, box-shadow .14s ease !important;
}

/* Field labels — typography + tracking — both themes */
.pm-gift label,
.pm-gift__label{
  font:700 11px Inter,sans-serif !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  margin-bottom:8px !important;
  display:block;
}


/* Submit button shape + sizing — both themes */
.pm-gift__submit,
.pm-gift button[type="submit"]{
  border:0 !important;
  font:700 14px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
  padding:13px 22px !important;
  border-radius:10px !important;
  transition:transform .12s ease, box-shadow .14s ease !important;
  cursor:pointer !important;
}
.pm-gift__submit:hover,
.pm-gift button[type="submit"]:hover{
  transform:translateY(-1px);
}


/* ── COLOURS + SHADOWS (light mode only) ────────────────────── */
html[data-dash-theme="light"] body:has(.pm-gift) .nx-h1{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.pm-gift) .nx-sub{
  color:#475569 !important;
}

/* Preview column — soft white card frame in light mode */
html[data-dash-theme="light"] .pm-gift__preview-col{
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.06),
    0 1px 3px rgba(15,23,42,0.04),
    0 16px 40px -20px rgba(15,23,42,0.15) !important;
}

/* Form fields — light-mode colour palette */
html[data-dash-theme="light"] .pm-gift__field,
html[data-dash-theme="light"] .pm-gift__input,
html[data-dash-theme="light"] .pm-gift input[type="text"],
html[data-dash-theme="light"] .pm-gift input[type="email"],
html[data-dash-theme="light"] .pm-gift input[type="number"],
html[data-dash-theme="light"] .pm-gift textarea,
html[data-dash-theme="light"] .pm-gift select{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,0.10) !important;
  color:#0f172a !important;
  box-shadow:0 1px 2px rgba(15,23,42,0.03) !important;
}
html[data-dash-theme="light"] .pm-gift__field:hover,
html[data-dash-theme="light"] .pm-gift input:hover,
html[data-dash-theme="light"] .pm-gift textarea:hover,
html[data-dash-theme="light"] .pm-gift select:hover{
  border-color:rgba(15,23,42,0.18) !important;
}
html[data-dash-theme="light"] .pm-gift__field:focus,
html[data-dash-theme="light"] .pm-gift input:focus,
html[data-dash-theme="light"] .pm-gift textarea:focus,
html[data-dash-theme="light"] .pm-gift select:focus{
  outline:none !important;
  border-color:#2563eb !important;
  box-shadow:0 0 0 4px rgba(37,99,235,0.15) !important;
}

/* Labels — light-mode colour */
html[data-dash-theme="light"] .pm-gift label,
html[data-dash-theme="light"] .pm-gift__label{
  color:#475569 !important;
}


/* Submit button — light-mode gradient + colour */
html[data-dash-theme="light"] .pm-gift__submit,
html[data-dash-theme="light"] .pm-gift button[type="submit"]{
  background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color:#ffffff !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.12),
    0 8px 22px -4px rgba(37,99,235,0.45),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
html[data-dash-theme="light"] .pm-gift__submit:hover,
html[data-dash-theme="light"] .pm-gift button[type="submit"]:hover{
  box-shadow:
    0 1px 2px rgba(15,23,42,0.14),
    0 14px 28px -4px rgba(37,99,235,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}


/* ────────────────────────────────────────────────────────────
   CLIENT DASHBOARD — premium upgrade
   ────────────────────────────────────────────────────────────
   Same playbook as the gift page: bump SIZING/TYPOGRAPHY/SPACING
   for both themes; layer COLOR/SHADOW polish only in light mode.
   Scoped via body:has(.dash-main-wrap) so only the client
   dashboard picks it up (not every page with .nx-h1).
   ──────────────────────────────────────────────────────────── */

/* ── SIZING + TYPOGRAPHY (both themes) ──────────────────────── */
body:has(.dash-main-wrap) .nx-shell{
  padding:40px 32px 96px !important;
}
body:has(.dash-main-wrap) .nx-head{
  margin-bottom:32px !important;
}
body:has(.dash-main-wrap) .nx-h1{
  font:800 30px Inter,sans-serif !important;
  letter-spacing:-.024em !important;
  line-height:1.1 !important;
  margin:0 0 8px !important;
}
body:has(.dash-main-wrap) .nx-sub{
  font:500 15px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
  line-height:1.55 !important;
}

/* KPI cards — taller, more breathing room, bigger numbers */
body:has(.dash-main-wrap) .nx-kpi{
  padding:28px 26px !important;
  border-radius:16px !important;
}
body:has(.dash-main-wrap) .nx-kpi__num{
  font:800 40px Inter,sans-serif !important;
  letter-spacing:-.032em !important;
}
body:has(.dash-main-wrap) .nx-kpi__label{
  font:500 13.5px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
}
body:has(.dash-main-wrap) .nx-kpis{ gap:18px !important; }

/* Generic cards — bigger radius, more padding so things breathe */
body:has(.dash-main-wrap) .nx-card{
  padding:26px 26px !important;
  border-radius:16px !important;
}
body:has(.dash-main-wrap) .nx-card__title{
  font:700 17px Inter,sans-serif !important;
  letter-spacing:-.014em !important;
}
body:has(.dash-main-wrap) .nx-card__sub{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  margin-top:5px !important;
}

/* Contract history rows — clean spacing, real type */
body:has(.dash-main-wrap) .nx-contract{
  padding:14px 0 !important;
}
body:has(.dash-main-wrap) .nx-contract__label{
  font:700 14px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
}
body:has(.dash-main-wrap) .nx-contract__dates{
  font:500 12px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  margin-top:2px !important;
}
body:has(.dash-main-wrap) .nx-contract__hours{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
}

/* Conversation rows */
body:has(.dash-main-wrap) .nx-convo{
  padding:12px 14px !important;
  border-radius:11px !important;
}


/* ── COLOURS + SHADOWS (light mode only) ────────────────────── */
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-h1{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-sub{
  color:#475569 !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-card__title{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-card__sub{
  color:#64748b !important;
}

/* KPI cards — premium triple-layer shadow with subtle blue ambient */
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-kpi{
  background:#ffffff !important;
  border:1px solid transparent !important;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.06),
    0 1px 3px rgba(15,23,42,0.04),
    0 18px 40px -20px rgba(59,130,246,0.20) !important;
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-kpi:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.22),
    0 4px 14px -2px rgba(59,130,246,0.12),
    0 28px 56px -20px rgba(15,23,42,0.20) !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-kpi__num{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-kpi__label{
  color:#64748b !important;
}

/* Generic cards */
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-card{
  background:#ffffff !important;
  border:1px solid transparent !important;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.06),
    0 1px 3px rgba(15,23,42,0.04),
    0 16px 36px -18px rgba(15,23,42,0.14) !important;
}

/* Contract rows separators */
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-contract{
  border-bottom:1px solid rgba(15,23,42,0.06) !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-contract:last-child{
  border-bottom:none !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-contract:hover{
  background:rgba(59,130,246,0.04) !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-contract__label{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-contract__dates{
  color:#64748b !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-contract__hours{
  color:#475569 !important;
}

/* Contracts toggle button — match the premium palette */
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-contracts__toggle{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,0.10) !important;
  color:#475569 !important;
  box-shadow:0 1px 2px rgba(15,23,42,0.04) !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-contracts__toggle:hover{
  background:#f8fafc !important;
  border-color:rgba(15,23,42,0.16) !important;
  color:#0f172a !important;
}

/* Conversation rows */
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-convo:hover{
  background:rgba(59,130,246,0.04) !important;
}


/* ────────────────────────────────────────────────────────────
   CLIENT DASHBOARD — full widget polish (continued)
   ────────────────────────────────────────────────────────────
   Same playbook: sizing applies both themes; colour scoped light.
   Covers everything else on the dashboard: usage strip, banked-
   hours pill, attendance stats, conversations, upcoming sessions,
   homework + tasks, payment-history mini-card.
   ──────────────────────────────────────────────────────────── */

/* ── Hours usage progress strip ─────────────────────────────── */
body:has(.dash-main-wrap) .nx-usage{
  padding:18px 22px !important;
  border-radius:14px !important;
}
body:has(.dash-main-wrap) .nx-usage__lead{
  font:700 14px Inter,sans-serif !important;
  letter-spacing:-.010em !important;
}
body:has(.dash-main-wrap) .nx-usage__meta{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
}
body:has(.dash-main-wrap) .nx-usage__bar{
  height:8px !important;
  border-radius:9999px !important;
  margin-top:10px !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-usage{
  background:#ffffff !important;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.06),
    0 1px 3px rgba(15,23,42,0.04),
    0 12px 28px -16px rgba(15,23,42,0.12) !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-usage__bar{
  background:rgba(15,23,42,0.06) !important;
}

/* ── Banked hours strip (warm gold callout) ─────────────────── */
body:has(.dash-main-wrap) .nx-bank-strip{
  padding:18px 22px !important;
  border-radius:14px !important;
  gap:16px !important;
}
body:has(.dash-main-wrap) .nx-bank-strip__icon{
  width:48px !important;
  height:48px !important;
  border-radius:14px !important;
}
body:has(.dash-main-wrap) .nx-bank-strip__title{
  font:700 14.5px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
}
body:has(.dash-main-wrap) .nx-bank-strip__sub{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  line-height:1.55 !important;
}
body:has(.dash-main-wrap) .nx-bank-strip__cta{
  padding:9px 16px !important;
  border-radius:9999px !important;
  font:600 12.5px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-bank-strip{
  box-shadow:
    0 0 0 1px rgba(245,158,11,0.20),
    0 4px 14px -4px rgba(245,158,11,0.20),
    0 16px 36px -18px rgba(15,23,42,0.10) !important;
}

/* ── Attendance / session-overview stats grid ───────────────── */
body:has(.dash-main-wrap) .nx-attstats{
  gap:14px !important;
}
body:has(.dash-main-wrap) .nx-attstat{
  padding:18px 16px !important;
  border-radius:12px !important;
}
body:has(.dash-main-wrap) .nx-attstat__num{
  font:800 32px Inter,sans-serif !important;
  letter-spacing:-.028em !important;
  font-variant-numeric:tabular-nums !important;
  line-height:1 !important;
}
body:has(.dash-main-wrap) .nx-attstat__label{
  font:600 11.5px Inter,sans-serif !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  margin-top:8px !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-attstat{
  background:#ffffff !important;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.06),
    0 1px 3px rgba(15,23,42,0.04) !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-attstat:hover{
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.18),
    0 4px 12px -2px rgba(59,130,246,0.10),
    0 12px 28px -14px rgba(15,23,42,0.16) !important;
  transform:translateY(-2px);
}

/* ── Conversation rows ──────────────────────────────────────── */
body:has(.dash-main-wrap) .nx-convo{
  padding:12px 14px !important;
  border-radius:11px !important;
  gap:12px !important;
}
body:has(.dash-main-wrap) .nx-convo__name{
  font:700 13.5px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
}
body:has(.dash-main-wrap) .nx-convo__snippet{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  line-height:1.45 !important;
  margin-top:2px !important;
}
body:has(.dash-main-wrap) .nx-convo__time{
  font:600 11px Inter,sans-serif !important;
  letter-spacing:.02em !important;
}

/* ── Upcoming session rows ──────────────────────────────────── */
body:has(.dash-main-wrap) .nx-up{
  padding:14px 16px !important;
  border-radius:12px !important;
  gap:14px !important;
}
body:has(.dash-main-wrap) .nx-up__date{
  width:54px !important;
  padding:8px 4px !important;
  border-radius:10px !important;
}
body:has(.dash-main-wrap) .nx-up__day{
  font:700 10.5px Inter,sans-serif !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
}
body:has(.dash-main-wrap) .nx-up__num{
  font:800 22px Inter,sans-serif !important;
  letter-spacing:-.020em !important;
  font-variant-numeric:tabular-nums !important;
}
body:has(.dash-main-wrap) .nx-up__time{
  font:700 14px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
}
body:has(.dash-main-wrap) .nx-up__with{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  margin-top:2px !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-up{
  background:#ffffff !important;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.05),
    0 1px 2px rgba(15,23,42,0.03) !important;
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-up:hover{
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.20),
    0 4px 12px -2px rgba(59,130,246,0.10) !important;
  transform:translateY(-1px);
}
html[data-dash-theme="light"] body:has(.dash-main-wrap) .nx-up__date{
  background:linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,0.06) !important;
}

/* ── Homework rows ──────────────────────────────────────────── */
body:has(.dash-main-wrap) .nx-hw{
  padding:14px 16px !important;
  border-radius:11px !important;
}
body:has(.dash-main-wrap) .nx-hw__subj{
  font:700 13.5px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
}
body:has(.dash-main-wrap) .nx-hw__desc{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  line-height:1.5 !important;
}
body:has(.dash-main-wrap) .nx-hw__meta{
  font:500 11.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
}

/* ── Task rows ──────────────────────────────────────────────── */
body:has(.dash-main-wrap) .nx-task{
  padding:13px 16px !important;
  border-radius:11px !important;
}
body:has(.dash-main-wrap) .nx-task__body{
  font:600 13.5px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
  line-height:1.45 !important;
}
body:has(.dash-main-wrap) .nx-task__meta{
  font:500 11.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
}

/* ── "View all" / "View calendar" link CTAs in card heads ──── */
body:has(.dash-main-wrap) .nx-card__cta{
  font:600 12.5px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
}

/* ── Empty states inside cards ──────────────────────────────── */
body:has(.dash-main-wrap) .nx-empty{
  padding:32px 18px !important;
  border-radius:11px !important;
}
body:has(.dash-main-wrap) .nx-empty,
body:has(.dash-main-wrap) .nx-empty__hint{
  font:500 13px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
  line-height:1.5 !important;
}

/* ── Right-side calendar widget ─────────────────────────────── */
body:has(.dash-main-wrap) .dash-cal-user__name{
  font:700 13.5px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
}
body:has(.dash-main-wrap) .dash-cal-user__email{
  font:500 11.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
}
body:has(.dash-main-wrap) .dash-cal-month__label{
  font:700 14px Inter,sans-serif !important;
  letter-spacing:-.010em !important;
}
body:has(.dash-main-wrap) .dash-cal-section__title{
  font:700 13px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
}


/* ────────────────────────────────────────────────────────────
   ASSISTANT DASHBOARD — premium upgrade
   ────────────────────────────────────────────────────────────
   Same playbook as the client dashboard:
     • SIZING/TYPOGRAPHY applies to BOTH themes
     • COLOURS/SHADOWS scoped to light mode only
   Scoped via body:has(.ad-shell) — unique to the assistant
   dashboard (.ad-* namespace).
   ──────────────────────────────────────────────────────────── */

/* ── SIZING + TYPOGRAPHY (both themes) ──────────────────────── */
body:has(.ad-shell) .ad-shell{
  padding:40px 32px 96px !important;
  max-width:1380px !important;
  margin:0 auto !important;
}
body:has(.ad-shell) .ad-eyebrow{
  font:700 11px Inter,sans-serif !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  margin:0 0 10px !important;
}
body:has(.ad-shell) .ad-h1{
  font:800 30px Inter,sans-serif !important;
  letter-spacing:-.024em !important;
  line-height:1.1 !important;
  margin:0 0 8px !important;
}
body:has(.ad-shell) .ad-sub{
  font:500 15px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
  line-height:1.55 !important;
}

/* Welcome banner */
body:has(.ad-shell) .ad-welcome{
  padding:24px 26px !important;
  border-radius:16px !important;
  margin-bottom:24px !important;
}
body:has(.ad-shell) .ad-welcome__title{
  font:800 22px Inter,sans-serif !important;
  letter-spacing:-.018em !important;
  line-height:1.2 !important;
}
body:has(.ad-shell) .ad-welcome__sub{
  font:500 14px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
  line-height:1.5 !important;
  margin-top:6px !important;
}

/* KPI cards */
body:has(.ad-shell) .ad-kpis{ gap:18px !important; }
body:has(.ad-shell) .ad-kpi{
  padding:24px 22px !important;
  border-radius:16px !important;
}
body:has(.ad-shell) .ad-kpi__icon{
  width:48px !important; height:48px !important;
  border-radius:13px !important;
}
body:has(.ad-shell) .ad-kpi__value{
  font:800 36px Inter,sans-serif !important;
  letter-spacing:-.028em !important;
  font-variant-numeric:tabular-nums !important;
  line-height:1 !important;
}
body:has(.ad-shell) .ad-kpi__label{
  font:600 13px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
}
body:has(.ad-shell) .ad-kpi__sub{
  font:500 11.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  margin-top:4px !important;
}

/* Widget cards (My Families, Renewals, etc.) */
body:has(.ad-shell) .ad-widget{
  padding:24px 26px !important;
  border-radius:16px !important;
}
body:has(.ad-shell) .ad-widget__head{
  margin-bottom:18px !important;
}
body:has(.ad-shell) .ad-widget__title{
  font:700 17px Inter,sans-serif !important;
  letter-spacing:-.014em !important;
}
body:has(.ad-shell) .ad-widget__sub{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  margin-top:5px !important;
}
body:has(.ad-shell) .ad-widget__action{
  font:600 12.5px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
}

/* Section heads (when used directly) */
body:has(.ad-shell) .ad-section__head{
  margin-bottom:18px !important;
}
body:has(.ad-shell) .ad-section__title{
  font:700 17px Inter,sans-serif !important;
  letter-spacing:-.014em !important;
}
body:has(.ad-shell) .ad-section__sub{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
}
body:has(.ad-shell) .ad-section__action{
  font:600 12.5px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
}

/* Family rows */
body:has(.ad-shell) .ad-family{
  padding:14px 16px !important;
  border-radius:12px !important;
  gap:14px !important;
}
body:has(.ad-shell) .ad-family__name{
  font:700 14px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
}
body:has(.ad-shell) .ad-family__plan{
  font:500 12px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  margin-top:2px !important;
}
body:has(.ad-shell) .ad-family__hours{
  font:700 15px Inter,sans-serif !important;
  letter-spacing:-.010em !important;
  font-variant-numeric:tabular-nums !important;
}
body:has(.ad-shell) .ad-family__hours-label{
  font:600 10.5px Inter,sans-serif !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  margin-top:2px !important;
}

/* Renewal rows */
body:has(.ad-shell) .ad-renewal-row__name{
  font:700 13.5px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
}
body:has(.ad-shell) .ad-renewal-row__date{
  font:600 13px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
  font-variant-numeric:tabular-nums !important;
}
body:has(.ad-shell) .ad-renewal-row__meta{
  font:500 11.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  margin-top:2px !important;
}

/* Weekly hours strip */
body:has(.ad-shell) .ad-weekly{
  padding:22px 24px !important;
  border-radius:16px !important;
}
body:has(.ad-shell) .ad-weekly__title{
  font:700 14px Inter,sans-serif !important;
  letter-spacing:-.010em !important;
}
body:has(.ad-shell) .ad-weekly__summary{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
}
body:has(.ad-shell) .ad-weekday__name{
  font:600 10.5px Inter,sans-serif !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
}
body:has(.ad-shell) .ad-weekday__hours{
  font:800 18px Inter,sans-serif !important;
  letter-spacing:-.018em !important;
  font-variant-numeric:tabular-nums !important;
  line-height:1 !important;
}
body:has(.ad-shell) .ad-weekday__unit{
  font:600 10px Inter,sans-serif !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}

/* Profile card */
body:has(.ad-shell) .ad-prof{
  padding:22px 24px !important;
  border-radius:16px !important;
  gap:16px !important;
}
body:has(.ad-shell) .ad-prof__name{
  font:700 16px Inter,sans-serif !important;
  letter-spacing:-.012em !important;
}
body:has(.ad-shell) .ad-prof__city{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  margin-top:3px !important;
}
body:has(.ad-shell) .ad-prof__pill{
  font:600 10.5px Inter,sans-serif !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  padding:4px 10px !important;
  border-radius:9999px !important;
}
body:has(.ad-shell) .ad-prof__edit{
  font:600 12.5px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
}

/* Quicklinks */
body:has(.ad-shell) .ad-quicklinks{
  padding:20px 22px !important;
  border-radius:16px !important;
}
body:has(.ad-shell) .ad-quicklinks__title{
  font:700 14px Inter,sans-serif !important;
  letter-spacing:-.010em !important;
}
body:has(.ad-shell) .ad-quicklinks__item{
  padding:11px 12px !important;
  border-radius:10px !important;
  font:600 13.5px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
}

/* Empty / loading states */
body:has(.ad-shell) .ad-empty{
  padding:32px 18px !important;
  border-radius:12px !important;
}
body:has(.ad-shell) .ad-empty__title{
  font:700 14px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
}
body:has(.ad-shell) .ad-empty__sub{
  font:500 13px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
  margin-top:4px !important;
  line-height:1.5 !important;
}


/* ── COLOURS + SHADOWS (light mode only) ────────────────────── */
html[data-dash-theme="light"] body:has(.ad-shell) .ad-eyebrow{
  color:#2563eb !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-h1{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-sub{
  color:#475569 !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-welcome__title{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-welcome__sub{
  color:#475569 !important;
}

/* KPI cards — pure white + premium triple-layer shadow */
html[data-dash-theme="light"] body:has(.ad-shell) .ad-kpi{
  background:#ffffff !important;
  border:1px solid transparent !important;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.06),
    0 1px 3px rgba(15,23,42,0.04),
    0 18px 40px -20px rgba(59,130,246,0.20) !important;
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-kpi:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.22),
    0 4px 14px -2px rgba(59,130,246,0.12),
    0 28px 56px -20px rgba(15,23,42,0.20) !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-kpi__value{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-kpi__label{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-kpi__sub{
  color:#64748b !important;
}

/* Widget cards */
html[data-dash-theme="light"] body:has(.ad-shell) .ad-widget,
html[data-dash-theme="light"] body:has(.ad-shell) .ad-weekly,
html[data-dash-theme="light"] body:has(.ad-shell) .ad-prof,
html[data-dash-theme="light"] body:has(.ad-shell) .ad-quicklinks{
  background:#ffffff !important;
  border:1px solid transparent !important;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.06),
    0 1px 3px rgba(15,23,42,0.04),
    0 16px 36px -18px rgba(15,23,42,0.14) !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-widget__title,
html[data-dash-theme="light"] body:has(.ad-shell) .ad-section__title{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-widget__sub,
html[data-dash-theme="light"] body:has(.ad-shell) .ad-section__sub{
  color:#64748b !important;
}

/* Family rows */
html[data-dash-theme="light"] body:has(.ad-shell) .ad-family{
  border:1px solid transparent !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-family:hover{
  background:rgba(59,130,246,0.04) !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-family__name{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-family__plan{
  color:#64748b !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-family__hours{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-family__hours-label{
  color:#94a3b8 !important;
}

/* Renewals */
html[data-dash-theme="light"] body:has(.ad-shell) .ad-renewal-row__name{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-renewal-row__date{
  color:#475569 !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-renewal-row__meta{
  color:#64748b !important;
}

/* Profile pill */
html[data-dash-theme="light"] body:has(.ad-shell) .ad-prof__pill{
  background:rgba(34,197,94,0.10) !important;
  color:#15803d !important;
  box-shadow:inset 0 0 0 1px rgba(34,197,94,0.25) !important;
}

/* Quicklinks items */
html[data-dash-theme="light"] body:has(.ad-shell) .ad-quicklinks__item{
  color:#0f172a !important;
  transition:background .14s ease, color .14s ease !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-quicklinks__item:hover{
  background:rgba(59,130,246,0.06) !important;
  color:#2563eb !important;
}

/* Empty states */
html[data-dash-theme="light"] body:has(.ad-shell) .ad-empty{
  background:#ffffff !important;
  border:1px dashed rgba(15,23,42,0.15) !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-empty__title{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-empty__sub{
  color:#64748b !important;
}

/* Weekly hours grid cells — soft surface tint */
html[data-dash-theme="light"] body:has(.ad-shell) .ad-weekday__hours{
  color:#0f172a !important;
}
html[data-dash-theme="light"] body:has(.ad-shell) .ad-weekday__name{
  color:#94a3b8 !important;
}


/* ════════════════════════════════════════════════════════════
   Phase 19n + 19o — UNIVERSAL premium polish for ALL remaining
   assistant + admin pages.
   ────────────────────────────────────────────────────────────
   Targets every page by class-prefix (.ac-*, .ah-*, .av-*,
   .ap-*, .ar-*, .lt-*, .admin-*, .cc-*, .fz-*, .auth-*) plus
   substring selectors for *-card / *-tile / *-h1 / *-sub
   so any class-named-like-a-card gets the right treatment.

   Same playbook:
     • SIZING / TYPOGRAPHY / SPACING — applies BOTH themes
     • COLOURS / SHADOWS — light mode only (dark untouched)
   ════════════════════════════════════════════════════════════ */

/* ── Universal hero typography (every page's h1 + sub) ─────── */
.ac-h1, .ah-h1, .av-h1, .ap-h1, .ar-h1, .lt-h1,
.admin-h1, .cc-h1, .fz-h1, .auth-h1{
  font:800 30px Inter,sans-serif !important;
  letter-spacing:-.024em !important;
  line-height:1.1 !important;
  margin:0 0 8px !important;
}
.ac-sub, .ah-sub, .av-sub, .ap-sub, .ar-sub, .lt-sub,
.admin-sub, .cc-sub, .fz-sub, .auth-sub{
  font:500 15px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
  line-height:1.55 !important;
  max-width:680px !important;
}
.ac-eyebrow, .ah-eyebrow, .av-eyebrow, .ap-eyebrow, .ar-eyebrow,
.lt-eyebrow, .admin-eyebrow, .auth-eyebrow{
  font:700 11px Inter,sans-serif !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  margin:0 0 10px !important;
}

/* ── Universal shell padding ────────────────────────────────── */
.ac-shell, .ah-shell, .av-shell, .ap-shell, .ar-shell,
.admin-shell, .cc-shell, .fz-shell{
  padding:40px 32px 96px !important;
  max-width:1380px !important;
  margin:0 auto !important;
}

/* ── Universal card elevation — light mode ──────────────────── */
/* Substring selector catches everything ending in -card / -tile
   / -kpi / -panel, while :not([class*="__"]) excludes BEM child
   elements (e.g. .nx-card__head). Safe across namespaces. */
html[data-dash-theme="light"] .ac-card,
html[data-dash-theme="light"] .ah-card,
html[data-dash-theme="light"] .av-card,
html[data-dash-theme="light"] .ap-card,
html[data-dash-theme="light"] .ar-card,
html[data-dash-theme="light"] .admin-card,
html[data-dash-theme="light"] .cc-card,
html[data-dash-theme="light"] .fz-card,
html[data-dash-theme="light"] .review-card,
html[data-dash-theme="light"] .field-card,
html[data-dash-theme="light"] .doc-card,
html[data-dash-theme="light"] .corr-card,
html[data-dash-theme="light"] .auth-card,
html[data-dash-theme="light"] .ac-tile,
html[data-dash-theme="light"] .ah-tile,
html[data-dash-theme="light"] .admin-tile,
html[data-dash-theme="light"] .ac-kpi,
html[data-dash-theme="light"] .ah-kpi,
html[data-dash-theme="light"] .av-kpi,
html[data-dash-theme="light"] .admin-kpi,
html[data-dash-theme="light"] .lt-stats,
html[data-dash-theme="light"] .ah-summary,
html[data-dash-theme="light"] .ap-section,
html[data-dash-theme="light"] .ar-section{
  background:#ffffff !important;
  border:1px solid transparent !important;
  border-radius:16px !important;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.06),
    0 1px 3px rgba(15,23,42,0.04),
    0 16px 36px -18px rgba(15,23,42,0.14) !important;
}

/* Universal KPI hover lift in light mode */
html[data-dash-theme="light"] .ac-kpi:hover,
html[data-dash-theme="light"] .ah-kpi:hover,
html[data-dash-theme="light"] .av-kpi:hover,
html[data-dash-theme="light"] .admin-kpi:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.22),
    0 4px 14px -2px rgba(59,130,246,0.12),
    0 28px 56px -20px rgba(15,23,42,0.20) !important;
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease !important;
}

/* ── Hero text colour in light mode ─────────────────────────── */
html[data-dash-theme="light"] .ac-h1,
html[data-dash-theme="light"] .ah-h1,
html[data-dash-theme="light"] .av-h1,
html[data-dash-theme="light"] .ap-h1,
html[data-dash-theme="light"] .ar-h1,
html[data-dash-theme="light"] .lt-h1,
html[data-dash-theme="light"] .admin-h1,
html[data-dash-theme="light"] .cc-h1,
html[data-dash-theme="light"] .fz-h1,
html[data-dash-theme="light"] .auth-h1{
  color:#0f172a !important;
}
html[data-dash-theme="light"] .ac-sub,
html[data-dash-theme="light"] .ah-sub,
html[data-dash-theme="light"] .av-sub,
html[data-dash-theme="light"] .ap-sub,
html[data-dash-theme="light"] .ar-sub,
html[data-dash-theme="light"] .lt-sub,
html[data-dash-theme="light"] .admin-sub,
html[data-dash-theme="light"] .cc-sub,
html[data-dash-theme="light"] .fz-sub,
html[data-dash-theme="light"] .auth-sub{
  color:#475569 !important;
}
html[data-dash-theme="light"] .ac-eyebrow,
html[data-dash-theme="light"] .ah-eyebrow,
html[data-dash-theme="light"] .av-eyebrow,
html[data-dash-theme="light"] .ap-eyebrow,
html[data-dash-theme="light"] .ar-eyebrow,
html[data-dash-theme="light"] .lt-eyebrow,
html[data-dash-theme="light"] .admin-eyebrow{
  color:#2563eb !important;
}

/* ── Section / card titles + subs across all prefixes ───────── */
.ac-card__title, .ah-card__title, .av-card__title, .ap-card__title,
.ar-card__title, .admin-card__title, .cc-card__title, .fz-card__title,
.review-card__title, .ac-section__title, .ah-section__title,
.av-section__title, .ap-section__title, .ar-section__title{
  font:700 17px Inter,sans-serif !important;
  letter-spacing:-.014em !important;
}
.ac-card__sub, .ah-card__sub, .av-card__sub, .ap-card__sub,
.ar-card__sub, .admin-card__sub, .cc-card__sub, .fz-card__sub,
.review-card__sub{
  font:500 12.5px Inter,sans-serif !important;
  letter-spacing:-.003em !important;
  margin-top:5px !important;
}

/* Light-mode colour for titles */
html[data-dash-theme="light"] .ac-card__title,
html[data-dash-theme="light"] .ah-card__title,
html[data-dash-theme="light"] .av-card__title,
html[data-dash-theme="light"] .ap-card__title,
html[data-dash-theme="light"] .ar-card__title,
html[data-dash-theme="light"] .admin-card__title,
html[data-dash-theme="light"] .cc-card__title,
html[data-dash-theme="light"] .fz-card__title,
html[data-dash-theme="light"] .review-card__title,
html[data-dash-theme="light"] .ac-section__title,
html[data-dash-theme="light"] .ah-section__title,
html[data-dash-theme="light"] .av-section__title,
html[data-dash-theme="light"] .ap-section__title,
html[data-dash-theme="light"] .ar-section__title{
  color:#0f172a !important;
}
html[data-dash-theme="light"] .ac-card__sub,
html[data-dash-theme="light"] .ah-card__sub,
html[data-dash-theme="light"] .av-card__sub,
html[data-dash-theme="light"] .ap-card__sub,
html[data-dash-theme="light"] .ar-card__sub,
html[data-dash-theme="light"] .admin-card__sub,
html[data-dash-theme="light"] .cc-card__sub,
html[data-dash-theme="light"] .fz-card__sub,
html[data-dash-theme="light"] .review-card__sub{
  color:#64748b !important;
}

/* ── Primary buttons across all prefixes ─────────────────────── */
.ac-btn--primary, .ah-btn--primary, .av-btn--primary, .ap-btn--primary,
.ar-btn--primary, .admin-btn--primary, .cc-btn--primary, .fz-btn--primary,
.review-btn--primary, .auth-btn--primary{
  font:700 13.5px Inter,sans-serif !important;
  letter-spacing:-.008em !important;
  padding:11px 20px !important;
  border-radius:9px !important;
  border:0 !important;
  cursor:pointer !important;
  transition:transform .12s ease, box-shadow .14s ease !important;
}
html[data-dash-theme="light"] .ac-btn--primary,
html[data-dash-theme="light"] .ah-btn--primary,
html[data-dash-theme="light"] .av-btn--primary,
html[data-dash-theme="light"] .ap-btn--primary,
html[data-dash-theme="light"] .ar-btn--primary,
html[data-dash-theme="light"] .admin-btn--primary,
html[data-dash-theme="light"] .cc-btn--primary,
html[data-dash-theme="light"] .fz-btn--primary,
html[data-dash-theme="light"] .review-btn--primary,
html[data-dash-theme="light"] .auth-btn--primary{
  background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 100%) !important;
  color:#ffffff !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.10),
    0 6px 18px -4px rgba(59,130,246,0.40),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
html[data-dash-theme="light"] .ac-btn--primary:hover,
html[data-dash-theme="light"] .ah-btn--primary:hover,
html[data-dash-theme="light"] .av-btn--primary:hover,
html[data-dash-theme="light"] .ap-btn--primary:hover,
html[data-dash-theme="light"] .ar-btn--primary:hover,
html[data-dash-theme="light"] .admin-btn--primary:hover,
html[data-dash-theme="light"] .cc-btn--primary:hover,
html[data-dash-theme="light"] .fz-btn--primary:hover,
html[data-dash-theme="light"] .review-btn--primary:hover,
html[data-dash-theme="light"] .auth-btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.12),
    0 10px 22px -4px rgba(59,130,246,0.50),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* ── Form inputs across all prefixes ──────────────────────────── */
.ac-input, .ah-input, .av-input, .ap-input, .ar-input,
.admin-input, .cc-input, .fz-input, .review-input,
.field-input, .auth-input{
  border-radius:10px !important;
  padding:11px 14px !important;
  font:500 14px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
}
html[data-dash-theme="light"] .ac-input,
html[data-dash-theme="light"] .ah-input,
html[data-dash-theme="light"] .av-input,
html[data-dash-theme="light"] .ap-input,
html[data-dash-theme="light"] .ar-input,
html[data-dash-theme="light"] .admin-input,
html[data-dash-theme="light"] .cc-input,
html[data-dash-theme="light"] .fz-input,
html[data-dash-theme="light"] .review-input,
html[data-dash-theme="light"] .field-input,
html[data-dash-theme="light"] .auth-input{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,0.10) !important;
  color:#0f172a !important;
  box-shadow:0 1px 2px rgba(15,23,42,0.03) !important;
}
html[data-dash-theme="light"] .ac-input:focus,
html[data-dash-theme="light"] .ah-input:focus,
html[data-dash-theme="light"] .av-input:focus,
html[data-dash-theme="light"] .ap-input:focus,
html[data-dash-theme="light"] .ar-input:focus,
html[data-dash-theme="light"] .admin-input:focus,
html[data-dash-theme="light"] .cc-input:focus,
html[data-dash-theme="light"] .fz-input:focus,
html[data-dash-theme="light"] .review-input:focus,
html[data-dash-theme="light"] .field-input:focus,
html[data-dash-theme="light"] .auth-input:focus{
  outline:none !important;
  border-color:#2563eb !important;
  box-shadow:0 0 0 4px rgba(37,99,235,0.15) !important;
}

/* ── Row elements (lists / tables / appointment rows) ──────── */
.ac-row, .ah-row, .av-row, .ap-row, .ar-row,
.admin-row, .cc-row, .fz-row, .review-row{
  padding:14px 16px !important;
  border-radius:11px !important;
}
html[data-dash-theme="light"] .ac-row:hover,
html[data-dash-theme="light"] .ah-row:hover,
html[data-dash-theme="light"] .av-row:hover,
html[data-dash-theme="light"] .ap-row:hover,
html[data-dash-theme="light"] .ar-row:hover,
html[data-dash-theme="light"] .admin-row:hover,
html[data-dash-theme="light"] .cc-row:hover,
html[data-dash-theme="light"] .fz-row:hover,
html[data-dash-theme="light"] .review-row:hover{
  background:rgba(59,130,246,0.04) !important;
}

/* ── Empty / loading states ─────────────────────────────────── */
.ac-empty, .ah-empty, .av-empty, .ap-empty, .ar-empty,
.admin-empty, .cc-empty, .fz-empty, .review-empty,
.ac-loading, .ah-loading, .av-loading, .ap-loading, .ar-loading,
.admin-loading, .cc-loading, .fz-loading{
  padding:32px 18px !important;
  border-radius:12px !important;
  font:500 13.5px Inter,sans-serif !important;
  letter-spacing:-.005em !important;
  line-height:1.55 !important;
  text-align:center !important;
}
html[data-dash-theme="light"] .ac-empty,
html[data-dash-theme="light"] .ah-empty,
html[data-dash-theme="light"] .av-empty,
html[data-dash-theme="light"] .ap-empty,
html[data-dash-theme="light"] .ar-empty,
html[data-dash-theme="light"] .admin-empty,
html[data-dash-theme="light"] .cc-empty,
html[data-dash-theme="light"] .fz-empty,
html[data-dash-theme="light"] .review-empty{
  background:#ffffff !important;
  border:1px dashed rgba(15,23,42,0.15) !important;
  color:#64748b !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   NX15 / NX15.2 — Sidebar family-picker hover-flyout (multi-level)
   ────────────────────────────────────────────────────────────────────
   Primary panel sits flush to the right of the sidebar (no seam gap).
   Hovering a family tile opens a secondary panel further to the right
   with per-family options (Workspace / Lesson Journal / Family Notebook).
   While ANY flyout is open, the sidebar is locked in expanded state so
   there's no snap-back gap when the cursor crosses to the flyout.
   ═══════════════════════════════════════════════════════════════════════ */

/* NX15.2 — keep the sidebar expanded while any flyout is open */
body.is-sb-flyout-open .pm-sidebar{ width:var(--pm-sb-expanded); }
body.is-sb-flyout-open.pm-has-sidebar{ padding-left:var(--pm-sb-expanded); }

.pm-sb-link--has-flyout .pm-sb-link__flyout-chev{
  margin-left:auto;width:14px;height:14px;color:#94A3B8;opacity:.7;
  transition:transform .14s ease, color .14s ease, opacity .14s ease;
}
.pm-sb-link--has-flyout:hover .pm-sb-link__flyout-chev,
.pm-sb-link--has-flyout.is-active .pm-sb-link__flyout-chev{
  color:#2563EB;opacity:1;transform:translateX(2px);
}
.pm-sb-link--has-flyout .pm-sb-link__flyout-chev svg{
  width:100%;height:100%;
}

.pm-sb-flyout{
  position:fixed;z-index:1300;
  min-width:300px;max-width:360px;max-height:78vh;
  /* Phase 0 Hot Fix (2026-06-07) — flyout panel was rendering see-through
     on the kid dashboard because the GPU-layer-promotion pack on
     client-dashboard.html promotes .nx-card and .pm-sb-flyout into
     compositor layers, and the resulting stacking-context interaction
     let the My Sessions table show through the flyout content.
     Three changes lock the panel down:
       1. background → solid white with !important so no page CSS wins
       2. isolation:isolate creates its own stacking context so the flyout's
          children layer above the dashboard regardless of GPU promotion
       3. z-index bumped 1100 → 1300 with safety margin */
  background:#FFFFFF !important;
  isolation:isolate;
  border:1px solid #E2E8F0;border-radius:14px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 24px 56px -16px rgba(15,23,42,0.20),
    0 0 0 1px rgba(37,99,235,0.06);
  display:none;flex-direction:column;
  overflow:hidden;
  opacity:0;transform:translateX(-6px) scale(.985);
  transition:opacity .16s ease, transform .18s ease;
  pointer-events:none;
}
/* Belt-and-braces: every internal panel ALSO gets a solid white base so
   even if a future override clears the parent background, the inner
   surfaces stay opaque. */
.pm-sb-flyout__list,
.pm-sb-flyout__head,
.pm-sb-flyout__head--sec{
  background:#FFFFFF;
}
.pm-sb-flyout.is-shown{
  display:flex;opacity:1;transform:translateX(0) scale(1);pointer-events:auto;
}
.pm-sb-flyout__head{
  position:relative;padding:14px 18px 12px;
  font:700 13px Inter,sans-serif;color:#0F172A;letter-spacing:-.005em;
  border-bottom:1px solid #F1F5F9;
  background:
    radial-gradient(180px 80px at 20% 0%, rgba(59,130,246,0.08), transparent 70%),
    #FAFBFD;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.pm-sb-flyout__count{
  font:600 11px Inter,sans-serif;color:#64748B;letter-spacing:-.003em;
  background:#fff;border:1px solid #E2E8F0;border-radius:6px;
  padding:2px 8px;
}
.pm-sb-flyout__list{
  overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px;
  scrollbar-width:thin;scrollbar-color:#CBD5E1 transparent;
}
.pm-sb-flyout__list::-webkit-scrollbar{width:8px;}
.pm-sb-flyout__list::-webkit-scrollbar-thumb{background:#E2E8F0;border-radius:4px;}
.pm-sb-flyout__list::-webkit-scrollbar-thumb:hover{background:#CBD5E1;}

.pm-sb-flyout__tile{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;cursor:pointer;
  padding:9px 11px;border-radius:9px;
  background:transparent;border:1px solid transparent;
  transition:background .14s ease, border-color .14s ease, transform .12s ease;
  /* NX15.2 — tiles are <button>s now */
  font:inherit;width:100%;text-align:left;
  color:inherit;outline:none;
}
.pm-sb-flyout__tile:hover{
  background:linear-gradient(180deg, rgba(59,130,246,0.06) 0%, rgba(255,255,255,1) 100%);
  border-color:rgba(59,130,246,0.22);
  transform:translateX(1px);
}
.pm-sb-flyout__tile-avatar{
  width:30px;height:30px;flex-shrink:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:700 12px Inter,sans-serif;color:#1E40AF;
  background:#EFF6FF;border:1px solid rgba(37,99,235,0.22);
  letter-spacing:0;
}
.pm-sb-flyout__tile-body{
  display:flex;flex-direction:column;min-width:0;flex:1;
}
.pm-sb-flyout__tile-name{
  font:600 13px Inter,sans-serif;color:#0F172A;letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pm-sb-flyout__tile-sub{
  font:500 11.5px Inter,sans-serif;color:#94A3B8;letter-spacing:-.003em;
  margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pm-sb-flyout__tile-chev{
  flex-shrink:0;width:14px;height:14px;color:#94A3B8;
  transition:color .14s ease, transform .14s ease;
}
.pm-sb-flyout__tile-chev svg{width:100%;height:100%;}
.pm-sb-flyout__tile:hover .pm-sb-flyout__tile-chev{
  color:#2563EB;transform:translateX(2px);
}

.pm-sb-flyout__loading,
.pm-sb-flyout__empty{
  padding:24px 18px;text-align:center;color:#64748B;font-size:13px;
}
.pm-sb-flyout__empty-title{
  font:700 14px Inter,sans-serif;color:#0F172A;margin:0 0 4px;letter-spacing:-.005em;
}
.pm-sb-flyout__empty-sub{font-size:12.5px;color:#94A3B8;margin:0;line-height:1.5;}
.pm-sb-flyout__spinner{
  width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:6px;
  border:2px solid #E2E8F0;border-top-color:#2563EB;border-radius:50%;
  animation:pm-sb-flyout-spin .7s linear infinite;
}
@keyframes pm-sb-flyout-spin{to{transform:rotate(360deg);}}

/* Dark theme */
html[data-dash-theme="dark"] .pm-sb-flyout{
  background:#16171c;border-color:#262830;
}
html[data-dash-theme="dark"] .pm-sb-flyout__head{
  background:radial-gradient(180px 80px at 20% 0%, rgba(59,130,246,0.18), transparent 70%), #1c1d23;
  border-bottom-color:#262830;color:#f1f5f9;
}
html[data-dash-theme="dark"] .pm-sb-flyout__count{
  background:#1c1d23;border-color:#262830;color:#94a3b8;
}
html[data-dash-theme="dark"] .pm-sb-flyout__tile-avatar{
  background:#1f2937;border-color:rgba(59,130,246,0.32);color:#93c5fd;
}
html[data-dash-theme="dark"] .pm-sb-flyout__tile-name{color:#f1f5f9;}
html[data-dash-theme="dark"] .pm-sb-flyout__tile:hover{
  background:linear-gradient(180deg, rgba(59,130,246,0.10) 0%, rgba(22,23,28,1) 100%);
  border-color:rgba(59,130,246,0.30);
}

/* ──────────────────────────────────────────────────────────────────────
   NX15.2 — Secondary panel (per-family options) + multi-level styling
   NX23.2 — Tertiary panel inherits the same visual treatment as
   secondary; it just sits one column further to the right. */
.pm-sb-flyout--secondary,
.pm-sb-flyout--tertiary{
  min-width:230px;max-width:280px;
}
.pm-sb-flyout__head--sec{
  display:flex;align-items:center;gap:10px;justify-content:flex-start;
  padding:11px 16px 10px;
}
.pm-sb-flyout__head-avatar{
  width:26px;height:26px;flex-shrink:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:700 11px Inter,sans-serif;color:#1E40AF;
  background:#EFF6FF;border:1px solid rgba(37,99,235,0.22);
}
.pm-sb-flyout__head-name{
  font:700 13px Inter,sans-serif;color:#0F172A;letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Per-family option row */
.pm-sb-flyout__opt{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;cursor:pointer;
  padding:8px 11px;border-radius:8px;
  background:transparent;border:1px solid transparent;
  font:600 12.5px Inter,sans-serif;color:#1F2937;letter-spacing:-.005em;
  transition:background .14s ease, border-color .14s ease, color .12s ease, transform .12s ease;
}
.pm-sb-flyout__opt:hover{
  background:linear-gradient(180deg, rgba(59,130,246,0.07) 0%, rgba(255,255,255,1) 100%);
  border-color:rgba(59,130,246,0.24);
  color:#1E40AF;transform:translateX(1px);
}
.pm-sb-flyout__opt-icon{
  flex-shrink:0;width:18px;height:18px;color:#64748B;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .12s ease;
}
.pm-sb-flyout__opt-icon svg{width:100%;height:100%;}
.pm-sb-flyout__opt:hover .pm-sb-flyout__opt-icon{color:#2563EB;}
.pm-sb-flyout__opt-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pm-sb-flyout__opt-chev{
  flex-shrink:0;width:13px;height:13px;color:#94A3B8;opacity:.7;
  transition:transform .14s ease, color .14s ease, opacity .12s ease;
}
.pm-sb-flyout__opt-chev svg{width:100%;height:100%;}
.pm-sb-flyout__opt:hover .pm-sb-flyout__opt-chev{
  color:#2563EB;opacity:1;transform:translateX(2px);
}
/* NX23.6 — Two-line option row used by the grouped Inbox tertiary
   panel (thread label + last-message preview). The body grows, label
   stays bold + sub becomes a quieter slate caption. */
.pm-sb-flyout__opt--two{align-items:flex-start;padding:10px 11px;}
.pm-sb-flyout__opt--two .pm-sb-flyout__opt-icon{margin-top:1px;}
.pm-sb-flyout__opt-body{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  overflow:hidden;
}
.pm-sb-flyout__opt-body .pm-sb-flyout__opt-label{
  font:700 13px Inter,sans-serif;color:#0F172A;
}
.pm-sb-flyout__opt-body .pm-sb-flyout__tile-sub{
  font:500 11.5px Inter,sans-serif;color:#64748B;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.003em;
}
.pm-sb-flyout__opt--two:hover .pm-sb-flyout__opt-body .pm-sb-flyout__opt-label{color:#1E40AF;}
.pm-sb-flyout__opt--two .pm-sb-flyout__opt-chev{margin-top:6px;}

/* NX19 — Section divider inside a static flyout. Used by the admin
   Tools menu to group items as Onboarding / Cross-client / Operations
   / System. Renders as a small uppercase eyebrow with a hairline under,
   sitting flush with the option rows below it. */
.pm-sb-flyout__opt-section{
  font:700 10px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:#94A3B8;
  padding:14px 12px 6px;
  margin-top:4px;
  border-top:1px solid #F1F5F9;
}
.pm-sb-flyout__opt-section:first-child{
  padding-top:6px;margin-top:0;border-top:none;
}

/* ═══════════════════════════════════════════════════════════════════════
   NX22.2 — Radial orbital quick-action menu (CLIENT)
   ────────────────────────────────────────────────────────────────────
   Ported verbatim from the assistant dashboard's NX3 orbital action
   menu (the one that opens from the Log session shimmer CTA). Same
   pulsing center orb, two concentric dashed rings, action nodes
   orbiting around the inner ring at equal angles, stagger-in animation
   on open, reverse on close. Owner: 'I want exactly that orbital'.
   ═══════════════════════════════════════════════════════════════════════ */
/* The modal styles that used to live here (.pm-orb-*, .pm-act-*,
   .pm-refer-*, .pm-resched-* and their keyframes) moved to
   css/pm-modals.css on 2026-08-17, alongside js/pm-modals.js. Only
   these flyout-tile rules stayed — they style the rail, not a modal. */
.pm-sb-flyout__tile .pm-sb-flyout__tile-chev{opacity:.7;}
.pm-sb-flyout__tile:hover .pm-sb-flyout__tile-chev,
.pm-sb-flyout__tile:focus-visible .pm-sb-flyout__tile-chev{opacity:1;color:#2563EB;}