/* =========================================================================
   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: var(--space-1-5) 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: var(--space-1); 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: var(--space-1-5); 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 var(--space-3); 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; }
@media (hover: hover) and (pointer: fine) {
  .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-opt.sel { background: color-mix(in srgb, var(--primary-500) 7%, var(--surface)); }   /* selected = slight fill (app rule) */
/* 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-panel-foot--start { justify-content: flex-start; gap: var(--space-2); }   /* the portal's Connect Meta + Learn more */
/* a foot can carry a note under its button (Google Calendar "Not available") — it wraps to its own line */
.intg-panel-foot { flex-wrap: wrap; }
.intg-panel-foot > .intg-note { flex-basis: 100%; }
.intg-cta { min-width: 132px; justify-content: center; }
.intg-regen { display: inline-flex; align-items: center; gap: var(--space-1-5); margin-top: var(--space-3); padding: var(--space-1-5) var(--space-1); 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 — search/list/empty internals are the shared .assign-*
   recipes in components.css; only sizing + option rows live here */
.assign-menu { width: 252px; padding: var(--space-1-5); }
.assign-opt { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-1-5) var(--space-2); 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-foot { margin-top: var(--space-1); padding-top: 5px; border-top: 1px solid var(--border-faint); }
.assign-clear { width: 100%; padding: var(--space-2); 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; }

/* (the universal .empty-state / .load-error-banner recipes moved to
   styles/components.css — they're app-wide, not a Meta-picker pattern) */

/* 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: var(--space-2) var(--space-3);
  font-size: var(--text-sm); line-height: var(--leading-relaxed);
}