/* ═══ PORTAL THEME ══════════════════════════════════════════════════════════
   The portal refresh's look, loaded last (file name kept from the first
   pass, "aurora", so the <link> never changed).

   History, so nobody re-litigates it:
     1. Aurora (2026-09-30): the invite page's ink, blooms, frosted glass and
        brand gradient. Jeff: "a bit garish ... a tiny bit more professional."
     2. Calmer aurora: half the blooms, solid blue actions.
     3. Graphite. Jeff: "the whole color scheme needs a redo. something that
        feels corporate and professional but still hip. also the sidebar could
        have a nicer layout, this looks so sloppy." Neutral gray surfaces and
        one blue.
     4. THIS. Jeff on Graphite: "too generic and flat. make a new color
        scheme." Kept from Graphite: solid panels, hairlines, no glass, no
        glow, the flat sidebar and the type. New: cards that lift off the page,
        and the Pinwheel palette (a hue per sidebar section, pink accent).
     5. THIS. Jeff on Pinwheel: "I really don't like the color scheme ... more
        professional in both modes ... subtle gradients, just make sure it looks
        clean." One accent, neutral icons, faint linear gradients.

   ⚠ ONE LAYER. portal.css is untouched apart from the typography cleanup;
   deleting this <link> restores the old look. It sits after the injected
   #portal-theme sheet (admin vibe presets), so must-win tokens carry
   !important, or a preset's primary would repaint the buttons.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
/* Shared: shape, type families, and the roles every palette fills in. */
:root {
  --au-display: 'Gabarito', 'Inter', system-ui, sans-serif;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-btn-font-family: 'Inter', system-ui, sans-serif;
  --au-r-lg: 12px;                   /* cards, panels */
  --au-r: 8px;                       /* buttons, inputs, menus */
  --bs-border-radius: var(--au-r);
  --bs-border-radius-lg: var(--au-r-lg);
  --bs-border-radius-sm: 6px;
  --pp-on-primary: #fff !important;
}

/* ═══ PALETTE: EXECUTIVE ═════════════════════════════════════════════════════
   Jeff, 2026-10-01, on Pinwheel: "I really don't like the color scheme. I want
   it to feel more professional in both modes. Please make the colors more
   pleasing. You can use subtle gradients, just make sure it looks clean."
   Of three one-accent candidates (sapphire, executive, teal) he picked this.

   A deep navy gradient sidebar in BOTH modes beside a light, airy work area
   (dark mode: deep slate). What made Pinwheel unprofessional was the rainbow:
   a hue per sidebar section on icons, titles and charts, plus a hot-pink
   accent. This is ONE accent: neutral icons, the current page tinted in the
   primary, color kept for meaning (waiting = amber, all clear = green,
   calendar types). Gradients are faint and linear (page, sidebar, primary
   buttons) — no glows.

   Every pair measured (ppux/palette/contrast2.mjs): text, secondary and
   placeholder text ≥ 4.5:1 on cards and the tertiary fill, white on the
   primary ≥ 5:1, the active-row text ≥ 6.5:1, icons ≥ 4.8:1, and the same
   inside the navy sidebar. */
