/* ── Accessibility utilities ─────────────────────────────────────────
   Skip link — first focusable element on every page. Hidden visually
   until keyboard focus brings it forward. Required for WCAG 2.4.1. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 8px;
  z-index: 99999;
  background: var(--bs-primary);
  color: var(--pp-on-primary, #fff);
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: top .15s;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--bs-emphasis-color); outline-offset: 2px; }

/* Global focus-visible — every focusable element gets a clearly visible
   indicator. Project-wide fallback so any element that strips Bootstrap's
   default still has accessible focus. Required for WCAG 2.4.7 + 1.4.11. */
:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
/* Form-control focus: use Bootstrap's box-shadow ring instead of an outline
   since the ring works with rounded corners and doesn't shift layout. */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: none;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .35);
}

/* Empty live-region alerts must remain in the DOM so screen readers see
   them as persistent regions; visually hide them when they have no text. */
.alert:empty { display: none !important; padding: 0; border: 0; margin: 0; }

:root {
  --brand: #0f172a;  /* login gradient */
  --gold:  #d97706;  /* warm accent (no Bootstrap equiv) */
  --pink:  #e879f9;  /* fuchsia accent (no Bootstrap equiv) */
  --bs-body-font-family: 'DM Sans', sans-serif;
  --bs-btn-font-family:  'DM Sans', sans-serif;
  --bs-btn-font-weight:  600;
  --bs-btn-font-size:    .875rem;
  /* Semantic calendar event colors — WCAG AA against the body bg.
     Presets can override per-theme via these same names. */
  --pp-accent-party: var(--bs-primary);
  --pp-accent-order: #d97706;     /* amber-600  — 5.5:1 on white, 5.5:1 on #212529 */
  --pp-accent-ann:   #059669;     /* emerald-600 — 4.5:1 on white, 4.6:1 on #212529 */
  /* Smart text-on-bg colors — pick white or dark per background luminance so
     contrast stays AA when accents are themed or in dark mode. theme.js
     overrides --pp-on-primary per preset; the accents below are amber/emerald
     family (mid-luminance) so dark text is the right answer in both modes. */
  --pp-on-primary:      #fff;     /* default for dark-ish Bootstrap primary #0d6efd */
  --pp-on-accent-order: #1a0f00;  /* dark text — 5.1:1 on amber-600, 10.5:1 on amber-400 */
  --pp-on-accent-ann:   #052e1a;  /* dark text — 5.0:1 on emerald-600, 10.5:1 on emerald-400 */
}
* { box-sizing: border-box; }
/* Lock the page to the viewport: no scrolling above the topbar, no rubber-band
   bounce when scrolling already-pinned content. iOS Safari especially likes to
   rubber-band the html element even when body is overflow:hidden — overscroll-
   behavior on both html and body kills that. height:100% + position:fixed on
   html guarantees no chrome-scroll ever exposes white space above the topbar. */
html, body {
  overscroll-behavior: none;
  height: 100%;
  overflow: hidden;
}
html { position: fixed; inset: 0; width: 100%; }
body { font-family: 'DM Sans', sans-serif; height: 100%; overflow: hidden; }

