/* =========================================================================
   views/meta-picker.css — Meta Page picker — searchable dropdown with Page/IG avatars
   Split from the old monolithic styles/views.css. LOAD ORDER MATTERS:
   the <link> order in Magnet CRM.html / Client App.html reproduces the
   original file order, so the cascade is unchanged — add new rules to the
   matching feature file, not the end of the list.
   ========================================================================= */
/* ===== Meta Page picker — searchable dropdown with real Page/IG avatars ===== */
.mpage-dd { position: relative; }
.mpage-trigger { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: auto; min-height: 44px; padding: 6px 11px; cursor: pointer; text-align: left; }
.mpage-trigger > svg { margin-left: auto; width: 16px; height: 16px; color: var(--text-soft); flex-shrink: 0; }
.mpage-cur { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mpage-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
/* Meta-style stacked avatars: IG picture behind top-right, Page picture front
   bottom-left, platform badges on their respective circles */
.mpage-avwrap { position: relative; width: 42px; height: 38px; flex-shrink: 0; }
.mpage-avwrap--single { width: 34px; height: 32px; }
.mpage-avwrap--single .mpage-av { position: absolute; top: 0; left: 0; }
.mpage-av--back { position: absolute; top: 0; right: 0; width: 26px; height: 26px; }
.mpage-av--front { position: absolute; bottom: 0; left: 0; width: 26px; height: 26px; box-shadow: 0 0 0 2px var(--surface); z-index: 1; }
.mpage-av--letter { font-size: var(--text-xs); }
.mpage-badge { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1.5px var(--surface); z-index: 2; }
.mpage-badge svg { width: 100%; height: 100%; display: block; }
.mpage-avwrap .mpage-badge--ig { top: -2px; right: -4px; }
.mpage-avwrap .mpage-badge--fb { bottom: -2px; left: 15px; }
.mpage-avwrap--single .mpage-badge--fb { bottom: -2px; left: auto; right: -2px; }
.mpage-text { display: flex; flex-direction: column; min-width: 0; }
.mpage-name { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpage-ig { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpage-ig img { width: 13px; height: 13px; border-radius: 50%; object-fit: cover; }
/* expands in place (pushes the fields below down) — a floating menu would be
   clipped by the modal body's scroll container */
.mpage-menu { margin-top: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.mpage-search { display: flex; align-items: center; gap: var(--space-2); padding: 9px 12px; border-bottom: 1px solid var(--border-faint); }
.mpage-search svg { width: 15px; height: 15px; color: var(--text-soft); flex-shrink: 0; }
.mpage-search input { border: 0; outline: none; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--text-strong); width: 100%; }
.mpage-list { max-height: 218px; overflow-y: auto; padding: 5px; }
.mpage-opt { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 7px 9px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: left; }
.mpage-opt:hover { background: var(--gray-100); }
.mpage-opt > svg { margin-left: auto; width: 15px; height: 15px; color: var(--primary-600); flex-shrink: 0; opacity: 0; }
.mpage-opt.sel > svg { opacity: 1; }
.mpage-empty { padding: 12px; font-size: var(--text-sm); color: var(--text-soft); text-align: center; }
/* compose tiles: real Page/IG profile pictures */
.compose-acct-img { width: 50px; height: 50px; border-radius: 14px; object-fit: cover; display: block; }
/* Meta — multi-select lead-form picker (design-system checkbox rows) */
.meta-forms { display: flex; flex-direction: column; max-height: 248px; overflow-y: auto; padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.meta-form-opt { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .meta-form-opt:hover { background: var(--nav-hover-bg); }
}
.meta-form-opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); }
.meta-form-opt--all { margin-bottom: var(--space-1); padding-bottom: var(--space-1); border-bottom: 1px solid var(--border-faint); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.meta-form-opt--all span { font-weight: var(--fw-semibold); color: var(--text-strong); }
.meta-forms-loading, .meta-forms-empty { padding: var(--space-3) var(--space-2); font-size: var(--text-sm); color: var(--text-soft); line-height: var(--leading-relaxed); }
.intg-panel-foot { margin-top: var(--space-4); display: flex; justify-content: flex-end; }
.intg-cta { min-width: 132px; justify-content: center; }
.intg-regen { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); padding: 6px 4px; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); cursor: pointer; transition: color var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .intg-regen:hover { color: var(--primary-600); }
}
.intg-regen svg { width: 15px; height: 15px; }

/* assignee dropdown */
.assign-menu { width: 252px; padding: 6px; }
.assign-search { display: flex; align-items: center; gap: 7px; padding: 0 9px; margin-bottom: 4px; border-bottom: 1px solid var(--border-faint); }
.assign-search svg { width: 15px; height: 15px; color: var(--text-soft); flex-shrink: 0; }
.assign-search input { flex: 1; min-width: 0; height: 36px; border: 0; outline: 0; background: transparent; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text); }
.assign-search input:focus, .assign-search input:focus-visible { outline: none; box-shadow: none; border: 0; }
.assign-search input::placeholder { color: var(--text-soft); }
.assign-list { display: flex; flex-direction: column; gap: 1px; max-height: 264px; overflow-y: auto; }
.assign-opt { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 6px 8px; border-radius: var(--radius-sm); text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .assign-opt:hover { background: var(--gray-100); }
}
.assign-name { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assign-check { flex-shrink: 0; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary-600); }
.assign-check svg { width: 16px; height: 16px; }
.assign-opt.is-on .assign-name { color: var(--primary-700); }
.assign-empty { padding: 14px 10px; text-align: center; font-size: var(--text-sm); color: var(--text-soft); }
.assign-foot { margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--border-faint); }
.assign-clear { width: 100%; padding: 8px; border-radius: var(--radius-sm); text-align: center; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--danger-600); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .assign-clear:hover:not(:disabled) { background: var(--danger-bg); }
}
.assign-clear:disabled { color: var(--text-soft); cursor: default; opacity: 0.6; }

/* Universal empty state (emptyState() in app.js) — fills its container and
   centres the illustration + copy. Reuses the .lead-empty-* art/title/desc/cta. */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; flex: 1 1 auto; min-height: 56vh;
  padding: var(--space-6) var(--space-4);
}
.empty-state--compact { min-height: 260px; }
/* Error twin of the empty state (errorState()) — a distinct alert disc so a
   failed load never masquerades as "nothing here yet". Danger tokens are
   dark-remapped, so the disc flips with the theme. */
.empty-state-ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--danger-bg); color: var(--danger-600);
}
.empty-state-ico svg { width: 26px; height: 26px; }
/* Shared load-failure banner (errorBanner()) — a slim inline alert + Retry for
   views that still render content around a failed source (dashboard, calendar).
   Danger tokens are dark-remapped. */
.load-error-banner {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger-600); border-radius: var(--radius-md);
  background: var(--danger-bg); color: var(--text-strong);
}
.load-error-ico { display: inline-flex; color: var(--danger-600); }
.load-error-ico svg { width: 20px; height: 20px; }
.load-error-msg { flex: 1 1 auto; font-size: var(--text-sm); }
.load-error-banner .btn { flex: 0 0 auto; }

/* Leadgen-webhook health strip (Meta card, admin) — only rendered when the
   server's self-registration genuinely can't activate the app-level webhook. */
.meta-hook-warn {
  border: 1px solid color-mix(in srgb, var(--danger-600) 35%, var(--border));
  background: var(--danger-bg); color: var(--danger-600);
  border-radius: var(--radius-md); padding: 8px 12px;
  font-size: var(--text-sm); line-height: var(--leading-relaxed);
}