:root {
  --pp-page-bg: #F5F7FA;
  --pp-page-grad: linear-gradient(180deg, #F7F9FC 0%, #EEF2F7 100%);
  --pp-sidebar-bg: #FFFFFF;
  --pp-sidebar-grad: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
  --bs-body-bg: #FFFFFF;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-tertiary-bg: #F4F6F9;
  --bs-secondary-bg: #EAEEF3;
  --bs-body-color: #1D2939;
  --bs-emphasis-color: #101828;
  --bs-secondary-color: #475467;
  --bs-tertiary-color: #5D6B82;
  --bs-border-color: #E4E7EC;
  --bs-border-color-translucent: rgba(16, 24, 40, .08);
  --bs-primary: #1E5BD8 !important;
  --bs-primary-rgb: 30, 91, 216 !important;
  --bs-link-color: #1E5BD8 !important;
  --bs-link-color-rgb: 30, 91, 216 !important;
  --pp-primary-grad: linear-gradient(180deg, #2B6BE8 0%, #1E5BD8 100%);
  --pp-accent: #1E5BD8;
  --pp-accent-rgb: 30, 91, 216;
  --pp-on-accent: #FFFFFF;
  --pp-icon: #667085;
  --pp-active-bg: #EEF4FF;
  --pp-active-fg: #1A4FBF;
  /* Home row tiles: primary for information, amber for "waiting on you",
     green for "all clear" (the names are the old section hues' slots) */
  --pp-h-blue: #1E5BD8; --pp-h-violet: #1E5BD8; --pp-h-cyan: #1E5BD8;
  --pp-h-pink: #B54708; --pp-h-amber: #B54708; --pp-h-green: #067647;
  --pp-accent-party: #1E5BD8;
  --pp-accent-order: #B54708;
  --pp-accent-ann: #0E7090;
  --au-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --au-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --au-shadow-md: 0 12px 24px -6px rgba(16, 24, 40, .14), 0 4px 8px -4px rgba(16, 24, 40, .06);
}
[data-bs-theme="dark"] {
  --pp-page-bg: #0B0F17;
  --pp-page-grad: linear-gradient(180deg, #0E131D 0%, #0A0D14 100%);
  --pp-sidebar-bg: #0D121B;
  --pp-sidebar-grad: linear-gradient(180deg, #111725 0%, #0B0F17 100%);
  --bs-body-bg: #131A26;
  --bs-body-bg-rgb: 19, 26, 38;
  --bs-tertiary-bg: #182131;
  --bs-secondary-bg: #1F2A3D;
  --bs-body-color: #D0D5DD;
  --bs-emphasis-color: #F5F6F8;
  --bs-secondary-color: #98A2B3;
  --bs-tertiary-color: #8A94A6;
  --bs-border-color: #222C3D;
  --bs-border-color-translucent: rgba(255, 255, 255, .06);
  --bs-primary: #2F67E6 !important;
  --bs-primary-rgb: 47, 103, 230 !important;
  --bs-link-color: #84ADFF !important;
  --bs-link-color-rgb: 132, 173, 255 !important;
  --pp-primary-grad: linear-gradient(180deg, #3B73EE 0%, #2A5FDB 100%);
  --pp-accent: #2F67E6;
  --pp-accent-rgb: 47, 103, 230;
  --pp-on-accent: #FFFFFF;
  --pp-icon: #7D8799;
  --pp-active-bg: #1A2742;
  --pp-active-fg: #A8C3FF;
  --pp-h-blue: #84ADFF; --pp-h-violet: #84ADFF; --pp-h-cyan: #84ADFF;
  --pp-h-pink: #FDB022; --pp-h-amber: #FDB022; --pp-h-green: #47CD89;
  --pp-accent-party: #84ADFF;
  --pp-accent-order: #FDB022;
  --pp-accent-ann: #67E3F9;
  --au-shadow-sm: none;
  --au-shadow-card: inset 0 1px 0 rgba(255, 255, 255, .03), 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px -10px rgba(0, 0, 0, .55);
  --au-shadow-md: 0 16px 36px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05);
  color-scheme: dark;
}

/* The navy sidebar re-points its own tokens, so everything inside it (search,
   rows, counts, footer, the phone menu) follows without its own rules. */
.sidebar {
  --pp-sidebar-bg: #0E1C36;
  --pp-sidebar-grad: linear-gradient(180deg, #14284B 0%, #0E1C36 100%);
  --bs-body-bg: rgba(255, 255, 255, .06);
  --bs-tertiary-bg: rgba(255, 255, 255, .07);
  --bs-secondary-bg: rgba(255, 255, 255, .10);
  --bs-body-color: #C8D3E6;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: #9FB0CC;
  --bs-tertiary-color: #8A9BB8;
  --bs-border-color: rgba(255, 255, 255, .09);
  --bs-link-color: #9DBBFF;
  --pp-icon: #8EA0BF;
  --pp-active-bg: rgba(255, 255, 255, .11);
  --pp-active-fg: #FFFFFF;
  color-scheme: dark;
  border-right-color: transparent !important;
}
[data-bs-theme="dark"] .sidebar {
  --pp-sidebar-bg: #08101F;
  --pp-sidebar-grad: linear-gradient(180deg, #0F1D38 0%, #08101F 100%);
}

/* ── Page ───────────────────────────────────────────────────────────────── */
body {
  background: var(--pp-page-grad, var(--pp-page-bg)) fixed !important;
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
}

/* ── Surfaces: solid, hairline-bordered ─────────────────────────────────── */
.card, .list-group-item, .accordion-item {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}
.card { border-radius: var(--au-r-lg); box-shadow: var(--au-shadow-card); }
.card > .card-header:first-child { border-radius: var(--au-r-lg) var(--au-r-lg) 0 0; }
.card-header, .card-footer { background: transparent; border-color: var(--bs-border-color); }
.modal-content { border-radius: 14px; border: 1px solid var(--bs-border-color); box-shadow: var(--au-shadow-md); }
.dropdown-menu, .popover {
  border-radius: 10px; border: 1px solid var(--bs-border-color);
  box-shadow: var(--au-shadow-md); background: var(--bs-body-bg);
}
.dropdown-item { border-radius: 6px; }
.dropdown-menu { padding: .3rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bs-tertiary-bg); }

.table {
  /* the surface, not transparent: the pinned first column paints --bs-body-bg,
     so a transparent table showed the page through every other cell */
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-striped-bg: var(--bs-tertiary-bg);
  --bs-table-hover-bg: var(--bs-tertiary-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-color: var(--bs-body-color);
}
.table > thead th { color: var(--bs-secondary-color) !important; }

/* the top bar and the rail: plain panels on the page */
.navbar { background: var(--pp-page-bg) !important; box-shadow: 0 1px 0 var(--bs-border-color) !important; }
.sidebar { background: var(--pp-sidebar-grad, var(--pp-sidebar-bg)) !important; border-right: 1px solid var(--bs-border-color); }

/* ── Actions ────────────────────────────────────────────────────────────── */
.btn { border-radius: var(--au-r); font-weight: 600; }
.btn-primary {
  --bs-btn-color: #fff !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-border-color: transparent !important;
  --bs-btn-hover-border-color: transparent !important;
  --bs-btn-active-border-color: transparent !important;
  background: var(--pp-primary-grad, var(--bs-primary)) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .18), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled, .btn-primary.disabled { filter: saturate(.3); opacity: .55; box-shadow: none; }
.btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-light {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--bs-body-bg);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--bs-emphasis-color);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-border-color: var(--bs-border-color);
  box-shadow: var(--au-shadow-sm);
}
.btn-outline-primary { --bs-btn-color: var(--bs-primary); }

/* ── Fields ─────────────────────────────────────────────────────────────── */
.form-control, .form-select, .input-group-text {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-emphasis-color);
}
.form-control::placeholder { color: var(--bs-tertiary-color); }
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), .6);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .18);
}