/* ── Login screen ── */
#loginScreen {
  position: fixed; inset: 0; background: linear-gradient(135deg, var(--brand) 0%, #0f2456 100%);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.login-card {
  background: var(--bs-body-bg); border-radius: 20px; padding: 2.75rem 2.25rem;
  width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-card img { height: 34px; margin-bottom: 1.75rem; }
.login-card h2 { font-family: 'Comfortaa', sans-serif; font-size: 1.5rem; color: var(--bs-emphasis-color); margin-bottom: .25rem; }
.login-card p  { color: var(--bs-secondary-color); font-size: .9rem; margin-bottom: 1.75rem; }

/* ── Topbar elements ── */
.btn-dash-home { display:inline-flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:700; color:var(--bs-emphasis-color); text-decoration:none; padding:.375rem .6rem; border-radius:8px; transition:background .15s; }
.btn-dash-home:hover { color:var(--bs-emphasis-color); text-decoration:none; background:rgba(0,0,0,.06); }

/* ── Sidebar ── */
.sidebar {
  background: var(--bs-body-bg);
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.3s ease, min-width 0.3s ease;
}
input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-clear-btn {
  flex-shrink: 0; width: 24px; height: 24px; border: none; border-radius: 50%;
  background: var(--bs-tertiary-bg); cursor: pointer; color: var(--bs-secondary-color);
  display: flex; align-items: center; justify-content: center; font-size: .72rem;
  transition: background .15s; padding: 0;
}
.search-clear-btn:hover { background: var(--bs-border-color); color: var(--bs-emphasis-color); }
.cat-dropdown {
  position: absolute; top: calc(100% + 2px); left: 1rem; z-index: 200;
  background: var(--bs-body-bg); border: 1.5px solid var(--bs-border-color); border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12); min-width: 168px; overflow: hidden;
}
.cat-dropdown-item {
  padding: .55rem .9rem; font-size: .86rem; cursor: pointer;
  display: flex; align-items: center; gap: .5rem; color: var(--bs-body-color); transition: background .1s;
}
.cat-dropdown-item:hover { background: var(--bs-tertiary-bg); }
.cat-dropdown-item.active { color: var(--bs-primary); font-weight: 600; }
.cat-dropdown-item i { width: .9rem; text-align: center; font-size: .8rem; }
.client-list { padding: .5rem 0; }
.clients-section { flex: 1; overflow-y: auto; min-height: 0; }
.my-events-entry {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 1.25rem; cursor: pointer;
  /* reset native button chrome when element is a <button> */
  background: none; border: none; border-radius: 0; width: 100%; text-align: left;
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--bs-secondary-color); border-left: 3px solid transparent;
  transition: background .15s, border-color .15s;
}
.my-events-entry:hover { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); }
.my-events-entry.active { background: rgba(var(--bs-primary-rgb),.08); border-left-color: var(--bs-primary); color: var(--bs-primary); }
[data-bs-theme="dark"] .my-events-entry.active { background: rgba(var(--bs-primary-rgb),.22); color: color-mix(in srgb, var(--bs-primary) 60%, #fff); }
#adminSidebarSection .my-events-entry.active { background: rgba(220,38,38,.08); border-left-color: #dc2626; color: #dc2626; }
[data-bs-theme="dark"] #adminSidebarSection .my-events-entry.active { background: rgba(220,38,38,.22); color: #ff8a8a; }
.client-item {
  padding: .8rem 1.25rem; cursor: pointer;
  border-left: 3px solid transparent;
  transition: all .15s;
}
.client-item:hover { background: var(--bs-tertiary-bg); }
.client-item.active { background: rgba(var(--bs-primary-rgb),.08); border-left-color: var(--bs-primary); }
.client-name { font-weight: 600; font-size: .95rem; color: var(--bs-emphasis-color); }
.client-email { font-size: .82rem; color: var(--bs-secondary-color); margin-top: 2px; }
.cat-icon-chip {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.empty-clients {
  text-align: center; padding: 2rem 1.25rem; color: var(--bs-secondary-color); font-size: .85rem;
}

/* ── Context indicator bar ── */
/* ── Sidebar profile card ── */
.sidebar-profile {
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 1.1rem; border-bottom: 1px solid var(--bs-border-color);
  /* reset native button chrome when element is a <button> */
  border-top: none; border-right: none; border-radius: 0; width: 100%; text-align: left;
  background: var(--bs-tertiary-bg); flex-shrink: 0; min-width: 0;
}
.sidebar-profile-info { min-width: 0; flex: 1; }
.sidebar-profile-name { font-weight: 700; font-size: .875rem; color: var(--bs-emphasis-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.sidebar-profile-company { font-size: .73rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; margin-top: .08rem; }
.sidebar-profile:hover { background: var(--bs-secondary-bg); }
.sidebar-profile-arrow { font-size: .65rem; color: var(--bs-secondary-color); flex-shrink: 0; opacity: .5; }

/* ── Upcoming parties list ── */
.upcoming-party-row { display:flex; gap:.65rem; align-items:flex-start; padding:.45rem .55rem; border-radius:8px; margin-bottom:2px; border-left:3px solid var(--bs-border-color); transition:background .12s; }
.upcoming-party-row:hover { background:var(--bs-tertiary-bg); }
.upcoming-party-row.status-upcoming { border-color:#15803d; }
.upcoming-party-row.status-today    { border-color:var(--bs-primary); }
.upcoming-party-row.status-past     { border-color:var(--bs-border-color); opacity:.7; }
.upcoming-date-block { display:flex; flex-direction:column; align-items:center; width:28px; flex-shrink:0; padding-top:.05rem; }
.upcoming-date-dow { font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--bs-secondary-color); line-height:1; }
.upcoming-date-num { font-size:1rem; font-weight:700; line-height:1.1; color:var(--bs-emphasis-color); }
.upcoming-party-row.status-upcoming .upcoming-date-num { color:#15803d; }
.upcoming-party-row.status-today    .upcoming-date-num { color:var(--bs-primary); }
.upcoming-party-info { min-width:0; padding-top:.05rem; }
.upcoming-party-title { font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--bs-emphasis-color); }
.upcoming-party-title a { color:inherit; text-decoration:none; }
.upcoming-party-title a:hover { color:var(--bs-primary); }
.upcoming-party-client { font-size:.72rem; color:var(--bs-secondary-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.upcoming-month-hdr { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--bs-secondary-color); padding:.65rem .25rem .3rem; border-bottom:1px solid var(--bs-border-color); margin-bottom:.25rem; font-weight:700; }
.upcoming-month-hdr:first-child { padding-top:.1rem; }

/* ── Admin stats strip ──
   auto-fit wraps from 5-up on wide screens down to 2-up on tablets without
   needing a hand-tuned breakpoint per card-count. Mobile override below
   pins it to 2 columns with a sideways card layout. */
.stats-nums {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .45rem; margin-bottom: .5rem;
}
.stats-charts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .45rem;
}
.stat-chart {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  padding: .55rem .75rem;
  display: flex; flex-direction: column; min-height: 110px;
}
.stat-chart-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.stat-chart-lbl {
  font-size: .62rem; color: var(--bs-secondary-color);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  display: inline-flex; align-items: center; gap: .35rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-chart-lbl i { color: var(--bs-primary); font-size: .68rem; }
.stat-chart-now {
  font-size: 1.05rem; font-weight: 700; color: var(--bs-emphasis-color);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.stat-chart-spark {
  flex: 1; display: flex; align-items: stretch; margin: .35rem 0 .25rem;
  min-height: 38px;
}
.pp-sparkline { width: 100%; height: 100%; display: block; color: var(--bs-primary); }
.pp-sparkline-area { fill: currentColor; fill-opacity: .14; stroke: none; }
.pp-sparkline-line {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.stat-chart-sub {
  font-size: .67rem; color: var(--bs-secondary-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-leaderboard { min-height: 140px; }
.stat-podium {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: end; gap: .35rem; margin-top: .35rem; padding-top: .25rem;
}
.podium-slot {
  display: flex; flex-direction: column; align-items: center;
  min-width: 0; cursor: pointer;
}
.podium-empty { cursor: default; opacity: .55; }
.podium-medal { font-size: 1rem; line-height: 1; margin-bottom: .15rem; }
.podium-1 .podium-medal { color: #f59e0b; font-size: 1.25rem; }
.podium-2 .podium-medal { color: #9ca3af; }
.podium-3 .podium-medal { color: #b45309; }
.podium-name {
  font-size: .7rem; font-weight: 600; color: var(--bs-emphasis-color);
  text-align: center; line-height: 1.15; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.podium-metric {
  font-size: .6rem; color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums; margin: .05rem 0 .2rem;
}
.podium-block {
  width: 100%; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; color: #fff;
  border-radius: 4px 4px 0 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 1px 0 rgba(0,0,0,.06);
}
.podium-1 .podium-block { height: 52px; background: linear-gradient(180deg,#fde68a,#f59e0b); }
.podium-2 .podium-block { height: 36px; background: linear-gradient(180deg,#e5e7eb,#9ca3af); }
.podium-3 .podium-block { height: 22px; background: linear-gradient(180deg,#fcd9b6,#b45309); }

/* Top-affiliates list — sits as a stat-chart tile alongside DAU / signups
   / orders, replacing the standalone podium widget. */
.top-aff-list { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.top-aff-list li {
  display: flex; gap: .4rem; align-items: baseline; min-width: 0;
  padding: .25rem .25rem; border-radius: .25rem; cursor: pointer;
  font-size: .8rem;
}
.top-aff-list li:hover { background: var(--bs-tertiary-bg); }
.top-aff-list li:hover .top-aff-name { color: var(--bs-primary); }
.top-aff-rank { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; font-weight: 600; width: 1.2em; }
.top-aff-name { font-weight: 600; color: var(--bs-emphasis-color); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-aff-metric { color: var(--bs-secondary-color); font-size: .7rem; font-variant-numeric: tabular-nums; }
.top-aff-empty { color: var(--bs-secondary-color); font-size: .75rem; padding: .35rem .25rem; cursor: default; list-style: none; }
.podium-empty .podium-block {
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.04);
}
.podium-slot:not(.podium-empty):hover .podium-name { color: var(--bs-primary); }
.podium-slot:not(.podium-empty):hover .podium-block { filter: brightness(1.05); }
.stat-num {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; row-gap: 0;
  padding: .55rem .7rem; text-align: left;
}
.stat-num i {
  grid-row: 1 / 3; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(var(--bs-primary-rgb),.1); color: var(--bs-primary); font-size: .72rem;
  margin-bottom: 0; flex-shrink: 0;
}
.stat-num-val { grid-column: 2; font-size: 1.15rem; font-weight: 700; color: var(--bs-emphasis-color); line-height: 1.1; }
.stat-num-lbl { grid-column: 2; font-size: .65rem; color: var(--bs-secondary-color); margin-top: .1rem; line-height: 1.2; }
/* Desktop layout already uses the compact horizontal-icon style by default;
   keep these breakpoints to tighten further and stay 2-col on narrow widths. */
@media (max-width: 900px) {
  .stats-nums { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .stats-nums { grid-template-columns: repeat(2,1fr); gap: .35rem; margin-bottom: .35rem; }
  .stat-num   { padding: .45rem .6rem; }
  .stat-num i { width: 24px; height: 24px; font-size: .68rem; }
  .stat-num-val { font-size: 1.05rem; }
}

/* ── Category collapsed pill ── */
.cat-selected-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .9rem; border: 1.5px solid var(--bs-primary); border-radius: 20px;
  background: rgba(var(--bs-primary-rgb),.08); color: var(--bs-primary); cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: .875rem; font-weight: 500;
  transition: all .15s; white-space: nowrap; margin-bottom: .75rem;
}
.cat-selected-pill:hover { background: rgba(var(--bs-primary-rgb),.14); }
.cat-selected-pill .fa-chevron-down { font-size: .55rem; opacity: .5; }
.btn-add-cat {
  background: none; border: 1.5px dashed var(--bs-border-color); border-radius: 20px;
  padding: .28rem .75rem; font-size: .8rem; color: var(--bs-secondary-color); cursor: pointer;
  font-family: 'DM Sans', sans-serif; display: inline-flex; align-items: center; gap: .35rem;
  transition: all .15s;
}
.btn-add-cat:hover { border-color: var(--bs-primary); color: var(--bs-primary); }

/* ── Events grid ── */
.order-row {
  display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 0;
  border-bottom: 1px solid var(--bs-border-color); font-size: .84rem;
}
.order-row:last-child { border-bottom: none; }
.order-event-name { font-weight: 600; color: var(--bs-emphasis-color); font-size: .82rem; }
.order-meta { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .1rem; }
.events-section-title {
  font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bs-secondary-color); display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
}
.events-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.event-card {
  background: var(--bs-body-bg); border-radius: 10px; border: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden; transition: box-shadow .2s, border-color .2s;
}
.event-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); border-color: rgba(var(--bs-primary-rgb),.5); }
.event-card-cover { width: 100%; height: 110px; object-fit: cover; display: block; }
.event-card-body { padding: .875rem; }
.event-card-title { font-weight: 600; font-size: .88rem; color: var(--bs-emphasis-color); margin-bottom: .35rem; line-height: 1.3; }
.event-card-meta { font-size: .76rem; color: var(--bs-secondary-color); display: flex; flex-direction: column; gap: .2rem; }
.event-card-footer {
  padding: .65rem .875rem; border-top: 1px solid var(--bs-border-color);
  display: flex; align-items: center; gap: .5rem;
}
.btn-print-collateral {
  flex: 1; background: var(--bs-primary); color: var(--pp-on-primary, #fff); border: none; border-radius: 8px;
  padding: .42rem .65rem; font-size: .76rem; font-family: 'DM Sans', sans-serif;
  font-weight: 600; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: .3rem; transition: background .2s;
}
.btn-print-collateral:hover { background: #0369a1; color: #fff; }
.btn-event-orders {
  background: none; border: 1.5px solid var(--bs-border-color); border-radius: 8px;
  padding: .38rem .55rem; font-size: .72rem; cursor: pointer; color: var(--bs-secondary-color);
  font-family: 'DM Sans', sans-serif; transition: all .2s; white-space: nowrap;
  display: flex; align-items: center; gap: .25rem;
}
.btn-event-orders:hover { border-color: var(--bs-primary); color: var(--bs-primary); }

/* ── Bootstrap Modal overrides ── */
.pp-modal { padding: 2rem; border-radius: 12px; border: none; box-shadow: 0 8px 32px rgba(0,0,0,.16); }
.pp-modal h5 { font-weight: 700; font-size: 1rem; color: var(--bs-emphasis-color); margin-bottom: 1.25rem; }

/* Bootstrap-structured catalog modals */
.pp-modal-bs { border-radius: 12px; border: none; box-shadow: 0 8px 32px rgba(0,0,0,.16); background: var(--bs-body-bg); }
.pp-modal-bs .modal-header { padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.pp-modal-bs .modal-title  { font-weight: 700; font-size: 1rem; color: var(--bs-emphasis-color); }
.pp-modal-bs .modal-body   { padding: 1.25rem 1.5rem; }
.pp-modal-bs .modal-footer { padding: .85rem 1.5rem 1.25rem; border-top: 1px solid var(--bs-border-color); gap: .6rem; }

/* Step-number badge for the workflow sections inside Order Details
   (Step 1 Cards, Step 2/3 Shipping, etc.). Small circular numeral that
   visually anchors each section header. */
.pp-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bs-primary); color: var(--pp-on-primary, #fff);
  font-size: .78rem; font-weight: 700;
  flex-shrink: 0;
}

/* ── Print job live-progress modal ──────────────────────────────────
   Opens after Print Cards. Header (icon + title + close), striped
   progress bar that goes solid green on completion, then a single
   status line and any printer-state warning. */
.pp-print-job-modal { border-radius: 12px; border: none; box-shadow: 0 8px 32px rgba(0,0,0,.16); }
.pp-print-job-modal .modal-body   { padding: 1.25rem 1.5rem .75rem; }
.pp-print-job-modal .pp-pj-footer { padding: .65rem 1.25rem 1rem; border-top: 1px solid var(--bs-border-color); }
.pp-pj-hdr {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .85rem; margin-bottom: .85rem;
}
.pp-pj-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(var(--bs-primary-rgb),.1); color: var(--bs-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.pp-pj-titles { min-width: 0; }
.pp-pj-title  { font-weight: 700; font-size: 1rem; color: var(--bs-emphasis-color); line-height: 1.2; }
.pp-pj-sub    { font-size: .78rem; color: var(--bs-secondary-color); margin-top: .15rem;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 4-stage indicator (Queued → Sending → Printing → Done). Each stage is
   a small dot + label; connectors between them fill in as the job
   progresses. State is driven by real signals (CUPS job state + printer
   hardware state via IPP), not a timer — no fake progress bar. */
.pp-pj-stages {
  display: flex; align-items: center; justify-content: space-between;
  gap: .25rem; margin: .25rem 0 .85rem;
}
.pp-pj-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: .25rem; flex: 0 0 auto;
}
.pp-pj-stage-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem;
  border: 1.5px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  transition: background .2s, border-color .2s, color .2s;
}
.pp-pj-stage-label {
  font-size: .68rem; font-weight: 600;
  color: var(--bs-secondary-color);
}
.pp-pj-stage-conn {
  flex: 1 1 0; height: 2px;
  background: var(--bs-border-color);
  transition: background .25s;
}
/* Pending: unfilled, muted. */
.pp-pj-stage--pending .pp-pj-stage-dot   { background: var(--bs-body-bg); color: var(--bs-secondary-color); }
.pp-pj-stage--pending .pp-pj-stage-label { color: var(--bs-secondary-color); }
/* Active: filled with primary, label emphasized + subtle pulse. */
.pp-pj-stage--active .pp-pj-stage-dot {
  background: var(--bs-primary); color: var(--pp-on-primary, #fff);
  border-color: var(--bs-primary);
  animation: pp-pj-stage-pulse 1.4s ease-in-out infinite;
}
.pp-pj-stage--active .pp-pj-stage-label { color: var(--bs-emphasis-color); }
/* Done: filled with success green, no pulse. */
.pp-pj-stage--done .pp-pj-stage-dot {
  background: var(--bs-success); color: #fff; border-color: var(--bs-success);
}
.pp-pj-stage--done .pp-pj-stage-label { color: var(--bs-secondary-color); }
/* Stopped: muted, no animation. */
.pp-pj-stage--stopped .pp-pj-stage-dot {
  background: var(--bs-secondary-bg); color: var(--bs-secondary-color);
  border-color: var(--bs-border-color);
}
/* Connector fill: lit between consecutive done stages (and between the
   last done stage and the active stage). */
.pp-pj-stage--done + .pp-pj-stage-conn,
.pp-pj-stage--done + .pp-pj-stage-conn + .pp-pj-stage--active ~ .pp-pj-stage-conn:not(:has(+ .pp-pj-stage--pending)) {
  /* fallback handled below — using direct + sibling selectors */
}
.pp-pj-stages .pp-pj-stage--done + .pp-pj-stage-conn { background: var(--bs-success); }
@keyframes pp-pj-stage-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), .35); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), 0); }
}
/* Real per-page progress (driven by IPP job-impressions-completed). The
   bar fills based on actual physically-printed sheets, not a time guess. */
.pp-pj-pages-wrap { margin: .25rem 0 .65rem; }
.pp-pj-pages {
  font-size: .78rem; color: var(--bs-emphasis-color); font-weight: 600;
  margin-bottom: .25rem;
}
.pp-pj-bar-track {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--bs-tertiary-bg);
}
.pp-pj-bar-fill {
  height: 100%; width: 0%;
  background: var(--bs-primary);
  transition: width .5s ease;
}
.pp-pj-state {
  font-size: .9rem; font-weight: 600; color: var(--bs-emphasis-color);
  margin-bottom: .25rem;
}
.pp-pj-detail {
  font-size: .8rem; color: var(--bs-secondary-color); line-height: 1.4;
  min-height: 1.2em;
}
.pp-pj-elapsed {
  font-size: .72rem; color: var(--bs-secondary-color);
  margin-top: .45rem; font-variant-numeric: tabular-nums;
}
.pp-pj-meta {
  font-size: .68rem; color: var(--bs-secondary-color);
  margin-top: .55rem; font-family: monospace;
}
.pp-pj-meta code { background: var(--bs-tertiary-bg); padding: .05rem .25rem; border-radius: 3px; font-size: .9em; }
.pp-pj-warn { color: var(--bs-warning-text-emphasis, #b45309); font-weight: 600; }
.pp-pj-warn i { margin-right: .35rem; }

/* ── Avatars ── */
.pp-avatar {
  border-radius: 50%; object-fit: cover; display: inline-block;
  vertical-align: middle; flex-shrink: 0;
}
.pp-avatar-initials {
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: rgba(0,0,0,.38); font-family: 'DM Sans', sans-serif;
  letter-spacing: -.01em; user-select: none; flex-shrink: 0;
}
.pp-avatar-wrap {
  position: relative; display: inline-flex; cursor: pointer; flex-shrink: 0;
}
.pp-avatar-wrap:hover .pp-avatar-overlay { opacity: 1; }
.pp-avatar-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,.38); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s; color: #fff; font-size: .7rem; pointer-events: none;
}

/* ── Bootstrap badge overrides — subtle tinted style ── */
.badge { font-family: 'DM Sans', sans-serif; font-weight: 700; }
.badge.text-bg-secondary { background-color: rgba(var(--bs-secondary-rgb),.15) !important; color: var(--bs-secondary-color) !important; }
.badge.text-bg-primary   { background-color: rgba(var(--bs-primary-rgb),.12)   !important; color: var(--bs-primary)          !important; }

/* ── Bootstrap alert color overrides — via Bootstrap's own vars ── */
.alert-danger  { --bs-alert-bg: #fef2f2; --bs-alert-border-color: #fecaca; --bs-alert-color: #dc2626; }
.alert-success { --bs-alert-bg: #f0fdf4; --bs-alert-border-color: #bbf7d0; --bs-alert-color: #15803d; }
[data-bs-theme="dark"] .alert-danger  { --bs-alert-bg: rgba(220,38,38,.12); --bs-alert-border-color: rgba(220,38,38,.3); --bs-alert-color: #f87171; }
[data-bs-theme="dark"] .alert-success { --bs-alert-bg: rgba(22,163,74,.12); --bs-alert-border-color: rgba(22,163,74,.3); --bs-alert-color: #4ade80; }

/* ── Category picker ── */
.cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .75rem;
}
.cat-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; padding: .5rem .2rem; border: 1.5px solid var(--bs-border-color); border-radius: 8px;
  background: var(--bs-body-bg); cursor: pointer; transition: all .15s;
  font-family: 'DM Sans', sans-serif; font-size: .65rem; color: var(--bs-secondary-color);
  text-align: center; line-height: 1.2;
}
.cat-btn i { font-size: .95rem; color: var(--bs-secondary-color); transition: color .15s; }
.cat-btn:hover:not(.selected) { border-color: var(--bs-border-color); background: var(--bs-tertiary-bg); }
.cat-btn.selected { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.08); color: var(--bs-primary); }
.cat-btn.selected i { color: var(--bs-primary); }

/* ── Bootstrap nav override for admin tabs ── */
.admin-tabs {
  position: sticky; top: 0; z-index: 1; flex-wrap: nowrap;
  background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color);
  border-radius: 0; gap: 0;
}
.admin-tabs .nav-link {
  flex: 1; padding: .45rem .5rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  background: none; border: none; border-bottom: 2px solid transparent;
  border-radius: 0; cursor: pointer;
  color: var(--bs-secondary-color); font-family: 'DM Sans', sans-serif; transition: all .15s;
}
.admin-tabs .nav-link.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); background: none; }
.admin-tabs .nav-link:hover:not(.active) { color: var(--bs-emphasis-color); background: none; }

/* ── Address autocomplete dropdown ── */
#clientAddressDropdown, #profileAddressDropdown, #shipFormAddrDropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 9999;
  background: var(--bs-body-bg); border: 1.5px solid rgba(var(--bs-primary-rgb),.25); border-top: none;
  border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(0,0,0,.1);
  list-style: none; margin: 0; padding: .25rem 0; max-height: 200px; overflow-y: auto;
}
#clientAddressDropdown li, #profileAddressDropdown li, #shipFormAddrDropdown li {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: .875rem;
  border-bottom: 1px solid var(--bs-border-color); color: var(--bs-body-color);
}
#clientAddressDropdown li:last-child, #profileAddressDropdown li:last-child, #shipFormAddrDropdown li:last-child { border-bottom: none; }
#clientAddressDropdown li:hover, #clientAddressDropdown li.pac-active,
#profileAddressDropdown li:hover, #profileAddressDropdown li.pac-active,
#shipFormAddrDropdown li:hover, #shipFormAddrDropdown li.pac-active { background: var(--bs-tertiary-bg); }
#clientAddressDropdown .pac-icon, #profileAddressDropdown .pac-icon, #shipFormAddrDropdown .pac-icon { color: var(--bs-primary); font-size: .75rem; flex-shrink: 0; }
#clientAddressDropdown .pac-secondary, #profileAddressDropdown .pac-secondary, #shipFormAddrDropdown .pac-secondary { color: var(--bs-secondary-color); font-size: .78rem; }

/* ── Shipping address modal ── */
.shipping-opt-card {
  border: 1.5px solid var(--bs-border-color); border-radius: .5rem;
  padding: .7rem .9rem; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.shipping-opt-card:hover { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .03); }
.shipping-opt-card.selected { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); }
.ship-radio {
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid var(--bs-border-color);
  transition: border-color .15s, border-width .1s;
  flex-shrink: 0;
}
.shipping-opt-card.selected .ship-radio { border: 5px solid var(--bs-primary); }
.saved-addr-chip { text-align: left; white-space: normal; font-size: .8rem; }

/* ── Calendar widget ── */
.cal-nav-btn { background:none; border:1.5px solid var(--bs-border-color); border-radius:8px; width:28px; height:28px; cursor:pointer; color:var(--bs-secondary-color); display:flex; align-items:center; justify-content:center; font-size:.68rem; transition:all .15s; flex-shrink:0; }
.cal-nav-btn:hover { border-color:var(--bs-primary); color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.06); }
.cal-nav-btn.active { background:var(--bs-primary); border-color:var(--bs-primary); color:var(--pp-on-primary, #fff); }
.cal-today-btn { background:none; border:1.5px solid var(--bs-border-color); border-radius:8px; padding:0 .55rem; height:28px; cursor:pointer; color:var(--bs-secondary-color); font-size:.68rem; font-weight:600; font-family:inherit; display:flex; align-items:center; transition:all .15s; white-space:nowrap; }
.cal-today-btn:hover { border-color:var(--bs-primary); color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.06); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-dow { font-size:.57rem; font-weight:700; color:var(--bs-secondary-color); text-align:center; padding:.45rem 0 .3rem; text-transform:uppercase; letter-spacing:.05em; }
.cal-day { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:.28rem .05rem .3rem; border-radius:8px; min-height:44px; transition:background .12s; }
.cal-day.cal-has-events, .cal-day.cal-has-ann { cursor:pointer; }
.cal-day-num { font-size:.78rem; color:var(--bs-body-color); width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; line-height:1; transition:background .12s, color .12s; font-weight:400; }
.cal-day.cal-weekend .cal-day-num { color:var(--bs-secondary-color); }
.cal-today .cal-day-num { background:var(--bs-primary); color:var(--pp-on-primary, #fff) !important; font-weight:700; }
.cal-has-events.status-upcoming:not(.cal-today) .cal-day-num { color:#15803d; font-weight:600; }
.cal-has-events.status-past:not(.cal-today)     .cal-day-num { color:var(--bs-secondary-color); }
.cal-day.cal-has-events:hover { background:rgba(var(--bs-primary-rgb),.08); }
.cal-day.cal-has-events.status-upcoming:not(.cal-today):hover { background:rgba(21,128,61,.08); }
.cal-day.cal-has-events.status-past:hover { background:var(--bs-tertiary-bg); }
.cal-day.cal-has-ann:not(.cal-has-events):hover { background:rgba(217,119,6,.1); }
.cal-day.cal-today.cal-has-events:hover .cal-day-num { background:var(--bs-primary); }
.cal-indicators { display:flex; gap:3px; align-items:center; margin-top:3px; min-height:6px; }
.cal-pip { width:18px; height:3px; border-radius:2px; flex-shrink:0; }
.cal-pip.pip-past     { background:#64748b; }   /* slate-500 — 5.3:1 UI on #fff, 4.3:1 on #212529 */
.cal-pip.pip-today    { background:var(--bs-primary); }
.cal-pip.pip-upcoming { background:#15803d; }
.cal-pip.pip-ann      { background:var(--gold,#d97706); }
.cal-ev-extra { font-size:.5rem; font-weight:700; color:var(--bs-secondary-color); line-height:1; }
.cal-ann-only .cal-indicators { opacity:.7; }
.cal-btn-sidebar { background:none; border:1.5px solid var(--bs-border-color); border-radius:8px; width:28px; height:28px; cursor:pointer; color:var(--bs-secondary-color); display:flex; align-items:center; justify-content:center; font-size:.72rem; transition:all .15s; flex-shrink:0; }
.cal-btn-sidebar:hover { border-color:var(--bs-primary); color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.08); }
.day-event-item { padding:.75rem .6rem; border-bottom:1px solid var(--bs-border-color); cursor:pointer; border-radius:6px; transition:background .12s; }
.day-event-item:last-child { border-bottom:none; }
.day-event-item:hover { background:var(--bs-tertiary-bg); }
/* ── Event date input ── */
.event-date-input { border: none; background: none; font-family: 'DM Sans', sans-serif; font-size: .76rem; color: var(--bs-body-color); cursor: pointer; padding: 0; max-width: 130px; outline: none; }
.event-date-input::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; margin-left: 2px; }
.event-date-input:hover::-webkit-calendar-picker-indicator { opacity: 0.8; }
/* ── Event card status colors ── */
.event-card.status-upcoming { border-left: 3px solid #16a34a; }
.event-card.status-today    { border-left: 3px solid var(--bs-primary); }
.event-card.status-past     { border-left: 3px solid var(--bs-border-color); }
.event-card.status-past .event-card-title { color: var(--bs-secondary-color); }

/* ── Failed-image placeholder in card ── */
.event-card-cover-failed {
  width: 100%; height: 110px; background: var(--bs-secondary-subtle);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; color: var(--bs-secondary-color);
}

/* ── Events table view ── */
.events-table { margin-bottom: 0; min-width: 100%; }
.events-table-thumb { width: 44px; height: 32px; object-fit: cover; border-radius: 4px; display: block; }
.events-table-thumb-failed {
  width: 44px; height: 32px; border-radius: 4px;
  background: var(--bs-secondary-subtle); color: var(--bs-secondary-color);
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.event-table-row.status-upcoming > td:nth-child(2) { border-left: 3px solid #16a34a; padding-left: .5rem; }
.event-table-row.status-today > td:nth-child(2)    { border-left: 3px solid var(--bs-primary); padding-left: .5rem; }
.event-table-row.status-past > td:nth-child(2)     { border-left: 3px solid var(--bs-border-color); padding-left: .5rem; }

/* ── Settings offcanvas ── */
.settings-oc-hdr {
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}
.settings-oc-hdr .offcanvas-title { font-size: .95rem; font-weight: 700; color: var(--bs-emphasis-color); margin: 0; }
.settings-oc-body { padding: 1.25rem; background: var(--bs-body-bg); overflow-y: auto; }

.settings-section {
  margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bs-border-color);
}
.settings-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.settings-section-hdr {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--bs-secondary-color); margin-bottom: .75rem;
  display: flex; align-items: center; gap: .4rem;
}
.settings-section-hdr i { font-size: .78rem; }

.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem 0; gap: 1rem;
}
.settings-label { font-size: .875rem; font-weight: 600; color: var(--bs-body-color); }
.settings-desc  { font-size: .775rem; color: var(--bs-secondary-color); margin-top: .1rem; line-height: 1.4; }

/* ── Sidebar panels ── */
#normalSidebarContent { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
#adminSidebarSection { flex-direction: column; }
.sidebar-section-label {
  padding: .6rem 1.25rem .3rem;
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--bs-secondary-color);
}
/* Collapsible drawer that wraps the admin dashboard's quick-stats,
   charts, and top-affiliates list as a single visual card. */
.admin-dash-drawer {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: var(--bs-body-bg);
  margin-bottom: .75rem;
  overflow: hidden;
}
.admin-dash-drawer-hdr {
  width: 100%; display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem;
  background: transparent; border: 0;
  text-align: left; cursor: pointer;
  font-size: .9rem; font-weight: 600; color: var(--bs-emphasis-color);
}
.admin-dash-drawer-hdr:hover { background: var(--bs-tertiary-bg); }
.admin-dash-drawer-hdr[aria-expanded="true"] { border-bottom: 1px solid var(--bs-border-color); }
.admin-dash-drawer-body { padding: .75rem; }
.admin-dash-chevron { font-size: .75rem; transition: transform .15s ease; color: var(--bs-secondary-color); }
.admin-dash-drawer-hdr[aria-expanded="true"] .admin-dash-chevron { transform: rotate(90deg); }

/* Admin-only "Logged in as <affiliate>" banner. Sits above the topbar
   while an admin is impersonating another user. */
.impersonation-banner {
  display: flex; align-items: center; gap: .75rem;
  padding: .4rem .9rem;
  background: #f59e0b; color: #1f2937;
  font-size: .85rem; font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.impersonation-banner-exit {
  margin-left: auto;
  background: rgba(0,0,0,.08); color: inherit;
  border: 0; border-radius: .25rem;
  padding: .25rem .65rem; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.impersonation-banner-exit:hover { background: rgba(0,0,0,.18); }

.admin-search-bar {
  flex-shrink: 0; padding: .6rem 1rem; border-bottom: 1px solid var(--bs-border-color);
  display: flex; align-items: center; gap: .4rem; position: relative; background: var(--bs-tertiary-bg);
}
.admin-search-bar input {
  flex: 1; min-width: 0; border: 1.5px solid var(--bs-border-color); border-radius: 8px;
  padding: .5rem .75rem; font-size: .88rem; outline: none;
  transition: border-color .2s; font-family: 'DM Sans', sans-serif;
  background: var(--bs-body-bg); color: var(--bs-body-color);
}
.admin-search-bar input:focus { border-color: var(--bs-primary); }
#adminCatSelect { background: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
#adminCatSelect:focus { outline: none; border-color: var(--bs-primary); }
#adminCatSelect.active { border-color: var(--bs-primary); color: var(--bs-primary); }
.admin-list-scroll { flex: 1; min-height: 0; overflow-y: auto; }
#adminSortBar { display:flex; justify-content:space-between; align-items:center; padding:.25rem .9rem; border-bottom:1px solid var(--bs-border-color); flex-shrink:0; position:relative; }
#adminSortDropdown { position:absolute; top:calc(100% + 2px); right:.5rem; z-index:200; background:var(--bs-body-bg); border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.12); min-width:160px; display:none; overflow:hidden; }
.affiliate-item {
  padding: .65rem 1.25rem; cursor: pointer;
  border-left: 3px solid transparent; transition: all .15s;
}
.affiliate-item:hover { background: var(--bs-tertiary-bg); }
.affiliate-item.active { background: rgba(220,38,38,.1); border-left-color: #dc2626; }
.affiliate-item-name { font-weight: 600; font-size: .9rem; color: var(--bs-emphasis-color); }
.affiliate-item-sub  { font-size: .78rem; color: var(--bs-secondary-color); margin-top: 2px; }

/* ── Announcements ── */
#announcementsSection { max-width: none; margin: 0; }
/* pending image thumbnails in composer */
.ann-pending-media { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.ann-pending-thumb { position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.ann-pending-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ann-pending-thumb .rm-btn {
  position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.55); border: none;
  border-radius: 50%; width: 24px; height: 24px; color: #fff; cursor: pointer;
  font-size: .7rem; display: flex; align-items: center; justify-content: center;
}
/* poll composer */
.ann-poll-composer { margin-top: .65rem; border: 1.5px solid var(--bs-border-color); border-radius: 8px; padding: .6rem .75rem; }
.ann-poll-composer-q { width: 100%; border: 1.5px solid var(--bs-border-color); border-radius: 6px; padding: .35rem .6rem; font-family: 'DM Sans',sans-serif; font-size: .85rem; background: var(--bs-body-bg); color: var(--bs-body-color); outline: none; margin-bottom: .45rem; }
.ann-poll-composer-q:focus { border-color: var(--bs-primary); }
.ann-poll-opt-row { display: flex; gap: .4rem; margin-bottom: .35rem; }
.ann-poll-opt-input { flex: 1; border: 1.5px solid var(--bs-border-color); border-radius: 6px; padding: .3rem .55rem; font-family: 'DM Sans',sans-serif; font-size: .83rem; background: var(--bs-body-bg); color: var(--bs-body-color); outline: none; }
.ann-poll-opt-input:focus { border-color: var(--bs-primary); }
.btn-rm-opt { background: none; border: none; color: var(--bs-secondary-color); cursor: pointer; font-size: .8rem; padding: 0 .2rem; }
.btn-rm-opt:hover { color: #dc2626; }
.btn-add-opt { background: none; border: 1.5px dashed var(--bs-border-color); border-radius: 6px; padding: .25rem .6rem; font-size: .8rem; color: var(--bs-secondary-color); cursor: pointer; font-family: 'DM Sans',sans-serif; transition: all .15s; }
.btn-add-opt:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.poll-opt-img-btn { background: none; border: 1.5px solid var(--bs-border-color); border-radius: 6px; padding: .26rem .45rem; font-size: .78rem; color: var(--bs-secondary-color); cursor: pointer; transition: all .15s; flex-shrink: 0; display: inline-flex; align-items: center; }
.poll-opt-img-btn:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.poll-opt-thumb { display: flex; align-items: center; position: relative; flex-shrink: 0; }
.ann-comment-admin-badge { color: var(--bs-primary); font-size: .65rem; vertical-align: middle; margin: 0 .15rem 0 .1rem; }
/* announcement card */
.ann-card { box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.ann-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: .65rem; gap: .5rem;
}
.ann-card-actions { display: flex; gap: .25rem; align-items: center; flex-shrink: 0; }
.ann-pp-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: #f5f3ff; display: flex; align-items: center; justify-content: center;
}
.ann-pp-avatar i { color: var(--bs-primary); font-size: .75rem; }
.ann-author { font-weight: 600; font-size: .88rem; color: var(--bs-emphasis-color); }
.ann-date   { font-size: .76rem; color: var(--bs-secondary-color); margin-top: 1px; }
.ann-body   { font-size: .93rem; color: var(--bs-body-color); line-height: 1.7; margin-bottom: .75rem; }
.ann-body p, .ann-body div { margin: 0 0 .35em; }
.ann-body ul, .ann-body ol { margin: .2em 0 .5em 1.4em; padding: 0; }
.ann-body li { margin-bottom: .15em; }
.ann-body strong, .ann-body b { font-weight: 700; }
.ann-body em, .ann-body i { font-style: italic; }
.ann-body u { text-decoration: underline; }
.ann-body a { color: var(--bs-primary); text-decoration: underline; }
.ann-body a:hover { opacity: .75; }
/* media grid — editorial mosaic layouts */
.ann-media-grid { display: grid; gap: 3px; border-radius: 10px; overflow: hidden; margin-bottom: .75rem; }
.ann-grid-img, .ann-grid-more { display: block; width: 100%; height: 100%; }
.ann-grid-img { object-fit: cover; cursor: zoom-in; transition: opacity .15s; }
.ann-grid-img:hover, .ann-grid-more:hover img { opacity: .88; }
.ann-media-grid.grid-1 { grid-template-columns: 1fr; }
.ann-media-grid.grid-1 .ann-grid-img { height: auto; max-height: 400px; object-fit: contain; }
.ann-media-grid.grid-2 { grid-template-columns: 3fr 2fr; aspect-ratio: 5/2; }
.ann-media-grid.grid-3 { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4/3; }
.ann-media-grid.grid-3 :first-child { grid-row: 1 / 3; }
.ann-media-grid.grid-4 { grid-template-areas: "a a b" "c d b"; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16/9; }
.ann-media-grid.grid-4 :nth-child(1) { grid-area: a; }
.ann-media-grid.grid-4 :nth-child(2) { grid-area: b; }
.ann-media-grid.grid-4 :nth-child(3) { grid-area: c; }
.ann-media-grid.grid-4 :nth-child(4) { grid-area: d; }
.ann-media-grid.grid-many { grid-template-areas: "a b c" "a d e"; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4/3; }
.ann-media-grid.grid-many :nth-child(1) { grid-area: a; }
.ann-media-grid.grid-many :nth-child(2) { grid-area: b; }
.ann-media-grid.grid-many :nth-child(3) { grid-area: c; }
.ann-media-grid.grid-many :nth-child(4) { grid-area: d; }
.ann-media-grid.grid-many :nth-child(5) { grid-area: e; }
.ann-grid-more { position: relative; overflow: hidden; cursor: zoom-in; }
.ann-grid-more img { object-fit: cover; transition: opacity .15s; }
.ann-grid-more-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.52); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; font-weight: 700; }
/* lightbox */
#imgLightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.94); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:9000; align-items:center; justify-content:center; }
#imgLightbox.show { display:flex; }
#imgLightbox img { max-width:96vw; max-height:92vh; border-radius:8px; object-fit:contain; box-shadow:0 10px 50px rgba(0,0,0,.6); user-select:none; image-rendering:-webkit-optimize-contrast; }
.lb-nav { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:none; color:#fff; font-size:1.1rem; cursor:pointer; border-radius:50%; width:42px; height:42px; display:flex; align-items:center; justify-content:center; z-index:9001; transition:background .15s, transform .15s; }
.lb-nav:hover { background:rgba(255,255,255,.28); transform:translateY(-50%) scale(1.05); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-close { position:fixed; top:14px; right:16px; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:1rem; cursor:pointer; border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; z-index:9001; transition:background .15s, transform .15s; }
.lb-close:hover { background:rgba(255,255,255,.28); transform:scale(1.05); }
.lb-counter { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:.85rem; z-index:9001; }
/* poll display */
.ann-poll { margin-bottom: .65rem; background: var(--bs-tertiary-bg); border-radius: 12px; padding: .85rem 1rem; }
.ann-poll-q { font-weight: 700; font-size: .9rem; color: var(--bs-emphasis-color); margin-bottom: .7rem; line-height: 1.3; }
.ann-poll-opts { display: flex; flex-direction: column; gap: .45rem; }
.ann-poll-opt-btn {
  display: flex; align-items: center; gap: .65rem;
  background: var(--bs-body-bg); border: 1.5px solid var(--bs-border-color);
  border-radius: 10px; padding: .65rem .85rem;
  text-align: left; font-size: .9rem; font-family: 'DM Sans',sans-serif;
  cursor: pointer; color: var(--bs-body-color);
  min-height: 48px;   /* tap-friendly on mobile */
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .12s;
}
.ann-poll-opt-btn:hover,
.ann-poll-opt-btn:focus-visible {
  border-color: var(--bs-primary);
  background: color-mix(in srgb, var(--bs-primary) 7%, var(--bs-body-bg));
  outline: none;
}
.ann-poll-opt-btn:active { transform: scale(.985); }
.ann-poll-opt-radio {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 2px solid var(--bs-border-color);
  border-radius: 50%;
  background: transparent;
  transition: border-color .15s, background-color .15s;
}
.ann-poll-opt-btn:hover .ann-poll-opt-radio,
.ann-poll-opt-btn:focus-visible .ann-poll-opt-radio { border-color: var(--bs-primary); }
.ann-poll-opt-text { flex: 1; line-height: 1.35; }
/* image poll grid */
.ann-poll-img-grid { display: grid; gap: .5rem; margin-bottom: .4rem; }
.ann-poll-img-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.ann-poll-img-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.ann-poll-img-tile { background: var(--bs-body-bg); border: 1.5px solid var(--bs-border-color); border-radius: 10px; padding: 0; overflow: hidden; cursor: pointer; transition: all .18s; text-align: center; display: flex; flex-direction: column; }
.ann-poll-img-tile:hover { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb),.15); }
.ann-poll-img-tile-wrap { aspect-ratio: 1; overflow: hidden; }
.ann-poll-img-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.ann-poll-img-tile:hover .ann-poll-img-tile-img { opacity: .9; }
.ann-poll-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); font-size: 1.5rem; background: var(--bs-tertiary-bg); }
.ann-poll-img-tile-label { display: block; padding: .4rem .5rem; font-size: .8rem; color: var(--bs-body-color); font-weight: 500; line-height: 1.3; }
/* poll results */
.ann-poll-results { display: flex; flex-direction: column; gap: .4rem; }
.ann-poll-result { margin: 0; }
.ann-poll-bar {
  position: relative;
  height: 38px;
  border-radius: 9px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
}
.ann-poll-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;   /* set inline by JS */
  background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
  transition: width .55s cubic-bezier(.4, 0, .2, 1);
}
.ann-poll-result.my-pick .ann-poll-bar { border-color: color-mix(in srgb, var(--bs-success) 60%, transparent); }
.ann-poll-result.my-pick .ann-poll-bar-fill {
  background: color-mix(in srgb, var(--bs-success) 22%, transparent);
}
.ann-poll-bar-content {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
  padding: 0 .8rem;
  gap: .5rem;
}
.ann-poll-bar-label {
  display: flex; align-items: center; gap: .5rem;
  min-width: 0; flex: 1;
  font-size: .88rem; line-height: 1.2;
  color: var(--bs-body-color);
}
.ann-poll-bar-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ann-poll-result.my-pick .ann-poll-bar-text { font-weight: 600; color: var(--bs-emphasis-color); }
.ann-poll-bar-pct {
  flex-shrink: 0;
  font-size: .8rem; font-weight: 600;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}
.ann-poll-result.my-pick .ann-poll-bar-pct { color: var(--bs-success); }
.ann-poll-check {
  font-size: .8rem;
  color: var(--bs-success);
  flex-shrink: 0;
}
.ann-poll-result-img {
  width: 26px; height: 26px;
  object-fit: cover; border-radius: 4px;
  flex-shrink: 0; cursor: zoom-in;
}

.ann-poll-footer {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .5rem;
  font-size: .78rem; color: var(--bs-secondary-color);
  margin-top: .65rem;
}
.ann-poll-footer-total { font-weight: 500; }
.ann-poll-footer-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.ann-poll-footer-btn {
  background: transparent; border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .75rem; color: var(--bs-secondary-color);
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.ann-poll-footer-btn:hover,
.ann-poll-footer-btn:focus-visible {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  background: color-mix(in srgb, var(--bs-primary) 6%, transparent);
  outline: none;
}
/* Bootstrap progress override for polls */
.progress { --bs-progress-height: 6px; --bs-progress-bg: var(--bs-border-color); --bs-progress-bar-bg: var(--bs-primary); border-radius: 99px; }
.progress-bar { transition: width .4s ease; }
/* Voter list, grouped by option. Each voter is a chip with avatar +
   name; staff get a clickable chip that opens the affiliate's profile. */
.ann-poll-voters-list {
  margin-top: .8rem; padding-top: .65rem;
  border-top: 1px dashed var(--bs-border-color);
  display: flex; flex-direction: column; gap: .55rem;
}
.ann-poll-voters-empty {
  font-style: italic; font-size: .8rem; color: var(--bs-secondary-color);
}
.ann-poll-voters-group { display: flex; flex-direction: column; gap: .3rem; }
.ann-poll-voters-opt {
  font-size: .72rem; font-weight: 600;
  color: var(--bs-secondary-color);
  text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: .35rem;
}
.ann-poll-voters-count {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  font-size: .68rem; font-weight: 600;
  padding: .05rem .4rem;
  border-radius: 999px;
}
.ann-poll-voters-chips {
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.ann-poll-voter-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem .2rem .25rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  font-size: .78rem;
  color: var(--bs-body-color);
  line-height: 1.2;
}
.ann-poll-voter-chip > .pp-avatar,
.ann-poll-voter-chip > img.pp-avatar {
  flex-shrink: 0;
}
.ann-poll-voter-chip.clickable {
  cursor: pointer;
  transition: border-color .12s, background-color .12s, transform .12s;
}
.ann-poll-voter-chip.clickable:hover,
.ann-poll-voter-chip.clickable:focus-visible {
  border-color: var(--bs-primary);
  background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
  outline: none;
}
.ann-poll-voter-chip.clickable:active { transform: scale(.97); }
/* card footer / action buttons */
.ann-actions-footer { display: flex; align-items: center; gap: .1rem; padding: .4rem .75rem; background: transparent; }
.btn-ann-like, .btn-ann-comment {
  background: none; border: none;
  padding: .3rem .55rem; font-size: .8rem; cursor: pointer; color: var(--bs-secondary-color);
  font-family: 'DM Sans', sans-serif; display: flex; align-items: center; gap: .35rem;
  border-radius: 7px; transition: all .15s; font-weight: 500;
}
.btn-ann-like:hover { background: rgba(232,121,249,.1); color: var(--pink); }
.btn-ann-like.liked { color: var(--pink); background: rgba(232,121,249,.1); }
.btn-ann-comment:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.btn-ann-icon {
  background: none; border: none; color: var(--bs-secondary-color); cursor: pointer;
  font-size: .78rem; padding: .1rem .3rem; transition: color .15s; flex-shrink: 0;
}
.btn-ann-icon:hover { color: var(--bs-primary); }
.btn-ann-icon.del:hover { color: #dc2626; }
/* rich text editor toolbar */
.ann-rte-toolbar { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; border-bottom: 1px solid var(--bs-border-color); padding-bottom: .4rem; margin-bottom: .25rem; }
.ann-rte-btn { background: none; border: none; border-radius: 5px; padding: .25rem .45rem; font-size: .85rem; color: var(--bs-secondary-color); cursor: pointer; line-height: 1; transition: background .12s, color .12s; }
.ann-rte-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); }
.ann-rte-sep { display: inline-block; width: 1px; height: 1.1rem; background: var(--bs-border-color); margin: 0 .2rem; flex-shrink: 0; }
.ann-rte-select { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 5px; padding: .2rem .3rem; font-size: .78rem; color: var(--bs-secondary-color); cursor: pointer; font-family: 'DM Sans',sans-serif; }
.ann-rte-select:hover { border-color: var(--bs-emphasis-color); color: var(--bs-emphasis-color); }
.ann-rte-color-label { cursor: pointer; display: inline-flex !important; align-items: center; gap: .25rem; }
.ann-rte-color-input { width: 24px; height: 24px; padding: 0; border: 1px solid var(--bs-border-color); border-radius: 4px; cursor: pointer; background: none; }
.ann-rte-body { min-height: 72px; max-height: 320px; overflow-y: auto; font-family: 'DM Sans',sans-serif; font-size: .93rem; line-height: 1.7; color: var(--bs-body-color); outline: none; }
.ann-rte-body:empty::before { content: attr(data-placeholder); color: var(--bs-secondary-color); pointer-events: none; }
.ann-rte-body ul, .ann-rte-body ol { margin: .2em 0 .4em 1.4em; padding: 0; }
.ann-rte-body li { margin-bottom: .1em; }
.ann-rte-body a { color: var(--bs-primary); text-decoration: underline; }
/* rte + display: block-level content */
.ann-rte-body h1, .ann-body h1 { font-size: 1.45rem; font-weight: 700; margin: .2em 0 .3em; line-height: 1.25; }
.ann-rte-body h2, .ann-body h2 { font-size: 1.2rem; font-weight: 700; margin: .2em 0 .3em; line-height: 1.3; }
.ann-rte-body h3, .ann-body h3 { font-size: 1rem; font-weight: 700; margin: .2em 0 .25em; line-height: 1.35; }
.ann-rte-body blockquote, .ann-body blockquote { border-left: 3px solid var(--bs-primary); margin: .4em 0 .4em .4em; padding: .2em .75em; color: var(--bs-secondary-color); font-style: italic; }
.ann-rte-body pre.ann-code-block, .ann-body pre.ann-code-block { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 6px; padding: .55rem .85rem; margin: .35em 0; overflow-x: auto; font-family: 'Courier New',Courier,monospace; font-size: .83em; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ann-rte-body pre.ann-code-block code, .ann-body pre.ann-code-block code { font-family: inherit; background: none; }
.ann-rte-body aside.ann-aside, .ann-body aside.ann-aside { background: rgba(var(--bs-primary-rgb),.07); border-left: 3px solid var(--bs-primary); border-radius: 0 7px 7px 0; padding: .45rem .85rem; margin: .35em 0; font-size: .9rem; }
.ann-rte-body hr, .ann-body hr { border: none; border-top: 1.5px solid var(--bs-border-color); margin: .7em 0; }
.ann-rte-body s, .ann-rte-body strike, .ann-body s, .ann-body strike { text-decoration: line-through; }
.ann-rte-body .ann-text-sm, .ann-body .ann-text-sm { font-size: .78em; }
.ann-rte-body .ann-text-lg, .ann-body .ann-text-lg { font-size: 1.15em; }
.ann-rte-body .ann-text-xl, .ann-body .ann-text-xl { font-size: 1.35em; }
/* edit mode */
.ann-edit-area { display: flex; flex-direction: column; gap: .45rem; }
.ann-rte-wrapper { border: 1.5px solid var(--bs-primary); border-radius: 8px; overflow: hidden; }
.ann-rte-wrapper .ann-rte-toolbar { border-bottom: 1px solid var(--bs-border-color); margin-bottom: 0; border-radius: 0; padding: .3rem .5rem; }
.ann-edit-textarea { width: 100%; border: none; padding: .6rem .85rem; font-family: 'DM Sans',sans-serif; font-size: .9rem; background: var(--bs-body-bg); color: var(--bs-body-color); outline: none; min-height: 80px; }
.ann-edit-media { display: flex; flex-wrap: wrap; gap: .4rem; }
.ann-edit-thumb { position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.ann-edit-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ann-edit-thumb .rm-btn { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.55); border: none; border-radius: 50%; width: 24px; height: 24px; color: #fff; cursor: pointer; font-size: .7rem; display: flex; align-items: center; justify-content: center; }
.ann-edit-footer { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .2rem; }
.ann-edit-footer .btn-sm { padding: .3rem .75rem; font-size: .8rem; border-radius: 7px; border: 1.5px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); cursor: pointer; font-family: 'DM Sans',sans-serif; transition: all .15s; }
.ann-edit-footer .btn-sm.primary { background: var(--bs-primary); color: var(--pp-on-primary, #fff); border-color: var(--bs-primary); }
.ann-edit-footer .btn-sm:hover:not(.primary) { border-color: var(--bs-secondary-color); }
/* comments */
.ann-comments-section { border-top: 1px solid var(--bs-border-color); }
.ann-comment { align-items: flex-start; }
.ann-comment-author { font-weight: 600; font-size: .82rem; color: var(--bs-emphasis-color); }
/* Wraps the avatar + author name on a comment when staff can click through
   to that affiliate's profile. Looks identical to the static text/avatar
   when idle; lights up on hover/focus. */
.ann-comment-author-link {
  background: none; border: 0; padding: 0; color: inherit;
  font: inherit; line-height: inherit; text-align: left;
  cursor: pointer; border-radius: 4px;
  transition: opacity .12s ease, background-color .12s ease;
}
.ann-comment-author-link:hover,
.ann-comment-author-link:focus-visible {
  opacity: .75; outline: none;
}
.ann-comment-author-link:focus-visible {
  background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}
.ann-comment-date   { font-size: .72rem; color: var(--bs-secondary-color); }
.ann-comment-body   { font-size: .85rem; color: var(--bs-body-color); margin-top: .1rem; }
.ann-comment-del { background: none; border: none; color: var(--bs-secondary-color); cursor: pointer; font-size: .7rem; padding: 0 .15rem; transition: color .15s; line-height: 1; }
.ann-comment-del:hover { color: #dc2626; }
.flex-1 { flex: 1; }
.min-w-0 { min-width: 0; }
.ann-comment-input {
  width: 100%; border: 1.5px solid var(--bs-border-color); border-radius: 8px;
  padding: .4rem .7rem; font-size: .85rem; font-family: 'DM Sans', sans-serif;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  outline: none; transition: border-color .2s; margin-top: .45rem;
}
.ann-comment-input:focus { border-color: var(--bs-primary); }

/* ── Attach buttons in announcement composer ── */
.ann-attach-btn {
  background: none; border: 1.5px solid var(--bs-border-color); border-radius: 7px;
  padding: .22rem .55rem; font-size: .78rem; color: var(--bs-secondary-color);
  font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
}
.ann-attach-btn:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.ann-attach-btn.active { background: rgba(var(--bs-primary-rgb),.08); border-color: var(--bs-primary); color: var(--bs-primary); }

/* ── Upload banner btn ── */
.btn-upload-banner {
  background: none; border: 1.5px solid var(--bs-border-color); border-radius: 8px;
  padding: .38rem .55rem; font-size: .72rem; cursor: pointer; color: var(--bs-secondary-color);
  font-family: 'DM Sans', sans-serif; transition: all .2s; white-space: nowrap;
  display: flex; align-items: center; gap: .25rem;
}
.btn-upload-banner:hover { border-color: var(--bs-primary); color: var(--bs-primary); }

/* ── ctxSplit columns: height:100% bounds them to the row so overflow-auto scrolls (sticky fix) ── */
#ctxSplit > * { min-height: 0; }
@media (min-width: 992px) {
  #ctxSplit > * { height: 100%; }
}

/* ── Admin breadcrumb bar (sticky, shared across affiliates/detail/client pages) ── */
.admin-crumb-bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  padding: .5rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
}
.admin-crumb-bar .breadcrumb-item a {
  color: var(--bs-secondary-color);
  text-decoration: none;
  font-weight: 600;
}
.admin-crumb-bar .breadcrumb-item a:hover {
  color: var(--bs-body-color);
}

/* ── Admin affiliate panel ── */
.admin-panel-card {
  background: var(--bs-body-bg); border-radius: 10px; border: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  padding: 1.4rem; margin-bottom: 1rem;
}
.admin-panel-card h6 {
  font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bs-secondary-color); margin-bottom: 1rem; display: flex; align-items: center; gap: .4rem;
}
.aff-client-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem .75rem; border-radius: 9px; cursor: pointer; gap: .5rem;
  transition: background .15s;
}
.aff-client-row:hover { background: rgba(var(--bs-primary-rgb),.08); }
.aff-client-row-main { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.aff-client-badges { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }

/* ── Scrollbar ── */
.clients-section::-webkit-scrollbar { width: 4px; }
.clients-section::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 2px; }

/* ── JS-toggled panels: flex-direction without !important so JS style.display works ── */
#myClientsManager,
#ordersManager,
#affiliatesManager,
#allClientsManager,
#partiesManager,
#themeManager,
#changelogManager { flex-direction: column; }

/* ── Back button (hidden on desktop, shown on mobile) ── */
.mobile-back-btn { display: none; }

/* ── Version button in sidebar footer ── */
.btn-version-link {
  background: none; border: none; padding: 0;
  font-size: .7rem; color: var(--bs-secondary-color);
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  transition: color .15s;
}
.btn-version-link:hover { color: var(--bs-primary); }

/* ── Post-as toggle ── */
.post-as-btn {
  display: flex; align-items: center; gap: .3rem;
  background: none; border: 1.5px solid var(--bs-border-color); border-radius: 7px;
  padding: .22rem .6rem; font-size: .77rem; color: var(--bs-secondary-color);
  font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.post-as-btn.active { background: rgba(var(--bs-primary-rgb),.08); border-color: var(--bs-primary); color: var(--bs-primary); font-weight: 600; }
.post-as-btn:hover:not(.active) { border-color: var(--bs-emphasis-color); color: var(--bs-emphasis-color); }

/* ── Bootstrap offcanvas-lg desktop reset overrides ── */
@media (min-width: 992px) {
  .sidebar {
    width: 240px !important;
    min-width: 240px !important;
    background-color: var(--bs-body-bg) !important;
    border-right: 1px solid var(--bs-border-color) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    transition: width .18s ease, min-width .18s ease !important;
  }
  .sidebar.sidebar-collapsed {
    width: 56px !important;
    min-width: 56px !important;
  }
}

/* ── Sidebar collapse row (desktop only) ── */
.sidebar-collapse-row { display: none; border-top: 1px solid var(--bs-border-color); flex-shrink: 0; }
@media (min-width: 992px) { .sidebar-collapse-row { display: flex; } }
.sidebar-collapse-btn { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem 1rem; border: none; background: none; color: var(--bs-secondary-color); font-size: .8rem; cursor: pointer; text-align: left; }
.sidebar-collapse-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.sidebar-logout-btn { color: var(--bs-danger); }
.sidebar-logout-btn:hover { background: rgba(220,53,69,.08); color: var(--bs-danger); }
.sidebar-collapse-label { font-size: .78rem; }
.sidebar-collapsed .sidebar-collapse-label { display: none; }
.sidebar-collapsed .sidebar-collapse-btn { justify-content: center; padding: .45rem; }

/* Top-right collapse affordance (desktop only) */
.sidebar-collapse-header { flex-shrink: 0; }
.sidebar-collapse-corner { border: none; background: none; color: var(--bs-secondary-color); padding: .25rem .45rem; border-radius: .375rem; cursor: pointer; font-size: .85rem; line-height: 1; }
.sidebar-collapse-corner:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.sidebar-collapsed .sidebar-collapse-corner { padding: .25rem; }
.sidebar-collapsed .sidebar-collapse-corner i { transform: rotate(180deg); }
.sidebar-collapsed .sidebar-collapse-header { justify-content: center !important; }

/* ── Collapsed sidebar: icon-only rail ── */
.sidebar-collapsed .sidebar-profile-info,
.sidebar-collapsed .sidebar-profile-arrow,
.sidebar-collapsed .sidebar-footer-text { display: none; }
.sidebar-collapsed .sidebar-profile { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-collapsed footer { padding-left: 0 !important; padding-right: 0 !important; }
.sidebar-collapsed footer > div { justify-content: center; }
.my-events-entry > span { white-space: nowrap; overflow: hidden; min-width: 0; text-overflow: ellipsis; }
.sidebar-collapsed .my-events-entry { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-collapsed .my-events-entry > span { font-size: 0; display: flex; justify-content: center; }
.sidebar-collapsed .my-events-entry > span > i { font-size: .85rem !important; margin: 0; }
.sidebar-collapsed .my-events-entry .badge { display: none; }

/* ── Offcanvas active range (<992px): drawer sizing ── */
@media (max-width: 991.98px) {
  .sidebar {
    --bs-offcanvas-width: min(82vw, 300px);
    height: 100dvh !important;
  }

  /* Modal → bottom sheet */
  .modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
  }
  .modal.show .modal-dialog { transform: none; }
  .modal-dialog-centered { align-items: flex-end; margin: 0; max-width: 100% !important; min-height: 100%; width: 100%; }
  .pp-modal { border-radius: 20px 20px 0 0 !important; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; }
  .pp-modal-bs { border-radius: 20px 20px 0 0 !important; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; }
}

/* ── Small tablet (≤768px) ── */
@media (max-width: 768px) {
  .client-item { padding: .6rem 1rem; }
}

/* ── Phone (≤600px) ── */
@media (max-width: 600px) {

  /* ── Back button (client panel) ── */
  .mobile-back-btn {
    display: flex; align-items: center; gap: .35rem;
    background: none; border: none; color: var(--bs-primary);
    font-family: 'DM Sans', sans-serif; font-size: .9rem; font-weight: 600;
    cursor: pointer; padding: .5rem 0 .75rem; width: 100%;
  }


  /* ── Touch targets ── */
  .cal-nav-btn { width: 40px; height: 40px; font-size: .8rem; }
  .cal-today-btn { height: 40px; font-size: .78rem; }
  .cal-btn-sidebar { width: 40px; height: 40px; font-size: .82rem; }
  .client-item { padding: .85rem 1.25rem; }

  /* ── Login card ── */
  .login-card { padding: 2rem 1.5rem; margin: 1rem; border-radius: 16px; }

  /* ── Events / orders ── */
  .events-grid { grid-template-columns: 1fr; }

}

/* ── Dark mode — sidebar needs explicit override to beat Bootstrap offcanvas ── */
[data-bs-theme="dark"] .sidebar { background: var(--bs-tertiary-bg) !important; border-right-color: var(--bs-border-color); }
[data-bs-theme="dark"] .topbar .affiliate-chip a { color: #7dd3fc; }
[data-bs-theme="dark"] .topbar .affiliate-chip a:hover { color: #bae6fd; }
[data-bs-theme="dark"] .affiliate-item.active { background: rgba(220,38,38,.15); }
[data-bs-theme="dark"] .aff-badge-active   { background: rgba(21,128,61,.2);  color: #86efac; }
[data-bs-theme="dark"] .aff-badge-pending  { background: rgba(161,98,7,.25);  color: #fcd34d; }
[data-bs-theme="dark"] .aff-badge-inactive { background: rgba(100,116,139,.18); color: #cbd5e1; }
/* Upcoming-event green text needs a brighter variant in dark mode — #15803d
   on the dark body is only 3.0:1 (fails AA normal text). #4ade80 hits 9.2:1. */
[data-bs-theme="dark"] .upcoming-party-row.status-upcoming .upcoming-date-num,
[data-bs-theme="dark"] .cal-has-events.status-upcoming:not(.cal-today) .cal-day-num {
  color: #4ade80;
}
/* Same green: the row's colored left border + the cal-pip indicator strip
   are UI components and need 3:1. #15803d on dark body is 3.04:1 (passes
   barely); #4ade80 lifts it well clear. */
[data-bs-theme="dark"] .upcoming-party-row.status-upcoming { border-color: #4ade80; }
[data-bs-theme="dark"] .cal-pip.pip-upcoming { background: #4ade80; }

/* WCAG 1.4.11 — Bootstrap's default form-control border #dee2e6 on white
   is 1.36:1 (well under the 3:1 UI minimum). Bump to slate-400 which hits
   3.0:1. Dark mode keeps Bootstrap's default — the input bg is already
   dark so the existing border has plenty of contrast. */
.form-control, .form-select, .form-check-input {
  border-color: #94a3b8;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-check-input {
  border-color: #495057;   /* Bootstrap dark default; 4.5:1 on body bg */
}
/* Status-past row opacity tipped sub-text below AA. Apply opacity only to the
   non-text elements (date column + leading icon) and softly desaturate the
   row's primary text instead of dropping its opacity. */
.fcal-event-row.status-past .fcal-event-date { opacity: .55; }
.fcal-event-row.status-past .fcal-event-title { color: var(--bs-secondary-color); }
.fcal-event-row.status-past .fcal-event-client,
.fcal-event-row.status-past .fcal-event-aff { opacity: .85; }
[data-bs-theme="dark"] .aff-action-btn:hover { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-primary); }
[data-bs-theme="dark"] .aff-action-btn.aff-danger:hover { background: rgba(220,38,38,.15); border-color: rgba(220,38,38,.3); color: #f87171; }
[data-bs-theme="dark"] .btn-ann-like.liked { background: rgba(232,121,249,.12); }
[data-bs-theme="dark"] .cal-has-ann:not(.cal-has-events):hover { background: rgba(217,119,6,.12); }
[data-bs-theme="dark"] .affmgr-table thead th { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .affmgr-table tbody td.aff-td-check,
[data-bs-theme="dark"] #myClientsTable tbody td:first-child,
[data-bs-theme="dark"] #allClientsTable tbody td:first-child { background: var(--bs-body-bg); }
[data-bs-theme="dark"] .fc { background: var(--bs-body-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] #lottieCont,
[data-bs-theme="dark"] #pfLottieCont,
[data-bs-theme="dark"] .od-preview-lottie { filter: invert(1); }
/* Dark mode: use a brighter blue that satisfies dot/UI contrast on the dark
   body AND is light enough that dark text on top hits AA. Accents are
   amber-400 / emerald-400 — bright on the body, and dark text on top hits
   10+:1 either way. */
[data-bs-theme="dark"] {
  --bs-primary: #60a5fa; --bs-primary-rgb: 96,165,250;   /* blue-400 — 5.9:1 on #212529 (UI 3:1 ✓); 6.7:1 vs #0f172a text */
  --pp-accent-order: #fbbf24;                            /* amber-400 — 13.0:1 on #212529 */
  --pp-accent-ann:   #34d399;                            /* emerald-400 — 13.5:1 on #212529 */
  --pp-on-primary:      #0f172a;                         /* dark text on blue-400 — 6.7:1 */
  /* on-accent-order / on-accent-ann stay dark (10+:1) */
}

/* ── Page loader ── */
#pageLoader {
  position: fixed; inset: 0; z-index: 99998;
  background: var(--bs-tertiary-bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s;
}
#pageLoader.visible { opacity: 1; pointer-events: auto; }
#lottieCont { width: 120px; height: 120px; }

/* ── Party Favors tree panel ─────────────────────────────────────────── */
.pf-tree-actions {
  display: flex; gap: .45rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}
.pf-tree-actions .btn { flex: 1; font-size: .78rem; }

.pf-tree { flex: 1; overflow-y: auto; padding: .35rem 0; }

.pf-tree-cat {
  display: flex; align-items: center; gap: .55rem;
  padding: .52rem 1rem; cursor: pointer;
  border-left: 3px solid transparent;
  transition: all .15s;
}
.pf-tree-cat:hover  { background: var(--bs-tertiary-bg); border-left-color: var(--bs-primary); }
.pf-tree-cat.active { background: rgba(var(--bs-primary-rgb),.08); border-left-color: var(--bs-primary); }
.pf-tree-cat-icon { color: var(--bs-primary); font-size: .82rem; width: .9rem; text-align: center; flex-shrink: 0; }
.pf-tree-cat-name { font-size: .88rem; font-weight: 600; color: var(--bs-emphasis-color); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-tree-count { font-size: .7rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-radius: 10px; padding: .05rem .42rem; flex-shrink: 0; }

.pf-tree-prod {
  display: flex; align-items: center; gap: .45rem;
  padding: .32rem 1rem .32rem 2.15rem;
  cursor: pointer; transition: all .15s;
}
.pf-tree-prod:hover { background: var(--bs-tertiary-bg); }
.pf-tree-prod:hover .pf-tree-prod-name { color: var(--bs-primary); }
.pf-tree-prod-icon { color: var(--bs-border-color); font-size: .72rem; flex-shrink: 0; }
.pf-tree-prod-name { font-size: .8rem; color: var(--bs-secondary-color); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }

/* ── Party Favors main panel ─────────────────────────────────────────── */
.pf-cat-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.pf-cat-thumb {
  width: 54px; height: 54px; border-radius: 10px;
  background: var(--bs-tertiary-bg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 1.5rem; color: var(--bs-primary);
}
.pf-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-cat-title { font-size: 1.05rem; font-weight: 700; color: var(--bs-emphasis-color); line-height: 1.3; }
.pf-cat-desc  { font-size: .82rem; color: var(--bs-secondary-color); margin-top: .2rem; line-height: 1.5; }
.pf-cat-count { font-size: .73rem; color: var(--bs-secondary-color); margin-top: .3rem; }

.pf-product-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .65rem 0; border-bottom: 1px solid var(--bs-border-color);
}
.pf-product-row:last-child { border-bottom: none; }
.pf-product-thumb {
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--bs-tertiary-bg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--bs-border-color); font-size: 1rem;
}
.pf-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-product-name { font-size: .9rem; font-weight: 600; color: var(--bs-emphasis-color); }
.pf-product-desc {
  font-size: .78rem; color: var(--bs-secondary-color); margin-top: .1rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Shared image picker (category + product modals) ─────────────── */
.catalog-img-picker {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border: 2px dashed var(--bs-border-color); border-radius: 12px;
  overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--bs-tertiary-bg); transition: border-color .2s;
}
.catalog-img-picker:hover { border-color: var(--bs-primary); }
.catalog-img-picker .img-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--bs-secondary-color); font-size: .85rem; text-align: center; pointer-events: none;
}
.catalog-img-picker .img-placeholder i { font-size: 2rem; }

/* ── Affiliates / All Clients manager pages ───────────────────────── */
#adminAllClientsList { flex:1; overflow-y:auto; min-height:0; }
.affmgr-title { font-size:.95rem; font-weight:700; color:var(--bs-emphasis-color); display:flex; align-items:center; gap:.45rem; }
.affmgr-title i { color:var(--bs-primary); }
/* ── Affiliates / All Clients Table Toolbar ───────────────────────── */
.affmgr-header-row { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.75rem .9rem; border-bottom:1px solid var(--bs-border-color); flex-shrink:0; gap:.75rem; flex-wrap:wrap; }
.affmgr-header-actions { display:flex; align-items:center; gap:.5rem; }
.affmgr-filter-row { display:flex; align-items:center; padding:.6rem 1.75rem; border-bottom:1px solid var(--bs-border-color); flex-shrink:0; gap:.6rem; flex-wrap:wrap; background:var(--bs-tertiary-bg); }
.affmgr-filter-select { border:1.5px solid var(--bs-border-color); border-radius:8px; padding:.31rem .65rem; font-size:.84rem; font-family:'DM Sans',sans-serif; color:var(--bs-body-color); background:var(--bs-body-bg); cursor:pointer; outline:none; }
.affmgr-filter-select:focus { border-color:var(--bs-primary); }
.affmgr-search-wrap { position:relative; }
.affmgr-search-icon { position:absolute; left:.6rem; top:50%; transform:translateY(-50%); color:var(--bs-secondary-color); font-size:.72rem; pointer-events:none; }
.affmgr-search { border:1.5px solid var(--bs-border-color); border-radius:8px; padding:.35rem .65rem .35rem 1.9rem; font-size:.84rem; font-family:'DM Sans',sans-serif; width:210px; outline:none; background:var(--bs-body-bg); color:var(--bs-body-color); transition:border-color .2s; }
.affmgr-search:focus { border-color:var(--bs-primary); }
.affmgr-table-wrap { flex:1; overflow:auto; min-height:0; overscroll-behavior:none; }
.affmgr-table { margin:0; font-size:.84rem; white-space:nowrap; border-collapse:collapse; }
.affmgr-table thead th[draggable] { cursor:grab; user-select:none; }
.affmgr-table thead th[draggable]:active { cursor:grabbing; }
.affmgr-table thead th.col-dragging { opacity:.35; }
.affmgr-table thead th.col-drag-over { box-shadow:-3px 0 0 0 var(--bs-primary) inset; }
.col-resize-handle { position:absolute; right:0; top:0; bottom:0; width:5px; cursor:col-resize; z-index:3; }
.col-resize-handle:hover, .col-resize-handle.col-resize-active { background:var(--bs-primary); opacity:.45; }
body.col-resizing, body.col-resizing * { cursor:col-resize !important; user-select:none !important; }
.fc-daygrid-day { cursor:pointer; }
.affmgr-table thead th {
  position:sticky; top:0; z-index:2;
  background:var(--bs-tertiary-bg);
  border-top:none !important;
  border-bottom:1.5px solid var(--bs-border-color) !important;
  font-size:.69rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--bs-secondary-color); padding:.75rem 1rem; vertical-align:middle; white-space:nowrap;
}
/* Corner-sticky: both top:0 (from thead th) and left:0 */
.affmgr-th-check { width:40px !important; padding:0 !important; }
.affmgr-table thead th.affmgr-th-check { position:sticky; top:0; left:0; z-index:4; }
.affmgr-table tbody td.aff-td-check { position:sticky; left:0; z-index:1; background:var(--bs-body-bg); box-shadow:inset -1px 0 0 var(--bs-border-color); will-change:transform; padding:0 !important; }
.aff-check-label { display:flex; align-items:center; padding:.72rem .6rem .72rem 1.25rem; cursor:pointer; width:100%; }
/* Sticky Name column on client-only tables (no checkbox column).
   Desktop only — on mobile (<768px) the sticky name eats too much of
   the visible row width, so we let it scroll with the rest of the
   columns. The thead row stays vertically sticky (top:0) via the
   broader thead rule above. */
@media (min-width: 768px) {
  #myClientsTable thead th.affmgr-th-name,
  #allClientsTable thead th.affmgr-th-name { position:sticky; top:0; left:0; z-index:4; }
  #myClientsTable tbody td:first-child,
  #allClientsTable tbody td:first-child { position:sticky; left:0; z-index:1; background:var(--bs-body-bg); box-shadow:inset -1px 0 0 var(--bs-border-color); will-change:transform; overflow:visible; max-width:none; }
}
.affmgr-th-name   { min-width:190px; }
.affmgr-th-company{ min-width:140px; }
.affmgr-th-num    { min-width:82px; }
.affmgr-th-date   { min-width:115px; }
.affmgr-th-status { min-width:95px; }
.affmgr-th-cat    { min-width:130px; }
.affmgr-th-aff    { min-width:150px; }
.affmgr-th-loc    { min-width:120px; }
.affmgr-th-actions{ min-width:110px; text-align:right !important; }
.affmgr-table tbody td {
  padding:.7rem 1rem; vertical-align:middle;
  border-bottom:1px solid var(--bs-border-color);
  max-width:0; overflow:hidden; text-overflow:ellipsis;
  transition:background .1s;
}
.affmgr-table tbody td.aff-td-actions,
.affmgr-table tbody td.aff-td-check { overflow:visible; max-width:none; }
.affmgr-table tbody td.aff-td-actions { text-align:right; padding-right:1.25rem; }
.affmgr-table tbody tr { cursor:pointer; }
.affmgr-table tbody tr:hover td { background: rgba(var(--bs-primary-rgb),.06); }
.affmgr-table tbody tr:hover td.aff-td-check,
#myClientsTable tbody tr:hover td:first-child,
#allClientsTable tbody tr:hover td:first-child { background: var(--bs-tertiary-bg); }
.affmgr-table tbody tr:last-child td { border-bottom:none; }
.sortable { cursor:pointer; user-select:none; }
.sortable:hover { color:var(--bs-emphasis-color); }
.affmgr-sort-icon { font-size:.58rem; margin-left:.25rem; color:var(--bs-border-color); vertical-align:middle; transition:color .15s; }
.sortable:hover .affmgr-sort-icon { color:var(--bs-secondary-color); }
.affmgr-table thead th.sort-active { color:var(--bs-emphasis-color); }
.affmgr-table thead th.sort-active .affmgr-sort-icon { color:var(--bs-primary); }
.status-indicator-online { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--bs-success); margin-right:5px; vertical-align:middle; flex-shrink:0; }

/* ── Online Now tile ─────────────────────────────────────────────────
   Inherits all chrome (bg/border/radius/shadow/padding) from .stat-chart
   so it sits next to the podium as a peer. Header row uses .stat-chart-hdr
   (label + count). Body is the wrapped name list. A "View all" link sits
   along the bottom edge like a footer. */
.pp-online-tile .pp-online-tile-label-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bs-success);
  flex-shrink: 0;
  display: inline-block;
}
/* Empty state — nobody online. Dot + label go red so the admin notices
   the dashboard is quiet right now. */
.pp-online-tile--empty .stat-chart-lbl { color: var(--bs-danger); }
.pp-online-tile--empty .pp-online-tile-label-dot { background: var(--bs-danger); }
.pp-online-tile--empty .stat-chart-now { display: none; }
.pp-online-tile .pp-online-tile-names {
  flex: 1; display: flex; flex-wrap: wrap;
  align-content: flex-start;
  min-width: 0;
  font-size: .82rem;
  margin: .35rem 0 .25rem;
}
.pp-online-tile-name {
  background: none; border: 0; padding: 0;
  font-size: inherit; font-weight: 600;
  color: var(--bs-emphasis-color);
  cursor: pointer;
  transition: color .12s;
}
.pp-online-tile-name:hover { color: var(--bs-primary); text-decoration: underline; }
.pp-online-tile-name + .pp-online-tile-name::before {
  content: '·';
  color: var(--bs-secondary-color);
  margin: 0 .45rem;
  font-weight: 400;
}
.pp-online-tile-action {
  background: none; border: 0; padding: 0;
  font-size: .67rem; color: var(--bs-primary); font-weight: 600;
  display: inline-flex; align-items: center; gap: .3rem;
  cursor: pointer; align-self: flex-end;
  margin-top: auto;
}
.pp-online-tile-action:hover { text-decoration: underline; }
/* Bottom row of the admin dashboard: podium (Top 3 affiliates) and the
   Online Now tile, side-by-side. Stacks on narrow screens so the podium
   keeps room to breathe. */
.pp-dash-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: .45rem;
  margin-top: .5rem;
  align-items: stretch;
}
.pp-dash-bottom-podium,
.pp-dash-bottom > .pp-online-tile { min-width: 0; }
.pp-dash-bottom-podium .stat-chart,
.pp-dash-bottom > .pp-online-tile { height: 100%; }
@media (max-width: 720px) {
  .pp-dash-bottom { grid-template-columns: 1fr; }
}
.aff-name-primary { font-weight:600; font-size:.875rem; color:var(--bs-emphasis-color); line-height:1.3; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.aff-name-secondary { font-size:.75rem; color:var(--bs-secondary-color); margin-top:1px; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.aff-badge { border-radius:20px; padding:.22rem .65rem; font-size:.69rem; font-weight:700; letter-spacing:.025em; display:inline-block; white-space:nowrap; }
.aff-badge-active   { background:#dcfce7; color:#14532d; }   /* dark green text — 8.5:1 on #dcfce7 */
.aff-badge-pending  { background:#fef9c3; color:#854d0e; }   /* darker amber text — 6.3:1 on #fef9c3 */
.aff-badge-inactive { background: var(--bs-tertiary-bg); color:var(--bs-secondary-color); }
.aff-action-btn {
  background:none; border:1px solid transparent;
  padding:.3rem .45rem; border-radius:6px;
  cursor:pointer; font-size:.78rem; color:var(--bs-secondary-color);
  transition:all .12s; line-height:1; vertical-align:middle;
}
.aff-action-btn:hover { background:var(--bs-body-bg); border-color:var(--bs-border-color); color:var(--bs-primary); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.aff-action-btn.aff-danger:hover { color:#dc2626; background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.3); }
.affmgr-table .aff-table-row.active td,
.affmgr-table .all-client-table-row.active td,
.affmgr-table .my-client-table-row.active td { background: rgba(var(--bs-primary-rgb),.08) !important; }
.affmgr-table .aff-table-row.active td.aff-td-check,
.affmgr-table .all-client-table-row.active td.aff-td-check,
.affmgr-table .my-client-table-row.active td.aff-td-check,
#myClientsTable .my-client-table-row.active td:first-child,
#allClientsTable .all-client-table-row.active td:first-child { background: var(--bs-secondary-bg) !important; }
.affmgr-table .aff-table-row.active td:first-child,
.affmgr-table .all-client-table-row.active td:first-child,
.affmgr-table .my-client-table-row.active td:first-child { box-shadow:inset 3px 0 0 var(--bs-primary); }
.affmgr-table .aff-table-row.table-active td { background: rgba(var(--bs-primary-rgb),.08); }
.affmgr-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 2rem; color:var(--bs-secondary-color); text-align:center; flex:1; }
.affmgr-empty i { font-size:2.5rem; opacity:.15; margin-bottom:.85rem; display:block; }
.affmgr-empty .btn { margin-top: .85rem; }
.affiliate-item {
  padding:.875rem 1.75rem; cursor:pointer;
  border-bottom:1px solid var(--bs-border-color);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:background .15s;
}
.affiliate-item:hover { background:var(--bs-tertiary-bg); }
.affiliate-item.active { background: rgba(var(--bs-primary-rgb),.08); }
.affiliate-item-main { min-width:0; flex:1; }
.affiliate-item-name { font-weight:600; font-size:.95rem; color:var(--bs-emphasis-color); }
.affiliate-item-sub { font-size:.82rem; color:var(--bs-secondary-color); margin-top:2px; }
.affiliate-item-meta { display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.affiliate-item-stat { font-size:.78rem; color:var(--bs-secondary-color); display:flex; align-items:center; gap:.25rem; }
.all-client-item {
  padding:.75rem 1.75rem; cursor:pointer;
  border-bottom:1px solid var(--bs-border-color);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:background .15s;
}
.all-client-item:hover { background:var(--bs-tertiary-bg); }
.all-client-item.active { background: rgba(var(--bs-primary-rgb),.08); }

/* ── Theme / Design Manager ──────────────────────────────────────── */
.theme-mgr-header {
  padding: 1rem 1.5rem .875rem;
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}
.theme-mgr-title { font-size: .95rem; font-weight: 700; color: var(--bs-emphasis-color); display: flex; align-items: center; gap: .45rem; }
.theme-mgr-title i { color: var(--bs-primary); }
.theme-mgr-subtitle { font-size: .78rem; color: var(--bs-secondary-color); margin-top: .2rem; }
.theme-preview-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--bs-secondary-color); font-weight: 600; margin-bottom: 1rem;
}
.theme-preview-inner { max-width: 380px; }
.theme-section {
  margin-bottom: 1.25rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.theme-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.theme-section-title {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--bs-secondary-color); font-weight: 600; margin-bottom: .8rem;
  display: flex; align-items: center; gap: .35rem;
}
.theme-row { margin-bottom: .7rem; }
.theme-row:last-child { margin-bottom: 0; }
.theme-row-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .82rem; margin-bottom: .2rem; color: var(--bs-body-color);
}
.theme-val { font-size: .72rem; color: var(--bs-secondary-color); font-family: 'Courier New', monospace; }
.vibe-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-bottom: .25rem;
}
.vibe-chip {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .55rem;
  border: 1.5px solid var(--bs-border-color); border-radius: 10px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  cursor: pointer; font-size: .78rem; line-height: 1.2; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.vibe-chip:hover { border-color: var(--bs-primary); }
.vibe-chip.active {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 2.5px rgba(var(--bs-primary-rgb),.18);
}
.vibe-swatch { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.vibe-chip-name { font-weight: 600; font-size: .78rem; }
.vibe-chip-desc { font-size: .67rem; color: var(--bs-secondary-color); }
.shadow-presets { display: flex; gap: .4rem; }
.shadow-preset-btn {
  flex: 1; padding: .3rem .4rem;
  border: 1.5px solid var(--bs-border-color); border-radius: 8px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  font-size: .75rem; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
  font-family: 'DM Sans', sans-serif;
}
.shadow-preset-btn:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.shadow-preset-btn.active { border-color: var(--bs-primary); color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.12); }
.theme-presets-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; min-height: 1.5rem; }
.theme-preset-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .4rem .2rem .6rem;
  border: 1.5px solid var(--bs-border-color); border-radius: 999px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  font-size: .75rem; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.theme-preset-chip:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.preset-del {
  opacity: .55; font-size: .7rem; cursor: pointer;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: inherit; border-radius: 50%;
}
.preset-del:hover { opacity: 1; color: var(--bs-danger); }
.theme-mgr-footer {
  padding: .75rem 1.1rem; border-top: 1px solid var(--bs-border-color);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bs-body-bg); flex-shrink: 0;
}


/* ── Button helpers ── */
.btn-pp {
  border: none; border-radius: 8px; padding: .65rem 1.25rem;
  font-size: .9rem; font-family: 'DM Sans', sans-serif; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.btn-pp:disabled { opacity: .6; cursor: not-allowed; }
.btn-icon { width: 32px; height: 32px; padding: 0 !important; flex-shrink: 0; }
.btn-icon-lg { width: 36px; height: 36px; }
.btn-primary .spinner-border, .btn-submit .spinner-border { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
.spinner-border-sm { width: .875rem; height: .875rem; border-width: .15em; vertical-align: middle; margin-right: .3rem; }

/* ── Design page scroll fix (all sizes) ── */
#themeManager > .row { min-height: 0; }
#themeManager > .row > div { min-height: 0; height: 100%; }

/* ── Dashboard: sticky calendar sidebar ── */
@media (min-width: 992px) {
  #welcomeState { align-items: flex-start; }
  #dashCalSidebar {
    position: sticky;
    top: 0;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    overflow-y: auto;
  }
}

/* ── Place Card Designer ─────────────────────────────────────────── */
#placeCardDesigner { flex-direction: column; }
#pcdCanvasWrap { background: var(--bs-tertiary-bg, #f0f2f5); perspective: 1200px; position: relative; cursor: grab; user-select: none; -webkit-user-select: none; }
#pcdCanvasWrap.pcd-panning { cursor: grabbing !important; }
#pcdZoomBar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 24px; padding: 5px 12px; z-index: 100; white-space: nowrap;
}
.pcd-zoom-btn {
  background: none; border: none; color: rgba(255,255,255,0.8);
  padding: 2px 5px; font-size: .68rem; cursor: pointer; line-height: 1;
}
.pcd-zoom-btn:hover { color: #fff; }
#pcdZoomSlider { width: 90px; accent-color: #fff; cursor: pointer; vertical-align: middle; }
#pcdZoomLabel {
  color: rgba(255,255,255,0.8); font-size: 0.72rem; min-width: 34px;
  text-align: center; cursor: pointer; user-select: none;
}
#pcdZoomLabel:hover { color: #fff; }
.pcd-zoom-group { display: contents; }
.pcd-zoom-group-right > button:first-child {
  border-left: 1px solid rgba(255,255,255,.2); padding-left: 8px; margin-left: 2px;
}
/* ── Snap-to-guides pill (floating inside canvas wrap) ── */
.pcd-snap-pill {
  position: absolute; top: 14px; right: 14px; z-index: 100;
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.38);
  transition: background .18s, color .18s, box-shadow .18s;
  font-size: .9rem;
}
.pcd-snap-pill:hover { background: rgba(0,0,0,0.58); color: rgba(255,255,255,0.7); }
.pcd-snap-pill.active {
  background: rgba(var(--bs-primary-rgb), 0.78);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb),.35);
}
.pcd-snap-pill.active:hover { background: rgba(var(--bs-primary-rgb), 0.92); }
/* ── Tour info button — small info icon in bottom-right corner of canvas ── */
.pcd-tour-info-btn {
  position: absolute; bottom: 16px; right: 16px; z-index: 100;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.30); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.55); font-size: .8rem;
  transition: background .18s, color .18s, opacity .25s;
}
.pcd-tour-info-btn:hover { background: rgba(0,0,0,0.5); color: #fff; }
/* ── Portrait / Landscape layout toggle buttons ── */
.pcd-layout-btn {
  font-size: .78rem; padding: .28rem .7rem;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  background: transparent;
  border-radius: .35rem;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1.4;
}
.pcd-layout-btn:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  border-color: var(--bs-secondary-color);
}
.pcd-layout-btn.active {
  background: rgba(var(--bs-primary-rgb), .1);
  color: var(--bs-primary);
  border-color: rgba(var(--bs-primary-rgb), .35);
  font-weight: 600;
}
#pcdTiltWrap {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: 1px solid transparent; /* sub-pixel fringe workaround */
}
#pcdCardOuter {
  position: relative; flex-shrink: 0;
  container-type: size;
  container-name: pcd;
}
#pcdCardOuter::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 600px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 8%, black 75%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 8%, black 75%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  pointer-events: none;
}
#pcdGlare {
  position: absolute; inset: 0; z-index: 10;
  pointer-events: none; border-radius: inherit;
  background: transparent;
}
@keyframes pcdFlipOut {
  0%   { transform: rotateY(0deg) scaleX(1); opacity: 1; }
  100% { transform: rotateY(75deg) scaleX(0.6); opacity: 0.4; }
}
@keyframes pcdFlipIn {
  0%   { transform: rotateY(-75deg) scaleX(0.6); opacity: 0.4; }
  100% { transform: rotateY(0deg) scaleX(1); opacity: 1; }
}
#pcdTiltWrap.pcd-flip-out { animation: pcdFlipOut 0.18s ease-in  forwards; }
#pcdTiltWrap.pcd-flip-in  { animation: pcdFlipIn  0.22s cubic-bezier(0.34,1.56,0.64,1) forwards; }
/* Default: resolve un-suffixed --pcd-* vars from the portrait set.
   Overridden below by @container (orientation: landscape). */
#pcdCard {
  --pcd-title-font:        var(--pcd-title-font-portrait,        inherit);
  --pcd-title-size:        var(--pcd-title-size-portrait,        48px);
  --pcd-title-weight:      var(--pcd-title-weight-portrait,      700);
  --pcd-title-color:       var(--pcd-title-color-portrait,       #111);
  --pcd-title-align:       var(--pcd-title-align-portrait,       center);
  --pcd-title-lh:          var(--pcd-title-lh-portrait,          1.2);
  --pcd-title-ls:          var(--pcd-title-ls-portrait,          -1px);
  --pcd-title-shadow:      var(--pcd-title-shadow-portrait,      none);
  --pcd-title-wrap:        var(--pcd-title-wrap-portrait,        wrap);
  --pcd-title-style:       var(--pcd-title-style-portrait,       normal);
  --pcd-title-transform:   var(--pcd-title-transform-portrait,   none);
  --pcd-date-font:         var(--pcd-date-font-portrait,         inherit);
  --pcd-date-size:         var(--pcd-date-size-portrait,         12px);
  --pcd-date-weight:       var(--pcd-date-weight-portrait,       400);
  --pcd-date-color:        var(--pcd-date-color-portrait,        #666);
  --pcd-date-ls:           var(--pcd-date-ls-portrait,           0px);
  --pcd-rule-thick:        var(--pcd-rule-thick-portrait,        1px);
  --pcd-rule-gap:          var(--pcd-rule-gap-portrait,          8px);
  --pcd-rule-edge:         var(--pcd-rule-edge-portrait,         0px);
  --pcd-desc-font:         var(--pcd-desc-font-portrait,         inherit);
  --pcd-desc-size:         var(--pcd-desc-size-portrait,         11px);
  --pcd-desc-weight:       var(--pcd-desc-weight-portrait,       400);
  --pcd-desc-color:        var(--pcd-desc-color-portrait,        #444);
  --pcd-desc-align:        var(--pcd-desc-align-portrait,        center);
  --pcd-desc-lh:           var(--pcd-desc-lh-portrait,           1.4);
  --pcd-desc-ls:           var(--pcd-desc-ls-portrait,           0px);
  --pcd-desc-shadow:       var(--pcd-desc-shadow-portrait,       none);
  --pcd-desc-wrap:         var(--pcd-desc-wrap-portrait,         wrap);
  --pcd-desc-style:        var(--pcd-desc-style-portrait,        normal);
  --pcd-desc-transform:    var(--pcd-desc-transform-portrait,    none);
  --pcd-ficon-size:        var(--pcd-ficon-size-portrait,        20px);
  --pcd-ficon-gap:         var(--pcd-ficon-gap-portrait,         14px);
  --pcd-ficon-tag-gap:     var(--pcd-ficon-tag-gap-portrait,     6px);
  --pcd-ficon1-nudge:      var(--pcd-ficon1-nudge-portrait,      0px);
  --pcd-flabel-size:       var(--pcd-flabel-size-portrait,       9.5px);
  --pcd-ftag-size:         var(--pcd-ftag-size-portrait,         9.5px);
  --pcd-ftag-color:        var(--pcd-ftag-color-portrait,        #555);
  --pcd-furl-color:        var(--pcd-furl-color-portrait,        #222);
  --pcd-ftag-weight:       var(--pcd-ftag-weight-portrait,       400);
  --pcd-furl-weight:       var(--pcd-furl-weight-portrait,       700);
  --pcd-flabel-weight:     var(--pcd-flabel-weight-portrait,     400);
  --pcd-ftag-align:        var(--pcd-ftag-align-portrait,        center);
  --pcd-footer-font:         var(--pcd-footer-font-portrait,         inherit);
  --pcd-footer-border-w:    var(--pcd-footer-border-w-portrait,    1px);
  --pcd-footer-border-color:var(--pcd-footer-border-color-portrait, #e2e2e2);
  --pcd-footer-radius:      var(--pcd-footer-radius-portrait,      10px);
  --pcd-footer-pad-x:       var(--pcd-footer-pad-x-portrait,       11px);
  --pcd-footer-pad-y:       var(--pcd-footer-pad-y-portrait,       9px);
  --pcd-footer-margin-h:    var(--pcd-footer-margin-h-portrait,    0px);
  --pcd-footer-bg:          var(--pcd-footer-bg-portrait,          #fff);
  --pcd-footer-align:       var(--pcd-footer-align-portrait,       stretch);
  --pcd-qr-size:             var(--pcd-qr-size-portrait,           72px);
  --pcd-qr-radius:         var(--pcd-qr-radius-portrait,         0px);
  --pcd-qr-logo-size:      var(--pcd-qr-logo-size-portrait,      36%);
  --pcd-qr-logo-pad:       var(--pcd-qr-logo-pad-portrait,       6%);
  --pcd-qr-bg:             var(--pcd-qr-bg-portrait,             #fff);
  --pcd-card-bg:           var(--pcd-card-bg-portrait,           #fff);
  --pcd-card-radius:       var(--pcd-card-radius-portrait,       0px);
  --pcd-card-border-w:     var(--pcd-card-border-w-portrait,     0px);
  --pcd-card-border-color: var(--pcd-card-border-color-portrait, #ddd);
  --pcd-card-pad-top:      var(--pcd-card-pad-top-portrait,      12px);
  --pcd-card-pad-right:    var(--pcd-card-pad-right-portrait,    12px);
  --pcd-card-pad-bottom:   var(--pcd-card-pad-bottom-portrait,   12px);
  --pcd-card-pad-left:     var(--pcd-card-pad-left-portrait,     12px);
  --pcd-elem-gap:          var(--pcd-elem-gap-portrait,          6px);
  --pcd-content-pad-x:     var(--pcd-content-pad-x-portrait,     4px);
  --pcd-content-pad-y:     var(--pcd-content-pad-y-portrait,     0px);
}
@container pcd (orientation: landscape) {
  #pcdCard {
    --pcd-title-font:        var(--pcd-title-font-landscape,        inherit);
    --pcd-title-size:        var(--pcd-title-size-landscape,        48px);
    --pcd-title-weight:      var(--pcd-title-weight-landscape,      700);
    --pcd-title-color:       var(--pcd-title-color-landscape,       #111);
    --pcd-title-align:       var(--pcd-title-align-landscape,       center);
    --pcd-title-lh:          var(--pcd-title-lh-landscape,          1.2);
    --pcd-title-ls:          var(--pcd-title-ls-landscape,          -1px);
    --pcd-title-shadow:      var(--pcd-title-shadow-landscape,      none);
    --pcd-title-wrap:        var(--pcd-title-wrap-landscape,        wrap);
    --pcd-title-style:       var(--pcd-title-style-landscape,       normal);
    --pcd-title-transform:   var(--pcd-title-transform-landscape,   none);
    --pcd-date-font:         var(--pcd-date-font-landscape,         inherit);
    --pcd-date-size:         var(--pcd-date-size-landscape,         12px);
    --pcd-date-weight:       var(--pcd-date-weight-landscape,       400);
    --pcd-date-color:        var(--pcd-date-color-landscape,        #666);
    --pcd-date-ls:           var(--pcd-date-ls-landscape,           0px);
    --pcd-rule-thick:        var(--pcd-rule-thick-landscape,        1px);
    --pcd-rule-gap:          var(--pcd-rule-gap-landscape,          8px);
    --pcd-rule-edge:         var(--pcd-rule-edge-landscape,         0px);
    --pcd-desc-font:         var(--pcd-desc-font-landscape,         inherit);
    --pcd-desc-size:         var(--pcd-desc-size-landscape,         11px);
    --pcd-desc-weight:       var(--pcd-desc-weight-landscape,       400);
    --pcd-desc-color:        var(--pcd-desc-color-landscape,        #444);
    --pcd-desc-align:        var(--pcd-desc-align-landscape,        center);
    --pcd-desc-lh:           var(--pcd-desc-lh-landscape,           1.4);
    --pcd-desc-ls:           var(--pcd-desc-ls-landscape,           0px);
    --pcd-desc-shadow:       var(--pcd-desc-shadow-landscape,       none);
    --pcd-desc-wrap:         var(--pcd-desc-wrap-landscape,         wrap);
    --pcd-desc-style:        var(--pcd-desc-style-landscape,        normal);
    --pcd-desc-transform:    var(--pcd-desc-transform-landscape,    none);
    --pcd-ficon-size:        var(--pcd-ficon-size-landscape,        20px);
    --pcd-ficon-gap:         var(--pcd-ficon-gap-landscape,         14px);
    --pcd-ficon-tag-gap:     var(--pcd-ficon-tag-gap-landscape,     6px);
    --pcd-ficon1-nudge:      var(--pcd-ficon1-nudge-landscape,      0px);
    --pcd-flabel-size:       var(--pcd-flabel-size-landscape,       9.5px);
    --pcd-ftag-size:         var(--pcd-ftag-size-landscape,         9.5px);
    --pcd-ftag-color:        var(--pcd-ftag-color-landscape,        #555);
    --pcd-furl-color:        var(--pcd-furl-color-landscape,        #222);
    --pcd-ftag-weight:       var(--pcd-ftag-weight-landscape,       400);
    --pcd-furl-weight:       var(--pcd-furl-weight-landscape,       700);
    --pcd-flabel-weight:     var(--pcd-flabel-weight-landscape,     400);
    --pcd-ftag-align:        var(--pcd-ftag-align-landscape,        center);
    --pcd-footer-font:         var(--pcd-footer-font-landscape,         inherit);
    --pcd-footer-border-w:    var(--pcd-footer-border-w-landscape,    1px);
    --pcd-footer-border-color:var(--pcd-footer-border-color-landscape, #e2e2e2);
    --pcd-footer-radius:      var(--pcd-footer-radius-landscape,      10px);
    --pcd-footer-pad-x:       var(--pcd-footer-pad-x-landscape,       11px);
    --pcd-footer-pad-y:       var(--pcd-footer-pad-y-landscape,       9px);
    --pcd-footer-margin-h:    var(--pcd-footer-margin-h-landscape,    0px);
    --pcd-footer-bg:          var(--pcd-footer-bg-landscape,          #fff);
    --pcd-footer-align:       var(--pcd-footer-align-landscape,       stretch);
    --pcd-qr-size:             var(--pcd-qr-size-landscape,           72px);
    --pcd-qr-radius:         var(--pcd-qr-radius-landscape,         0px);
    --pcd-qr-logo-size:      var(--pcd-qr-logo-size-landscape,      36%);
    --pcd-qr-logo-pad:       var(--pcd-qr-logo-pad-landscape,       6%);
    --pcd-qr-bg:             var(--pcd-qr-bg-landscape,             #fff);
    --pcd-card-bg:           var(--pcd-card-bg-landscape,           #fff);
    --pcd-card-radius:       var(--pcd-card-radius-landscape,       0px);
    --pcd-card-border-w:     var(--pcd-card-border-w-landscape,     0px);
    --pcd-card-border-color: var(--pcd-card-border-color-landscape, #ddd);
    --pcd-card-pad-top:      var(--pcd-card-pad-top-landscape,      12px);
    --pcd-card-pad-right:    var(--pcd-card-pad-right-landscape,    12px);
    --pcd-card-pad-bottom:   var(--pcd-card-pad-bottom-landscape,   12px);
    --pcd-card-pad-left:     var(--pcd-card-pad-left-landscape,     12px);
    --pcd-elem-gap:          var(--pcd-elem-gap-landscape,          6px);
    --pcd-content-pad-x:     var(--pcd-content-pad-x-landscape,     4px);
    --pcd-content-pad-y:     var(--pcd-content-pad-y-landscape,     0px);
  }
}
#pcdCard {
  position: absolute; top: 50%; left: 50%;
  width: 480px; height: 720px;
  display: flex;
  overflow: hidden;
  background: #fff;
  user-select: none; -webkit-user-select: none;
  border-radius: var(--pcd-card-radius, 0px);
  border: var(--pcd-card-border-w, 0px) solid var(--pcd-card-border-color, #ddd);
  transform: translate(-50%, -50%) scale(0); /* placeholder; JS sets the full transform every frame */
  transform-origin: 50% 50%;
  /* box-shadow blur and alpha are scaled by CSS variables so the slam
     transition can fake a lift-off-the-surface feel — bigger/lighter shadow
     at the apex, tighter/darker at the impact moment. Defaults (mult = 1)
     reproduce the original 4/22, 28/48 -6 layered shadow exactly. */
  --pcd-shadow-blur-mult: 1;
  --pcd-shadow-alpha-mult: 1;
  box-shadow: 0 4px  calc(10px * var(--pcd-shadow-blur-mult)) -2px rgba(0, 0, 0, calc(.22 * var(--pcd-shadow-alpha-mult))),
              0 28px calc(48px * var(--pcd-shadow-blur-mult)) -6px rgba(0, 0, 0, calc(.30 * var(--pcd-shadow-alpha-mult)));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  /* Prevent white sub-pixel fringe on 3D-transformed edges */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-reflect: below 60px radial-gradient(ellipse 70% 35% at 50% 100%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 100%);
}
#pcdCard.pcd-landscape { flex-direction: row; width: 720px; height: 480px; }
#pcdCard.pcd-portrait  { flex-direction: column; }
.pcd-cell { position: relative; overflow: hidden; flex-shrink: 0; }
#pcdCellImg { background: #c4c4c4; perspective: 900px; }
/* Wrapper around the banner img — receives the 3D flip animation so the
   image's own scale/translate transform (rewritten on every preview update)
   never collides with our rotation. */
#pcdBannerFlipWrap {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Half-flip + return: rotates to edge-on at 50%, then back to identity.
   pcdBannerFlip swaps the actual scaleX/scaleY mirror at the midpoint while
   the wrapper is invisible — the user perceives one continuous card flip. */
@keyframes ppBannerFlipH {
  0%   { transform: rotateY(0); }
  50%  { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}
@keyframes ppBannerFlipV {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
/* Snappy timing: ~200ms total, cubic-bezier(.2,0,0,1) — fast off the start
   with a sharp deceleration so the flip feels crisp, not floaty. */
#pcdBannerFlipWrap.pp-flipping-h { animation: ppBannerFlipH 200ms cubic-bezier(.2,0,0,1); }
#pcdBannerFlipWrap.pp-flipping-v { animation: ppBannerFlipV 200ms cubic-bezier(.2,0,0,1); }
#pcdBannerVignette {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.9) 100%);
}
#pcdCellContent {
  flex: 1 1 0; min-width: 0; min-height: 0;
  background: #fff;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding: var(--pcd-card-pad-top, 12px) var(--pcd-card-pad-right, 12px) var(--pcd-card-pad-bottom, 12px) var(--pcd-card-pad-left, 12px);
}
#pcdContentMain {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: var(--pcd-elem-gap, 6px);
  padding: var(--pcd-content-pad-y, 0px) var(--pcd-content-pad-x, 4px);
  overflow: hidden;
}
#pcdCardTitle {
  font-family:    var(--pcd-title-font, inherit);
  font-size:      var(--pcd-title-size, 36px);
  font-weight:    var(--pcd-title-weight, 700);
  color:          var(--pcd-title-color, #111);
  text-align:     var(--pcd-title-align, center);
  line-height:    var(--pcd-title-lh, 1.2);
  letter-spacing: var(--pcd-title-ls, -1px);
  text-shadow:    var(--pcd-title-shadow, none);
  text-wrap:      var(--pcd-title-wrap, wrap);
  font-style:     var(--pcd-title-style, normal);
  text-transform: var(--pcd-title-transform, none);
  margin: 0; width: 100%;
}
#pcdCardDate {
  display: flex; align-items: center; width: 100%;
  gap: var(--pcd-rule-gap, 8px);
  padding: 0 var(--pcd-rule-edge, 0px);
  margin: 0; box-sizing: border-box;
}
#pcdCardDate span {
  font-family: var(--pcd-date-font, inherit);
  font-size:   var(--pcd-date-size, 12px);
  font-weight: var(--pcd-date-weight, 400);
  color:       var(--pcs-date-color, var(--pcd-date-color, #666));
  letter-spacing: var(--pcd-date-ls, 0px);
  white-space: nowrap; flex-shrink: 0;
}
#pcdCardDate span:empty::before { content: 'Date'; color: #ccc; font-style: italic; }
#pcdCardDate::before {
  content: ''; flex: var(--pcs-rule-before-flex, 1);
  height: var(--pcd-rule-thick, 1px);
  background: var(--pcs-rule-color, var(--pcd-date-color, #666));
}
#pcdCardDate::after {
  content: ''; flex: var(--pcs-rule-after-flex, 1);
  height: var(--pcd-rule-thick, 1px);
  background: var(--pcs-rule-color, var(--pcd-date-color, #666));
}
#pcdCardDate.pcd-rule-none::before,  #pcdCardDate.pcd-rule-none::after  { visibility: hidden; }
#pcdCardDate.pcd-rule-left::before  { visibility: hidden; }  /* DATE ——— */
#pcdCardDate.pcd-rule-right::after  { visibility: hidden; }  /* ——— DATE */
#pcdCardDate.pcd-date-hidden { gap: 0; }
#pcdCardDesc {
  font-family: var(--pcd-desc-font, inherit);
  font-size:   var(--pcd-desc-size, 11px);
  font-weight: var(--pcd-desc-weight, 400);
  color:       var(--pcd-desc-color, #444);
  text-align:  var(--pcd-desc-align, center);
  line-height: var(--pcd-desc-lh, 1.4);
  letter-spacing: var(--pcd-desc-ls, 0px);
  text-shadow:    var(--pcd-desc-shadow, none);
  text-wrap:      var(--pcd-desc-wrap, wrap);
  font-style:     var(--pcd-desc-style, normal);
  text-transform: var(--pcd-desc-transform, none);
  white-space: pre-wrap; overflow-wrap: break-word;
  margin: 0; width: 100%;
}
#pcdCardTitle:empty::after { content: 'Event Title'; color: #ccc; font-style: italic; font-weight: 400; }
#pcdCardDesc:empty::after  { content: 'Description'; color: #ccc; font-style: italic; }
#pcdFooter {
  flex-shrink: 0;
  display: flex; flex-direction: row; align-items: center;
  font-family: var(--pcd-footer-font, inherit);
  gap: 10px;
  border: var(--pcd-footer-border-w, 1px) solid var(--pcs-footer-border, var(--pcd-footer-border-color, #e2e2e2));
  border-radius: var(--pcd-footer-radius, 10px);
  padding: var(--pcd-footer-pad-y, 9px) var(--pcd-footer-pad-x, 11px);
  background: var(--pcd-footer-bg, #fff);
  margin: 0 var(--pcd-footer-margin-h, 0px);
  align-self: var(--pcd-footer-align, stretch);
}
#pcdFooterLeft { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--pcd-ficon-tag-gap, 6px); }
#pcdFooterIcons { display: flex; flex-direction: row; gap: var(--pcd-ficon-gap, 14px); justify-content: center; }
.pcd-ficon {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: var(--pcd-flabel-size,9.5px); color: var(--pcs-icon-label-color, var(--pcd-ftag-color,#555)); line-height: 1;
}
.pcd-ficon i {
  font-size: var(--pcd-ficon-size,20px);
  position: relative; top: 0;
  --fa-primary-color:   var(--card-accent-color, #333);
  --fa-secondary-color: var(--card-accent-color, #333);
  --fa-secondary-opacity: 0.4;
  color: var(--card-accent-color, #333);
}
#mainPanel { overflow-x: clip; } /* clip (not hidden) avoids iOS dual-axis scroll container bug */
#mainPanel.pcd-open { overflow: hidden !important; }
/* ── Desktop ── */
@media (min-width: 768px) {
  #pcdWorkArea   { flex-direction: row; }
  #pcdCanvasWrap { flex-grow: 1; height: 100%; }
  .pcs-sidebar   { width: 320px; height: 100%; flex-shrink: 0; display: flex; flex-direction: column; }
  .pcd-canvas-toggle { display: none !important; }
}
/* ── Landscape mobile: app layout ── */
@media (orientation: landscape) and (max-height: 500px) {
  body.pcd-active .navbar { display: none !important; }
  body.pcd-active #mobileSidebar { display: none !important; }
  body.pcd-active #placeCardDesigner { position: fixed; inset: 0; z-index: 200; }
  body.pcd-active #placeCardDesigner > .border-bottom { display: none !important; }
  #pcdWorkArea   { flex-direction: row; }
  #pcdCanvasWrap { flex-grow: 1; height: 100%; transition: none; }
  .pcs-sidebar   { width: 260px; height: 100%; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--bs-border-color); }
  /* Mobile toolbar: segmented control for portrait/landscape toggle */
  .pcs-mobile-toolbar { display: flex !important; padding-top: 0.75rem !important; justify-content: center; }
  .pcs-mobile-toolbar > button:first-child { display: none !important; }
  .pcs-mobile-toolbar .btn { min-height: 44px; }
  .pcs-mobile-toolbar .btn-group {
    background: var(--bs-secondary-bg, #e9ecef);
    border-radius: 22px; padding: 3px; gap: 0; border: none !important;
  }
  .pcs-mobile-toolbar .btn-group .btn {
    border: none !important; border-radius: 19px !important;
    font-size: .75rem; padding: 8px 14px;
    background: transparent !important;
    color: var(--bs-secondary-color, #6c757d) !important;
    box-shadow: none !important; transition: all 0.2s; min-height: 0;
  }
  .pcs-mobile-toolbar .btn-group .btn.active {
    background: var(--bs-body-bg, #fff) !important;
    color: var(--bs-primary) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.15) !important;
  }
  /* Fullscreen: hide sidebar */
  #pcdWorkArea.pcd-canvas-fullwidth .pcs-sidebar { display: none !important; }
  .pcd-canvas-toggle { display: inline-flex !important; }
  #pcsTitle, #pcsDesc { font-size: 1rem !important; }
  .pcs-section-header { min-height: 44px; }
  /* Flat full-width accordion: remove card borders and rounding */
  .pcs-sections-scroll { padding: 0 !important; }
  .pcs-sections-scroll .card {
    border: none !important; border-radius: 0 !important;
    margin-bottom: 0 !important; box-shadow: none !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
  }
  .pcs-sections-scroll .card-header {
    border-radius: 0 !important; border-bottom: none !important;
    padding: 0.4rem 0.75rem !important;
  }
  .pcs-sections-scroll .card-body { padding: 0.5rem 0.75rem !important; }
  .pcs-sections-scroll .card:last-child { border-bottom: none !important; }
  /* Zoom bar: individual glass pill buttons, no container glass */
  #pcdZoomBar {
    top: max(20px, calc(env(safe-area-inset-top, 0px) + 12px)); left: 8px; right: 8px; transform: none;
    background: transparent; box-shadow: none; padding: 0; border-radius: 0;
    justify-content: space-between;
    transition: opacity 0.4s 0.8s;
    touch-action: manipulation;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .pcd-zoom-group { display: flex; align-items: center; gap: 6px; }
  .pcd-zoom-group-right > button:first-child { border-left: none; padding-left: 0; margin-left: 0; }
  .pcd-zoom-btn {
    padding: 12px; font-size: .9rem;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.3);
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pcd-zoom-btn:hover { background: rgba(0,0,0,0.75); }
  /* Expand and gyro buttons: perfect circles */
  #pcdCanvasToggle, #pcdGyroBtn {
    width: 44px !important; height: 44px !important;
    padding: 0 !important; border-radius: 50% !important;
  }
  #pcdZoomLabel { font-size: .85rem; min-width: 46px; padding: 0 4px; }
  #pcdZoomSlider { display: none; }
  /* Larger card split handle for touch */
  #pcdCard.pcd-landscape #pcdHandle { width: 52px; margin: 0 -26px; }
  #pcdCard.pcd-portrait  #pcdHandle { height: 52px; margin: -26px 0; }
  #pcdCard.pcd-landscape #pcdHandleIndicator { height: 22px; width: 52px; }
  #pcdCard.pcd-portrait  #pcdHandleIndicator { width: 22px; height: 52px; }
  /* Hide zoom bar + snap pill while panning, dragging banner, or using split handle */
  #pcdCanvasWrap.pcd-panning #pcdZoomBar,
  #pcdCanvasWrap.pcd-img-drag #pcdZoomBar,
  #pcdCanvasWrap.pcd-splitting #pcdZoomBar,
  #pcdCanvasWrap.pcd-panning .pcd-snap-pill,
  #pcdCanvasWrap.pcd-img-drag .pcd-snap-pill,
  #pcdCanvasWrap.pcd-splitting .pcd-snap-pill { opacity: 0 !important; pointer-events: none; transition: opacity 0.1s; }
  /* Push snap pill below the full-width zoom bar so they don't overlap */
  .pcd-snap-pill { top: 72px; }
}
/* Rotate-to-portrait typing prompt */
#pcdRotateToTypeOverlay {
  display: none;
  position: fixed; inset: 0; z-index: 10002;
  background: var(--bs-body-bg);
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5rem; text-align: center; padding: 2rem;
}
body.pcd-rotate-to-type #pcdRotateToTypeOverlay { display: flex; }
body.pcd-typing-portrait #pcdRotatePrompt { display: none !important; }
/* Submit order drawer: ↓ when open, ↑ when collapsed */
.pcs-order-toggle.collapsed .pcs-chevron { transform: rotate(180deg) !important; }
#pcdTextOverlayActions { background: var(--bs-body-bg); }
body.pcd-active #placeCardDesigner { touch-action: manipulation; }
body.pcd-active #pcdCanvasWrap { touch-action: none; }
body.pcd-active .pcs-sections-scroll { touch-action: pan-y; }
body.pcd-active .pcs-tab-content { touch-action: pan-y; }
.pcs-mobile-toolbar { display: none; }
#pcdTextOverlay {
  position: fixed; top: 0; left: 0; right: 0; height: 100%; z-index: 10001;
  background: var(--bs-body-bg);
  display: flex; flex-direction: column;
}
/* Rotate overlay — base style must come before the media query that overrides display */
#pcdRotatePrompt {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bs-body-bg);
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5rem; text-align: center; padding: 2rem;
}
/* ── Portrait mobile: rotate overlay ── */
@media (orientation: portrait) and (max-width: 600px) {
  #pcdRotatePrompt { display: flex; }
  /* Show header bar above the overlay so user can always exit */
  #placeCardDesigner > .border-bottom { position: relative; z-index: 10000; }
  #pcdWorkArea { opacity: 0; pointer-events: none; }
}
#pcdRotatePrompt .pcd-rotate-icon {
  font-size: 3rem; opacity: 0.35;
  animation: pcdRotateHint 2.5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes pcdRotateHint {
  0%,  100% { transform: rotate(0deg); }
  35%, 65%  { transform: rotate(-90deg); }
}
.pcs-sections-scroll { flex: 1 1 0; overflow-y: auto; padding: 0.75rem; min-height: 0; }
.pcs-section-header { cursor: pointer; user-select: none; }
.pcs-section-header:hover { background-color: var(--bs-tertiary-bg); }
/* ── Sidebar tab nav ── */
.pcs-tab-nav { display: flex; }
.pcs-tab-btn {
  flex: 1; border: none; background: none;
  padding: .42rem .25rem .35rem;
  font-size: .68rem; font-weight: 500;
  color: var(--bs-secondary-color);
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  line-height: 1.2;
}
.pcs-tab-btn i { font-size: .82rem; }
.pcs-tab-btn.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
.pcs-tab-btn:hover:not(.active) { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
.pcs-tab-content { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.pcs-tab-pane { display: none !important; flex-direction: column; }
.pcs-tab-pane.active { display: flex !important; }
.pcs-chevron { transition: transform 0.2s ease; font-size: 0.7rem; flex-shrink: 0; }
.collapsed .pcs-chevron { transform: rotate(-90deg); }
.pcs-help-btn { line-height: 1; font-size: 0.8rem; opacity: 0.6; }
.pcs-help-btn:hover { opacity: 1; }
.pcs-order-drawer { flex-shrink: 0; border-top: 3px solid var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.pcs-qr-swatch { width: 22px; height: 22px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; padding: 0; outline-offset: 2px; }
.pcs-qr-swatch.active { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); }
.pcs-order-toggle { background: none; border: none; text-align: left; border-radius: 0; min-height: 52px; padding-top: .65rem; padding-bottom: .65rem; }
.pcs-order-toggle:hover { background-color: rgba(var(--bs-primary-rgb), .08); }
#pcsSubmitBtn { padding-top: .65rem; padding-bottom: .65rem; font-size: .95rem; }
.pcs-order-toggle:not(.collapsed) .pcs-chevron { transform: rotate(180deg); }
#pcdFooterTagline { display: flex; flex-direction: column; font-size: var(--pcd-ftag-size,9.5px); font-weight: var(--pcd-ftag-weight,400); color: var(--pcs-tagline-color, var(--pcd-ftag-color,#555)); line-height: 1.35; text-align: var(--pcd-ftag-align, center); }
#pcdFooterTagline strong { font-size: calc(var(--pcd-ftag-size,9.5px) + 0.5px); font-weight: var(--pcd-furl-weight,700); color: var(--pcs-url-color, var(--pcd-furl-color,#222)); }
.pcd-ficon span { font-weight: var(--pcd-flabel-weight,400); }
#pcdFooterIcons .pcd-ficon:nth-child(1) i { top: var(--pcd-ficon1-nudge, 0px); }
.pcd-qr-wrap { position: relative; width: var(--pcd-qr-size,72px); height: var(--pcd-qr-size,72px); flex-shrink: 0; }
#pcdFooterQr { width: 100%; height: 100%; border-radius: var(--pcd-qr-radius,0px); background-color: var(--pcd-qr-bg, #ffffff); display: block; overflow: hidden; }
#pcdFooterQr svg { width: 100%; height: 100%; display: block; }
.pcd-qr-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pcd-qr-logo svg { width: var(--pcd-qr-logo-size, 36%); aspect-ratio: 1; background: #fff; border-radius: 50%; padding: var(--pcd-qr-logo-pad, 6%); box-sizing: border-box; }
#pcdBannerImg {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  user-select: none; cursor: grab;
  -webkit-user-drag: none;
}
#pcdBannerImg.pcd-dragging { cursor: grabbing; }
/* ── Image drag guides (rule of thirds) ── */
#pcdImgGuides { position: absolute; inset: 0; pointer-events: none; z-index: 4; display: none; }
#pcdImgGuides.pcd-visible { display: block; }
/* Snap-off mode hides both guide layers — guides are a visual aid for the
   snap behavior, so they shouldn't appear when the user (or the tour) has
   turned the magnet OFF. Body class is toggled by pcdToggleSnap. */
body.pcd-snap-off #pcdImgGuides.pcd-visible,
body.pcd-snap-off #pcdSplitGuides.pcd-visible { display: none !important; }
.pcd-img-guide-h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.55); }
.pcd-img-guide-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.55); }
/* ── Split guides — inside #pcdCard, scale with the card ── */
#pcdSplitGuides { position: absolute; inset: 0; pointer-events: none; z-index: 20; display: none; }
#pcdSplitGuides.pcd-visible { display: block; }
.pcd-split-guide { position: absolute; background: rgba(79,140,255,.75); }
/* portrait: horizontal lines */
#pcdCard.pcd-portrait  #pcdSplitGuides .pcd-split-guide { left: 0; right: 0; height: 1px; }
#pcdCard.pcd-portrait  #pcdSplitGuides .pcd-split-guide[data-pct="33"] { top: 33.33%; }
#pcdCard.pcd-portrait  #pcdSplitGuides .pcd-split-guide[data-pct="50"] { top: 50%;     opacity: .45; }
#pcdCard.pcd-portrait  #pcdSplitGuides .pcd-split-guide[data-pct="67"] { top: 66.67%; }
/* landscape: vertical lines */
#pcdCard.pcd-landscape #pcdSplitGuides .pcd-split-guide { top: 0; bottom: 0; width: 1px; }
#pcdCard.pcd-landscape #pcdSplitGuides .pcd-split-guide[data-pct="33"] { left: 33.33%; }
#pcdCard.pcd-landscape #pcdSplitGuides .pcd-split-guide[data-pct="50"] { left: 50%;     opacity: .45; }
#pcdCard.pcd-landscape #pcdSplitGuides .pcd-split-guide[data-pct="67"] { left: 66.67%; }
/* transparent full-seam grab zone inside the card */
#pcdHandle {
  flex-shrink: 0; position: relative; z-index: 5;
  background: transparent; transition: background 0.1s;
}
#pcdHandle::after {
  content: ''; position: absolute; inset: 0 -10px; cursor: inherit;
}
#pcdHandle.pcd-at-limit { background: rgba(220,38,38,.45); }
#pcdCard.pcd-landscape #pcdHandle { width: 12px; height: 100%; cursor: ew-resize; }
#pcdCard.pcd-portrait  #pcdHandle { height: 12px; width: 100%; cursor: ns-resize; }
@media (pointer: coarse) {
  #pcdCard.pcd-landscape #pcdHandle { width: 32px; margin: 0 -16px; }
  #pcdCard.pcd-portrait  #pcdHandle { height: 32px; margin: -16px 0; }
  #pcdHandleIndicator { width: 28px; height: 52px; }
  #pcdHandleIndicator.pcd-landscape { height: 28px; width: 52px; }
}
/* visual pip — outside the card in #pcdCardOuter */
#pcdHandleIndicator {
  position: absolute; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.2);
}
#pcdHandleIndicator::before {
  content: '';
  display: block;
  background: radial-gradient(circle, #aaa 1.5px, transparent 1.5px);
}
/* portrait: horizontal seam → pip on right edge */
#pcdHandleIndicator.pcd-portrait  { width: 16px; height: 36px; left: 100%; margin-left: 6px; }
#pcdHandleIndicator.pcd-portrait::before  { width: 4px; height: 22px; background-size: 4px 4px; }
/* landscape: vertical seam → pip on bottom edge */
#pcdHandleIndicator.pcd-landscape { height: 16px; width: 36px; top: 100%; margin-top: 6px; }
#pcdHandleIndicator.pcd-landscape::before { height: 4px; width: 22px; background-size: 4px 4px; }

/* ── Mobile: search bars & design page ── */
@media (max-width: 767.98px) {
  .affmgr-filter-row { flex-direction: column; align-items: stretch; padding: .6rem 1rem; }
  .affmgr-search-wrap { width: 100%; }
  .affmgr-search { width: 100%; }
  .affmgr-filter-select { width: 100%; }
#themeManager > .row { align-content: flex-start !important; overflow-y: auto !important; overflow-x: hidden !important; }
  #themeManager > .row > div { overflow: visible !important; height: auto !important; }
}

/* ── Card Style Panel ───────────────────────────────────────────── */
.cs-section-divider { border-top: 2px solid var(--bs-border-color); margin-top: 1.25rem; padding-top: 0.25rem; }
.cs-elem-head {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bs-secondary-color);
  margin: 0.75rem 0 0.35rem; padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.cs-subsection {
  font-size: .68rem; font-weight: 600; color: var(--bs-secondary-color);
  margin: 0.5rem 0 0.25rem; letter-spacing: .05em;
}
.cs-font-row { align-items: center; }
.cs-font-input { font-size: .75rem; }
.cs-color { width: 38px; height: 28px; padding: 2px 3px; border-radius: 4px; cursor: pointer; border: 1px solid var(--bs-border-color); }
.cs-align-group .btn { padding: 2px 7px; }
.cs-no-presets { font-size: .75rem; color: var(--bs-secondary-color); }

/* ── Banner editor ── */
.pcs-drop-zone { border: 1.5px dashed var(--bs-border-color); border-radius: 6px; padding: 6px; }
#pcsBannerVignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  border-radius: inherit; opacity: 0; transition: opacity .15s;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.75) 100%);
}
.pcs-slider-row {
  display: grid;
  grid-template-columns: 72px 1fr 30px;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.pcs-slider-label { color: var(--bs-secondary-color); }
.pcs-slider-val { text-align: right; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.pcs-preset-btn { flex: 1; font-size: .7rem; padding: 2px 4px; }
.btn-xs { padding: .15rem .4rem; font-size: .7rem; line-height: 1.4; }
.pcs-accent-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; flex-shrink: 0; transition: transform .15s, border-color .15s, box-shadow .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pcs-accent-swatch:hover { transform: scale(1.18); border-color: var(--bs-body-color); }
.pcs-accent-swatch.active { border-color: var(--bs-body-color); box-shadow: 0 0 0 3px rgba(0,0,0,.15); }

/* ── PDF status pill pulse (for "Generating…") ── */
@keyframes pdf-pill-pulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.pdf-pill-pulse { animation: pdf-pill-pulse 1.6s ease-in-out infinite; }

/* ── Full-page calendar (FullCalendar) theme bridge ── */
#fullCalGrid {
  --fc-border-color:               var(--bs-border-color-translucent);  /* lighter grid */
  --fc-page-bg-color:              var(--bs-body-bg);
  --fc-neutral-bg-color:           var(--bs-tertiary-bg);
  --fc-neutral-text-color:         var(--bs-secondary-color);
  --fc-list-event-hover-bg-color:  var(--bs-tertiary-bg);
  --fc-today-bg-color:             transparent;  /* bold day number + dot is the indicator */
  --fc-event-bg-color:             var(--bs-primary);
  --fc-event-border-color:         var(--bs-primary);
  --fc-event-text-color:           var(--bs-body-color);  /* chips use body text now */
  color: var(--bs-body-color);
}
#fullCalGrid .fc-toolbar-title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--bs-emphasis-color);
}

/* Toolbar buttons: ghost style for navigation/inactive views, filled for
   the active view. Reads as a refined segmented control instead of a row
   of identically loud primary CTAs. */
#fullCalGrid .fc-button {
  background: transparent;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  font-size: .78rem;
  font-weight: 500;
  padding: .3rem .65rem;
  box-shadow: none !important;
  transition: background-color .12s, border-color .12s, color .12s;
}
#fullCalGrid .fc-button:not(:disabled):hover {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
#fullCalGrid .fc-button:not(:disabled):focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
}
#fullCalGrid .fc-button-active,
#fullCalGrid .fc-button-active:hover,
#fullCalGrid .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--pp-on-primary, #fff);
}
#fullCalGrid .fc-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
/* Tighten the button groups so the toolbar reads as fewer, calmer chunks */
#fullCalGrid .fc-button-group .fc-button {
  border-radius: 0;
}
#fullCalGrid .fc-button-group .fc-button:first-child { border-top-left-radius: .375rem; border-bottom-left-radius: .375rem; }
#fullCalGrid .fc-button-group .fc-button:last-child  { border-top-right-radius: .375rem; border-bottom-right-radius: .375rem; }
#fullCalGrid .fc-button-group .fc-button + .fc-button { margin-left: -1px; }
#fullCalGrid .fc-daygrid-day-number {
  color: var(--bs-body-color);
  text-decoration: none;
  padding: 6px 8px 2px;
  font-weight: 500;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
#fullCalGrid .fc-col-header-cell-cushion {
  color: var(--bs-body-color);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
  padding: 10px 0;
}

/* Day-cell hover: a faint warm-up that hints at clickability. Transition is
   short so the calendar doesn't feel "fuzzy" as the cursor passes over. */
.fc .fc-daygrid-day { transition: background-color .12s ease; }
.fc .fc-daygrid-day:not(.fc-day-today):hover { background-color: var(--bs-tertiary-bg); }
/* Dark mode: --bs-tertiary-bg sits just 4% off the body bg, which is hard
   to perceive as a hover state on the calendar grid. Brighten it. */
[data-bs-theme="dark"] .fc .fc-daygrid-day:not(.fc-day-today):hover {
  background-color: rgba(255, 255, 255, .055);
}

/* Today: bold primary-colored number + a tiny accent dot underneath. No
   filled badge — reads as natural typography emphasis instead of a chip,
   which feels heavy at small calendar scales. */
.fc .fc-day-today { background: transparent !important; }
.fc .fc-day-today .fc-daygrid-day-number {
  color: var(--bs-primary) !important;
  font-weight: 700;
  position: relative;
  padding-bottom: 7px !important;
}
.fc .fc-day-today .fc-daygrid-day-number::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 2px;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bs-primary);
}
.fcal-widget-card .fc .fc-day-today .fc-daygrid-day-number {
  padding-bottom: 6px !important;
}
.fcal-widget-card .fc .fc-day-today .fc-daygrid-day-number::after {
  width: 3px; height: 3px;
}

/* Past dates: subtle dim so the eye is drawn to upcoming/today/future.
   Apply opacity to the day NUMBER only; for event chips dim the text but
   keep the colored left bar at full opacity (WCAG 1.4.11 requires 3:1
   for the UI indicator, which the bar provides). */
.fc .fc-day-past .fc-daygrid-day-number { opacity: .55; }
.fc .fc-day-past .fcal-ev .fc-event-main { opacity: .6; }

/* Weekend cells: faint zebra so the week structure reads without a hard rule.
   Static rgba (not Bootstrap vars) because --bs-tertiary-bg already has a
   visible alpha that would stack too dark with cell hover. */
.fc .fc-day-sat, .fc .fc-day-sun { background-color: rgba(0,0,0,.025); }
[data-bs-theme="dark"] .fc .fc-day-sat,
[data-bs-theme="dark"] .fc .fc-day-sun { background-color: rgba(255,255,255,.03); }
#fullCalGrid a,
#fullCalGrid a:hover,
.fcal-widget-card a,
.fcal-widget-card a:hover { text-decoration: none !important; }
/* FC injects a[data-navlink]:hover { text-decoration:underline } — squash it */
#fullCalGrid [data-navlink],
#fullCalGrid [data-navlink]:hover,
.fcal-widget-card [data-navlink],
.fcal-widget-card [data-navlink]:hover { text-decoration: none !important; }
#fullCalGrid .fc-daygrid-more-link {
  color: var(--bs-secondary-color);
  font-size: .68rem;
  font-weight: 500;
  padding: 2px 4px 2px 8px;
  background: transparent;
  border-radius: 3px;
  transition: color .12s;
}
#fullCalGrid .fc-daygrid-more-link:hover {
  color: var(--bs-primary);
  background: transparent;
  text-decoration: none !important;
}
.fc-popover {
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: .5rem !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.18) !important;
  overflow: hidden;
  min-width: 260px !important;
  max-width: 360px;
  font-size: 1rem;
}
.fc-popover-header {
  background: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
  padding: .65rem .9rem !important;
  font-weight: 600;
  font-size: .9rem;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.fc-popover-close { font-size: 1.1rem !important; opacity: .7; }
.fc-popover-close:hover { opacity: 1; }
.fc-popover-body { padding: .65rem .8rem .8rem !important; display: flex; flex-direction: column; gap: 5px; }
/* Event chips inside the popover get more breathing room — the popover is
   where overflow events go, so they need to read as a proper list. */
.fc-popover-body .fcal-ev {
  font-size: .85rem !important;
  padding: 5px 9px 5px 10px !important;
  border-radius: 5px !important;
  line-height: 1.4;
}

/* Event block styling — party vs order.
   FC injects .fc-h-event { background-color: var(--fc-event-bg-color); border: 1px solid ... }
   via a <style> tag after portal.css. Pill-shaped chips with a soft shadow,
   no harsh accent border. Solid backgrounds (no alpha) read better at chip
   sizes than the previous 55% alpha rendering. */
/* Modern event chip: subtle accent-tinted bg + colored left bar + body text.
   The colored bar (3px) tells you the type; the text reads normally because
   it's body-color on a near-transparent tint. Solves the legibility problem
   (white-on-yellow popover pills) by removing the filled-color pill entirely.
   color-mix() universally supported (Chrome 111+, FF 113+, Safari 16.2+). */
.fcal-ev {
  font-size: .8rem;
  padding: 3px 7px 3px 8px;
  border-radius: 4px;
  border: none !important;
  border-left: 3px solid var(--fc-event-bg-color) !important;
  background: color-mix(in srgb, var(--fc-event-bg-color) 14%, transparent) !important;
  color: var(--bs-body-color) !important;
  font-weight: 500;
  line-height: 1.45;
  overflow: hidden;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .12s;
}
.fcal-ev:hover {
  background: color-mix(in srgb, var(--fc-event-bg-color) 24%, transparent) !important;
  transform: none !important;
}
.fcal-ev:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
}
.fcal-ev .fc-event-main {
  color: var(--bs-body-color) !important;
  display: flex; align-items: center; gap: 5px;
  overflow: hidden;
}
.fcal-ev-party { --fc-event-bg-color: var(--pp-accent-party, var(--bs-primary)); }
.fcal-ev-order { --fc-event-bg-color: var(--pp-accent-order, #d97706); }
.fcal-ev-ann   { --fc-event-bg-color: var(--pp-accent-ann, var(--bs-success, #198754)); }
/* Type-icon inside the chip: small + colored to match the bar, so the chip
   reads at a glance even in monochrome scans. */
.fcal-ev-party .fcal-ev-icon { color: var(--pp-accent-party, var(--bs-primary)); }
.fcal-ev-order .fcal-ev-icon { color: var(--pp-accent-order, #d97706); }
.fcal-ev-ann   .fcal-ev-icon { color: var(--pp-accent-ann, var(--bs-success, #198754)); }
.fcal-ev-icon  { font-size: .68rem; flex-shrink: 0; opacity: .9; }
.fcal-ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Grid → sidebar cross-highlight: when an event in the grid is hovered, the
   matching row in the sidebar event list also lights up (and vice versa, via
   the .fcal-event-row:hover rule + paired class on the chip below). */
.fcal-event-row.fcal-event-row-linked,
.fcal-event-row.fcal-event-row-linked:hover {
  background: rgba(var(--bs-primary-rgb), .12);
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}
/* Cross-highlight for chips — subtle tint deepens + a thin ring. Keeps the
   colored left bar as the type indicator (not a transform/scale, since
   text chips don't benefit from the pop the way dots did). */
.fcal-ev.fcal-ev-linked {
  background: color-mix(in srgb, var(--fc-event-bg-color) 26%, transparent) !important;
  box-shadow: inset 0 0 0 1px var(--fc-event-bg-color) !important;
  transform: none !important;
  filter: none !important;
}

/* listMonth view — icon colors need to show on the dot column */
#fullCalGrid .fc-list-event.fcal-ev-party td.fc-list-event-graphic .fc-list-event-dot { border-color: var(--bs-primary); }
#fullCalGrid .fc-list-event.fcal-ev-order td.fc-list-event-graphic .fc-list-event-dot { border-color: var(--pp-accent-order, #d97706); }
#fullCalGrid .fc-list-event.fcal-ev-ann   td.fc-list-event-graphic .fc-list-event-dot { border-color: var(--pp-accent-ann, var(--bs-success, #198754)); }
#fullCalGrid .fc-list-event.fcal-ev-party,
#fullCalGrid .fc-list-event.fcal-ev-order,
#fullCalGrid .fc-list-event.fcal-ev-ann   { background: transparent; color: var(--bs-body-color); }
#fullCalGrid .fc-list-event.fcal-ev-party:hover,
#fullCalGrid .fc-list-event.fcal-ev-order:hover,
#fullCalGrid .fc-list-event.fcal-ev-ann:hover { background: var(--bs-tertiary-bg); }
#fullCalGrid .fc-list-event.fcal-ev-party .fc-list-event-title,
#fullCalGrid .fc-list-event.fcal-ev-order .fc-list-event-title,
#fullCalGrid .fc-list-event.fcal-ev-ann   .fc-list-event-title { color: var(--bs-body-color); }

/* Loading overlay */
.fcal-loading-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--bs-body-bg-rgb), 0.6);
  z-index: 5;
  border-radius: .5rem;
}

/* Event list row icons */
.fcal-row-icon { margin-right: .35rem; font-size: .78rem; }
.fcal-row-icon-party { color: var(--bs-primary); }
.fcal-row-icon-order { color: var(--pp-accent-order, #d97706); }
.fcal-row-icon-ann   { color: var(--pp-accent-ann, var(--bs-success, #198754)); }

/* ── Compact FullCalendar widget (dashboard + context sidebars) ── */
.fcal-widget-card #calGrid,
.fcal-widget-card #ctxCalGrid,
.fcal-widget-card #meCalGrid {
  --fc-border-color:        var(--bs-border-color-translucent);  /* lighter grid */
  --fc-page-bg-color:       var(--bs-body-bg);
  --fc-neutral-bg-color:    var(--bs-tertiary-bg);
  --fc-today-bg-color:      transparent;
  --fc-button-bg-color:     var(--bs-primary);
  --fc-button-border-color: var(--bs-primary);
  --fc-button-active-bg-color: var(--bs-primary);
  --fc-button-hover-bg-color:  var(--bs-primary);
  color: var(--bs-body-color);
  font-size: .78rem;
}
.fcal-widget-card .fc .fc-toolbar.fc-header-toolbar { margin-bottom: .4rem; }
.fcal-widget-card .fc .fc-toolbar-title { font-size: .85rem; font-weight: 600; letter-spacing: -.01em; }
.fcal-widget-card .fc .fc-button { padding: .12rem .4rem; font-size: .68rem; }
.fcal-widget-card .fc .fc-col-header-cell-cushion {
  padding: 6px 0;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--bs-body-color);
}
.fcal-widget-card .fc .fc-daygrid-day-number {
  padding: 4px 5px 1px;
  font-size: .82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Widget chips: same colored-bar language as the full cal but smaller bar,
   tighter padding. Title still shows (truncated by FC's overflow). */
.fcal-widget-card .fcal-ev {
  font-size: .58rem;
  padding: 0 4px 0 4px;
  border-left-width: 2px !important;
  border-radius: 2px;
  line-height: 1.4;
}
.fcal-widget-card .fcal-ev-icon { display: none; }      /* no room for an icon at this scale */
.fcal-widget-card .fc-daygrid-more-link {
  font-size: .58rem;
  padding: 0 4px;
  color: var(--bs-secondary-color);
}

/* Mobile: hide the grid-view toggle (listMonth is auto on small screens) +
   bigger touch targets on the nav buttons so prev/next aren't a pixel-hunt. */
@media (max-width: 767.98px) {
  #fullCalGrid .fc-dayGridMonth-button { display: none; }
  #fullCalGrid .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: .4rem; }
  #fullCalGrid .fc-toolbar-chunk { flex: 0 0 auto; }
  #fullCalGrid .fc-button { min-height: 36px; min-width: 36px; padding: .4rem .65rem; }
  #fullCalGrid .fc-daygrid-day-number { padding: 6px 8px; }
  /* listMonth sticky day headers: FC doesn't ship an explicit z-index, so
     events can stack above them on iOS Safari when scrolling. Pin them
     above the rows with a solid background so events scroll under them. */
  #fullCalGrid .fc-list-day,
  #fullCalGrid .fc-list-day-cushion {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bs-tertiary-bg, var(--bs-body-bg));
  }
  #fullCalGrid .fc-list-event,
  #fullCalGrid .fc-list-event-graphic,
  #fullCalGrid .fc-list-event-time,
  #fullCalGrid .fc-list-event-title {
    position: relative;
    z-index: 1;
  }
}

/* Calendar legend — small color key shown above the event list sidebar so
   the chip colors are decoded without the user having to guess. */
.fcal-legend {
  display: flex; flex-wrap: wrap; gap: .75rem;
  font-size: .68rem; line-height: 1;
  color: var(--bs-secondary-color);
  padding: .25rem 0 .5rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  margin-bottom: .65rem;
}
.fcal-legend-dot {
  display: inline-block;
  width: .55rem; height: .55rem;
  border-radius: 999px;
  margin-right: .3rem;
  vertical-align: -1px;
}

/* ── Full-page calendar events sidebar: sticks to top of main-panel scroll container,
       sized to content but capped at viewport so it never creates a double scrollbar ── */
@media (min-width: 992px) {
  .fcal-events-aside {
    position: sticky;
    top: 0;
    align-self: flex-start;     /* don't stretch to match grid column height */
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
  }
}

/* ── Full-page calendar event list ── */
.fcal-event-row {
  display: flex; gap: .65rem; align-items: center;
  padding: .55rem .5rem; border-radius: .5rem; cursor: pointer;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  transition: background .12s;
}
.fcal-event-row:hover { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .fcal-event-row:hover { background: rgba(255, 255, 255, .055); }
/* status-past dimming is applied to non-text children only (date, icon)
   plus a desaturated title color. See the per-child rules below the
   dark-mode override block. */
.fcal-event-date {
  flex-shrink: 0; min-width: 44px; text-align: center;
  padding-right: .5rem;
  border-right: 1px solid var(--bs-border-color-translucent);
}
.fcal-event-dow { font-size: .62rem; font-weight: 700; letter-spacing: .08em; color: var(--bs-secondary-color); text-transform: uppercase; }
.fcal-event-num { font-size: 1.1rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fcal-event-info { flex: 1; min-width: 0; }
.fcal-event-title { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.fcal-event-client { font-size: .76rem; color: var(--bs-secondary-color); }
.fcal-event-aff { font-size: .7rem; color: var(--bs-secondary-color); }
.fcal-event-row.status-today .fcal-event-num { color: var(--bs-primary); }
.fcal-event-row.status-upcoming .fcal-event-num { color: var(--bs-emphasis-color); }

/* ── Place-card Preview (3D-tilt WebP snapshot of the designed card) ─── */
.pcp-perspective { perspective: 900px; display: flex; justify-content: center; padding: .5rem 0; }
.pcp-tilt        { will-change: transform; transform-style: preserve-3d; transition: box-shadow 120ms linear; }
.pcp-snapshot    { display: block; max-width: 100%; height: auto; border-radius: .5rem; box-shadow: 0 6px 18px rgba(0,0,0,.15); background: #f3f4f6; }
.pcp-snapshot.pcp-landscape { width: 380px; max-height: 260px; }
.pcp-snapshot.pcp-portrait  { width: 260px; max-height: 380px; }
@media (max-width: 480px) {
  .pcp-snapshot.pcp-landscape { width: 100%; max-width: 360px; }
  .pcp-snapshot.pcp-portrait  { width: 100%; max-width: 240px; }
}

/* ── Morphing theme switch (sun ↔ moon) ─────────────────────────────────
   Adapted from codepen.io/jkantner/pen/KKEgENL by Jon Kantner.
   Color pair maps to the portal's theme tokens (--bs-body-bg /
   --bs-emphasis-color), so the switch reads as light-on-dark in light
   mode and dark-on-light in dark mode. The :checked rule flips the
   track color (matching the original) so the pill always has contrast
   against the body. ── */
.pp-theme-switch {
  position: relative; display: inline-flex; align-items: center;
  font-size: 13px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --pp-sw-dark:  var(--bs-emphasis-color);  /* near-black in light mode, near-white in dark mode */
  --pp-sw-light: var(--bs-body-bg);         /* opposite of --pp-sw-dark */
}
.pp-theme-switch .switch__input,
.pp-theme-switch .switch__input:before { background-color: var(--pp-sw-dark); }
.pp-theme-switch .switch__input {
  border: 0; margin: 0; padding: 0;
  border-radius: .75em; cursor: pointer; display: block; position: relative;
  width: 3em; height: 1.5em; flex-shrink: 0;
  transition: background-color .4s cubic-bezier(.65,0,.35,1);
  -webkit-appearance: none; appearance: none;
}
.pp-theme-switch .switch__input:before {
  border-radius: 50%; content: ""; display: block; position: absolute;
  top: .125em; left: .125em; width: 1.25em; height: 1.25em;
  transition: background-color .4s cubic-bezier(.65,0,.35,1), transform .4s cubic-bezier(.65,0,.35,1);
}
.pp-theme-switch .switch__icon,
.pp-theme-switch .switch__icon-part { display: block; position: absolute; top: 0; left: 0; }
.pp-theme-switch .switch__icon {
  background-color: var(--pp-sw-light); border-radius: 50%; overflow: hidden; pointer-events: none;
  top: .125em; left: .125em; width: 1.25em; height: 1.25em;
  transition: transform .4s cubic-bezier(.65,0,.35,1), background-color .4s cubic-bezier(.65,0,.35,1);
}
.pp-theme-switch .switch__icon-part {
  transition: box-shadow .4s cubic-bezier(.65,0,.35,1), transform .4s cubic-bezier(.65,0,.35,1), background-color .4s cubic-bezier(.65,0,.35,1);
}
.pp-theme-switch .switch__icon-part--1,
.pp-theme-switch .switch__icon-part--2,
.pp-theme-switch .switch__icon-part--3 { border-radius: 50%; }
.pp-theme-switch .switch__icon-part--1 {
  background-color: var(--pp-sw-light);
  top: calc(50% - .375em); left: calc(50% - .375em); width: .75em; height: .75em;
}
.pp-theme-switch .switch__icon-part--2 {
  background-color: var(--pp-sw-dark);
  top: calc(50% - .4375em); left: calc(50% - .0625em); width: .5em; height: .5em;
  transform: translate(-.1875em,.1875em) scale(.2);
}
.pp-theme-switch .switch__icon-part--3 {
  box-shadow: 0 0 0 .625em var(--pp-sw-dark) inset; width: 1.25em; height: 1.25em; transform: scale(.25);
}
.pp-theme-switch .switch__icon-part--3 ~ .switch__icon-part {
  background-color: var(--pp-sw-dark); border-radius: .0625em;
  top: 50%; left: 50%; width: .125em; height: .1875em; transform-origin: 50% 0;
}
.pp-theme-switch .switch__icon-part--4  { transform: translateX(-50%) rotate(0deg)    translateY(.25em); }
.pp-theme-switch .switch__icon-part--5  { transform: translateX(-50%) rotate(45deg)   translateY(.25em); }
.pp-theme-switch .switch__icon-part--6  { transform: translateX(-50%) rotate(90deg)   translateY(.25em); }
.pp-theme-switch .switch__icon-part--7  { transform: translateX(-50%) rotate(135deg)  translateY(.25em); }
.pp-theme-switch .switch__icon-part--8  { transform: translateX(-50%) rotate(180deg)  translateY(.25em); }
.pp-theme-switch .switch__icon-part--9  { transform: translateX(-50%) rotate(225deg)  translateY(.25em); }
.pp-theme-switch .switch__icon-part--10 { transform: translateX(-50%) rotate(270deg)  translateY(.25em); }
.pp-theme-switch .switch__icon-part--11 { transform: translateX(-50%) rotate(315deg)  translateY(.25em); }
.pp-theme-switch .switch__sr { overflow: hidden; position: absolute; width: 1px; height: 1px; }
/* :checked = dark mode active. Track flips from dark → light (mirrors
   the original CodePen) so contrast with the body is preserved; knob
   slides right; moon parts scale up; sun rays scale to 0. */
.pp-theme-switch .switch__input:checked { background-color: var(--pp-sw-light); }
.pp-theme-switch .switch__input:checked:before,
.pp-theme-switch .switch__input:checked ~ .switch__icon { transform: translateX(1.5em); }
.pp-theme-switch .switch__input:checked ~ .switch__icon .switch__icon-part--2 {
  transform: translate(0,0) scale(1);
}
.pp-theme-switch .switch__input:checked ~ .switch__icon .switch__icon-part--3 {
  box-shadow: 0 0 0 .25em var(--pp-sw-dark) inset; transform: scale(1);
}
.pp-theme-switch .switch__input:checked ~ .switch__icon .switch__icon-part--4  { transform: translateX(-50%) rotate(0deg)    translateY(.625em) scale(0); }
.pp-theme-switch .switch__input:checked ~ .switch__icon .switch__icon-part--5  { transform: translateX(-50%) rotate(45deg)   translateY(.625em) scale(0); }
.pp-theme-switch .switch__input:checked ~ .switch__icon .switch__icon-part--6  { transform: translateX(-50%) rotate(90deg)   translateY(.625em) scale(0); }
.pp-theme-switch .switch__input:checked ~ .switch__icon .switch__icon-part--7  { transform: translateX(-50%) rotate(135deg)  translateY(.625em) scale(0); }
.pp-theme-switch .switch__input:checked ~ .switch__icon .switch__icon-part--8  { transform: translateX(-50%) rotate(180deg)  translateY(.625em) scale(0); }
.pp-theme-switch .switch__input:checked ~ .switch__icon .switch__icon-part--9  { transform: translateX(-50%) rotate(225deg)  translateY(.625em) scale(0); }
.pp-theme-switch .switch__input:checked ~ .switch__icon .switch__icon-part--10 { transform: translateX(-50%) rotate(270deg)  translateY(.625em) scale(0); }
.pp-theme-switch .switch__input:checked ~ .switch__icon .switch__icon-part--11 { transform: translateX(-50%) rotate(315deg)  translateY(.625em) scale(0); }

/* ── Mobile calendar sidebar panel ────────────────────────────────────────
   On mobile (<lg) the calendar aside is hidden by default and slides in
   from the right when the header toggle button is tapped.
   On desktop (≥992px) layout is unchanged — aside is in normal col flow. ── */
@media (max-width: 991.98px) {
  #dashCalSidebar,
  #ctxCalSidebar {
    position: fixed;
    right: 0;
    top: 64px;
    bottom: 0;
    width: min(340px, 88%);
    overflow-y: auto;
    z-index: 1043;
    transform: translateX(110%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    background: var(--bs-body-bg);
    border-left: 1px solid var(--bs-border-color);
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
    /* Override Bootstrap col-12 row flow */
    display: block !important;
    flex: none !important;
    max-width: none !important;
    padding: 1rem !important;
  }
  #dashCalSidebar.cal-sidebar-open,
  #ctxCalSidebar.cal-sidebar-open {
    transform: translateX(0);
  }
  .cal-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1042;
    background: rgba(0,0,0,.35);
  }
  .cal-sidebar-backdrop.show {
    display: block;
  }
  /* Active state for the toggle button */
  #calToggleBtn.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--pp-on-primary, #fff);
  }
}

/* ── Smooth light/dark theme transitions ──────────────────────────────────
   Applies only during the brief window when the theme attribute is changing.
   JS sets data-theme-transitioning *before* changing data-bs-theme and calls
   getComputedStyle() to flush, so every element's background "from" value is
   recorded before the theme changes — keeping surfaces in sync.
   Color (text) is intentionally NOT transitioned: text going dark→light while
   backgrounds go light→dark produces an illegible midpoint crossing. Text snaps
   instantly; only surfaces and borders fade. ── */
html[data-theme-transitioning] *,
html[data-theme-transitioning] *::before,
html[data-theme-transitioning] *::after {
  transition:
    background-color .3s ease,
    border-color     .3s ease,
    box-shadow       .3s ease !important;
}
/* Restore morphing switch's own easing — the global rule would flatten it */
html[data-theme-transitioning] .pp-theme-switch .switch__input {
  transition: background-color .4s cubic-bezier(.65,0,.35,1) !important;
}
html[data-theme-transitioning] .pp-theme-switch .switch__input:before {
  transition: background-color .4s cubic-bezier(.65,0,.35,1), transform .4s cubic-bezier(.65,0,.35,1) !important;
}
html[data-theme-transitioning] .pp-theme-switch .switch__icon {
  transition: transform .4s cubic-bezier(.65,0,.35,1) !important;
}
html[data-theme-transitioning] .pp-theme-switch .switch__icon-part {
  transition: box-shadow .4s cubic-bezier(.65,0,.35,1), transform .4s cubic-bezier(.65,0,.35,1) !important;
}

/* ─── Guided Tour & Attract Mode ─────────────────────────────────────────── */
/* Tour controls position absolutely over the sidebar's bottom edge — they
   never alter #pcdWorkArea layout. The card preview keeps its full size for
   the duration of the tour even if the controls visually overlap the bottom
   of the sidebar content. */
#tourOverlay {
  /* position:absolute inside #placeCardDesigner (position:fixed;inset:0;z-index:200).
     z-index:9000 is within the designer's stacking context, so tour-elevated elements
     at z-index:9002 genuinely appear above this overlay. */
  position: absolute; inset: 0; z-index: 9000;
  pointer-events: none;
}
#tourOverlay.active { pointer-events: all; }

/* SVG handles dimming only — spotlight now elevates elements via CSS class */
#tourOverlaySvg { z-index: 9001; }

/* Spotlighted element elevation: sits above the dim overlay (9000) but below tour UI (9010) */
.tour-elevated { position: relative !important; z-index: 9002 !important; }
/* When the canvas wrap is elevated, make its background transparent so only the card floats above the overlay */
#pcdCanvasWrap.tour-elevated { background: transparent !important; }
/* Elevating the whole sidebar avoids the iOS overflow-y:auto compositor-layer trap */
.pcs-sidebar.tour-elevated { background: var(--bs-body-bg) !important; }
/* Toolbar row elevated in step 4 — needs solid bg so dark overlay doesn't bleed through */
#pcdLayoutToolbar.tour-elevated { background: var(--bs-body-bg) !important; }

/* ── Intra-sidebar tour highlights ──────────────────────────────────────────────
   Steps 5–7: spotlight only the active tab button by elevating it (z-index:9002)
   while leaving the rest of the sidebar non-elevated (below the overlay).
   The overlay (now inside the designer) genuinely dims the non-elevated sidebar. */
.tour-tab-active {
  background: var(--bs-primary) !important;
  color: var(--pp-on-primary, #fff) !important;
}
.tour-section-ring {
  outline: 2px solid rgba(var(--bs-primary-rgb), .50);
  outline-offset: 5px;
  border-radius: .45rem;
}

/* Tour UI lives at body level (outside #tourOverlay) — must be above elevated elements */
#tourInfo        { z-index: 9010; pointer-events: none; }
body.tour-active #tourInfo { pointer-events: auto; }
.tour-controls   { z-index: 9010; }

/* Hide zoom bar while tour is running (snap pill show/hide is managed per-step by JS) */
body.tour-active #pcdZoomBar { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s; }
/* Block user interaction with elevated elements during the tour — tour controls are at 9010+ and still interactive */
body.tour-active .tour-elevated { pointer-events: none !important; }
/* Hide the tour info button while the tour is running (re-appears in finish animation) */
body.tour-active .pcd-tour-info-btn { opacity: 0 !important; pointer-events: none !important; transition: opacity .25s; }
/* Extra bottom padding so the sidebar can scroll any element above the fixed tour controls panel */
body.tour-active .pcs-tab-content { padding-bottom: 150px; overflow-anchor: none; }

.tour-hand {
  position: fixed;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
  pointer-events: none;
  z-index: 9030; /* above tour controls (9020) so the hand always renders on top */
  /* no CSS transition on position — JS positions it every RAF frame for smooth sync */
  /* but DO transition transform so press-shrink and release-spring look natural     */
  transform: rotate(-15deg) scale(1);
  transform-origin: 10px 4px; /* near the pointer tip so it shrinks "into" the click point */
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  line-height: 1;
  user-select: none;
}
/* Shrink hand while pressing/dragging — springs back with a slight overshoot */
.tour-hand.is-pressing {
  transform: rotate(-15deg) scale(0.72);
}
/* hand halo is provided by #tourHandCut in the SVG mask — no ::before needed */
/* Pulsing ring shown while the virtual hand is dragging or holding */
.tour-hand.is-pressing::after {
  content: '';
  position: absolute;
  width: 44px; height: 44px;
  top: -6px; left: -5px;
  border-radius: 50%;
  border: 2px solid rgba(var(--bs-primary-rgb), .7);
  animation: tourHandPress 1.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes tourHandPress {
  0%   { opacity: .7;  transform: scale(.85); }
  100% { opacity: 0;   transform: scale(2.0); }
}

.tour-ripple {
  position: fixed;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(var(--bs-primary-rgb), .4);
  pointer-events: none;
  z-index: 9005;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
}
@keyframes tourRipplePop {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: .75; }
  100% { transform: translate(-50%,-50%) scale(3.5); opacity: 0; }
}
.tour-ripple.pop { animation: tourRipplePop .55s ease-out forwards; }
.tour-ripple-white { background: rgba(255,255,255,.60); }

/* Floating exit (skip) button — top-right corner */
.tour-exit-btn {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 9025;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.38);
  color: #fff;
  border: none;
  display: flex;
  align-items: center; justify-content: center;
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s;
}
.tour-exit-btn:hover { background: rgba(0,0,0,.62); }

/* Combined tour panel — sits inside the sidebar in document flow, just above
   the order drawer. position: relative so the absolute progress-border child
   anchors to the panel's top edge. flex-shrink: 0 so the panel never collapses
   when the sidebar is short — instead, .pcs-tab-content scrolls. */
.tour-controls {
  position: relative;
  display: none;
  flex-direction: column;
  gap: .45rem;
  background: var(--bs-body-bg, #fff);
  border-top: 1px solid var(--bs-border-color);
  padding: .65rem .85rem .65rem;
  /* Subtle upward shadow — the panel reads as a tray docked above the order
     drawer rather than just another stripe in the sidebar. */
  box-shadow: 0 -6px 22px rgba(var(--bs-primary-rgb), .18),
              0 -2px 8px  rgba(0,0,0,.10);
  pointer-events: all;
  flex-shrink: 0;
  z-index: 1;
}
/* Progress border: 4 px primary line at rest; a white bar fills it
   left→right during the auto-advance countdown. transform-based scaleX
   animates on the GPU compositor — much smoother than a width tween. */
.tour-progress-border {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--bs-primary);
  overflow: hidden;
  pointer-events: none;
}
.tour-progress-border-fill {
  position: absolute; inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  /* JS sets transition + scaleX(1) to start the countdown */
}
.tour-ctrl-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.tour-ctrl-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  min-width: 0;
}
.tour-ctrl-desc {
  flex: 1;
  min-width: 0;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--bs-body-color);
  font-weight: 500;
}

.tour-step-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--bs-primary);
}

.tour-back-btn {
  background: none;
  border: 1px solid var(--bs-border-color);
  border-radius: 1.5rem;
  padding: .28rem .75rem;
  font-size: .82rem;
  color: var(--bs-secondary-color);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.tour-back-btn:hover { color: var(--bs-body-color); border-color: var(--bs-body-color); }

.tour-step-dots { display: flex; gap: .3rem; align-items: center; }
.tour-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bs-border-color);
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}
.tour-dot.active { background: var(--bs-primary); transform: scale(1.35); }
.tour-dot.done   { background: var(--bs-primary); opacity: .38; }

.tour-next-wrap { position: relative; width: 50px; height: 50px; flex-shrink: 0; }
.tour-progress-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tour-progress-track { fill: none; stroke: rgba(var(--bs-primary-rgb),.18); stroke-width: 4; }
.tour-progress-fill  {
  fill: none; stroke: var(--bs-primary); stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .08s linear;
}
#tourNextBtn {
  position: absolute; inset: 5px;
  border-radius: 50%; border: none;
  background: var(--bs-primary); color: var(--pp-on-primary, #fff);
  font-size: .72rem; font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
#tourNextBtn:disabled { opacity: .45; cursor: not-allowed; }
#tourNextBtn:not(:disabled):hover { transform: scale(1.07); animation: none !important; }
/* Smooth single-gesture pop on enable — no overshoot, no bounce. */
@keyframes tourNextPop {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1);    }
}
/* Soft outward halo pulse — single radial fade, no inner halo blink. */
@keyframes tourNextGlow {
  0%   { box-shadow: 0 0 0 0    rgba(var(--bs-primary-rgb), .75); }
  100% { box-shadow: 0 0 0 16px rgba(var(--bs-primary-rgb), 0); }
}
#tourNextBtn:not(:disabled) {
  background: #fff;
  color: var(--bs-primary);
  animation: tourNextPop  .9s cubic-bezier(.4,0,.2,1)   1,
             tourNextGlow 1.8s ease-out .6s infinite;
}


/* Tour intro modal */
#tourIntroModal {
  position: fixed; inset: 0;
  z-index: 9050;
  display: none;
  align-items: center; justify-content: center;
}
.tour-intro-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
}
.tour-intro-card {
  position: relative;
  background: var(--bs-body-bg, #fff);
  border-radius: 1.25rem;
  padding: 2rem 2.25rem 1.75rem;
  max-width: 400px; width: calc(100vw - 2rem);
  text-align: center;
  box-shadow: 0 10px 50px rgba(0,0,0,.3);
  border: 1px solid var(--bs-border-color);
}
.tour-intro-card h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: .5rem; }
.tour-intro-card p  { font-size: 1.05rem; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.tour-intro-emoji   { font-size: 2.8rem; line-height: 1; margin-bottom: .75rem; }

/* ── Tour: mobile layout ──────────────────────────────────────────────────────
   On narrow screens the info panel moves to the bottom (above controls),
   shows only the step label, and expands to the full description on tap.
   The controls strip is tightened to fit comfortably.
   ─────────────────────────────────────────────────────────────────────────── */
/* Mobile bar hidden on desktop */
.tour-mobile-bar { display: none; }

@media (max-width: 768px) {
  /* On mobile the controls still sit inside the sidebar (in flow) — same
     placement as desktop. Add safe-area padding so iOS home indicator and
     Android nav bar don't crowd the bottom edge of the panel. */
  .tour-controls {
    padding-bottom: max(.65rem, env(safe-area-inset-bottom));
  }

  /* Collapsed: show only the summary bar */
  .tour-controls:not(.tour-expanded) .tour-ctrl-row,
  .tour-controls:not(.tour-expanded) .tour-ctrl-desc { display: none !important; }

  .tour-controls:not(.tour-expanded) { padding: .45rem .85rem max(.45rem, env(safe-area-inset-bottom)); gap: 0; }

  /* Expanded: hide the summary bar, rotate chevron */
  .tour-controls.tour-expanded .tour-mobile-bar { display: none; }

  /* Mobile summary bar */
  .tour-mobile-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tour-mobile-label {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bs-primary);
    white-space: nowrap;
  }
  .tour-mobile-preview {
    flex: 1;
    min-width: 0;
    font-size: .82rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tour-mobile-chevron {
    flex-shrink: 0;
    font-size: .75rem;
    color: var(--bs-secondary-color);
  }

  /* Tighten full controls when expanded on mobile */
  .tour-controls.tour-expanded { padding: .6rem .85rem; gap: .4rem; }
  .tour-controls.tour-expanded .tour-ctrl-desc { font-size: .95rem; }
  .tour-next-wrap  { width: 42px; height: 42px; }
  .tour-dot        { width: 6px; height: 6px; }
  .tour-step-dots  { gap: .22rem; }
  .tour-back-btn   { padding: .2rem .6rem; font-size: .78rem; }
  /* Tour is not available on mobile — hide the trigger button */
  .pcd-tour-info-btn { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Premium vibe — layered depth + soft gradients
   ─────────────────────────────────────────────────────────────────────────
   Activated by `applyVibe('premium')` which sets data-theme-vibe="premium" on
   <html>. Layers added on top of the standard Bootstrap palette:
     • Cool slate-tinted gradients on chrome (navbar, sidebar, body)
     • Softer borders (rgba slate, not flat gray)
     • Layered shadows on elevated surfaces (cards, dropdowns, modals)
     • Subtle gradient on btn-primary for tactile depth
   Light + dark variants use the same selectors, scoped via [data-bs-theme].
   Card-creator chrome (#pcdCardOuter, tour overlays, login screen) keeps its
   own tuned shadows and is intentionally not touched here.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme-vibe="premium"] {
  /* Surfaces */
  --pp-surface-grad:    linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  --pp-panel-grad:      linear-gradient(180deg, #fdfdfe 0%, #f5f7fa 100%);
  --pp-app-grad:        linear-gradient(180deg, #f7f8fb 0%, #eef1f6 100%);
  /* Buttons get a faint top→bottom darken so they feel pressable */
  --pp-btn-grad:        linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,.06) 100%);
  /* Soft border replaces flat #dee2e6 */
  --bs-border-color:    rgba(15,23,42,.08);
  --bs-border-color-translucent: rgba(15,23,42,.06);
  /* Chrome shadows — subtle, slate-tinted */
  --pp-chrome-shadow:   0 1px 0 rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.04);
  --pp-modal-shadow:    0 2px 4px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.12), 0 32px 80px rgba(15,23,42,.18);
}
[data-theme-vibe="premium"][data-bs-theme="dark"] {
  --pp-surface-grad:    linear-gradient(180deg, #1a1d24 0%, #14171d 100%);
  --pp-panel-grad:      linear-gradient(180deg, #1c1f27 0%, #15181f 100%);
  --pp-app-grad:        linear-gradient(180deg, #14171d 0%, #0f1217 100%);
  --pp-btn-grad:        linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.18) 100%);
  --bs-border-color:    rgba(255,255,255,.08);
  --bs-border-color-translucent: rgba(255,255,255,.06);
  --pp-chrome-shadow:   0 1px 0 rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.30);
  --pp-modal-shadow:    0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45), 0 32px 80px rgba(0,0,0,.55);
}

/* App background — affects empty work areas behind cards */
[data-theme-vibe="premium"] body {
  background: var(--pp-app-grad);
}

/* Top navbar — gentle gradient, soft bottom border, faint chrome shadow */
[data-theme-vibe="premium"] .navbar {
  background: var(--pp-surface-grad);
  border-bottom-color: var(--bs-border-color) !important;
  box-shadow: var(--pp-chrome-shadow);
}

/* Sidebar — gradient surface, soft right border that reads as a seam */
[data-theme-vibe="premium"] .sidebar {
  background: var(--pp-panel-grad);
  border-right: 1px solid var(--bs-border-color);
  box-shadow: 1px 0 0 rgba(15,23,42,.02), 4px 0 16px rgba(15,23,42,.03);
}
[data-theme-vibe="premium"][data-bs-theme="dark"] .sidebar {
  box-shadow: 1px 0 0 rgba(0,0,0,.3), 4px 0 16px rgba(0,0,0,.25);
}

/* Cards — softer rounded corners + layered shadow already plumbed via
   --bs-box-shadow. Reinforce with --bs-card-bg gradient for subtle depth. */
[data-theme-vibe="premium"] .card {
  background: var(--pp-surface-grad);
  border-color: var(--bs-border-color);
  box-shadow: var(--bs-box-shadow);
}

/* Modals — deepest shadow tier, slightly larger radius for premium feel */
[data-theme-vibe="premium"] .modal-content {
  border: 1px solid var(--bs-border-color);
  border-radius: calc(var(--bs-border-radius-lg, .5rem) + .125rem);
  box-shadow: var(--pp-modal-shadow);
  background: var(--pp-surface-grad);
}
[data-theme-vibe="premium"] .modal-header,
[data-theme-vibe="premium"] .modal-footer {
  border-color: var(--bs-border-color);
}

/* Dropdowns and popovers also at the lg shadow tier — they're floating */
[data-theme-vibe="premium"] .dropdown-menu,
[data-theme-vibe="premium"] .cat-dropdown {
  border-color: var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-lg);
  background: var(--pp-surface-grad);
}

/* Primary button — subtle gradient overlay for depth without changing the
   underlying primary color. Hover/active intensify the contrast. */
[data-theme-vibe="premium"] .btn-primary {
  background-image: var(--pp-btn-grad);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 1px 2px rgba(15,23,42,.10);
}
[data-theme-vibe="premium"] .btn-primary:hover {
  background-image: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(0,0,0,.10) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 2px 6px rgba(15,23,42,.18);
}
[data-theme-vibe="premium"] .btn-primary:active,
[data-theme-vibe="premium"] .btn-primary.active {
  background-image: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.14) 100%);
  box-shadow: 0 1px 2px rgba(15,23,42,.20) inset;
}
[data-theme-vibe="premium"][data-bs-theme="dark"] .btn-primary {
  border-color: rgba(0,0,0,.30);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 1px 2px rgba(0,0,0,.40);
}

/* Outline buttons — keep flat (gradients on outlines look muddy) but soften
   borders to match the rest of the chrome. */
[data-theme-vibe="premium"] .btn-outline-secondary,
[data-theme-vibe="premium"] .btn-outline-primary {
  border-color: var(--bs-border-color);
}

/* Form controls — soft border + faint inner highlight on focus */
[data-theme-vibe="premium"] .form-control,
[data-theme-vibe="premium"] .form-select {
  border-color: var(--bs-border-color);
  box-shadow: 0 1px 2px rgba(15,23,42,.03) inset;
}
[data-theme-vibe="premium"] .form-control:focus,
[data-theme-vibe="premium"] .form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), .55);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}
[data-theme-vibe="premium"][data-bs-theme="dark"] .form-control,
[data-theme-vibe="premium"][data-bs-theme="dark"] .form-select {
  box-shadow: 0 1px 2px rgba(0,0,0,.3) inset;
}

/* Tables — soften the divider lines so dense data reads less harshly */
[data-theme-vibe="premium"] .table > :not(caption) > * > * {
  border-bottom-color: var(--bs-border-color);
}

/* List-group items + sidebar profile — softer dividers */
[data-theme-vibe="premium"] .list-group-item,
[data-theme-vibe="premium"] .sidebar-profile,
[data-theme-vibe="premium"] .my-events-entry {
  border-color: var(--bs-border-color);
}

/* ── Shipping tracking timeline ─────────────────────────────────── */
.track-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.track-list::before {
  content: '';
  position: absolute;
  left: 0.85rem;
  top: 0.3rem;
  bottom: 0.3rem;
  width: 2px;
  background: var(--bs-border-color);
}
.track-event {
  position: relative;
  padding: 0.4rem 0 0.4rem 2.25rem;
  min-height: 2.2rem;
}
.track-event-dot {
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--bs-body-bg);
  border: 2px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}
.track-event:first-child .track-event-dot {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle, var(--bs-body-bg));
}
.track-event-body { line-height: 1.35; }

/* ── Skeleton loaders ────────────────────────────────────────────────
   Shimmer rectangles used while content is loading. Respects reduced-motion
   (the keyframes shimmer becomes a flat gradient when prefers-reduced-motion
   is on — see the consolidated @media at the bottom of this file).
   Color tokens use Bootstrap CSS vars so dark mode just works. */
.skel {
  position: relative;
  overflow: hidden;
  background: var(--bs-secondary-bg);
  border-radius: 0.375rem;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
[data-bs-theme="dark"] .skel::after {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}
@keyframes skel-shimmer {
  100% { transform: translateX(100%); }
}
.skel-text {
  height: 0.85em;
  width: 100%;
  margin: 0.25em 0;
}
.skel-pill {
  display: inline-block;
  height: 1.1rem;
  width: 4.5rem;
  border-radius: 999px;
}
.skel-row {
  height: 2.5rem;
  width: 100%;
  margin-bottom: 0.4rem;
  border-radius: 0.375rem;
}
.skel-card {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 6;          /* default portrait — overridable below */
  margin: 0 auto;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.skel-card-portrait  { aspect-ratio: 4 / 6; max-width: 320px; }
.skel-card-landscape { aspect-ratio: 6 / 4; max-width: 480px; }

/* ── Copy-to-clipboard chip ──────────────────────────────────────────
   Small icon button used inline after long codes. Hover/focus reveals it
   without shifting layout; pressed state animates the checkmark flash. */
.copy-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin-left: 0.25rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bs-secondary-color);
  border-radius: 0.25rem;
  font-size: 0.78rem;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.copy-chip:hover,
.copy-chip:focus-visible {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  outline: none;
}
.copy-chip-flash {
  background: color-mix(in srgb, var(--bs-success) 14%, transparent);
  border-color: color-mix(in srgb, var(--bs-success) 40%, transparent);
}

/* ── Stagger fade-in ────────────────────────────────────────────────
   Apply .stagger-fade to a list container; children fade up in sequence
   on initial render. The delay caps at the 8th child so a 500-row table
   doesn't stall layout waiting for the last animation to complete. */
@keyframes stagger-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger-fade > * {
  animation: stagger-fade-in 0.28s cubic-bezier(.2,.7,.3,1) both;
}
.stagger-fade > *:nth-child(1) { animation-delay: 0ms; }
.stagger-fade > *:nth-child(2) { animation-delay: 50ms; }
.stagger-fade > *:nth-child(3) { animation-delay: 100ms; }
.stagger-fade > *:nth-child(4) { animation-delay: 150ms; }
.stagger-fade > *:nth-child(5) { animation-delay: 200ms; }
.stagger-fade > *:nth-child(6) { animation-delay: 250ms; }
.stagger-fade > *:nth-child(7) { animation-delay: 300ms; }
.stagger-fade > *:nth-child(8) { animation-delay: 350ms; }
.stagger-fade > *:nth-child(n+9) { animation-delay: 400ms; }

/* Status pill pulse — reuses the PDF pulse keyframe with a friendlier
   alias name for any "in-flight" status badge (in_production, etc.). */
.pill-pulse { animation: pdf-pill-pulse 1.6s ease-in-out infinite; }

/* ── Fulfillment status pills ──
   Distinct hue per state, ordered so the colors progress visually as the
   order moves through the pipeline. Light-mode shades chosen for ≥4.5:1
   contrast on the fixed text color; dark-mode shades bumped slightly. */
.fs-pill { color: #fff; }
.fs-pill-ordered   { background: #475569; }  /* slate-600 */
.fs-pill-pdf-ready { background: #0369a1; }  /* sky-700 */
.fs-pill-in-prod   { background: #f59e0b; color: #1f1f1f; }  /* amber-500, dark text */
.fs-pill-label     { background: #4f46e5; }  /* indigo-600 */
.fs-pill-shipped   { background: #0e7490; }  /* cyan-700 */
.fs-pill-delivered { background: #047857; }  /* emerald-700 */
.fs-pill-cancelled { background: #be123c; }  /* rose-700 */

[data-bs-theme="dark"] .fs-pill-ordered   { background: #64748b; }
[data-bs-theme="dark"] .fs-pill-pdf-ready { background: #0284c7; }
[data-bs-theme="dark"] .fs-pill-in-prod   { background: #fbbf24; color: #1f1f1f; }
[data-bs-theme="dark"] .fs-pill-label     { background: #6366f1; }
[data-bs-theme="dark"] .fs-pill-shipped   { background: #0891b2; }
[data-bs-theme="dark"] .fs-pill-delivered { background: #059669; }
[data-bs-theme="dark"] .fs-pill-cancelled { background: #e11d48; }

/* Respect the OS-level reduced-motion preference. Disables animations
   and transitions globally without breaking any layout (durations go to
   nearly zero rather than `none` so onfinish handlers still fire). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Command palette ────────────────────────────────────────────────
   Cmd/Ctrl+K launcher. Lives inside a Bootstrap modal; styling here
   replaces the default modal chrome with a Raycast-ish search box. */
.cmdk-dialog { max-width: 620px; }
.cmdk-dialog .modal-content {
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);
  overflow: hidden;
}
.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.cmdk-input-icon { color: var(--bs-secondary-color); font-size: 0.95rem; }
#cmdkInput {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--bs-body-color);
}
#cmdkInput::placeholder { color: var(--bs-secondary-color); opacity: .8; }
#cmdkResults {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.35rem;
}
.cmdk-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}
.cmdk-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0;
  background: transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  color: var(--bs-body-color);
}
.cmdk-row > .fa-solid { color: var(--bs-secondary-color); flex-shrink: 0; width: 1rem; text-align: center; }
.cmdk-row.active,
.cmdk-row:focus-visible {
  background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
  outline: none;
}
.cmdk-row.active > .fa-solid { color: var(--bs-primary); }
.cmdk-row-title { flex: 0 1 auto; font-size: 0.92rem; }
.cmdk-row-sub {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk-row-kind {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
}
.cmdk-footer {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
}
.cmdk-footer kbd {
  padding: 0.05rem 0.35rem;
  margin-right: 0.15rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.7rem;
  color: var(--bs-body-color);
}

/* ── Print stylesheet ────────────────────────────────────────────────
   When printing, the matching JS clones the active panel into a fresh
   body-level <div id="printRoot"> and toggles body.printing-* . The
   stylesheet hides every other body child so the print engine only sees
   the clone — sidestepping the app shell's height:100vh constraint that
   was causing duplicate pages. */
@media print {
  body.printing-order,
  body.printing-stats {
    background: #fff !important;
    color: #000 !important;
  }
  /* Free the document from the app shell's viewport-bound height. */
  body.printing-order, body.printing-stats,
  body.printing-order html, body.printing-stats html {
    height: auto !important;
    overflow: visible !important;
  }
  /* Hide every direct child of <body> except the clone. The original
     app shell, login screen, page loader, scripts, etc all stay out. */
  body.printing-order > :not(#printRoot),
  body.printing-stats > :not(#printRoot) {
    display: none !important;
  }
  /* The clone owns the page. Strip leftover overflow/height constraints
     so its content flows freely onto as many pages as needed. */
  #printRoot {
    display: block !important;
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
    background: #fff !important;
    color: #000 !important;
  }
  #printRoot, #printRoot * {
    overflow: visible !important;
    max-height: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* The cloned manager div was originally style="display:none" or had
     scroll wrappers — neutralize that on the clone. */
  #printRoot > div {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  #printRoot .d-print-none,
  #printRoot .toast-container,
  #printRoot .modal,
  #printRoot .modal-backdrop,
  #printRoot .offcanvas,
  #printRoot .skel,
  #printRoot .tour-overlay {
    display: none !important;
  }
  #printRoot .card {
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }
  @page { margin: 0.5in; }
}

/* ── Mobile layout for manager-panel headers and toolbars ─────────────
   Manager panels (anything matching #*Manager inside #mainPanel) use a
   shared pattern: a header row (title + actions) followed by a toolbar
   row (search + filters + column toggle). Both rows use flex-wrap which
   breaks on narrow widths — title sits on one line, actions drop below;
   search bar sits on one line, column toggle drops below. On mobile we
   force them back onto a single row, let the title truncate, and let
   the search input shrink so the trailing controls stay inline. */
@media (max-width: 575.98px) {
  /* NOTE: descendant combinator (no `>`) so wrappers like .admin-crumb-bar
     inside #affiliatesManager still match. Specificity stays high enough
     to win against Bootstrap's `.flex-wrap !important`. */
  #mainPanel [id$="Manager"] .d-flex.justify-content-between.flex-wrap {
    flex-wrap: nowrap !important;
    column-gap: .5rem !important;
    padding-left: .65rem !important;
    padding-right: .65rem !important;
  }
  /* Title may need to truncate. min-width:0 unlocks flex children. */
  #mainPanel [id$="Manager"] .d-flex.justify-content-between.flex-wrap > h6,
  #mainPanel [id$="Manager"] .d-flex.justify-content-between.flex-wrap > h5 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
  }
  /* Action button cluster: don't shrink, stay anchored right. */
  #mainPanel [id$="Manager"] .d-flex.justify-content-between.flex-wrap > .d-flex {
    flex-shrink: 0;
  }

  /* Toolbar row: keep search + filters + column-toggle on one line for
     the simple case (search + single trailing control like a column toggle).
     Toolbars that hold form-select filters (orders panel etc.) need more
     room — let those wrap naturally below, with the search input on its
     own row. :has() needs iOS 15.4+ / Chrome 105+; older browsers fall
     through to the simpler rules above. */
  #mainPanel [id$="Manager"] > .d-flex.align-items-center.flex-wrap:not(.justify-content-between):not(:has(.form-select)) {
    flex-wrap: nowrap !important;
    padding-left: .65rem !important;
    padding-right: .65rem !important;
    column-gap: .4rem !important;
  }
  /* Toolbars WITH select-dropdowns: keep them wrapping; the search input
     gets its own row, then filters fan out below. */
  #mainPanel [id$="Manager"] > .d-flex.align-items-center.flex-wrap:has(.form-select) {
    padding-left: .65rem !important;
    padding-right: .65rem !important;
    row-gap: .4rem !important;
  }
  #mainPanel [id$="Manager"] > .d-flex.align-items-center.flex-wrap:has(.form-select) > .input-group {
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Search input shrinks to share the row with the column toggle.
     Bootstrap defaults .input-group to width:100% which would push the
     trailing controls onto a new line — override that explicitly. */
  #mainPanel [id$="Manager"] > .d-flex.align-items-center.flex-wrap .input-group {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
  /* Select dropdowns in toolbars (orders panel has several) — let them
     shrink rather than push to the next line; small placeholder min-width
     keeps them tappable. */
  #mainPanel [id$="Manager"] > .d-flex.align-items-center.flex-wrap > .form-select {
    flex: 0 1 auto !important;
    min-width: 7rem !important;
    max-width: 9rem !important;
    width: auto !important;
  }
  /* Trailing right-anchored controls (column toggle, etc.) stay compact. */
  #mainPanel [id$="Manager"] > .d-flex.align-items-center.flex-wrap > .dropdown,
  #mainPanel [id$="Manager"] > .d-flex.align-items-center.flex-wrap > .btn {
    flex-shrink: 0;
  }

  /* ── All Clients toolbar ────────────────────────────────────────
     The category-filter <select> is `display:none` by default, but
     :has(.form-select) still matches it — so the toolbar gets routed
     to the "wrap" branch even though visually there's just a search
     and a column-toggle. Force the simple nowrap layout here so the
     panel matches the Affiliates view Jeff is comparing to. */
  #mainPanel #allClientsManager > .d-flex.align-items-center.flex-wrap {
    flex-wrap: nowrap !important;
    column-gap: .4rem !important;
    padding-left: .65rem !important;
    padding-right: .65rem !important;
  }
  #mainPanel #allClientsManager > .d-flex.align-items-center.flex-wrap > .input-group {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  #mainPanel #allClientsManager > .d-flex.align-items-center.flex-wrap > .form-select {
    flex: 0 1 auto !important;
    max-width: 8rem !important;
  }

  /* ── Orders toolbar specifically ────────────────────────────────
     Search takes its own row (full width); sort + status + clear +
     column-toggle fan out below. The selects share remaining row width
     equally so longer labels ("All statuses") still fit. */
  #ordersManager > .d-flex.flex-wrap > .input-group {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
  }
  #ordersManager > .d-flex.flex-wrap > .form-select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  #ordersManager > .d-flex.flex-wrap > .btn,
  #ordersManager > .d-flex.flex-wrap > .dropdown {
    flex: 0 0 auto !important;
  }

  /* Tighter overall padding on phone-narrow viewports. */
  #mainPanel .px-3 { padding-left: .65rem !important; padding-right: .65rem !important; }
}

/* Even narrower screens: shrink the orders select font so longer
   labels still fit comfortably on the second row. */
@media (max-width: 419.98px) {
  #ordersManager .form-select-sm { font-size: .8rem; padding-left: .4rem; padding-right: 1.6rem; }
}

/* ── Pull-to-refresh indicator ──────────────────────────────────────
   Anchored just below the topbar. JS translates only #mainPanel during
   pull — the indicator stays put while content slides past it (iOS-
   native pattern). Lottie animation winds backward while pulling and
   loops forward on release. */
#ptrIndicator {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translateX(-50%) scale(.45);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  will-change: transform, opacity;
}
/* `.ptr-snap` is added when the gesture releases — both the indicator
   and #mainPanel use this transition so they ease back in sync. */
.ptr-snap { transition: transform .42s cubic-bezier(.16, 1, .3, 1); }
.ptr-fade { transition: transform .42s cubic-bezier(.16, 1, .3, 1), opacity .35s ease-out; }
/* mainPanel's transform originates at the top edge so the pull feels
   anchored to the chrome above it. `will-change` is intentionally NOT
   set here — it would create a stacking context that puts the in-panel
   mobile calendar sidebar (z 1043) under the body-level backdrop. JS
   toggles will-change only while a touch gesture is in progress. The
   `touch-action: pan-y` hint tells the browser vertical scroll is the
   default action so it can scroll natively with momentum until our PTR
   handler explicitly preventDefault()s on an engaged pull. */
#mainPanel,
#orderDetailsManager,
#partyDetailsManager { transform-origin: top center; touch-action: pan-y; }

/* Lottie SVG fills the container. Match the page-loader Lottie's
   dark-mode inversion so the logo reads in either theme. */
#ptrIndicator > div { width: 100%; height: 100%; }
[data-bs-theme="dark"] #ptrIndicator { filter: invert(.92); }

/* One-shot bounce on release. Sits on top of whatever inline transform
   commitRefresh sets — JS adds the class right after pinning the
   indicator at scale(1) and removes it once the keyframe completes. */
@keyframes ptr-bounce {
  0%   { transform: translateX(-50%) scale(1);    }
  35%  { transform: translateX(-50%) scale(1.18); }
  70%  { transform: translateX(-50%) scale(.96);  }
  100% { transform: translateX(-50%) scale(1);    }
}
#ptrIndicator.ptr-bounce { animation: ptr-bounce .42s cubic-bezier(.34, 1.56, .64, 1); }

/* ── Help / Wiki page ────────────────────────────────────────────────
   A self-contained article look. Scoped under #helpManager so the styles
   never leak into the rest of the portal. Uses existing Bootstrap CSS
   variables so it follows the light/dark theme automatically. */
#helpManager .help-page {
  max-width: 880px;
  margin: 0 auto;
  color: var(--bs-body-color);
  line-height: 1.6;
}
#helpManager .help-hero {
  margin-bottom: 1.5rem;
}
#helpManager .help-hero-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--bs-emphasis-color);
  margin: 0 0 .35rem;
}
#helpManager .help-hero-sub {
  color: var(--bs-secondary-color);
  margin: 0 0 1.2rem;
  font-size: .95rem;
}
#helpManager .help-toc {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .65rem 0;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: 0 8px 8px -8px rgba(0, 0, 0, .08);
}
#helpManager .help-toc a,
#helpManager .help-toc button {
  display: inline-block;
  padding: .35rem .8rem;
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  font-size: .82rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
#helpManager .help-toc a:hover,
#helpManager .help-toc a:focus-visible,
#helpManager .help-toc button:hover,
#helpManager .help-toc button:focus-visible {
  background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  outline: none;
}
#helpBackToTop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  z-index: 1030;
}
#helpBackToTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#helpBackToTop:hover, #helpBackToTop:focus-visible {
  background: color-mix(in srgb, var(--bs-primary) 85%, black);
  outline: none;
}