/* ── Pills, badges, alerts ──────────────────────────────────────────────── */
.badge { border-radius: 999px; letter-spacing: .01em; }
.badge.text-bg-secondary, .badge.bg-secondary {
  background: var(--bs-tertiary-bg) !important; color: var(--bs-secondary-color) !important;
  box-shadow: inset 0 0 0 1px var(--bs-border-color);
}
.badge.bg-primary, .badge.text-bg-primary { background: var(--bs-primary) !important; color: #fff !important; }
/* dark: .text-primary icons and labels take the lighter link blue; the
   button blue is tuned for white text on it, not for text on the surface */
[data-bs-theme="dark"] .text-primary { color: var(--bs-link-color) !important; }
/* the accent is for what needs you: the actionable counts in the rail */
.sidebar .badge.text-bg-primary { background: var(--pp-accent) !important; color: var(--pp-on-accent) !important; }

/* calendar day numbers: the Home widget never set a color, so they were link
   blue, and past days faded to 55% (measured 2.3:1). Text colors instead. */
.fc .fc-daygrid-day-number { color: var(--bs-body-color); }
.fc .fc-day-past .fc-daygrid-day-number,
.fc .fc-day-other .fc-daygrid-day-number { opacity: 1; color: var(--bs-tertiary-color); }

/* browser surfaces carry the palette too */
::selection { background: rgba(var(--pp-accent-rgb), .24); }
html { scrollbar-color: var(--bs-secondary-bg) transparent; accent-color: var(--bs-primary); }
:focus-visible { outline-color: var(--bs-primary); }
[data-bs-theme="dark"] .alert { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); }

/* ═══ SIDEBAR ═══════════════════════════════════════════════════════════════
   MEASURED before this pass: no shared left edge (avatar 19px, search icon
   24px, menu icons 20px, Log Out 23px), a profile card running edge to edge
   with rounded corners, three label spacings, 41px rows, and three stacked
   divider lines at the bottom.
   Now ONE column: everything starts at 20px (--sb-x). Rows are flat and
   full width (Jeff did not want rounded items), 34px tall, with a fixed
   18px icon column so every label lines up. Dividers only between the three
   zones: identity + search / navigation / help + account.
   ========================================================================== */
.sidebar { --sb-x: 20px; }