#helpManager .help-card {
  /* Sticky TOC is ~60px tall (padding + chips). Anchor scroll lands below it. */
  scroll-margin-top: 70px;
}
#helpManager .help-card .card-header h2 {
  color: var(--bs-emphasis-color);
}
#helpManager .help-h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  margin: 1.2rem 0 .5rem;
}
#helpManager .help-h3:first-child { margin-top: 0; }
#helpManager .help-h4 {
  font-size: .95rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  margin: 1rem 0 .45rem;
}
#helpManager .card-body p { margin: 0 0 .85rem; }
#helpManager .card-body ol li,
#helpManager .card-body ul li { margin-bottom: .35rem; }
#helpManager .card-body > *:last-child { margin-bottom: 0; }
#helpManager .accordion-button { font-weight: 600; }

#helpManager code {
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  padding: .08rem .35rem;
  border-radius: 4px;
  font-size: .9em;
}
#helpManager kbd {
  background: var(--bs-emphasis-color);
  color: var(--bs-body-bg);
  padding: .1rem .4rem;
  border-radius: 4px;
  font-size: .82em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}

/* Mockups + screenshot placeholders. */
#helpManager .help-shot {
  margin: 1rem 0 1.4rem;
  padding: 0;
}
#helpManager .help-shot figcaption {
  margin-top: .55rem;
  text-align: center;
  font-size: .82rem;
  color: var(--bs-secondary-color);
  font-style: italic;
}
#helpManager .help-shot-placeholder {
  border: 2px dashed var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  padding: 2.2rem 1.2rem;
  text-align: center;
  border-radius: 10px;
  font-size: .88rem;
  font-style: italic;
}
#helpManager .help-shot-mock {
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  padding: 1rem;
  background: var(--bs-body-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
#helpManager .help-shot-mock-card { max-width: 380px; margin: 0 auto; }
#helpManager .help-shot-mock-hdr {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bs-secondary-color);
  margin-bottom: .55rem;
}
#helpManager .help-shot-mock-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  font-size: .82rem;
}
#helpManager .help-shot-mock-link > span {
  flex: 1;
  color: var(--bs-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#helpManager .help-shot-mock-copy {
  background: transparent;
  border: 0;
  color: var(--bs-secondary-color);
  cursor: default;
  font-size: .85rem;
}
#helpManager .help-toolbar-mock {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .55rem .75rem !important;
}
#helpManager .help-mock-label {
  font-size: .8rem;
  color: var(--bs-secondary-color);
}
#helpManager .help-mock-btngroup { display: inline-flex; }
#helpManager .help-mock-btngroup .help-mock-btn:first-child  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#helpManager .help-mock-btngroup .help-mock-btn:last-child   { border-top-left-radius: 0;  border-bottom-left-radius: 0;  margin-left: -1px; }
#helpManager .help-mock-btn {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  padding: .3rem .65rem;
  border-radius: 6px;
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: default;
}
#helpManager .help-mock-btn.active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