/* identity: a plain row, no card */
.sidebar:not(.sidebar-collapsed) .sidebar-profile {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 16px var(--sb-x) 12px !important; gap: 10px;
}
.sidebar .sidebar-profile:hover { background: var(--bs-tertiary-bg) !important; }
.sidebar .sidebar-profile .pp-avatar, .sidebar .sidebar-profile .pp-avatar-wrap { width: 32px !important; height: 32px !important; }
.sidebar-profile-name { font-size: var(--fs-body) !important; font-weight: 700; }
.sidebar-profile-company { font-size: var(--fs-sm) !important; margin-top: 1px; }
/* the word "Account" becomes a quiet chevron; the row's title says the rest */
.sidebar .sidebar-profile-arrow {
  font-size: 0 !important; width: 14px; height: 14px; flex: none; opacity: 1;
  background: var(--bs-tertiary-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* search: the same left edge, one quiet field */
.sidebar:not(.sidebar-collapsed) .pp-omnisearch.pp-omnisearch--side {
  margin: 0 12px 10px !important; padding: 0 7px !important; height: 34px;   /* 12 + 1px border + 7 = the 20px edge */
  border-radius: var(--au-r); border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); box-shadow: var(--au-shadow-sm); gap: 8px;
  color: var(--bs-tertiary-color); font-size: var(--fs-sm);
}
.sidebar .pp-omnisearch--side:hover { border-color: rgba(var(--bs-primary-rgb), .45); color: var(--bs-secondary-color); }
.sidebar .pp-omnisearch--side > i { width: 18px; text-align: center; font-size: var(--fs-sm); }
.sidebar .pp-omnisearch--side .pp-omnisearch-kbd {
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 4px;
  color: var(--bs-secondary-color); font-size: var(--fs-xs); font-weight: 600; padding: 0 5px; line-height: 18px;
}
#normalSidebarContent > .pp-omnisearch--side + nav { border-top: 1px solid var(--bs-border-color); padding-top: 6px; }

/* rows */
.sidebar:not(.sidebar-collapsed) .my-events-entry {
  padding: 7px var(--sb-x) !important; min-height: 34px;
  border: 0 !important; border-radius: 0 !important;
  color: var(--bs-secondary-color); font-size: var(--fs-sm); font-weight: 600;
}
.sidebar .my-events-entry > span > :is(i, svg):first-child {
  width: 18px; margin-right: 10px !important; text-align: center; color: var(--bs-tertiary-color);
}
.sidebar .my-events-entry:hover { background: var(--bs-tertiary-bg) !important; color: var(--bs-emphasis-color) !important; }
/* the current page: its section's tint (below) and emphasis text, no edge bar */
.sidebar .my-events-entry.active { color: var(--bs-emphasis-color) !important; }
.sidebar .my-events-entry:focus { box-shadow: none; outline: 0; }
.sidebar .my-events-entry:focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), .55) !important; outline-offset: -2px; }
/* ONE accent (2026-10-01, replacing a hue per section): icons are quiet, the
   current page wears the primary as a soft tint, page-title icons and charts
   use the primary. The section-hue rules also needed body:has() selectors that
   re-matched on every DOM change; they are gone with it. */
.sidebar .my-events-entry > span > :is(i, svg):first-child { color: var(--pp-icon); }
.sidebar .my-events-entry.active { background: var(--pp-active-bg) !important; color: var(--pp-active-fg) !important; }
.sidebar .my-events-entry.active > span > :is(i, svg):first-child { color: var(--pp-active-fg); }
#mainPanel :is(h1, .pp-panel-title, .mpp-title, .help-hero-title, .fw-bold) > i:first-child { color: var(--bs-link-color) !important; }

/* counts: a right-hand column of quiet pills */
.sidebar .my-events-entry > .badge { min-width: 22px; padding: 2px 7px; font-size: var(--fs-xs) !important; }

/* section labels: one spacing, one style, the same left edge */
.sidebar:not(.sidebar-collapsed) .sidebar-group-label,
.sidebar:not(.sidebar-collapsed) .sidebar-admin-label {
  padding: 16px var(--sb-x) 6px !important; margin: 0; color: var(--bs-secondary-color) !important;
}
/* Admin is a different kind of section (your role, not a topic): a divider says so */
#adminSidebarSection { border-top: 1px solid var(--bs-border-color); margin-top: 10px; }

/* help + account zone: one divider above it, none between its rows */
.sidebar > nav.border-top { border-top: 1px solid var(--bs-border-color) !important; padding: 6px 0; }
.sidebar .sidebar-collapse-row { border-top: 0 !important; background: transparent !important; }
.sidebar:not(.sidebar-collapsed) .sidebar-collapse-btn {
  padding: 7px var(--sb-x) !important; min-height: 34px; gap: 10px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--bs-secondary-color);
}
.sidebar .sidebar-collapse-btn > i { width: 18px; text-align: center; color: var(--bs-tertiary-color); }
.sidebar .sidebar-logout-btn:hover { background: rgba(220, 53, 69, .08); color: var(--bs-danger); }
.sidebar .sidebar-logout-btn:hover > i { color: var(--bs-danger); }
.sidebar:not(.sidebar-collapsed) .sidebar-foot {
  border-top: 1px solid var(--bs-border-color) !important; padding: 10px 8px 10px var(--sb-x) !important; gap: 6px;
}
.sidebar .sidebar-foot-logo { font-size: 20px; }
.sidebar .sidebar-foot-name { color: var(--bs-emphasis-color); }
.sidebar .btn-version-link { color: var(--bs-tertiary-color); }

/* the phone menu: same layout, touch-sized rows */
@media (max-width: 991.98px) {
  body.pp-menu-open .sidebar .my-events-entry,
  body.pp-menu-open .sidebar .sidebar-collapse-btn { min-height: 42px; }
}

/* ── List-page headers on a phone ──────────────────────────────────────
   Jeff, 2026-09-30, on the phone Clients page: "Fix all headers on mobile. It
   looks sloppy." MEASURED on Affiliates, Clients, Parties, Attendees, Orders
   and Leads: the search icon sat in its own gray box against a heavier input
   border (two pieces, not one bar), and portal.css's phone rule gives search
   the whole first line, so the columns button was stranded on a line of its
   own. Now: one search bar with the icon inside it, the columns button beside
   it, and any filters sharing the second line at the same height. */
@media (max-width: 991.98px) {
  .pp-panel-head { --pp-ctl-h: 42px; padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .pp-panel-head .input-group {
    order: 0;
    /* leaves exactly one square button plus the row gap (the head is .gap-2, 8px;
       measured: a 50px button + 8px gap did not fit beside calc(100% - 3.1rem)) */
    flex: 1 1 calc(100% - var(--pp-ctl-h) - .5rem) !important;
    min-width: calc(100% - var(--pp-ctl-h) - .5rem) !important;
    width: auto !important;
  }
  .pp-panel-head .dropdown:has(> [title="Show/hide columns"]) { order: 1; margin-left: auto; }
  .pp-panel-head .dropdown:has(> [title="Show/hide columns"]) > .btn { width: var(--pp-ctl-h); padding: 0; }
  .pp-panel-head > :not(.input-group):not(.dropdown:has(> [title="Show/hide columns"])) { order: 2; }
  .pp-panel-head .form-select { flex: 1 1 0; }
  .pp-panel-head .btn { min-width: var(--pp-ctl-h); }
  /* ⚠ a Bootstrap switch floats its input into padding-left; in a flex row that
     float is ignored and the text slid under the knob (measured on Attendees) */
  .pp-panel-head .form-check { display: flex; align-items: center; gap: .55rem; min-height: var(--pp-ctl-h); margin: 0; padding-left: 0; }
  .pp-panel-head .form-check > .form-check-input { float: none; margin: 0; flex: none; }
}

/* one search bar: the icon lives inside the field, one border, one radius */
.pp-panel-head .input-group,
.pp-filter-row .input-group { border-radius: var(--au-r); }
.pp-panel-head .input-group > .input-group-text,
.pp-filter-row .input-group > .input-group-text {
  background: var(--bs-body-bg);
  border-right: 0;
  border-radius: var(--au-r) 0 0 var(--au-r);
  color: var(--bs-tertiary-color);
  padding-right: .35rem;
}
.pp-panel-head .input-group > .form-control,
.pp-filter-row .input-group > .form-control {
  border-left: 0;
  border-radius: 0 var(--au-r) var(--au-r) 0;
  padding-left: .35rem;
}
.pp-panel-head .input-group > .input-group-text,
.pp-panel-head .input-group > .form-control,
.pp-filter-row .input-group > .input-group-text,
.pp-filter-row .input-group > .form-control { border-color: var(--bs-border-color); }
.pp-panel-head .input-group:focus-within,
.pp-filter-row .input-group:focus-within { box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .18); }
.pp-panel-head .input-group:focus-within > *,
.pp-filter-row .input-group:focus-within > * { border-color: rgba(var(--bs-primary-rgb), .6); }
.pp-panel-head .input-group > .form-control:focus,
.pp-filter-row .input-group > .form-control:focus { box-shadow: none; }

/* ═══ TYPE SYSTEM ═══════════════════════════════════════════════════════════
   Jeff, 2026-09-30: "Do a typography pass. Too many fonts and styles here."
   MEASURED on 13 preview pages, ~2,000 text elements: 4 families (Inter, DM Sans,
   Gabarito, a monospace), 22 sizes, 5 weights, 12 different small-caps label
   treatments. Sources: 34 hard-coded 'DM Sans' rules; Bootstrap's em-relative
   .small/.badge/code/kbd landing on 14.35 / 9.6 / 14.76 / 13.45px; each page
   inventing its own eyebrow label.

   Now:  2 families   Gabarito (headings, big numbers) · Inter (everything else)
         7 sizes      11.2 · 12.8 · 14.4 · 16.8 · 20 · 24 · 36 px  (--fs-* tokens)
         3 weights    400 · 600 · 700 (labels)   Gabarito display: 600 headings, 700 big figures
         1 label      11.2px / 700 / .08em uppercase, secondary color
   ========================================================================== */
:root {
  --fs-micro: .7rem;          /* merged with --fs-xs: two roles 0.2px apart read as a mistake */
  --fs-xs: .7rem;
  --fs-display: 2.25rem;      /* hero figures: Insights, My Network */
  /* the base itself is a step: vibe presets set 1.025rem (16.4px), which every
     unsized cell and row inherited (Insights rows, table cells) */
  --bs-body-font-size: var(--fs-body) !important;
}