@media (max-width: 575.98px) {
  #helpManager .help-page { padding: 1rem !important; }
  #helpManager .help-hero-title { font-size: 1.4rem; }
  #helpManager .help-card .card-header h2 { font-size: 1rem; }
}

/* ── Webinar clickable transcript ────────────────────────────────── */
.webinar-transcript-segments {
  max-height: 280px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  background: var(--bs-tertiary-bg);
}
.ts-seg {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--bs-body-color);
  font-size: 0.85rem;
  line-height: 1.45;
  cursor: pointer;
}
.ts-seg:hover { background: var(--bs-body-bg); }
.ts-seg.active {
  background: rgba(var(--bs-primary-rgb), 0.12);
  outline: 1px solid rgba(var(--bs-primary-rgb), 0.35);
  font-weight: 500;
}
.ts-seg-stamp {
  display: inline-block;
  min-width: 3.25rem;
  margin-right: 0.5rem;
  color: var(--bs-secondary-color);
  font-family: var(--bs-font-monospace);
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: top;
}
.ts-seg.active .ts-seg-stamp { color: var(--bs-primary); }

/* Stacked layout: video and transcript both span the full container width.
   Overrides the col-md-7 / col-md-5 split that the side-by-side mode uses. */
.webinar-grid.stacked > .col-md-7,
.webinar-grid.stacked > .col-md-5 {
  flex: 0 0 100%;
  max-width: 100%;
}
.webinar-grid.stacked .webinar-transcript-segments {
  max-height: 360px;
}

/* When the share-group has no dropdown caret visible, the single share
   button shouldn't keep the btn-group's flattened right edge. */
.webinar-share-group.no-caret > .btn:first-child {
  border-top-right-radius: var(--bs-btn-border-radius, .375rem);
  border-bottom-right-radius: var(--bs-btn-border-radius, .375rem);
}