/* one body family, everywhere, including the controls and the calendar */
body, button, input, select, textarea, .btn, .badge, .form-control, .form-select,
.dropdown-item, .fc, .fc .fc-button, .tooltip, .popover { font-family: var(--bs-body-font-family) !important; }
/* codes and key caps stay Inter: tabular figures keep order numbers aligned */
code, kbd, samp, pre { font-family: var(--bs-body-font-family) !important; font-size: 1em !important;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; }
code { color: inherit; font-weight: 600; }

/* the display family, and only for display */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .card-title, .modal-title, .offcanvas-title,
.pp-panel-title, .help-hero-title, .insights-stat-value, .net-hero-num, .display-1, .display-2, .display-3 {
  font-family: var(--au-display) !important; font-weight: 600 !important; letter-spacing: -.01em;
  color: var(--bs-emphasis-color);
}
h1, .h1, .help-hero-title { font-size: var(--fs-xl) !important; }
h2, .h2 { font-size: var(--fs-lg); }
h3, .h3, h4, .h4, h5, .h5, h6, .h6, .card-title, .modal-title, .pp-panel-title { font-size: var(--fs-md); }
h5, .h5, h6, .h6 { font-family: var(--au-display); font-weight: 600; }

/* ONE page title. Jeff: "affiliates page heading is different than the others.
   make sure they all match." MEASURED on 19 pages: five treatments (a 20px
   Gabarito toolbar title, Affiliates' 12.8px breadcrumb, 14.4 and 16.8px Inter
   bold, a 24px h1), three left edges (16, 24, 59px). Now every page's title is
   this h1, in a bar with the 24px (px-4) edge: toolbar pages keep their controls
   on the same row, the rest put one .pp-page-sub line under it. */
.pp-page-title {
  display: flex; align-items: center; gap: .55rem; margin: 0;
  font-family: var(--au-display) !important; font-size: var(--fs-lg) !important;
  font-weight: 600 !important; line-height: 1.2; letter-spacing: -.01em;
  color: var(--bs-emphasis-color);
}
.pp-page-title > i:first-child { font-size: .85em; width: 1.15em; text-align: center; flex: none; }
.pp-page-title > .badge { font-family: var(--bs-body-font-family) !important; }
.pp-page-sub { margin: .3rem 0 0; font-size: var(--fs-sm) !important; color: var(--bs-secondary-color); }

/* ── Home heading (js/my-stats.js, both roles) ──────────────────────────────
   Home's title is the one step bigger than the page titles: it greets you.
   Under it, one list of rows (not a grid of cards): an icon tile in the
   row's section hue, a sentence, a quiet detail line, and a chevron when the
   row leads somewhere. */
.home-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .75rem 1.5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.home-title {
  margin: 0; font-family: var(--au-display) !important; font-size: var(--fs-xl) !important;
  font-weight: 600 !important; line-height: 1.15; letter-spacing: -.015em; color: var(--bs-emphasis-color);
}
.home-sub { margin: .3rem 0 0; font-size: var(--fs-body); color: var(--bs-secondary-color); }
.home-action { flex: none; }
.home-rows {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: var(--au-r-lg); box-shadow: var(--au-shadow-card);
}
.home-rows > li + li { border-top: 1px solid var(--bs-border-color); }
.home-rows + * { margin-top: 1rem; }
.home-row {
  display: flex; align-items: center; gap: .85rem; min-height: 62px; padding: .7rem 1rem;
  color: var(--bs-body-color); text-decoration: none;
}
a.home-row:hover, a.home-row:focus-visible { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
a.home-row:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.home-row-ico {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  color: var(--hue); background: color-mix(in srgb, var(--hue) 14%, transparent);
}
.home-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-row-main { font-weight: 600; color: var(--bs-emphasis-color); }
.home-row-main strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.home-row-detail { font-size: var(--fs-sm); color: var(--bs-secondary-color); }
.home-row-detail strong { color: var(--bs-emphasis-color); }
.home-row-go { flex: none; font-size: var(--fs-xs); color: var(--bs-tertiary-color); transition: transform var(--pp-t); }
a.home-row:hover .home-row-go { transform: translateX(2px); color: var(--bs-secondary-color); }
/* the link row: the URL is the sentence; copy and help sit at the end */
.home-link-url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-link-color); }
.home-row-tools { flex: none; display: flex; align-items: center; gap: .15rem; }
.home-row-help { border: 0; background: none; padding: .35rem; line-height: 1; color: var(--bs-tertiary-color); cursor: help; }
.home-row-help:hover, .home-row-help:focus-visible { color: var(--bs-primary); }
@media (max-width: 575.98px) {
  .home-head { align-items: flex-start; }
  .home-action { width: 100%; }
}
/* Jeff: "that heading font is too heavy". Headings 600, the big figures 700 (was 800 for all) */
.insights-stat-value, .net-hero-num { font-size: var(--fs-display) !important; line-height: 1.05; font-weight: 700 !important; }

/* sizes: every em-relative helper snaps to a step */
.small, small, .form-text, .text-muted.small { font-size: var(--fs-sm) !important; }
.alert { font-size: var(--fs-body); }
.btn { font-size: var(--fs-body); }
.btn-sm, .btn-group-sm > .btn { font-size: var(--fs-sm); }
.btn-lg { font-size: var(--fs-md); }
.badge { font-size: var(--fs-xs) !important; font-weight: 700 !important; }
.form-control, .form-select { font-size: var(--fs-body); }
.form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-text { font-size: var(--fs-sm); }
/* Knowledge Base articles inherited the theme preset's base size (theme.js
   --bs-body-font-size: 1.025rem = 16.4px). Long-form reading gets the md step. */
#helpManager .help-page { font-size: var(--fs-md); }

/* weights: 500 retires to 600 */
.fw-medium, .fw-500, .fcal-ev-title, .pp-hw-item { font-weight: 600 !important; }
/* #fullCalGrid .fc-daygrid-day-number sets 500 with an id selector */
.fc .fc-button, .fc .fc-daygrid-day-number { font-weight: 600 !important; }

/* ONE small-caps label. Everything uppercase and small is this, and nothing else. */
.text-uppercase, th, .pp-eyebrow, .sidebar-group-label, .sidebar-admin-label,
.net-side-title, .net-link-lab, .net-hero-lab, .insights-h2, .insights-stat-label, .insights-live,
.insights-open-go, .fcal-event-dow, .fc .fc-col-header-cell-cushion, .ann-postas-label {
  font-family: var(--bs-body-font-family) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.sidebar-group-label, .sidebar-admin-label, .pp-eyebrow, .net-side-title, .net-hero-lab,
.insights-stat-label, .fcal-event-dow { color: var(--bs-secondary-color) !important; }

/* the phone sort menu exists only for cards */
.pp-card-sort { display: none; }

/* ═══ PHONES ═════════════════════════════════════════════════════════════════
   Jeff, 2026-10-01: "the mobile stylesheet needs a lot of attention. I see a
   lot of things overflowing and not ideally placed." MEASURED at 390px on
   every page, both roles (ppux/mob/audit.mjs): no page scrolled sideways, but
   every list table did (260-780px), the Pixi orb sat on top of the last row,
   Save buttons and text on every page, the Training Library row ran 40px off
   screen, Referrals squeezed its level descriptions into a 10-character
   column, and 30+ controls were under 40px tall. */
@media (max-width: 767.98px) {
  /* ── List tables become one card per row (labels: js/tables.js) ───────── */
  table.pp-cards, table.pp-cards > tbody {
    display: block; width: 100% !important; min-width: 0 !important; table-layout: auto !important;
  }
  table.pp-cards > thead { display: none; }
  table.pp-cards > tbody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem 1rem;
    position: relative; padding: .9rem 1rem; border-bottom: 1px solid var(--bs-border-color);
  }
  table.pp-cards > tbody > tr > td {
    display: block; min-width: 0; width: auto !important; max-width: none !important;
    padding: 0 !important; border: 0 !important; background: transparent !important;
    position: static !important; text-align: left !important; box-shadow: none !important;
    white-space: normal !important; overflow-wrap: anywhere;
  }
  /* what a desktop column truncates, a card has room to show */
  table.pp-cards > tbody > tr > td :is(div, span, a, p, small) {
    white-space: normal !important; text-overflow: clip !important; max-width: none !important;
  }
  table.pp-cards > tbody > tr > td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--bs-secondary-color);
  }
  table.pp-cards td:is([data-card], [data-label=""])::before { display: none; }
  table.pp-cards td[data-empty] { display: none !important; }
  table.pp-cards td[data-card="title"] {
    grid-column: 1 / -1; font-size: var(--fs-md); font-weight: 600; color: var(--bs-emphasis-color);
  }
  table.pp-cards td:is([data-card="full"], [colspan]) { grid-column: 1 / -1; }
  table.pp-cards td[data-card="actions"] {
    grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; gap: .5rem;
    justify-content: flex-end; align-items: center;
  }
  /* checkbox or thumbnail: the card's top-right corner, clear of the title */
  /* (the desktop pins this column with left:0, so every side is set) */
  table.pp-cards td[data-card="lead"] { position: absolute !important; top: .9rem !important; right: 1rem !important; left: auto !important; }
  table.pp-cards tr:has(> td[data-card="lead"]) > td[data-card="title"] { padding-right: 3.5rem !important; }
  table.pp-cards td[data-card="lead"] img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }

  /* ── What only made sense for a table ─────────────────────────────────
     Jeff: "If it isn't tables on mobile, why is the table header toggle
     button visible." Show/hide columns goes; the search takes its place.
     Sorting lived in the header row the cards hide, so it comes back as a
     "Sort by" menu (js/tables.js _ppCardSort). */
  .pp-panel-head .dropdown:has(> [title="Show/hide columns"]) { display: none !important; }
  .pp-panel-head .input-group { flex-basis: 100% !important; min-width: 100% !important; }
  .pp-card-sort {
    display: flex; align-items: center; gap: .5rem; padding: .65rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .pp-card-sort-lab {
    display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; margin: 0;
    font-size: var(--fs-sm); font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap;
  }
  .pp-card-sort .form-select { flex: 1 1 auto; min-width: 0; }
  .pp-card-sort .btn { flex: none; width: 40px; }

  /* ── Room under the last row for the Pixi orb, which is now smaller ───── */
  .pixi-launcher { width: 48px; height: 48px; }
  .affmgr-table-wrap,
  #mainPanel > .overflow-auto, #mainPanel > .h-100.overflow-auto, #mainPanel > .h-100 > .overflow-auto,
  #welcomeState { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }

  /* ── Training Library: the title wraps, the tools go under it ─────────── */
  .webinar-card > .d-flex { flex-wrap: wrap; }
  .webinar-card > .d-flex > .btn { flex: 1 1 100%; min-width: 0; }
  .webinar-card > .d-flex > .btn .fw-semibold { white-space: normal !important; }
  .webinar-card > .d-flex > .d-flex:not(:empty) { padding: 0 1rem .75rem 3.6rem; }
  #trainingLibraryAdminControls .btn { white-space: nowrap; }

  /* ── Referrals, rates by level: level, % and switch on one line, the
        description under them at full width ─────────────────────────────── */
  #referralConfigBody table > tbody > tr {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .35rem .75rem;
    padding: .65rem 0; border-bottom: 1px solid var(--bs-border-color);
  }
  #referralConfigBody table > tbody > tr > td { display: contents; }
  #referralConfigBody table > tbody > tr > td:nth-child(2) { display: block; grid-row: 2; grid-column: 1 / -1; padding: 0; border: 0; }
  #referralConfigBody table > tbody > tr > td > * { min-width: 0; }
  #referralConfigBody .input-group { width: 7rem; }
}

/* ── Thumb-sized controls on phones and tablets ─────────────────────────── */
@media (max-width: 991.98px) {
  .pp-strip-btn { width: 44px; height: 44px; }
  .tos-banner-review, .tos-banner-accept { min-height: 40px; display: inline-flex; align-items: center; }
  #fullCalGrid .fc-button, .fcal-widget-card .fc-button { min-height: 40px; min-width: 40px; }
  .net-seg { min-height: 40px; }
  #mainPanel .btn-sm:not(.btn-link) { min-height: 40px; }
  /* fields: .form-control-sm was 29px tall (Payouts rates, the announcement composer) */
  #mainPanel :is(.form-control, .form-select, .input-group > .input-group-text) { min-height: 40px; }
  .help-toc button { min-height: 40px; }
  #mainPanel .form-switch .form-check-input { width: 2.5em; height: 1.4em; }
}

/* Insights' "who is producing" figures were one nowrap line ("28 parties ·
   10 clients · 10 attendees …"), 15px wider than a 360px phone. */
@media (max-width: 575.98px) { .insights-prod-n { white-space: normal !important; } }

/* Add a Picture Party's numbered steps: the number had no style anywhere, so
   it ran into its heading — "1Where is the party?" (found 2026-10-01). */
.addparty-step-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-weight: 600; color: var(--bs-emphasis-color); }
.addparty-step-n {
  display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: rgba(var(--bs-primary-rgb), .14); color: var(--bs-link-color);
  font-size: var(--fs-xs); font-weight: 700;
}

/* The search palette's footer teaches keys (↑↓ navigate, ↵ select, esc close)
   that a touch screen does not have. */
@media (hover: none) and (pointer: coarse) { .cmdk-footer { display: none; } }

/* Client page on a phone (found 2026-10-01):
   - an admin who opened a client from the Clients list saw BOTH the breadcrumb
     (Affiliates / Jamie Polito / Summer Hartman) and a "‹ My Clients" link,
     which is not where they came from. The link is for an affiliate's own
     clients, where there is no breadcrumb.
   - "CLIENT INFO" wrapped to two lines and "Add party" to two beside it;
     kept on one line, the label then sat under the buttons. */
@media (max-width: 767.98px) {
  #clientBreadcrumbBar:not([style*="none"]) ~ #clientPanel .mobile-back-btn { display: none !important; }
  /* the label repeats what the card is (the client's name is right under it);
     on a phone the three buttons need the row */
  #clientInfoCard > .card-header > span { display: none; }
  #clientInfoCard > .card-header { justify-content: flex-end !important; }
  #clientInfoCard > .card-header .btn { white-space: nowrap; }
}