.toast-stack {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3000;
  pointer-events: none;
  max-width: 420px;
  width: 100%;
  padding: 0 16px;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 30px rgba(30, 26, 20, 0.16);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  animation: toast-in 0.22s cubic-bezier(0.2, 1, 0.3, 1);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}

.toast-success .toast-icon { background: rgba(21, 128, 61, 0.14); color: var(--success); }
.toast-error   .toast-icon { background: rgba(185, 28, 28, 0.14); color: var(--danger); }
.toast-info    .toast-icon { background: var(--gold-glow); color: var(--gold); }

.toast-msg {
  flex: 1;
  line-height: 1.4;
}

.toast-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
}

.toast-close:hover { color: var(--text-primary); }

/* F-3 — optional action button (e.g., "בטל" for undo). Gold outline so
   it's obviously clickable inside the toast pill. */
.toast-action {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.toast-action:hover { background: var(--gold-glow); }
/* Self-hosted Assistant font (PERF-017).
   Three weights — 400/500/700 — match every actual usage in the app.
   The 300 / 600 / 800 weights from the previous Google Fonts request
   were dead references. Files live in `/public/fonts/`; the preload
   for assistant-400 is in index.html. font-display: swap keeps text
   visible during the swap-in. */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/assistant-400.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/assistant-500.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/assistant-700.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* Latin / latin-ext fallbacks — agents who type English in notes get
   the same family, falling through to system stack on glyphs we don't
   ship. */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/assistant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/assistant-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Shape & typography — shared across themes */
  --gold: #b48b4c;
  --gold-light: #c9a36c;
  --gold-dim: #8a6932;
  /* S24: WCAG-AA-passing body-text gold. --gold on white is ~3.33:1
     (fails 4.5:1 for body text). Use --gold-readable for any small
     Hebrew body copy — tour metadata, chip labels, small badges. The
     display `--gold` stays for accents, headings, and the big CTA
     where 3:1 (large-text threshold) is fine. */
  --gold-readable: #7a5c2c;
  --gold-glow: rgba(180, 139, 76, 0.14);
  --gold-border: rgba(180, 139, 76, 0.28);

  --success: #15803d;
  --success-bg: rgba(21, 128, 61, 0.1);
  --warning: #b45309;
  --warning-bg: rgba(180, 83, 9, 0.1);
  --danger: #b91c1c;
  --danger-bg: rgba(185, 28, 28, 0.1);
  --info: #2563eb;
  --info-bg: rgba(37, 99, 235, 0.1);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Single family — Assistant. Heebo was previously listed as a
     fallback but we never loaded it, so it was a dead reference; the
     real fallback is the system stack (apple-system → BlinkMacSystemFont
     → Segoe UI → sans-serif). */
  --font-display: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sidebar-width: 260px;
  --header-height: 72px;

  /* GLOB-1 — token for safe-area-aware bottom padding so future bottom
     bars / FABs / sticky CTAs can pad past the iPhone home indicator
     without rediscovering the env() formula. Existing rules are not
     refactored here (out of scope) — this is a forward-looking token. */
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
}

/* ── Light theme (default) ──────────────────────────────────── */
:root,
[data-theme='light'] {
  --bg-primary: #f7f3ec;
  --bg-secondary: #efe9df;
  --bg-card: #ffffff;
  --bg-card-hover: #fbf7f0;
  --bg-elevated: #f1ebe0;
  --bg-input: #ffffff;

  --text-primary: #1e1a14;
  --text-secondary: #54503e;
  /* F-9.5 — darkened from #8b8574 (4.05:1) to #6b6356 (~6:1) so
     caption / helper / date text meets WCAG AA body contrast. */
  --text-muted: #6b6356;
  --text-accent: var(--gold);
  /* X-3 — placeholder color token used by the global ::placeholder
   * rule below. Muted enough to read as hint-not-value; opacity also
   * applied so Chrome/Safari's own default weight doesn't override. */
  --placeholder-color: #9a9387;

  --border: rgba(30, 26, 20, 0.08);
  --border-light: rgba(30, 26, 20, 0.14);

  --shadow-sm: 0 1px 3px rgba(30, 26, 20, 0.06), 0 1px 2px rgba(30, 26, 20, 0.04);
  --shadow-md: 0 4px 16px rgba(30, 26, 20, 0.08), 0 2px 4px rgba(30, 26, 20, 0.05);
  --shadow-lg: 0 10px 40px rgba(30, 26, 20, 0.10), 0 4px 12px rgba(30, 26, 20, 0.06);
  --shadow-gold: 0 4px 20px rgba(180, 139, 76, 0.18);
}

/* ── Dark theme ─────────────────────────────────────────────── */
[data-theme='dark'] {
  --bg-primary: #0d0f14;
  --bg-secondary: #141720;
  --bg-card: #1a1d28;
  --bg-card-hover: #1f2330;
  --bg-elevated: #222636;
  --bg-input: #161924;

  --gold: #c9a96e;
  --gold-light: #ddc08a;
  --gold-dim: #a08550;
  --gold-glow: rgba(201, 169, 110, 0.15);
  --gold-border: rgba(201, 169, 110, 0.25);

  --text-primary: #f0ece4;
  --text-secondary: #9a9aab;
  --text-muted: #5e5e72;
  --placeholder-color: #6a6a82;

  --border: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.1);

  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.1);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.1);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.1);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.1);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --shadow-gold: 0 4px 20px rgba(201, 169, 110, 0.15);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  direction: rtl;
}

/* Unified focus ring — 2px gold, visible on every interactive element */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* iOS rubber-band on document scroll */
  overscroll-behavior-y: auto;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* `manipulation` disables double-tap zoom while keeping native scroll
     fully intact. `pan-x pan-y` is the equivalent per-axis form but
     some Capacitor WKWebView builds treated it as "scroll is
     JavaScript's problem" and rubber-banded the document without
     actually scrolling. `manipulation` avoids that edge case. */
  touch-action: manipulation;
  /* Prevents iOS from zooming the viewport when input gains focus */
  -webkit-user-select: text;
}

/* ── Native iOS (Capacitor WKWebView) scroll + perf fixes ──────
   The symptom we're chasing: rubber-band engages (touch registered)
   but the document doesn't actually scroll, everywhere in the app.
   Root cause: when Capacitor's keyboard.resize="body" and iOS
   contentInset="never" combine, the WKWebView's scrollView can end
   up with contentSize == frameSize so there's nothing to scroll
   against. Fixes, all iOS-only:

   1. html, body = `-webkit-fill-available` (not 100vh) so the
      viewport matches what the user actually sees.
   2. `overflow-y: scroll` on html forces the scrollView's
      contentSize calculation to account for overflow explicitly.
   3. `-webkit-overflow-scrolling: touch` keeps the old-iOS momentum
      scroll code path alive (harmless on new iOS).
   4. Promote the document scroll layer to GPU via
      `transform: translateZ(0)` — this is the key 120fps hint for
      ProMotion-capable iPhones; without it, complex card layouts
      fall back to CPU compositing at 60fps. */
@supports (-webkit-touch-callout: none) {
  html {
    min-height: -webkit-fill-available;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  body {
    min-height: -webkit-fill-available;
    -webkit-overflow-scrolling: touch;
  }
  /* NOTE: we used to set `transform: translateZ(0)` on the top-level
     page containers (.main-content, .dashboard, etc.) as a 120fps
     compositor hint. That reliably broke `position: fixed` — the
     mobile header and tab bar became relative to the transformed
     ancestor instead of the viewport, so they scrolled WITH the
     content. `transform: translateZ(0)` on ANY ancestor creates a
     new containing block for fixed children (CSS2.1). The hint has
     to live somewhere that's neither an ancestor of nor a fixed
     element — the obvious safe spot is specific card/row elements,
     already GPU-promoted via content-visibility below. */
}

button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* ── ProMotion / 120Hz friendliness ──────────────────────────────
   iPhone 13 Pro+ can render up to 120Hz, but WKWebView only actually
   hits that cadence when:
     (a) animations run on the compositor (transform / opacity only),
     (b) nothing else on the main thread blocks the frame.
   The rules below:
     - Cap our shared transition defaults to transform/opacity so any
       ":hover { background: … }" style hover doesn't trigger a repaint.
     - Mark every ".animate-in" entrance animation with will-change so
       the browser sets up a dedicated GPU layer up front instead of
       mid-animation (which causes the first-frame jank users notice).
     - Add content-visibility on offscreen card lists so iOS can skip
       layout/paint work for rows the user hasn't scrolled to yet —
       this is the single biggest win for scroll-smoothness on long
       /properties and /customers pages. */
.animate-in, .animate-in-delay-1, .animate-in-delay-2,
.animate-in-delay-3, .animate-in-delay-4, .animate-in-delay-5 {
  will-change: transform, opacity;
}
/* Scoped content-visibility: skip offscreen rendering for long
   data-table rows. We DO NOT apply it to .property-card /
   .customer-card / .owner-card — those have dynamic heights and
   get a visible "pop" when they hydrate on scroll, which reads as
   jank. Table rows are uniform-height enough to make content-
   visibility a pure win. */
.data-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 56px;
}

/* Snappy touch feedback — the single biggest "feels like an iPhone
   app" win for a WKWebView. On any interactive element, a 98% scale
   on :active fires on touchstart (before the tap is even committed),
   giving the immediate press response that's the hallmark of native
   UX. We gate on (pointer: coarse) so desktop-hover stays still.
   Transition is transform-only so it's composited on GPU. */
@media (pointer: coarse) {
  button:active,
  a:active,
  [role="button"]:active,
  .btn:active,
  .card:active,
  .property-card:active,
  .customer-card:active,
  .owner-card:active {
    /* Bumped from scale(0.97) → scale(0.94). On a 120Hz iPhone the
       3% squish was so subtle it read as "no feedback". 6% is the
       sweet spot — visibly springs back without feeling cartoony.
       Matches the iOS UIControl default press feedback magnitude. */
    transform: scale(0.94);
    /* 110ms with iOS spring curve — slightly longer than 80ms so the
       eye actually catches the press at 120Hz (8.3ms/frame ≈ 13
       frames). Compositor-only animation, no main-thread cost. */
    transition: transform 110ms cubic-bezier(0.32, 0.72, 0, 1);
  }
}

/* Smoother scrolling inside any overflow container (lists, kanban, etc.) */
* {
  -webkit-overflow-scrolling: touch;
}

/* ──────────────────────────────────────────────────────────────
 * Universal press feedback on mobile — every interactive surface
 * gets a tiny scale + brightness dip on tap so presses feel alive.
 * Spring easing for an iOS-ish snap.
 * ──────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  button,
  a,
  summary,
  [role="button"],
  .btn,
  .filter-tab,
  .toggle-btn,
  .property-card,
  .property-card-link,
  .customer-card,
  .deal-card,
  .dk-card,
  .ap-card,
  .stat-card,
  .chip-clickable,
  .cmt-tab,
  .nav-item,
  .mtb-item,
  .mtb-fab,
  .mtb-add-row,
  .mms-row,
  .mms-me,
  .cl-btn,
  .cl-actions .btn,
  .ppm-thumb,
  .pvm-item,
  .mh-profile-btn {
    transition:
      transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.14s ease,
      background-color 0.14s ease,
      box-shadow 0.14s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  button:active,
  a:active,
  [role="button"]:active,
  .btn:active,
  .filter-tab:active,
  .toggle-btn:active,
  .property-card:active,
  .property-card-link:active,
  .customer-card:active,
  .deal-card:active,
  .dk-card:active,
  .ap-card:active,
  .stat-card:active,
  .chip-clickable:active,
  .cmt-tab:active,
  .nav-item:active,
  .mtb-add-row:active,
  .mms-row:active,
  .mms-me:active,
  .cl-btn:active,
  .cl-actions .btn:active,
  .ppm-thumb:active,
  .pvm-item:active,
  .mh-profile-btn:active {
    transform: scale(0.96);
    opacity: 0.9;
  }

  /* Primary buttons get a slightly more emphatic squish + deeper glow */
  .btn-primary:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(180, 139, 76, 0.32) inset;
  }

  /* Tabs/rows that are full-width shouldn't scale the full screen — clip on transform */
  .mtb-item:active {
    transform: scale(0.9);
    opacity: 0.7;
  }

  .mtb-fab:active {
    transform: scale(0.92);
  }
}

/* Respect the user's OS motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* iOS keyboard — the previous rules shifted every sticky FAB, tab
   bar, and content edge up by the keyboard's height via --kb-h. User
   feedback was "I don't want anything to go up when the keyboard
   opens." Capacitor now runs with Keyboard.resize:"none", so iOS
   doesn't shrink the WebView viewport; combined with the no-op
   rules below, the keyboard simply overlays the bottom of the page.
   Kept the --kb-h CSS variable at 0 so any stragglers that reference
   it don't break. */
:root { --kb-h: 0px; }

/* Every input/textarea gets a scroll margin so scrollIntoView keeps it above
   the keyboard edge */
input, textarea, select {
  scroll-margin-top: 80px;
  scroll-margin-bottom: calc(var(--kb-h) + 80px);
}

/* S1 — Kill iOS Safari's focus auto-zoom.
 *
 * iOS Safari auto-zooms the viewport when a focused input's rendered
 * font-size is < 16px. Once zoomed, the user has to pinch out to
 * continue, which is jarring and the single biggest iPhone-form
 * complaint.
 *
 * Some of our individual input classes set mobile-specific sizes in
 * their own media queries (Forms.css → 16px; SmartFields → 17px); this
 * rule is a belt-and-braces safety net for everything we don't reach
 * from component CSS — dialog inputs, TransferPropertyDialog search,
 * LeadPickerSheet search, MarketingActionDialog link/notes fields,
 * any future raw <input> that lands without a class.
 *
 * Scoped to the narrow interactive-form inputs; intentionally skips
 * hidden inputs and checkboxes/radios since they don't focus-zoom.
 */
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Form-action bars are inline on mobile; nothing needed here any more */

/* Skeleton placeholders */
.skel {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 0%,
    var(--bg-card-hover) 50%,
    var(--bg-elevated) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
}

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(201, 169, 110, 0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.animate-in {
  /* Polish A-4: was 0.5s — felt laggy on dashboards with 6+ staggered
     stat cards because the last card finished animating ~900ms after
     the page paint. Capped at 220ms with shorter staggers. */
  animation: fadeIn 0.22s ease-out forwards;
  opacity: 0;
}

.animate-in-delay-1 { animation-delay: 0.04s; }
.animate-in-delay-2 { animation-delay: 0.08s; }
.animate-in-delay-3 { animation-delay: 0.12s; }
.animate-in-delay-4 { animation-delay: 0.16s; }
.animate-in-delay-5 { animation-delay: 0.20s; }

/* Typography */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.3;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--gold-light);
}

/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  /* Polish P-1: targeted props instead of `transition: all` so each
     hover/state change doesn't re-diff every computed property on the
     button + its children. */
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease, transform 0.12s ease;
  white-space: nowrap;
  /* Polish T-1: every interactive button gets at least the Apple HIG
     44pt minimum tap area. Visual size stays the same — padding-Y
     bump only kicks in when min-height would otherwise be < 44px. */
  min-height: 44px;
}

/* Polish T-3: every plain .btn gets the same press-feedback the
   primary CTA already had. Subtle, < 100ms, doesn't trigger layout. */
.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: var(--bg-primary);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(201, 169, 110, 0.25);
}
/* Touch devices skip the hover lift entirely — `:hover` fires on tap
   and then "sticks" until the next tap elsewhere on iOS. Keeping the
   shadow constant on touch avoids a paint on every press. */
@media (pointer: coarse) {
  .btn-primary:hover {
    transform: none;
    box-shadow: var(--shadow-gold);
  }
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--gold-border);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 12px;
}
.btn-ghost:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.2);
}
.btn-danger:hover {
  background: rgba(248, 113, 113, 0.15);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 16px;
  border-radius: var(--radius-md);
}

/* Form elements */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-input,
.form-select,
.form-textarea {
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  /* Sub-100ms focus transition so the border+ring land visibly the
     same frame the keyboard slides up. 200ms looked intentional on
     desktop but read as "input didn't respond" on mobile touch. */
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
  direction: rtl;
}
/* Native iOS + Android: skip the transition entirely; the "feels
   laggy" signature at 120Hz is ANY non-instant paint on tap. */
@media (pointer: coarse) {
  .form-input,
  .form-select,
  .form-textarea {
    transition: none;
  }
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.form-input::placeholder {
  color: var(--text-muted);
}

/* X-3 — global placeholder styling for every text-like input so the
 * hint never reads as a real value. The `.form-input` rule above
 * overrides for the design-system class; this catches all the bare
 * <input> / <textarea> / <select> elements on pages that haven't
 * migrated to SmartFields yet. */
input::placeholder,
textarea::placeholder {
  color: var(--placeholder-color);
  opacity: 0.8;
}
/* Safari/Firefox honor `opacity` on the placeholder pseudo only when
 * explicitly reset — their UA sheets sometimes apply their own alpha. */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--placeholder-color);
  opacity: 0.8;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: var(--placeholder-color);
  opacity: 0.8;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  /* Targeted transitions instead of `all` — `all` re-diffs every
     computed property on every state flip, which on WKWebView is
     visible as paint pauses when many cards are on screen. */
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
@media (pointer: coarse) {
  .card { transition: none; }
}

.card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.badge-success {
  background: var(--success-bg);
  color: var(--success);
}
.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.badge-info {
  background: var(--info-bg);
  color: var(--info);
}
.badge-gold {
  background: var(--gold-glow);
  color: var(--gold);
}

/* Table */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead {
  background: var(--bg-elevated);
}

th {
  padding: 14px 16px;
  text-align: right;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

tbody tr {
  transition: background 0.15s;
}

tbody tr:hover {
  background: rgba(255,255,255,0.02);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* Noise overlay */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-state svg {
  color: var(--text-muted);
  margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--text-secondary);
  font-size: 14px;
}

/* ───────────────────────── MOBILE UX UTILITIES ─────────────────────────
 * Used across the app per ESTIA_MOBILE_UX_AUDIT.md fixes.
 * Keep these minimal — one concept per class.
 * ────────────────────────────────────────────────────────────────────── */

/* P5-M1: guarantee 44×44 tap target on small buttons */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (pointer: coarse) {
  /* On touch devices, force .btn-sm to meet the 44px rule. */
  .btn.btn-sm {
    min-height: 40px;
  }
  /* Icon-only buttons that only had tiny hit areas. */
  .btn-ghost {
    min-width: 40px;
    min-height: 40px;
  }
}

/* P5-M7: WhatsApp-green icon class */
.wa-green   { color: #25d366 !important; }
.wa-bg      { background: #25d366 !important; color: #fff !important; }
.wa-border  { border-color: #25d366 !important; }

/* Canonical WhatsApp button — pair with .btn (and optionally .btn-sm/.btn-lg).
 * Use everywhere a button's primary action is "send/open WhatsApp" so the
 * brand-green color signals the channel. */
.btn.btn-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  border-color: #128c7e;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.32);
}
.btn.btn-whatsapp:hover { filter: brightness(1.05); }
.btn.btn-whatsapp:active { filter: brightness(0.95); }
.btn.btn-whatsapp:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }

/* P5-M4: safe-area helpers for pages that float CTAs */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-top    { padding-top: env(safe-area-inset-top); }

/* Sticky search bar pattern — add to a container to anchor it under the
 * fixed mobile header. */
.sticky-search {
  position: sticky;
  top: calc(52px + env(safe-area-inset-top) + 4px);
  z-index: 40;
  background: var(--bg-page, var(--bg-primary));
  padding-top: 8px;
  padding-bottom: 8px;
}

@media (min-width: 1025px) {
  .sticky-search {
    top: 0;
    padding-top: 4px;
  }
}

/* Subtle "hint" pencil on inline-editable values (P2-M8) */
.inline-edit {
  position: relative;
  cursor: pointer;
}

.inline-edit::after {
  content: '✎';
  margin-inline-start: 6px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s;
  font-size: 11px;
}

.inline-edit:hover::after,
.inline-edit:focus::after {
  opacity: 0.7;
}

@media (pointer: coarse) {
  .inline-edit::after { opacity: 0.55; }
}

/* Copy-feedback: `✓ הועתק` flash */
.copy-flash {
  animation: copy-flash 0.4s ease;
}

@keyframes copy-flash {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.05); background: var(--success-bg); }
  100% { transform: scale(1); }
}

/* When the keyboard is open we sometimes want to disable pull-to-refresh */
body.kb-open .pr-indicator { display: none; }

/* ───── Hard horizontal overflow guard for iPhone widths ─────
 * Anything that tries to be wider than the viewport gets clipped
 * rather than widening the page. Components that need horizontal
 * scroll (KPI carousel, gallery strip) opt-in via overflow-x: auto. */
@media (max-width: 900px) {
  html, body, .layout, .main-content {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* Common offenders: tables, pre, images that don't constrain */
  img, video, canvas, svg, iframe {
    max-width: 100%;
  }
}

/* iOS-specific: prevent rubber-band horizontal bounce */
html, body {
  overscroll-behavior-x: none;
}

/* ───── P5-M9 — Visible focus rings on keyboard/sr focus ─────
 * Touch focus stays subtle; only :focus-visible shows the ring. */
:where(button, a, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--gold, #c9a96e);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ───── P2-M18 — Relative-date severity colours ───── */
.rel-urgent  { color: var(--danger); font-weight: 700; }
.rel-warning { color: var(--warning); font-weight: 600; }
.rel-soon    { color: var(--gold); font-weight: 600; }
.rel-normal  { color: var(--text-muted); }

/* P5-D7 — Wide-monitor cap so pages don't sprawl across 1920+ displays */
.app-wide-cap {
  max-width: 1600px;
  margin-inline: auto;
}

/* GPU-layer promotion for fixed-position chrome. The mobile header
   (Layout topbar) lives at top:0 with z-index:20; without an
   explicit transform it can be lifted into the same compositor
   layer as the scrolling document, which on WKWebView causes
   intermittent tap drops mid-scroll (same root cause we hit on
   MobileTabBar — the bar's bg + border get re-rasterized as the
   under-content scrolls past). Promoting it to its own layer pins
   it; the GPU never re-rasterizes. */
.mobile-header,
.mh-bar,
.layout-mobile-header {
  transform: translateZ(0);
  will-change: transform;
}

/* T6 — content-visibility on list cards lets the browser skip
   rendering offscreen items. Big scroll-perf win on long lists,
   especially on 120Hz iPhones where every dropped frame is visible.
   Previously gated to ≥821px (desktop-only); removed the gate so
   touch devices get the same benefit. The `contain-intrinsic-size`
   is the placeholder height for offscreen rows so the scrollbar
   doesn't jump as cards hydrate. */
.customer-card,
.owner-card,
.property-card,
.property-card-compact,
.deal-card,
.ap-card,
.dk-card {
  content-visibility: auto;
  contain-intrinsic-size: 240px;
  /* `contain: layout` walls off internal layout: a card's hover or
     state change won't trigger reflow on its siblings. Pairs well
     with content-visibility for compositor-friendly long lists. */
  contain: layout style;
}
@media (max-width: 720px) {
  /* Phone compact card row is ~96px tall (.pc-compact-inner). Match
     the placeholder so we don't reserve desktop-sized blank space. */
  .property-card-compact,
  .customer-card,
  .owner-card {
    contain-intrinsic-size: 96px;
  }
}

/* Respect prefers-reduced-motion throughout — kill nav/tab transitions
   for users who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .nav-item,
  .filter-tab,
  .pps-backdrop,
  .pps-panel,
  .agreement-backdrop,
  .agreement-modal,
  .animate-in {
    animation: none !important;
    transition: none !important;
  }
}

/* T9: progressive enhancement — use 100dvh on iOS so the layout doesn't
   jump when Safari's bottom toolbar hides/reveals. Applies only where
   full-height is meaningful. */
@supports (height: 100dvh) {
  .layout,
  .main-content,
  .login-page,
  .customer-portal,
  .agent-portal,
  .mobile-app {
    min-height: 100dvh;
  }
  .sidebar { height: 100dvh; }
}

/* Sprint 10 — route-content fade-in. Used on <main> via the
   `animation:` inline shorthand so each navigation shows a subtle
   lift rather than an instant swap. Respects reduced-motion. */
@keyframes estia-page-fade {
  /* Opacity-only on purpose — using `transform` here turns <main>
     into a containing block for any descendant `position:fixed`,
     which broke modal overlays (they'd land relative to <main>
     instead of the viewport, leaving the topbar / sidebar visible
     above the dim layer). Lift is gone; the fade alone is enough. */
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  main { animation: none !important; }
}

/* Touch devices (iOS Capacitor + Android) — kill the route fade-in.
   On WKWebView the per-route 180ms `estia-page-fade` animation made
   every navigation feel like there was a hand-off lag before content
   appeared, even though the route was rendered immediately. */
@media (pointer: coarse) {
  main { animation: none !important; }
}

/* View Transitions API — runs on the iOS compositor (Metal-backed,
   not the React main thread) so transitions cost ~zero main-thread
   time and hit ProMotion 120Hz cleanly. WebKit added SPA support in
   Safari 18 / iOS 18; iOS 26 (this app's deployment target) is
   solidly supported. The previous CSS keyframe fades had to repaint
   document content on the main thread and competed with React
   rendering — the new approach takes a snapshot before the route
   change, then crossfades the snapshot with the new render on a
   GPU layer.

   `navigation: auto` opts every same-document navigation in. React
   Router v7 uses pushState, which qualifies. Reduced-motion + the
   `(pointer: coarse)` carve-outs above don't apply here because
   View Transitions respect reduced-motion natively. */
@view-transition {
  navigation: auto;
}

/* Snappy, iOS-native crossfade — 140ms with the iOS spring curve.
   Short enough to feel instant ("the screen just changed"), long
   enough to mask the React render flash. The curve matches UIKit's
   default UIViewAnimationCurveEaseOut. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0ms;
  }
}

/* Sprint 10 — card-level entry animation REMOVED.
   The previous rule animated every direct child of `main > *[dir=rtl]`
   on every render, which double-fired with pages that already have
   their own `animate-in` keyframes (Owners, Properties, etc.) and
   produced a visible jitter on first paint and on hover-induced
   re-renders. The `<main key={pathname}>` fade above already covers
   the route-change transition; per-card stagger isn't load-bearing.
   Per-page `animate-in` classes remain authoritative. */

/* Pure-CSS row hover. Replaces the per-page `useState(hoverId)`
   pattern that re-rendered the whole table every mouse-enter — visible
   as text "loading" / jitter on /owners and /customers when the user
   moves their cursor through the rows. CSS `:hover` is composited and
   doesn't touch React state, so big lists stay smooth. */
.estia-row-hover {
  transition: background-color 80ms ease;
}
.estia-row-hover:hover {
  background-color: rgba(180, 139, 76, 0.06);
}

/* Sprint 10 — soften the loading→loaded swap. When a page's data
   container (a ul / tbody / grid) flips from a skeleton to the real
   list, React swaps element trees so the keyframes from the card
   stagger above don't re-fire. This rule gives any newly-mounted
   list / grid / table-body inside a page a small fade-in so the
   "no data → suddenly there" pop is gentler. The animation is
   subtle (160ms, opacity only — no transform) so it doesn't fight
   the heavier 280ms page-card stagger. */
@keyframes estia-content-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
main ul,
main ol,
main tbody,
main article,
main section > ul,
main section > div > ul,
main [data-grid] {
  animation: estia-content-fade 180ms ease-out both;
}

/* Same touch-device escape hatch as the route fade above. On iPhone
   WKWebView every list/tbody/article remount fired a 180ms opacity
   ramp; combined with the stagger of `.animate-in` cards inside, the
   total on-screen settle time was 300–500ms per navigation, which
   reads as "the app is laggy" even when the JS is already done. Strip
   the fades on touch and let the content arrive instantly. */
@media (pointer: coarse) {
  main ul,
  main ol,
  main tbody,
  main article,
  main section > ul,
  main section > div > ul,
  main [data-grid] {
    animation: none !important;
  }

  /* `.animate-in` is sprinkled across page-level cards (Dashboard
     KPI tiles, Login pane, Properties grid, etc.). On touch we skip
     the entrance animation and the staggered delays — show the card
     immediately at full opacity. The keyframes themselves stay
     defined for desktop. */
  .animate-in,
  .animate-in-delay-1,
  .animate-in-delay-2,
  .animate-in-delay-3,
  .animate-in-delay-4,
  .animate-in-delay-5 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  main ul, main ol, main tbody, main article,
  main section > ul, main section > div > ul, main [data-grid] {
    animation: none !important;
  }
}

/* DD-1 — DealDetail PartyBlock phone+email row: each child takes a full
 * line on phones < 500px so contact info doesn't truncate. */
@media (max-width: 500px) {
  .party-contact-row > span {
    flex: 1 1 100%;
  }
}
/* Shared print stylesheet (Phase-4 Lane 4 — B6).
 *
 * Imported once globally from main.jsx. Covers all printable routes —
 * detail pages today (property / customer / owner), others later.
 *
 * Design goals:
 *   1. Hide app chrome (sidebar / mobile header / mobile tab bar /
 *      sticky action bars / FABs) so only the main content prints.
 *   2. Drop shadows and surface tinting — black text on white paper.
 *   3. Keep imagery present at a readable width; don't blow photos up
 *      to full A4.
 *   4. Print-friendly @page margins (18mm all round — a hair narrower
 *      than LibreOffice's default, fits most inkjets edge-to-edge).
 */

@media print {
  @page {
    margin: 18mm;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    /* X-1 — the "blank page / only first page prints" regression was
     * caused by app chrome CSS that clamps html/body height to the
     * viewport and hides overflow. Under @media print this paginates
     * to one page of content + blank trailing pages. Force the browser
     * back to the print-default flow here. */
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Same reason — any page-level scrollable wrapper must let the
   * browser lay its content out across pages instead of clipping to
   * the screen viewport. P-1 extends coverage to every known detail-
   * page wrapper that was clipping trailing content during print. */
  #root,
  .app,
  .main-content,
  .property-detail,
  .pd-dashboard,
  .pd-grid,
  .pd-kpis,
  .pd-matches,
  .pd-panel-sheet,
  .pd-agreements,
  .dc,
  .dc-body,
  .customer-detail,
  .owner-detail {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  /* App chrome — hide everything that isn't the content. */
  .sidebar,
  .sidebar-overlay,
  .mobile-header,
  .mobile-tab-bar,
  .mobile-more-sheet,
  .sticky-action-bar,
  .chatw-btn,
  .chatw-panel,
  .noise-overlay,
  .pd-topbar,
  .cd-toolbar,
  .od-toolbar,
  .od-mobile-header,
  .pd-print-only-hide,
  [data-print-hide='1'] {
    display: none !important;
  }

  /* Main surface spans the page. */
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Flatten cards / surfaces. */
  .card,
  .section,
  .pd-section,
  .cd-section,
  .od-section,
  .pd-kpi,
  .pd-hero,
  .pd-matches,
  .pd-panel,
  .pd-block {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    page-break-inside: avoid;
  }

  /* Keep photos readable but not wasteful. */
  img,
  video {
    max-width: 420px !important;
    height: auto !important;
    box-shadow: none !important;
  }

  a,
  a:visited {
    color: #000 !important;
    text-decoration: none !important;
  }

  /* Avoid orphans on headings. */
  h1, h2, h3, h4 {
    page-break-after: avoid;
  }
}
.offbanner {
  position: fixed;
  top: calc(52px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  animation: offbanner-in 0.3s cubic-bezier(0.3, 1.2, 0.5, 1);
}

@keyframes offbanner-in {
  from { transform: translate(-50%, -150%); opacity: 0; }
  to   { transform: translate(-50%, 0);      opacity: 1; }
}

.offbanner-off {
  background: var(--warning-bg, #fef3c7);
  color: var(--warning, #b45309);
  border: 1px solid rgba(180, 83, 9, 0.25);
}

.offbanner-on {
  background: var(--success-bg, #dcfce7);
  color: var(--success, #15803d);
  border: 1px solid rgba(21, 128, 61, 0.25);
}

@media (min-width: 901px) {
  .offbanner {
    top: 16px;
  }
}
/* Floating background-scan banner. U-1 — sits bottom-CENTER, full-width
   on mobile, max-width 480px centered on desktop. Previously it was
   pinned to the left and collided with the gold "+" FAB on the right
   and the chat button; the bottom-center layout keeps it out of those
   fixed-corner stacking zones while still staying visible as the agent
   works elsewhere.

   z-index sits deliberately BELOW the FAB (z=140 in MobileAddFab.css)
   so a tap that lands on the FAB isn't eaten by the banner. It sits
   ABOVE the tab bar (z=100) and above most page chrome. Sub-2 owns the
   chat-vs-FAB stacking separately. */

.y2b {
  position: fixed;
  /* Bottom-center. On mobile we need to clear:
       - env(safe-area-inset-bottom)  — iOS home indicator
       - ~64px tab bar                — MobileTabBar's height
       - 8px breathing room           — so it doesn't touch the tab bar */
  left: 12px;
  right: 12px;
  bottom: calc(64px + env(safe-area-inset-bottom) + 8px);
  margin: 0 auto;
  max-width: 480px;
  z-index: 130;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 10px 28px rgba(30, 26, 20, 0.18);
  text-align: right;
  cursor: pointer;
  font-family: var(--font-body);
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(8px);
  opacity: 0;
  animation: y2b-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes y2b-in { to { transform: translateY(0); opacity: 1; } }

@media (min-width: 1025px) {
  .y2b {
    /* Desktop — bottom-center, tighter bottom offset (no tab bar). */
    left: 0;
    right: 0;
    bottom: 24px;
    max-width: 480px;
    min-width: 320px;
  }
}

.y2b:active { transform: scale(0.985); }

.y2b-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: var(--text-primary);
}

.y2b-run .y2b-icon { background: var(--gold-glow); color: var(--gold); }
.y2b-ok  .y2b-icon { background: color-mix(in srgb, var(--success, #2c8a5c) 16%, transparent); color: var(--success, #2c8a5c); }
.y2b-err .y2b-icon { background: var(--danger-bg); color: var(--danger); }

.y2b-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.y2b-body strong {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}

.y2b-body span {
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* U-1 — close button. Always rendered (both running + done states) so
   the agent can dismiss an in-flight banner too, not just completion
   notices. Dismissal is keyed to finishedAt so a newer scan re-arms. */
.y2b-x {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-muted);
  transition: background 0.15s ease;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.y2b-x:hover { background: var(--border); color: var(--text-primary); }
.y2b-x:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.y2b-spin { animation: y2b-spin 0.9s linear infinite; }
@keyframes y2b-spin { to { transform: rotate(360deg); } }
.confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100;
  padding: 20px;
}

.confirm-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.confirm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.confirm-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.confirm-title h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

.confirm-danger-icon {
  color: var(--danger);
}

.confirm-body {
  padding: 20px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.confirm-body p { margin: 0; }

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
/* ────────────────────────────────────────────────────────────────
 * SmartFields — reusable, premium input controls
 * Both desktop (compact + restrained) and iPhone (touch-first) refined.
 * ──────────────────────────────────────────────────────────────── */

/* ── NumberField ──
 * Wrapper IS the bordered control; input is borderless inside.
 * direction: ltr forces unit-on-left / digits-on-right regardless of the
 * surrounding RTL context. This guarantees the unit never overlaps the digits.
 */
.sf-num {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 14px;
  background: var(--bg-input);
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  direction: ltr;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.sf-num.sf-focused,
.sf-num:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.sf-num.sf-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-bg);
}

.sf-num-unit {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0;
}

.sf-num-input {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-display, 'Assistant'), system-ui, sans-serif;
  /* SF-1 — keep base ≥16px so iOS doesn't auto-zoom on focus. The
     mobile @media bumps to 17px for legibility on small screens. */
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}

.sf-num-input::placeholder {
  color: var(--text-muted);
  opacity: 0.55;
  font-weight: 500;
}

.sf-num-hint {
  position: absolute;
  inset-inline-start: 14px;
  bottom: -16px;
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.3px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* iPhone: bigger touch target + 16px font to prevent zoom-on-focus */
@media (max-width: 900px) {
  .sf-num {
    padding: 0 16px;
    border-radius: 14px;
    min-height: 50px;
    gap: 10px;
  }
  .sf-num-input {
    padding: 14px 0;
    font-size: 17px;
  }
  .sf-num-unit {
    font-size: 15px;
  }
}

/* ── PhoneField ── */
.sf-phone {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.sf-phone:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.sf-phone-flag {
  padding-inline-end: 6px;
  padding-inline-start: 12px;
  font-size: 16px;
  flex-shrink: 0;
}

.sf-phone-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 12px;
  font-family: var(--font-display);
  /* SF-1 — keep base ≥16px so iOS doesn't auto-zoom on focus. */
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: right;
}

.sf-phone-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px 0 4px;
  flex-shrink: 0;
}

.sf-phone.sf-valid .sf-phone-state { color: var(--success); }
.sf-phone.sf-invalid {
  border-color: var(--danger);
}
.sf-phone.sf-invalid .sf-phone-state { color: var(--danger); }

@media (max-width: 900px) {
  .sf-phone-input {
    padding: 14px 12px;
    font-size: 17px;
    min-height: 50px;
  }
  .sf-phone-flag { font-size: 18px; padding-inline-start: 14px; }
}

/* ── SelectField ── */
.sf-select {
  position: relative;
  width: 100%;
}

.sf-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 14px;
  padding-inline-start: 38px;  /* generous room for chevron + clearance */
  font-family: var(--font-body);
  /* SF-1 — keep base ≥16px so iOS doesn't auto-zoom on focus. */
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.sf-select select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.sf-select-chev {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.sf-select.sf-invalid select {
  border-color: var(--danger);
}

@media (max-width: 900px) {
  .sf-select select {
    padding: 14px 16px;
    padding-inline-start: 40px;
    font-size: 17px;
    border-radius: 14px;
    min-height: 50px;
  }
  .sf-select-chev {
    inset-inline-start: 14px;
  }
}

/* ── PriceRange ──
   min-width:0 on the wrapper + each cell so the grid can actually shrink
   below its min-content width. Without them the Hebrew placeholder
   "ללא הגבלה" could push the row past the viewport on 375px iPhones. */
.sf-range {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.sf-range-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.sf-range-cell {
  position: relative;
  min-width: 0;
  overflow: hidden; /* belt-and-braces — any stray content stays inside the cell */
}

.sf-range-cap {
  position: absolute;
  top: -8px;
  inset-inline-end: 14px;
  background: var(--bg-input);
  padding: 0 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 1;
}

.sf-range-summary {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.1px;
  text-align: center;
  padding: 4px 0 0;
}

@media (max-width: 900px) {
  .sf-range-pair { gap: 10px; }
  .sf-range-summary { font-size: 14px; }
}

/* ── Segmented control ── */
.sf-seg {
  display: inline-flex;
  width: 100%;
  padding: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  gap: 2px;
}

.sf-seg-opt {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.sf-seg-opt:hover { color: var(--text-primary); }

.sf-seg-opt.sel {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(30, 26, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

[data-theme="dark"] .sf-seg-opt.sel {
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (max-width: 900px) {
  .sf-seg { padding: 4px; border-radius: 14px; }
  .sf-seg-opt {
    padding: 12px 8px;
    font-size: 14px;
    min-height: 44px;
  }
}
/* Quick-edit drawer (5.2) — slides in from the logical end (left on
   RTL, right on LTR) covering a narrow column. Same visual family as
   the transfer dialog but single-panel, no tabs. */

.qed-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 13, 8, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 240;
  display: flex;
  justify-content: flex-start; /* RTL: panel on the left */
  animation: qed-fade 0.18s ease-out;
}
[dir="ltr"] .qed-backdrop { justify-content: flex-end; }

@keyframes qed-fade { from { opacity: 0; } to { opacity: 1; } }

.qed-panel {
  width: 420px;
  max-width: 92vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-inline-end: 1px solid var(--border);
  box-shadow: 18px 0 60px rgba(30, 26, 20, 0.32);
  transform: translateX(-10%);
  animation: qed-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
[dir="ltr"] .qed-panel { transform: translateX(10%); }

@keyframes qed-in { to { transform: translateX(0); } }

/* Mobile: convert to a bottom sheet that fills ~90% of the height. */
@media (max-width: 700px) {
  .qed-backdrop { align-items: flex-end; }
  .qed-panel {
    width: 100%;
    max-width: none;
    height: 90vh;
    border-inline-end: none;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    transform: translateY(10%);
    animation: qed-in-m 0.26s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    box-shadow: 0 -18px 60px rgba(30, 26, 20, 0.32);
  }
  @keyframes qed-in-m { to { transform: translateY(0); } }
}

.qed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-light);
}
.qed-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qed-head-text strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--text-primary);
}
.qed-head-text span {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qed-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.qed-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.qed-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qed-err {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 13px;
}

.qed-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-light);
  background: var(--bg-card);
}
.qed-full {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}
.pnd-backdrop {
  position: fixed;
  inset: 0;
  /* Full-screen dim: 60% black beats every piece of app chrome
     underneath (sidebar 100, mobile header 200, FAB 900, chat 890,
     scan banners 130). The previous 48% mix with a warm tint left
     the sidebar's `--bg-secondary` still readable through the veil,
     so the app looked "half-dimmed" instead of focused. */
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Ride above every known app element. OwnerEditDialog lives at
     1200; we stay one notch higher (1300) since the notes dialog can
     be opened on top of list views whose own z-index ceilings
     (bulk-bar at 950, FAB at 900, etc.) already beat 1100. */
  z-index: 1300;
  animation: pnd-fade 160ms ease;
}

.pnd-modal {
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  animation: pnd-rise 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pnd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.pnd-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pnd-title-wrap h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.pnd-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.pnd-close:hover {
  color: var(--text-primary);
  border-color: var(--gold-border, var(--border));
}

.pnd-sub {
  color: var(--text-muted);
  font-size: 12.5px;
  margin: 0 0 14px;
}

.pnd-textarea {
  flex: 1;
  width: 100%;
  min-height: 220px;
  max-height: 60vh;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.pnd-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.pnd-textarea::placeholder {
  color: var(--placeholder-color);
  opacity: 0.8;
}

.pnd-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.pnd-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}
.pnd-buttons {
  display: inline-flex;
  gap: 8px;
}

.pnd-spin {
  animation: pnd-spin 1s linear infinite;
}

@keyframes pnd-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pnd-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes pnd-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 540px) {
  .pnd-modal {
    max-height: 94vh;
    padding: 16px;
  }
  .pnd-textarea {
    min-height: 180px;
  }
}
.es-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
  color: var(--text-secondary);
  min-height: 200px;
}

.es-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-muted);
  margin-bottom: 4px;
}

.es-first .es-icon {
  background: var(--gold-glow);
  color: var(--gold);
}

.es-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.1px;
  color: var(--text-primary);
}

.es-desc {
  max-width: 380px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.es-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.pr-wrap {
  position: relative;
  overflow: hidden;
}

.pr-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--gold, #c9a96e);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(30, 26, 20, 0.1);
  pointer-events: none;
}

.pr-indicator.ready   { background: var(--gold-glow); color: var(--gold); }
.pr-indicator.refreshing .pr-spinner { animation: pr-spin 0.9s linear infinite; }

.pr-spinner { display: flex; transition: transform 0.05s linear; }

@keyframes pr-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

.pr-content { will-change: transform; }

/* Only active on touch devices — on desktop pull-to-refresh adds no value */
@media (hover: hover) and (pointer: fine) {
  .pr-indicator { display: none; }
  .pr-content   { transform: none !important; }
}
/* ════════════════════════════════════════════════════════════════
 * LeadPickerSheet — focused single-column composer
 * Desktop: centered modal · Mobile: bottom sheet · Same layout
 * ════════════════════════════════════════════════════════════════ */

.lps-back {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 10, 15, 0.5);
  backdrop-filter: blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lps-fade 0.18s ease;
}

@keyframes lps-fade { from { opacity: 0; } to { opacity: 1; } }

.lps-card {
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 22px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.28),
    0 8px 22px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: lps-pop 0.32s cubic-bezier(0.2, 1.1, 0.4, 1);
}

@keyframes lps-pop {
  from { transform: scale(0.96) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.lps-handle {
  width: 42px;
  height: 5px;
  background: var(--border);
  border-radius: 99px;
  margin: 8px auto 0;
}

/* ── HEADER ────────────────────────────────────────────────── */
.lps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.lps-head-text { min-width: 0; }

.lps-head h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0 0 2px;
  color: var(--text-primary);
}

.lps-head small {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.lps-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.lps-close:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}

/* ── PREVIEW (editable WhatsApp bubble) ───────────────────── */
.lps-preview {
  padding: 14px 18px 10px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.lps-bubble-row {
  display: flex;
}

/* The bubble looks like a sent WhatsApp message, on the left side
 * (sender's bubble in RTL). Caps height so a long template doesn't
 * push the recipient list off screen. */
.lps-bubble {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 8px 12px 18px 12px;
  border-radius: 10px 10px 10px 3px;
  background: #d8fdd2;
  color: #111b0a;
  margin-inline-start: auto;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.lps-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  width: 10px;
  height: 12px;
  background: inherit;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

[data-theme="dark"] .lps-bubble {
  background: #005c4b;
  color: #e7f3e8;
}

.lps-bubble-input {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: inherit;
  padding: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  caret-color: #0a7d3f;
  min-height: 96px;
  max-height: 200px;
  field-sizing: content;
}

[data-theme="dark"] .lps-bubble-input { caret-color: #5dd9a3; }

.lps-bubble-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
  font-style: italic;
}

[data-theme="dark"] .lps-bubble-input::placeholder {
  color: rgba(231, 243, 232, 0.4);
}

.lps-bubble-meta {
  position: absolute;
  bottom: 4px;
  left: 8px;
  font-family: var(--font-body);
  font-size: 9.5px;
  color: rgba(0, 0, 0, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  direction: ltr;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

[data-theme="dark"] .lps-bubble-meta { color: rgba(231, 243, 232, 0.5); }

.lps-bubble-ticks { color: #5199ff; font-weight: 700; }

.lps-preview-hint {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

.lps-preview-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 4px 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ── SEARCH ────────────────────────────────────────────────── */
.lps-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 18px 4px;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.lps-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.lps-search svg { color: var(--text-muted); flex-shrink: 0; }

.lps-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  direction: rtl;
}

/* ── LIST ──────────────────────────────────────────────────── */
.lps-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 16px;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.lps-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 6px;
  text-align: right;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}

.lps-row:hover {
  border-color: var(--gold-border);
  background: var(--gold-glow);
}

.lps-row:active { transform: scale(0.985); }

/* Pinned "open without recipient" */
.lps-row-noone {
  background: linear-gradient(135deg, var(--gold-glow), rgba(201, 169, 110, 0.04));
  border: 1.5px solid var(--gold-border);
  margin-bottom: 8px;
}

.lps-row-noone:hover {
  background: linear-gradient(135deg, var(--gold-glow), var(--gold-glow));
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(201, 169, 110, 0.18);
}

.lps-noone-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(180, 139, 76, 0.32);
}

.lps-row-noone strong { color: var(--gold) !important; }

.lps-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f6cf8e, var(--gold-dim, #8a6d38));
  color: #2a1e05;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.lps-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lps-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  min-width: 0;
}

.lps-name-row strong,
.lps-meta strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lps-meta small {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lps-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.lps-dot-hot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }

.lps-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.lps-match {
  background: var(--gold-glow);
  color: var(--gold);
  border: 1px solid var(--gold-border);
}

.lps-cta-wa {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.4);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.lps-cta-wa-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  box-shadow: 0 2px 6px rgba(180, 139, 76, 0.35);
}

.lps-row:hover .lps-cta-wa { transform: scale(1.06); }

.lps-empty {
  padding: 26px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Visibility utilities (page-scoped) */
.lps-card .only-mobile  { display: none !important; }
.lps-card .only-desktop { display: block !important; }

/* ════════════════════════════════════════════════════════════
 * MOBILE — bottom sheet, preview collapsed by default
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .lps-back {
    align-items: flex-end;
    padding: 0;
  }
  .lps-card {
    max-width: none;
    max-height: 90vh;
    border-radius: 22px 22px 0 0;
    border: none;
    border-top: 1px solid var(--gold-border);
    animation: lps-rise 0.32s cubic-bezier(0.2, 1.1, 0.4, 1);
  }
  @keyframes lps-rise {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .lps-card .only-mobile  { display: flex !important; }
  .lps-card .only-desktop { display: none !important; }

  .lps-head { padding: 12px 16px 10px; }
  .lps-head h3 { font-size: 16px; }

  /* Preview is collapsed by default on mobile (toggle reveals) */
  .lps-preview {
    padding: 6px 14px;
    background: var(--bg-card);
  }
  .lps-preview .lps-bubble-row { display: none; }
  .lps-preview.open .lps-bubble-row { display: flex; }
  .lps-preview-toggle { display: flex; }

  .lps-bubble { font-size: 14px; }
  .lps-bubble-input { font-size: 15px; min-height: 110px; }

  .lps-search {
    margin: 8px 14px 2px;
    padding: 10px 12px;
  }
  .lps-search input { font-size: 15px; }

  .lps-list { padding: 8px 12px 14px; }

  .lps-row { padding: 12px 14px; border-radius: 14px; }

  .lps-meta strong,
  .lps-name-row strong { font-size: 14px; }
  .lps-meta small { font-size: 11.5px; }
}
.swrow {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
}

.swrow-surface {
  position: relative;
  z-index: 2;
  transition: transform 0.24s cubic-bezier(0.3, 1.2, 0.5, 1);
  will-change: transform;
  touch-action: pan-y;  /* allow vertical scroll to pass through */
}

.swrow.open .swrow-surface {
  transition: transform 0.2s ease;
}

.swrow-actions {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;  /* RTL: actions stick to LEFT edge (trailing) */
  gap: 2px;
  padding: 2px;
}

.swrow-act {
  min-width: 72px;
  flex: 1 0 auto;
  border: none;
  border-radius: 12px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.1px;
  transition: filter 0.15s, transform 0.1s;
}

.swrow-act:active { transform: scale(0.94); filter: brightness(0.92); }

.swrow-act-default { background: var(--text-muted); }
.swrow-act-gold    { background: linear-gradient(135deg, var(--gold, #c9a96e), var(--gold-dim, #8a6d38)); }
.swrow-act-green   { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); }
.swrow-act-red     { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
.swrow-act-blue    { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.swrow-act-gold-border {
  background: var(--bg-card);
  color: var(--gold);
  border: 1.5px solid var(--gold-border);
}
.sab {
  position: fixed;
  left: 0;
  right: 0;
  /* Sits above the MobileTabBar which is ~64px + safe-area */
  bottom: calc(64px + env(safe-area-inset-bottom));
  z-index: 60;
  padding: 10px 12px 6px;
  background:
    linear-gradient(180deg, transparent 0%, var(--bg-page) 42%);
  pointer-events: none;
  transform: translateY(120%);
  transition: transform 0.28s cubic-bezier(0.3, 1.2, 0.5, 1);
}

.sab.sab-visible { transform: translateY(0); }

.sab-inner {
  pointer-events: auto;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    0 8px 24px rgba(30, 26, 20, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

.sab-inner > * {
  min-height: 44px;
}

.sab-inner .btn {
  flex: 1 1 auto;
  justify-content: center;
}

/* Only show on small viewports. Desktop relies on in-page buttons. */
@media (min-width: 901px) {
  .sab { display: none; }
}

/* Secondary-compact variant: used for icon triples on property detail */
.sab-icons .sab-inner { gap: 6px; }
.sab-icons .sab-inner button {
  flex: 1 1 0;
  padding: 10px 6px;
  min-height: 48px;
  border-radius: 12px;
}
/* ────────────────────────── Rooms & Chips ────────────────────────── */
.mpk-chips-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mpk-chips-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.mpk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mpk-chip {
  /* Polish T-1: bumped from 40px → 44px to match Apple HIG min tap. */
  min-width: 48px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.1s ease;
}

.mpk-chip:active { transform: scale(0.94); }

.mpk-chip.sel {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 2px 8px rgba(201, 169, 110, 0.3);
}

/* ────────────────────────── Date quick chips ────────────────────────── */
.mpk-datechips {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.mpk-datechip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  min-height: 34px;
  border-radius: 99px;
  background: var(--gold-glow);
  color: var(--gold);
  border: 1px solid var(--gold-border);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.mpk-datechip:active {
  transform: scale(0.96);
  background: var(--gold);
  color: #fff;
}

/* S18 — highlight the chip whose ISO date matches the current value so the
   agent can see at a glance which option is live. Same filled treatment as
   :active so the chosen chip reads as "pressed". */
.mpk-datechip.sel {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  font-weight: 700;
}

.mpk-datechip svg { opacity: 0.8; }

/* ────────────────────────── Suggest sheet (city / street) ────────────────────────── */
.mpk-back {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 10, 15, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: mpk-fade 0.18s ease;
}

@keyframes mpk-fade { from { opacity: 0; } to { opacity: 1; } }

.mpk-sheet {
  width: 100%;
  max-width: 640px;
  max-height: 82vh;
  background: var(--bg-card);
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
  animation: mpk-rise 0.32s cubic-bezier(0.2, 1.1, 0.4, 1);
}

@keyframes mpk-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

.mpk-handle {
  width: 42px;
  height: 5px;
  background: var(--border);
  border-radius: 99px;
  margin: 8px auto 4px;
}

.mpk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.mpk-head-centered { justify-content: center; }

.mpk-head h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  margin: 0;
}

.mpk-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mpk-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px 0;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 12px;
}

.mpk-search svg { color: var(--text-muted); flex-shrink: 0; }

.mpk-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  direction: rtl;
}

.mpk-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 14px;
  -webkit-overflow-scrolling: touch;
}

.mpk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  min-height: 48px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  text-align: right;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}

.mpk-row:active { transform: scale(0.98); background: var(--gold-glow); }
.mpk-row.sel { background: var(--gold-glow); border-color: var(--gold-border); color: var(--gold); }
.mpk-row.sel svg { color: var(--gold); }

.mpk-row-custom {
  justify-content: flex-start;
  gap: 8px;
  color: var(--gold);
  background: var(--gold-glow);
  border-color: var(--gold-border);
}

.mpk-row-custom strong { font-weight: 700; }

.mpk-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ────────────────────────── Overflow sheet ────────────────────────── */
.mpk-overflow-back { align-items: flex-end; }

.mpk-overflow {
  max-height: auto;
}

.mpk-overflow-list {
  padding: 10px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mpk-overflow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 14px;
  min-height: 54px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-family: var(--font-body);
  color: var(--text-primary);
  text-align: right;
  cursor: pointer;
  transition: all 0.15s;
}

.mpk-overflow-row:active { transform: scale(0.98); background: var(--gold-glow); }
.mpk-overflow-row:disabled { opacity: 0.4; cursor: not-allowed; }

.mpk-overflow-row svg { flex-shrink: 0; color: var(--gold); }

.mpk-overflow-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mpk-overflow-meta strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

.mpk-overflow-meta small {
  font-size: 12px;
  color: var(--text-muted);
}

.mpk-overflow-row-danger svg,
.mpk-overflow-row-danger strong { color: var(--danger); }

.mpk-overflow-row-danger { border-color: rgba(185, 28, 28, 0.18); }

.mpk-cancel {
  margin: 6px 16px calc(14px + env(safe-area-inset-bottom));
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.mpk-cancel:active { background: var(--border); }
/* Sprint 7 / MLS parity — B4. Minimal visual for the reusable favorite
 * toggle. Tone: amber-gold when active; neutral outline when not. No
 * new btn-* classes — this is a bare icon button. */

.fav-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted, #8a8a93);
  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease, background-color 120ms ease;
}

.fav-star:hover {
  background: var(--surface-hover, rgba(0, 0, 0, 0.04));
  color: var(--gold, #d4a017);
}

.fav-star:focus-visible {
  outline: 2px solid var(--focus-ring, #7a6cff);
  outline-offset: 2px;
}

.fav-star.is-active {
  color: var(--gold, #d4a017);
}

.fav-star.is-active:hover {
  color: var(--gold-strong, #b8890f);
}

.fav-star[data-busy] {
  opacity: 0.6;
  cursor: progress;
}

/* Very small star variant for dense table rows. */
.fav-star.fav-star-sm {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.view-toggle {
  display: inline-flex;
  background: var(--bg-secondary, #efe9df);
  border: 1px solid var(--border, rgba(30, 26, 20, 0.08));
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0;
  background: transparent;
  color: var(--text-secondary, #54503e);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.view-toggle-btn:hover {
  color: var(--text-primary, #1e1a14);
}
.view-toggle-btn.is-active {
  background: var(--bg-card, #ffffff);
  color: var(--text-primary, #1e1a14);
  box-shadow: 0 1px 3px rgba(30, 26, 20, 0.08);
}
.view-toggle-btn:focus-visible {
  outline: 2px solid var(--gold, #b48b4c);
  outline-offset: 1px;
}
/* Hidden on narrow viewports — table view is unusable on phones */
@media (max-width: 640px) {
  .view-toggle { display: none; }
}
.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, rgba(30, 26, 20, 0.08));
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(30, 26, 20, 0.04);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--text-primary, #1e1a14);
  direction: rtl;
}
.data-table thead {
  background: var(--bg-secondary, #f7f3ec);
  border-bottom: 1px solid var(--border, rgba(30, 26, 20, 0.08));
}
.data-table th {
  text-align: start;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-secondary, #54503e);
  white-space: nowrap;
  user-select: none;
}
.data-table th.is-sortable {
  cursor: pointer;
}
.data-table th.is-sortable:hover {
  color: var(--text-primary, #1e1a14);
}
.data-table th.is-active {
  color: var(--text-primary, #1e1a14);
}
.data-table .th-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.data-table .th-arrow {
  opacity: 0.7;
}
.data-table tbody tr {
  border-bottom: 1px solid var(--border, rgba(30, 26, 20, 0.06));
  transition: background 0.08s ease;
}
.data-table tbody tr:last-child {
  border-bottom: 0;
}
.data-table tbody tr.is-clickable {
  cursor: pointer;
}
.data-table tbody tr.is-clickable:hover {
  background: var(--bg-secondary, rgba(30, 26, 20, 0.03));
}
.data-table tbody tr:focus-visible {
  outline: 2px solid var(--gold, #b48b4c);
  outline-offset: -2px;
}
.data-table td {
  padding: 12px 14px;
  vertical-align: middle;
}
.data-table .cell-muted {
  color: var(--text-muted, #6b6356);
}
.data-table .cell-right {
  text-align: end;
}
.data-table .cell-num {
  font-variant-numeric: tabular-nums;
}
.data-table .cell-thumb {
  width: 56px;
}
.data-table .cell-thumb img {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.data-table .cell-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-secondary, rgba(30, 26, 20, 0.06));
  color: var(--text-primary);
}
.data-table .cell-pill.is-gold {
  background: rgba(180, 139, 76, 0.14);
  color: #7a5c2c;
}
.data-table .cell-pill.is-green {
  background: rgba(21, 128, 61, 0.12);
  color: #15803d;
}
.data-table .cell-pill.is-blue {
  background: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
}
/* E-3 — extra tones for deals status column. */
.data-table .cell-pill.is-warning {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}
.data-table .cell-pill.is-red {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
.data-table .cell-pill-row {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.data-table .cell-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.data-table .cell-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(30, 26, 20, 0.08);
  border-radius: 3px;
  overflow: hidden;
  min-width: 80px;
}
.data-table .cell-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d3b27a, #8a6932);
}
.data-table .cell-progress-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary, #54503e);
  min-width: 34px;
  text-align: start;
  font-variant-numeric: tabular-nums;
}

.data-table-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted, #6b6356);
  background: var(--bg-card, #ffffff);
  border: 1px dashed var(--border, rgba(30, 26, 20, 0.14));
  border-radius: 14px;
}

/* DT-3 — sticky thead on small viewports so column labels stay visible
   while the agent scrolls long tables on mobile. */
@media (max-width: 900px) {
  .data-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-elevated, #f1ebe0);
  }
}

/* DT-5 — tighter cell padding on phones — desktop's 12px 14px is too
   roomy for a 375px screen and pushes critical columns off-screen. */
@media (max-width: 600px) {
  .data-table th,
  .data-table td {
    padding: 10px 8px;
  }
}
/* Sprint 7 / MLS parity — B3. Saved-search dropdown popover.
 * Anchored below its trigger, slight shadow, fixed max-height so long
 * lists scroll rather than push surrounding content. */

.ss-menu {
  position: relative;
  display: inline-flex;
}

.ss-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ss-chev {
  transition: transform 150ms ease;
}

.ss-chev.open {
  transform: rotate(180deg);
}

.ss-menu-pop {
  /* Originally `position: absolute` inside `.ss-menu`, which meant the
   * popover lived in whatever stacking context its ancestor created —
   * and `.sticky-search` (z-index: 40) consistently won on /properties.
   * `position: fixed` pulls the popover out of the ancestor stacking
   * context entirely so a high z-index beats any page chrome. The
   * trigger's geometry is applied inline from JSX via getBoundingClientRect
   * (see SavedSearchMenu.jsx — position is set via style when open). */
  position: fixed;
  min-width: 280px;
  max-width: 360px;
  max-height: 60vh;
  overflow: auto;
  background: var(--surface, var(--bg-card, #fff));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  padding: 10px;
  /* Well above .sticky-search (40), .bulk-bar (950 only renders in
   * select-mode), and below the modal/dialog layer (1100+). */
  z-index: 1000;
  animation: ss-menu-in 140ms ease;
}

.ss-menu {
  /* No forced stacking context here — with the popover `position: fixed`
   * its z-index is global, so the trigger row doesn't need to lift
   * itself above sibling chrome. Keeping position: relative only so the
   * trigger remains correctly inline-flex alongside other toolbar items. */
  position: relative;
}

@keyframes ss-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ss-menu-save-row {
  display: flex;
  gap: 6px;
  padding-block-end: 8px;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.ss-menu-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  background: var(--surface-muted, #fafafa);
  font-size: 13px;
  color: inherit;
}

.ss-menu-input:focus-visible {
  outline: 2px solid var(--focus-ring, #7a6cff);
  outline-offset: 1px;
}

.ss-menu-list {
  padding-block-start: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ss-menu-hint {
  padding: 12px 10px;
  color: var(--text-muted, #8a8a93);
  font-size: 12px;
  text-align: center;
}

.ss-menu-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  transition: background-color 120ms ease;
}

.ss-menu-row:hover {
  background: var(--surface-hover, rgba(0, 0, 0, 0.04));
}

.ss-menu-load {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  text-align: start;
}

.ss-menu-load:focus-visible {
  outline: 2px solid var(--focus-ring, #7a6cff);
  outline-offset: 1px;
}

.ss-menu-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #8a8a93);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.ss-menu-del:hover {
  background: var(--danger-soft, rgba(211, 47, 47, 0.08));
  color: var(--danger, #d32f2f);
}

.ss-menu-del:focus-visible {
  outline: 2px solid var(--focus-ring, #7a6cff);
  outline-offset: 1px;
}
/* N-11 — Shared advanced filter panel. Structural CSS only; visual
 * polish for the proximity input, grid layout, and actions comes from
 * the `.agent-filters-panel` family already defined on Properties.css.
 * These rules extend that base (N-13 — proximity input now follows
 * the .form-input theme so it isn't unstyled). */

/* N-13 — proximity input now picks up the canonical form-input treatment.
 * The original version shared `background:none` with the parent section
 * so it blended with the dark panel. Using `.form-input` gives it the
 * same border/focus ring as every other field. */
.adv-proximity-input.form-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.adv-proximity-input.form-input::placeholder {
  color: var(--placeholder-color, var(--text-muted));
}

.adv-proximity-input.form-input:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
/* Client-side pager shared by Properties / Customers / Owners. */

.pager {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-block: 16px;
  padding-inline: 8px;
  justify-content: center;
  width: 100%;
}

.pager-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}

.pager-btn:hover:not(:disabled) {
  border-color: var(--gold-border, rgba(180, 139, 76, 0.4));
  background: var(--bg-card-hover);
}

.pager-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.pager-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.pager-num.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #15100a;
}

.pager-nav {
  color: var(--text-secondary);
}

.pager-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--text-muted);
}

/* Infinite-scroll sentinel. Owns 1px of height so the browser accepts
 * it as a real scroll target, but is invisible so the agent sees a
 * seamless grid. 200px rootMargin on the hook means the next batch
 * preloads before the gap opens. */
.infinite-sentinel {
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
  pointer-events: none;
}
/* Filters bar */
.filters-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  flex: 1;
  min-width: 200px;
  transition: border-color 0.2s;
}

.search-box:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.search-box svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-box input {
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
  outline: none;
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.filter-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.filter-tab {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  /* Only transition color/background — not 'all'. Layout-affecting
     transitions (padding/border) were causing tab-click jank. */
  transition: background-color 0.14s ease, color 0.14s ease;
}

.filter-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.filter-tab.active {
  background: var(--gold-glow);
  color: var(--gold);
}

/* Advanced filter toggle — gold fill when filters active so the state
   is visible from across the room, not a tiny 6-px dot. */
.btn-ghost.has-filters {
  color: var(--gold);
  background: var(--gold-glow);
  border-color: var(--gold-border);
  font-weight: 700;
}

/* Legacy tiny-dot kept for back-compat with any caller not yet
   migrated. Most places use the count suffix in the button text now. */
.filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  margin-inline-end: 2px;
}

/* UX review F-7.2 — top-level "clear all" pill next to the filter
   chip when any filter is active. One click resets; removes the
   "hunt for a small X in each panel" workflow. */
.filter-clear-all {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.filter-clear-all:hover {
  background: var(--danger-bg);
}

/* Agent advanced filters panel */
.agent-filters-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

/* Proximity search */
.agent-proximity-section {
  margin-bottom: 16px;
  padding: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.agent-proximity-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-proximity-input svg {
  color: var(--gold);
  flex-shrink: 0;
}

.agent-proximity-input input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}

.agent-proximity-input input::placeholder {
  color: var(--text-muted);
}

.proximity-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  transition: color 0.2s;
}

.proximity-clear:hover {
  color: var(--text-primary);
}

.agent-proximity-radius {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.proximity-match {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

.proximity-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.proximity-slider-wrap .form-label {
  white-space: nowrap;
  min-width: 85px;
  margin: 0;
}

.proximity-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-card);
  outline: none;
}

.proximity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.proximity-no-match {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Distance badge on card */
.property-distance-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 10px;
  padding: 3px 8px;
  background: var(--gold-glow);
  border-radius: 10px;
  width: fit-content;
}

.agent-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.agent-filters-actions {
  display: flex;
  justify-content: flex-end;
}

/* Copied link button state */
.btn-copied {
  border-color: var(--success) !important;
  color: var(--success) !important;
  background: var(--success-bg) !important;
}

/* Properties grid (P1-D9 — auto-fill so wide monitors get 4-5 cols) */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.property-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.property-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-border);
  box-shadow: var(--shadow-lg);
}

/* Co-broker flag — listings handed over by another brokerage get a
   distinct teal outline so the agent can see at a glance which rows
   are not their own mandate. Stronger weight + an inner glow keep
   the row legible against the gold-on-hover state without overriding
   it. */
.property-card.is-co-brokered {
  border-color: #2c8aa6;
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(44, 138, 166, 0.18);
}
.property-card.is-co-brokered:hover {
  border-color: #2c8aa6;
  box-shadow: 0 0 0 1px rgba(44, 138, 166, 0.18), var(--shadow-lg);
}

/* Priority badge — appears next to the address on each card. Tone
   colours map to the four buckets in lib/priorityLabels.js so the
   chip is glanceable: red = critical, amber = high, gold = medium,
   muted = low. */
.pri-badge {
  display: inline-flex; align-items: center;
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  border: 1px solid currentColor;
  letter-spacing: 0.2px;
  vertical-align: middle;
}
.pri-badge.pri-critical { color: #c2410c; background: rgba(194, 65, 12, 0.10); }
.pri-badge.pri-high     { color: #b45309; background: rgba(180, 83, 9, 0.10);  }
.pri-badge.pri-medium   { color: #846020; background: rgba(180, 139, 76, 0.12);}
.pri-badge.pri-low      { color: #6b7280; background: rgba(107, 114, 128, 0.10);}
.pri-badge.pri-co-brokered {
  color: #2c8aa6; background: rgba(44, 138, 166, 0.12);
  border-color: #2c8aa6;
}

.property-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  flex: 1;
}

.property-image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.property-card:hover .property-image img {
  transform: scale(1.05);
}

.property-badges {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}

/* Negative-style badges over the property cover image — solid dark fill
 * with bright text so they read clearly against any photo background.
 * The default `.badge-success/.badge-warning/.badge-gold/.badge-info`
 * pastel-on-tint look from index.css blends into bright photos; the
 * overrides below apply only inside `.property-badges` (cover image).
 * Matching color accents are kept by tinting the text per category. */
.property-badges .badge {
  background: rgba(13, 15, 20, 0.82);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.property-badges .badge-warning { color: #ffd17a; } /* מסחרי */
.property-badges .badge-success { color: #6fe0a3; } /* מגורים */
.property-badges .badge-gold    { color: #f0c97a; } /* מכירה */
.property-badges .badge-info    { color: #7dd3fc; } /* השכרה */

.property-price-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-align: right;
}

.property-card-body {
  padding: 16px;
}

.property-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.property-address svg {
  color: var(--gold);
  flex-shrink: 0;
}

.property-specs {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}

.property-specs span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-secondary);
}

.property-specs svg {
  color: var(--text-muted);
}

.property-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.property-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.owner-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

.marketing-mini-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.marketing-mini-progress .progress-bar {
  width: 60px;
}

.marketing-mini-progress span {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
}

/* WhatsApp quick-send button on each card */
.property-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  border: none;
  border-top: 1px solid var(--border);
  background: rgba(37, 211, 102, 0.06);
  color: #25d366;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.property-wa-btn:hover {
  background: rgba(37, 211, 102, 0.14);
  color: #22c55e;
}

.property-wa-btn:active {
  background: rgba(37, 211, 102, 0.22);
}

/* Overflow-menu button on desktop card (replaces legacy trash button).
 * N-3 — joined by duplicate + quick-edit icons grouped in
 * .property-quick-actions. All three sit at the card's logical-end
 * corner (visual top-LEFT in RTL). Hover/focus reveals them; they stay
 * visible on mobile (below). */
.property-overflow-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  opacity: 0;
  z-index: 3;
}

.property-card { position: relative; }

.property-card:hover .property-overflow-btn {
  opacity: 1;
}

.property-overflow-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-primary);
}

/* N-3 — direct duplicate + quick-edit icons. Grouped to the right of the
 * ⋯ menu (visual left). Same visual family as .property-overflow-btn for
 * a cohesive corner cluster. Revealed on hover; always visible on mobile. */
.property-quick-actions {
  position: absolute;
  top: 10px;
  left: 48px;
  display: inline-flex;
  gap: 6px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.property-card:hover .property-quick-actions {
  opacity: 1;
}

.property-quick-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s;
}

.property-quick-btn:hover:not(:disabled) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-primary);
}

.property-quick-btn:active:not(:disabled) { transform: scale(0.94); }

.property-quick-btn:disabled { opacity: 0.5; cursor: default; }

/* Share chip pinned to the bottom-LEFT of the PHOTO (inside
 * `.property-image`, which is position: relative). Anchoring to the
 * image wrapper keeps the chip hovering over the photo regardless of
 * card body height. Always visible on touch (where hover doesn't
 * exist); still fades in on pointer devices so the photo stays clean
 * at rest. */
.property-share-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 3;
  opacity: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.12s;
}
@media (hover: hover) {
  /* Touchless pointer: keep the photo clean and fade the chip in on
   * hover. Touch devices (hover: none) show it permanently so agents
   * never have to tap-and-hold just to reveal share. */
  .property-share-btn { opacity: 0.85; }
  .property-card:hover .property-share-btn { opacity: 1; }
}

.property-share-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-primary);
}

.property-share-btn:active { transform: scale(0.94); }

/* N-14 — inline "הוסף הערות" pill below the card body. Low-chrome so
 * it doesn't compete with the primary actions but stays tappable. */
.property-add-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  padding: 8px 12px;
  border: none;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.property-add-note-btn:hover {
  background: var(--gold-glow);
  color: var(--gold);
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .properties-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .filters-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .properties-sticky-search { width: 100%; }

  .property-card-link .property-image {
    aspect-ratio: 16 / 9;
  }

  .property-overflow-btn,
  .property-quick-actions,
  .property-share-btn {
    opacity: 1; /* always visible on mobile for the richer desktop card */
  }

  .pc-compact-price {
    font-size: 16px;
  }

  /* Expand advanced-filter panel to full width on phone */
  .agent-filters-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ───────────────────── Compact property card (≤820px) ───────────────────── */
.property-card-compact {
  border-radius: 14px;
  overflow: hidden;
  /* Mobile — make the whole card the tap target. Cards no longer
     require tapping the thumbnail/title region specifically; any
     empty gutter inside the card routes to the detail page via the
     stretched `.pc-compact-link::after`. */
  position: relative;
}

.property-card-compact:hover {
  transform: none;
}

.pc-compact-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 10px 12px 10px 14px;
  background: var(--bg-card);
}

.pc-compact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Stretched hit-area: the anchor's ::after pseudo covers the full
   card so any tap in the card (not on the favorite-star or swipe
   affordances, which use higher z-index) navigates to the detail
   page. */
.pc-compact-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pc-compact-inner > :not(.pc-compact-link) {
  position: relative;
  z-index: 2;
}

.pc-compact-thumb {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  background: var(--bg-elevated);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.pc-compact-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-compact-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pc-compact-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-compact-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
}

.pc-compact-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 11px;
  color: var(--text-secondary);
}

.pc-compact-specs span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pc-compact-specs svg {
  color: var(--text-muted);
}

.pc-distance {
  color: var(--gold) !important;
}

.pc-distance svg { color: var(--gold) !important; }

/* Legacy round WA button (kept for backwards compat — now superseded by .pc-rail) */
.pc-wa-round {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s, filter 0.15s;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}

.pc-wa-round:active {
  transform: scale(0.94);
  filter: brightness(0.95);
}

/* Quick-action rail — labeled tappable pills.
 * Each button is a 56-px-tall rounded rectangle: icon + small Hebrew label.
 * Color-coded so the agent can hit the right action without reading.
 */
.pc-rail {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: stretch;
  flex-shrink: 0;
}

.pc-rail-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 54px;
  min-height: 56px;
  padding: 7px 8px 6px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.05px;
  line-height: 1;
  transition: transform 0.14s, filter 0.18s, background 0.18s, box-shadow 0.18s;
  -webkit-tap-highlight-color: transparent;
}

.pc-rail-btn svg { width: 22px; height: 22px; }

.pc-rail-btn:active {
  transform: scale(0.93);
  filter: brightness(0.94);
}

.pc-rail-call {
  background: var(--gold-glow);
  color: var(--gold);
  border-color: var(--gold-border);
}

.pc-rail-wa {
  background: linear-gradient(150deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  border-color: #128c7e;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.32);
  font-weight: 800;
}

.pc-rail-wa:active {
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.38);
}

.pc-rail-nav {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.25);
}

[data-theme="dark"] .pc-rail-nav {
  background: rgba(37, 99, 235, 0.15);
  color: #6c98ff;
  border-color: rgba(108, 152, 255, 0.35);
}

/* Even icon-only, three rail buttons + the overflow `...` + share
   button + thumb + favorite-star left no breathing room for the meta
   column on iPhone widths — title was rendering as "ג…" and price as
   "…00". Hide the rail entirely on phone: the whole card already
   navigates to /properties/:id on tap (via the `.pc-compact-link`
   stretched ::after), and SwipeRow exposes call / WhatsApp via
   left-swipe — so the rail's actions are reachable, just not
   eye-fixedly cluttered into a 410px row. The full text-bearing
   rail comes back at ≥ 721px (iPad portrait+), where it has room. */
@media (max-width: 720px) {
  .pc-rail { display: none; }
}

/* Belt-and-braces: ellipsis the price on narrow phones so a long
   shekel string can never push the layout wider than the card. */
@media (max-width: 720px) {
  .pc-compact-price {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* Matched-leads pill (P3-M8) */
.pc-match-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-glow);
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  cursor: pointer;
  width: fit-content;
}

.pc-match-pill:active {
  background: var(--gold);
  color: var(--bg-primary);
}

.property-match-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  color: var(--bg-primary);
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(201, 169, 110, 0.35);
}

.property-match-pill:hover {
  filter: brightness(1.05);
}

/* P1-M12 / P1-M16 — sticky-search container layout */
.properties-sticky-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.properties-sticky-search .search-box {
  flex: 1;
  min-width: 0;
}

.properties-page-overflow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.properties-page-overflow:active {
  background: var(--bg-elevated);
}

/* P1-M16 — mobile FAB for "קליטת נכס" */
.properties-mobile-fab {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(201, 169, 110, 0.45);
  transition: transform 0.15s;
}

.properties-mobile-fab:active {
  transform: scale(0.94);
}

@media (min-width: 821px) {
  .properties-mobile-fab { display: none; }
  .properties-page-overflow { display: none; }
}

/* Overflow (⋯) + "חפש דומים" — pinned to the logical START edge of the
 * card (visual right in RTL) so they can't collide with the quick-action
 * rail, which always lives at the logical END. Using logical properties
 * (`inset-inline-start`) keeps the layout correct in both directions. */
.pc-overflow-btn {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s, transform 0.1s;
}

[data-theme="dark"] .pc-overflow-btn {
  background: rgba(30, 26, 20, 0.72);
  color: var(--text-primary);
}

.pc-overflow-btn:active {
  background: var(--bg-elevated);
  transform: scale(0.94);
}

.pc-similar-btn {
  position: absolute;
  top: 10px;
  /* leave 8px of breathing room between the pill and the ⋯ button */
  inset-inline-start: 50px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  min-height: 28px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  z-index: 3;
  white-space: nowrap;
}

[data-theme="dark"] .pc-similar-btn {
  background: rgba(30, 26, 20, 0.72);
}

/* Hide the 'חפש דומים' pill on mobile — it was sitting on top of the
   round thumb photo and clipping the card title. The same action is
   exposed via the ⋯ overflow sheet ('חיפוש נכסים דומים') on all
   viewports, so nothing is lost on mobile. */
@media (max-width: 820px) {
  .pc-similar-btn-desktop { display: none; }
}

.pc-similar-btn:active {
  background: var(--gold-glow);
  color: var(--gold);
}

@media (max-width: 820px) {
  .properties-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Tappable spec chip on property card */
.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.spec-chip:hover {
  background: var(--gold-glow);
  color: var(--gold);
  border-color: var(--gold-border);
}

@media (max-width: 640px) {
  .properties-grid {
    grid-template-columns: 1fr;
  }

  .filters-bar {
    flex-direction: column;
  }

  .search-box {
    width: 100%;
  }

  .agent-filters-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ──────────────────────────────────────────────────────────────
 * Bulk-select mode
 * ──────────────────────────────────────────────────────────────
 * When the agent enters selection mode, the page softens — non-
 * selected cards desaturate slightly, selected cards get a gold
 * gradient sweep + a check badge. A floating action bar appears
 * at the bottom thumb zone with the count + Delete + Cancel.
 *
 * Long-press on a card also enters selection mode (iOS pattern).
 */

/* Cards in selection mode — kill hover ambitions, dampen children */
.property-card.is-selectable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.property-card.is-selectable .property-card-link,
.property-card.is-selectable .pc-compact-link {
  /* prevent the inner Link from feeling "live" while in select mode */
  cursor: pointer;
}

.property-card.is-selectable:not(.is-selected) {
  filter: saturate(0.85);
  opacity: 0.92;
}

/* The selection sweep — left-to-right (RTL: visually right-to-left)
   gold gradient overlay that fades in. Uses ::before so the card's
   own background art (image, badges) keeps painting underneath. */
.property-card.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-glow), 0 12px 28px rgba(180, 139, 76, 0.18);
  transform: translateY(-1px);
  transition: border-color 0.18s ease, box-shadow 0.22s ease, transform 0.18s ease;
}

.property-card.is-selected::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--gold) 18%, transparent) 0%,
    transparent 55%
  );
  pointer-events: none;
  z-index: 1;
  animation: pc-sweep 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pc-sweep {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Property cards are position:relative-by-default for badges; if any
   card variant isn't, scope this. */
.property-card { position: relative; }

/* Pick badge inside compact mobile row — sits at the leading edge */
.pc-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
  color: var(--gold);
  z-index: 2;
}

/* Pick badge for desktop card — overlays the top-leading corner of
   the photo so it doesn't fight the existing badges. */
.pc-pick-desktop {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  color: var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Pin-to-top button — sits on the trailing edge of the photo so
   it's always visible regardless of select-mode. Filled gold star
   when pinned; outlined when unpinned. */
.pc-pin-btn {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  color: rgba(30, 26, 20, 0.4);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.pc-pin-btn:hover {
  color: var(--gold);
  transform: scale(1.06);
}
.pc-pin-btn.is-pinned {
  background: linear-gradient(135deg, var(--gold-light, #d9b774), var(--gold));
  color: #fff;
  box-shadow: 0 4px 14px rgba(180, 139, 76, 0.45);
}

/* ── Floating bulk action bar ──────────────────────────────────
 * N-8 — centered at bottom via left: 50% + translateX(-50%) per
 * product spec. Z-index ABOVE the FAB (900) and ChatWidget (890)
 * so the bulk action bar wins the destructive-action affordance when
 * selection mode is active.
 *
 * Sits above the mobile tab-bar (~64px) + safe-area on notched
 * devices. Desktop has no bottom tab bar so 18px is fine. */
.bulk-bar {
  position: fixed;
  /* Anchor to viewport bottom-center regardless of scroll position.
     Was animating `transform: translateY(...)` which overwrote the
     `translateX(-50%)` that keeps the bar centered — the element
     landed off-center (right of viewport on RTL) the moment the
     keyframes finished. Use inset-inline centering without transform
     so the animation can keep its own transform without fighting
     the positioning. */
  inset-inline-start: 50%;
  margin-inline-start: calc(-1 * min(50vw - 8px, 280px));
  bottom: calc(64px + env(safe-area-inset-bottom) + 12px);
  z-index: 950;
  display: flex;
  justify-content: center;
  width: calc(100vw - 16px);
  max-width: 560px;
  /* Parent is transparent + a pass-through container so clicks only
     land on the actual action buttons inside. Children explicitly
     re-enable pointer events. */
  pointer-events: none;
  animation: bulk-rise 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.bulk-bar > * {
  pointer-events: auto;
}

@media (min-width: 821px) {
  .bulk-bar { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

@keyframes bulk-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bulk-bar-inner {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 18px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  box-shadow:
    0 18px 44px rgba(30, 26, 20, 0.22),
    0 0 0 4px color-mix(in srgb, var(--gold-glow) 60%, transparent);
  font-family: var(--font-body);
  max-width: calc(100vw - 24px);
}

.bulk-bar-count {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.bulk-bar-count strong {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  margin-inline-end: 2px;
}

.bulk-bar-actions {
  display: inline-flex;
  gap: 6px;
}

.bulk-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease;
  min-height: 40px;
}

.bulk-bar-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.bulk-bar-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.bulk-bar-danger {
  background: var(--danger, #c0392b);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--danger, #c0392b) 35%, transparent);
}

.bulk-bar-danger:hover:not(:disabled) {
  filter: brightness(1.05);
}

.bulk-bar-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.bulk-bar-ghost:hover:not(:disabled) {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* The "בחר" toolbar button gets a quiet active state when on. */
.btn-ghost.is-active {
  background: var(--gold-glow);
  color: var(--gold);
  border-color: var(--gold-border);
}

@media (prefers-reduced-motion: reduce) {
  .bulk-bar,
  .property-card.is-selected,
  .property-card.is-selected::before {
    animation: none !important;
  }
}

/* N-1 — favorite star pinned to the RTL LEADING edge (visual right).
 * Previously anchored via `inset-inline-end` which placed it at the
 * trailing/left edge under the ⋯ menu; product wants it on the leading
 * edge so it's the first thing the eye lands on when skimming the grid.
 * z-index above the image + badges, below modals. Circular chip keeps the
 * ⋯-menu/chip visual family. */
.property-fav-star {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  z-index: 3;
}

[data-theme="dark"] .property-fav-star {
  background: rgba(30, 26, 20, 0.75);
}

/* Inline variant — used when the star sits inside
 * `.property-quick-actions` alongside edit + duplicate icons, so the
 * three controls read as one group at the card corner. Drop the
 * absolute positioning (parent flex row handles layout) and match the
 * neighboring quick-btn sizing. */
.property-fav-star-inline {
  position: static;
  top: auto;
  inset-inline-start: auto;
  width: 28px;
  height: 28px;
}

.property-fav-star-compact {
  top: 6px;
  inset-inline-start: 6px;
  width: 30px;
  height: 30px;
}

/* Prospect intake dialog (1.5) — sits on the property detail screen,
   collects name/phone/email + signature or shares a signing link. */

.pdg-backdrop {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: rgba(16, 13, 8, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: pdg-fade 0.18s ease-out;
}
@keyframes pdg-fade { from { opacity: 0; } to { opacity: 1; } }

.pdg-panel {
  width: 520px;
  max-width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(30, 26, 20, 0.34);
  overflow: hidden;
  transform: translateY(6px);
  animation: pdg-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes pdg-in { to { transform: translateY(0); } }

.pdg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-light);
}
.pdg-head-text strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--text-primary);
}
.pdg-head-text span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}
.pdg-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
}

.pdg-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 12px 20px 0;
  background: var(--bg-card);
}
.pdg-mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pdg-mode-pill.sel {
  background: var(--gold-glow);
  border-color: var(--gold-border);
  color: var(--gold);
}

.pdg-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdg-field { display: flex; flex-direction: column; gap: 6px; }
.pdg-field > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.1px;
}
.pdg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.pdg-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.pdg-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }

.pdg-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  resize: vertical;
  min-height: 60px;
}

/* Signature canvas */
.pdg-sign-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pdg-sign-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}
.pdg-canvas-wrap {
  position: relative;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-canvas, #fdfbf5);
  height: 160px;
  overflow: hidden;
  touch-action: none;
}
[data-theme="dark"] .pdg-canvas-wrap { background: #1a1814; }
.pdg-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
.pdg-canvas-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.4;
}

/* Digital-link panel */
.pdg-digital-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--gold-glow);
  color: var(--gold);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.pdg-digital {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 4px 0;
}
.pdg-digital-qr img {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
}
.pdg-digital-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdg-digital-body strong {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-primary);
}
.pdg-digital-body > span {
  font-size: 12px;
  color: var(--text-muted);
}
.pdg-link {
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  font-size: 11.5px;
  word-break: break-all;
  direction: ltr;
  color: var(--text-primary);
}
.pdg-digital-actions { display: inline-flex; gap: 8px; margin-top: 4px; }

@media (max-width: 640px) {
  .pdg-digital { grid-template-columns: 1fr; }
  .pdg-digital-qr img { width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
}

.pdg-err {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 12px;
}

.pdg-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-light);
  background: var(--bg-card);
}

/* Success state */
.pdg-done {
  padding: 28px 30px 24px;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.pdg-done-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--gold-glow);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
}
.pdg-done h3 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 20px;
  color: var(--text-primary);
}
.pdg-done p {
  color: var(--text-muted);
  margin: 0 0 10px;
  font-size: 13px;
}

/* P-2 — success-state CTA row: primary "close" + secondary "print signed
   agreement". Wraps on narrow widths so mobile keeps both actions tappable. */
.pdg-done-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ppm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 26, 20, 0.58);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2200;
  padding: 24px;
  animation: ppm-fade 0.2s ease-out;
}

@keyframes ppm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ppm-modal {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 860px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: ppm-pop 0.25s cubic-bezier(0.2, 1, 0.3, 1);
}

@keyframes ppm-pop {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.ppm-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse at top right, rgba(180, 139, 76, 0.12), transparent 55%),
    var(--bg-elevated);
}

.ppm-header h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.ppm-header p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.ppm-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ppm-error {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 13px;
}

/* Dropzone */
.ppm-dropzone {
  position: relative;
  padding: 2px; /* room for the animated border glow */
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.2s;
  display: block;
}

/* P-5 — the file input is visually hidden but still a clickable target
   for the wrapping <label>. `display:none` broke label→input activation
   on some Safari builds; sr-only-style offscreen positioning fixes it. */
.ppm-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ppm-dropzone:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.ppm-dropzone::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(
      45deg,
      var(--gold-border) 0 8px,
      transparent 8px 16px
    );
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.25s;
}

.ppm-dropzone.is-over::before,
.ppm-dropzone:hover::before {
  opacity: 0.75;
}

.ppm-dropzone-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 36px 20px;
  border-radius: calc(var(--radius-md) - 2px);
  background: var(--bg-card);
  text-align: center;
}

.ppm-dropzone-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-glow);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.ppm-dropzone strong {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 700;
}

.ppm-dropzone span {
  font-size: 12px;
  color: var(--text-muted);
}

.ppm-dropzone.is-over .ppm-dropzone-inner {
  background: var(--gold-glow);
}

.ppm-dropzone.is-over strong {
  color: var(--gold);
}

.ppm-spin {
  animation: ppm-spin 0.9s linear infinite;
}

@keyframes ppm-spin { to { transform: rotate(360deg); } }

/* Empty state */
.ppm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}

.ppm-empty svg { color: var(--gold); opacity: 0.7; }

.ppm-empty p {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-secondary);
  margin: 4px 0 0;
}

.ppm-empty span { font-size: 12px; }

/* Thumbnail grid */
.ppm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ppm-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: grab;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.ppm-thumb:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.ppm-thumb.is-cover {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-glow), var(--shadow-md);
}

.ppm-thumb.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.ppm-thumb.is-over {
  border-color: var(--gold);
  transform: scale(1.02);
}

.ppm-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.ppm-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 0.55) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

/* P-4 — delete chip moved out of the overlay's flex-column flow and
   pinned to the trailing-top corner (visually right in RTL, right in
   LTR). The number badge already sits bottom-left absolute; the delete
   was stacking near it via `align-self: flex-end` inside a column flex
   and read like it was "under the number". Pinning to the top-end
   corner separates the two concerns cleanly. */
.ppm-thumb-overlay .ppm-action-chip.danger {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  margin: 0;
  align-self: auto;
}

.ppm-thumb:hover .ppm-thumb-overlay,
.ppm-thumb.is-cover .ppm-thumb-overlay {
  opacity: 1;
}

.ppm-cover-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--bg-primary);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(180, 139, 76, 0.35);
}

.ppm-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #1e1a14;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  backdrop-filter: blur(4px);
}

.ppm-action-chip:hover {
  transform: translateY(-1px);
}

.ppm-action-chip.danger {
  background: rgba(185, 28, 28, 0.92);
  color: #fff;
  margin-inline-start: auto; /* push to the right in RTL */
  align-self: flex-end;
}

.ppm-action-chip.danger:hover {
  background: var(--danger);
}

.ppm-thumb-number {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Footer */
.ppm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}

.ppm-footer-hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* Task 4 · optimistic pending thumbs appear above the committed grid.
   Same layout as the main grid but with a tint + spinner overlay so
   the user can tell which ones are still in flight. */
.ppm-grid-pending {
  margin-bottom: 12px;
}

.ppm-thumb-pending {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px dashed var(--gold-border);
  opacity: 0.85;
}

.ppm-thumb-pending img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.8);
}

.ppm-thumb-pending-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(0deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
}

@media (max-width: 600px) {
  .ppm-backdrop { padding: 0; }
  .ppm-modal { max-height: 100dvh; border-radius: 0; }
  .ppm-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
}
.pvm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 26, 20, 0.58);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2400;
}

.pvm-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.pvm-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.pvm-header h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}

.pvm-header p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.pvm-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pvm-error {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 13px;
}

.pvm-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pvm-section h4 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin: 0;
}

/* Dropzone */
.pvm-dropzone {
  border: 2px dashed var(--border-light);
  border-radius: 16px;
  background: var(--bg-elevated);
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  text-align: center;
}

.pvm-dropzone:hover,
.pvm-dropzone.is-over {
  border-color: var(--gold-border);
  background: var(--gold-glow);
}

.pvm-dz-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-glow);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pvm-dropzone strong {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-primary);
}

.pvm-dropzone span {
  font-size: 12px;
  color: var(--text-muted);
}

.pvm-progress {
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: var(--border-light);
  overflow: hidden;
  margin-top: 10px;
}

.pvm-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width 0.2s ease;
}

/* External URL form */
.pvm-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg-elevated);
  border-radius: 14px;
  border: 1px solid var(--border);
}

.pvm-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pvm-form label span {
  font-size: 12px;
  color: var(--text-muted);
}

.pvm-form input[type='text'],
.pvm-form input[type='url'] {
  padding: 11px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
}

.pvm-input-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.pvm-input-icon svg {
  position: absolute;
  right: 12px;
  color: var(--text-muted);
}

.pvm-input-icon input {
  padding-right: 34px !important;
  direction: ltr;
  text-align: left;
}

.pvm-form .btn {
  align-self: flex-end;
  min-height: 44px;
}

/* Existing videos list */
.pvm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pvm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.pvm-preview {
  position: relative;
  width: 88px;
  height: 54px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}

.pvm-preview video,
.pvm-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pvm-ext-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #222, #444);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
}

.pvm-ext-thumb.vimeo {
  background: linear-gradient(135deg, #1ab7ea, #0060a0);
}

.pvm-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
}

.pvm-info {
  flex: 1;
  min-width: 0;
}

.pvm-info strong {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvm-info small {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvm-del {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pvm-del:hover {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger);
}

@media (max-width: 640px) {
  .pvm-backdrop { padding: 0; align-items: flex-end; }
  .pvm-modal { border-radius: 22px 22px 0 0; max-height: 94vh; padding-bottom: env(safe-area-inset-bottom); }
  .pvm-body { padding: 14px 16px 20px; }
  .pvm-form .btn { width: 100%; }
}
/* OwnerPicker — desktop popover + mobile bottom sheet */
.owner-picker-back {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: opb-fade 0.18s ease-out;
}

@keyframes opb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.owner-picker-sheet {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.owner-picker-sheet.desktop {
  width: min(520px, calc(100vw - 32px));
  max-height: min(640px, calc(100dvh - 64px));
  border-radius: var(--radius-md);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--gold-glow);
  animation: opb-pop 0.22s ease-out;
}

@keyframes opb-pop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.owner-picker-sheet.mobile {
  width: 100%;
  max-width: 100%;
  margin-top: auto;
  border-radius: 18px 18px 0 0;
  /* Task 1 · account for the iOS keyboard (surfaced as --kb-h by
     main.jsx's visualViewport listener) so the search results aren't
     pushed below the keyboard while the agent is typing. Also respect
     the bottom safe-area inset on notched devices. */
  max-height: calc(80vh - var(--kb-h, 0px));
  padding-bottom: env(safe-area-inset-bottom);
  animation: opb-up 0.22s ease-out;
}

@keyframes opb-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.owner-picker-back > .owner-picker-sheet.mobile {
  margin: auto auto 0 auto;
}

.owner-picker-handle {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 8px auto 4px;
}

.owner-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.owner-picker-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-primary);
}

/* O-3 — the close button previously rode only on `.btn-ghost`, whose
   `padding` + inherited colors produced an off-center glyph in RTL and
   a missing visible border on some themes. Pin width/height, explicit
   background + color, and a focus ring so the X renders consistently. */
.owner-picker-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.owner-picker-close:hover {
  background: var(--bg-elevated, rgba(0, 0, 0, 0.06));
  color: var(--text-primary);
  border-color: var(--border);
}

.owner-picker-close:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.owner-picker-close svg {
  display: block;
}

.owner-picker-new {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 14px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--gold-border);
  background: var(--gold-glow);
  color: var(--text-primary);
  cursor: pointer;
  text-align: right;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.owner-picker-new:hover {
  background: rgba(180, 139, 76, 0.22);
  box-shadow: 0 0 0 1px var(--gold-border);
  transform: translateY(-1px);
}

.owner-picker-new-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: white;
  flex-shrink: 0;
}

.owner-picker-new-text {
  display: flex;
  flex-direction: column;
}

.owner-picker-new-text strong {
  font-size: 14px;
}

.owner-picker-new-text small {
  color: var(--text-muted);
  font-size: 12px;
}

.owner-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 14px 0;
  padding: 10px 12px;
  background: var(--bg-elevated, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 10px;
}

.owner-picker-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.owner-picker-search svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.owner-picker-search input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  min-width: 0;
}

.owner-picker-clear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
}

.owner-picker-clear:hover {
  color: var(--text-primary);
}

.owner-picker-results {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.owner-picker-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-muted);
  font-size: 13px;
}

.owner-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--bg-elevated, var(--bg-card));
  cursor: pointer;
  text-align: right;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.owner-picker-row:hover {
  border-color: var(--gold-border);
  background: var(--gold-glow);
}

.owner-picker-row:active { transform: scale(0.99); }

.owner-picker-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: white;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.owner-picker-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.owner-picker-meta strong {
  font-size: 14px;
  color: var(--text-primary);
}

.owner-picker-meta-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.owner-picker-phone, .owner-picker-email {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.owner-picker-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold-glow);
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.owner-picker-pill strong {
  font-weight: 700;
}

/* F-22 — inline "create with this name" shortcut from the empty state. */
.owner-picker-create-with-q {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--gold-glow);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  font-weight: 600;
  cursor: pointer;
}
.owner-picker-create-with-q:hover { background: color-mix(in srgb, var(--gold) 22%, var(--bg-card)); }
.owner-picker-create-with-q strong { color: var(--text-primary); margin-inline-start: 2px; }
.market-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, rgba(30, 26, 20, 0.08));
  border-radius: 14px;
  padding: 20px 22px;
  margin-block: 24px;
  direction: rtl;
}
.market-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.market-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.market-card-title h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary, #1e1a14);
}
.market-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.market-tabs {
  display: inline-flex;
  background: var(--bg-secondary, #f7f3ec);
  border: 1px solid var(--border, rgba(30, 26, 20, 0.08));
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.market-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--text-secondary, #54503e);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
}
.market-tab.is-active {
  background: var(--bg-card, #ffffff);
  color: var(--text-primary, #1e1a14);
  box-shadow: 0 1px 3px rgba(30, 26, 20, 0.08);
}
.market-tab:focus-visible {
  outline: 2px solid var(--gold, #b48b4c);
  outline-offset: 1px;
}

.market-source {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--text-muted, #6b6356);
  line-height: 1.6;
}
.market-source a {
  color: var(--gold-readable, #7a5c2c);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.market-source a:hover { text-decoration: underline; }

.market-error {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
  border-radius: 10px;
  font-size: 13px;
}

.market-running {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: rgba(180, 139, 76, 0.10);
  color: #8a6932;
  border: 1px solid rgba(180, 139, 76, 0.25);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.market-running .spin {
  animation: market-spin 1s linear infinite;
  flex-shrink: 0;
}
@keyframes market-spin {
  to { transform: rotate(360deg); }
}

.market-empty {
  padding: 20px 14px;
  background: var(--bg-secondary, #f7f3ec);
  border: 1px dashed var(--border-light, rgba(30, 26, 20, 0.14));
  border-radius: 10px;
  color: var(--text-muted, #6b6356);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
.market-empty-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.85;
}

.market-kpis {
  display: grid;
  gap: 8px;
  /* Responsive auto-fit so 4 KPIs collapse to 2 columns on narrow
     panels without the values wrapping into 4-line stacks (was: fixed
     2-up < 700 / 4-up ≥ 700, which split "טווח אפר׳ 1998 – פבר׳ 2026"
     across 4 lines on the 600 px property tab). */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 14px;
}
.market-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--bg-secondary, #f7f3ec);
  border: 1px solid var(--border, rgba(30, 26, 20, 0.08));
  border-radius: 10px;
  min-width: 0;
}
.market-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #6b6356);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.market-kpi-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary, #1e1a14);
  font-variant-numeric: tabular-nums;
  /* Don't break long range strings ("אפר׳ 1998 – פבר׳ 2026") into
     vertical stacks — let them shrink + ellipsis within the cell. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-spark {
  margin: 6px 0 18px;
}
.market-spark-svg {
  width: 100%;
  height: 90px;
  display: block;
}
.market-spark-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted, #6b6356);
  margin-top: 4px;
}

.market-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, rgba(30, 26, 20, 0.08));
  border-radius: 10px;
}
.market-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  direction: rtl;
}
.market-table thead {
  background: var(--bg-secondary, #f7f3ec);
}
.market-table th {
  text-align: start;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-secondary, #54503e);
  border-bottom: 1px solid var(--border, rgba(30, 26, 20, 0.08));
}
.market-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, rgba(30, 26, 20, 0.06));
}
.market-table tbody tr:last-child td { border-bottom: 0; }
.market-table .cell-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.spin {
  animation: market-spin 1s linear infinite;
}
@keyframes market-spin {
  to { transform: rotate(-360deg); }
}

/* Rooms filter — horizontal scroller (was wrap → 4 lines on narrow). */
.market-filter {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  overflow-x: auto;
  /* Hide scrollbar visually (still scrollable via swipe / wheel). */
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.market-filter::-webkit-scrollbar { height: 4px; }
.market-filter::-webkit-scrollbar-thumb {
  background: rgba(30, 26, 20, 0.2);
  border-radius: 2px;
}
.market-filter > * { flex-shrink: 0; }
.market-filter-label {
  font-size: 12.5px;
  color: var(--text-secondary, #54503e);
  margin-inline-end: 4px;
}
.market-chip {
  background: var(--bg-secondary, #f7f3ec);
  border: 1px solid var(--border, rgba(30, 26, 20, 0.1));
  color: var(--text-secondary, #54503e);
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.market-chip:hover { border-color: #b48b4c; }
.market-chip.is-active {
  background: #b48b4c;
  border-color: #b48b4c;
  color: #fff;
}

/* Sparkline — hover tooltip. */
.market-spark-wrap { position: relative; }
.market-spark-svg { cursor: crosshair; }
.market-spark-tip {
  position: absolute;
  top: -4px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(30, 26, 20, 0.1));
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.market-spark-tip strong { color: var(--text, #1e1a14); font-size: 12.5px; }
.market-spark-tip-count { color: var(--text-muted, #888); font-size: 11.5px; }

/* Show-more button under the table. */
.market-more {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  border-top: 1px solid var(--border, rgba(30, 26, 20, 0.06));
}
/* PropertyPanelSheet — slide-in right panel (desktop) / bottom sheet (mobile) */

.pps-backdrop {
  position: fixed;
  inset: 0;
  /* Must be above the sidebar (.sidebar → z-index 100) or the panel docks
     under it and reads as "obscured by the right sidebar". */
  z-index: 1100;
  background: rgba(8, 11, 19, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: pps-fade-in 0.18s ease-out;
}

@keyframes pps-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pps-panel {
  position: relative;
  width: 520px;
  max-width: calc(100vw - 64px);
  max-height: calc(100dvh - 64px);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(8, 11, 19, 0.35);
  animation: pps-rise 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

@keyframes pps-rise {
  from { transform: translateY(14px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.pps-sm { width: 420px; }
.pps-md { width: 520px; }
.pps-lg { width: 680px; }

.pps-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}

.pps-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pps-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.pps-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.pps-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.pps-close:hover {
  background: var(--gold-glow);
  color: var(--gold);
}

.pps-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 28px;
  -webkit-overflow-scrolling: touch;
}

/* Mobile: bottom sheet that occupies up to 92% viewport height */
@media (max-width: 820px) {
  .pps-backdrop {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .pps-panel,
  .pps-sm,
  .pps-md,
  .pps-lg {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 92vh;
    border: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 40px rgba(8, 11, 19, 0.25);
    animation: pps-slide-up 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  @keyframes pps-slide-up {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .pps-header {
    padding: 14px 18px 12px;
  }
  .pps-body {
    padding: 14px 18px 24px;
  }
}
/* AdvertsPanel — per-channel marketing adverts for a property. */

.adp-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.adp-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.adp-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-subtle, #f7f7f8);
  border: 1px solid var(--border-subtle, #e2e2e6);
}

.adp-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.adp-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.adp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adp-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-default, #fff);
  border: 1px solid var(--border-subtle, #e2e2e6);
}

.adp-item-published {
  border-color: #b7e4a7;
  background: #f7fdf4;
}

.adp-item-paused,
.adp-item-expired {
  background: #fff9ef;
  border-color: #f0dda0;
}

.adp-item-removed {
  opacity: 0.55;
}

.adp-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.adp-item-channel {
  font-weight: 600;
  font-size: 14px;
}

.adp-item-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-muted, #555);
}

.adp-item-remove {
  margin-inline-start: auto;
}

.adp-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted, #555);
}

.adp-item-title {
  color: var(--text-default, #222);
  font-weight: 500;
}

.adp-hint {
  color: var(--text-muted, #757575);
  font-size: 13px;
  margin: 4px 0;
}
/* RemindersPanel — scoped styles. Matches the card look of CustomerDetail
   sections so it can embed as a sub-section without extra chrome. */

.reminders-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  padding: 16px;
}

.reminders-panel.is-compact { padding: 12px; }

.rp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.rp-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  margin: 0;
}

.rp-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  border-radius: 10px;
  background: var(--gold-soft, rgba(212, 175, 55, 0.15));
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
}

.rp-compose {
  padding: 12px;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.rp-compose-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.rp-loading,
.rp-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  padding: 12px 4px;
  font-size: 13px;
}

.rp-error { color: var(--danger, #b00020); }

.rp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}

.rp-item-main { flex: 1; min-width: 0; }

.rp-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.rp-item-due {
  font-size: 12px;
  color: var(--text-muted);
}

.rp-item-notes {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: pre-line;
}

.rp-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.rp-item.rp-status-completed .rp-item-title { text-decoration: line-through; color: var(--text-muted); }
.rp-item.rp-status-cancelled { opacity: 0.65; }
/* ActivityPanel — scoped styles. Matches the card framing used by
   RemindersPanel and MatchingList so all three embed consistently. */

.activity-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  padding: 16px;
}

.ap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ap-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
}

.ap-loading,
.ap-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  padding: 12px 4px;
}
.ap-error { color: var(--danger, #b00020); }

.ap-list { list-style: none; margin: 0; padding: 0; position: relative; }
.ap-list::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  inset-inline-end: 7px;
  width: 1px;
  background: var(--border);
}

.ap-item {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  position: relative;
}

.ap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 6px;
  flex-shrink: 0;
  margin-inline-start: 3px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--bg-card);
}

.ap-body { flex: 1; min-width: 0; }
.ap-line { font-size: 13px; color: var(--text-primary); }
.ap-actor { font-weight: 600; margin-inline-end: 4px; }
.ap-action { color: var(--text-secondary); }
.ap-time { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Sprint 7 — deep-link to the full-page lead history. Keeps the panel
   compact by offering an escape hatch when the agent wants the whole
   story instead of the last few rows. */
.ap-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-start;
}
.ap-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
}
.ap-more:hover {
  text-decoration: underline;
}
/* P-3 — "הסכמי תיווך" section on PropertyDetail. RTL-first with logical
   properties so the card inherits the page's dir="rtl" cleanly. */

.pd-agreements {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  /* Generous vertical breathing room so the section doesn't read as
     glued to the KPI rail above it or the next panel below. Matches
     the 28px rhythm used between most PropertyDetail sibling cards. */
  margin-block: 28px;
  box-shadow: var(--shadow-sm);
}

.pd-agr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 12px;
}

.pd-agr-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

.pd-agr-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gold-glow);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  margin-inline-start: 4px;
}

.pd-agr-loading,
.pd-agr-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.pd-agr-loading {
  color: var(--text-muted);
}

.pd-agr-error {
  background: var(--danger-bg, rgba(220, 38, 38, 0.08));
  color: var(--danger, #b91c1c);
}

.pd-agr-error .btn {
  margin-inline-start: auto;
}

.pd-agr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-agr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}

.pd-agr-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pd-agr-name {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 700;
}

.pd-agr-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.pd-agr-date {
  font-variant-numeric: tabular-nums;
}

.pd-agr-lead {
  position: relative;
}

.pd-agr-linked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold-glow);
  color: var(--gold);
  font-size: 12px;
  border: 1px solid var(--gold-border);
}

.pd-agr-linked-label {
  color: var(--text-muted);
}

.pd-agr-linked-name {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}

.pd-agr-linked-name:hover {
  text-decoration: underline;
}

.pd-agr-unlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-inline-start: 2px;
}

.pd-agr-unlink:hover { background: rgba(0, 0, 0, 0.08); }
.pd-agr-unlink:disabled { opacity: 0.5; cursor: not-allowed; }

.pd-agr-picker-wrap {
  position: relative;
}

.pd-agr-picker {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 4px);
  z-index: 30;
  min-width: 220px;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.14));
  padding: 4px;
  list-style: none;
  margin: 0;
}

.pd-agr-picker-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.pd-agr-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: start;
  gap: 2px;
}

.pd-agr-picker-item:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.pd-agr-picker-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pd-agr-picker-name {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
}

.pd-agr-picker-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.pd-agr-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 600px) {
  .pd-agr-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .pd-agr-actions { justify-content: flex-end; }
}
/* PropertyInterestsPanel — "לוח פעילות מתעניינים" surface
   Cream-card aesthetic matching the rest of the property/customer
   detail panels. RTL throughout. */

.pi-panel {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, rgba(30, 26, 20, 0.08));
  border-radius: 14px;
  padding: 18px;
  font-family: var(--font-body);
  direction: rtl;
}

.pi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.pi-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary, #1e1a14);
}
.pi-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, var(--gold-light, #d9b774), var(--gold, #b48b4c));
  color: var(--text-on-gold, #1e1a14);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(180, 139, 76, 0.25);
}
.pi-add-btn:hover { filter: brightness(1.04); }

.pi-empty {
  padding: 28px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary, #6b6356);
  background: var(--bg-elevated, rgba(30, 26, 20, 0.03));
  border-radius: 10px;
  line-height: 1.6;
}

.pi-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Individual interest row card — 2026-05-10 redesign
 * Clean two-state card: collapsed shows name + heat + offer + status
 * pill on a single line, expanded reveals stats + actions. The whole
 * collapsed surface is the toggle. */
.pi-row {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, rgba(30, 26, 20, 0.10));
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.pi-row.pi-row-collapsed:hover { border-color: rgba(30, 26, 20, 0.18); }
.pi-row-status-closed   { border-color: rgba(21, 128, 61, 0.32); background: rgba(21, 128, 61, 0.03); }
.pi-row-status-fell     { border-color: rgba(185, 28, 28, 0.32); background: rgba(185, 28, 28, 0.03); }
.pi-row-status-paused   { border-color: rgba(180, 83, 9, 0.32); background: rgba(180, 83, 9, 0.03); }

/* Summary header — entire row is the click target. Vertical padding keeps
   the resting hit area generous; horizontal alignment puts identity on
   the right (RTL leading) and stats + status on the left (RTL trailing). */
.pi-row-summary {
  width: 100%;
  background: transparent;
  border: none;
  padding: 14px 16px;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
}
.pi-row-summary:hover { background: rgba(30, 26, 20, 0.02); }
.pi-row-expanded .pi-row-summary { background: rgba(180, 139, 76, 0.04); }

/* Header row: identity (right) | stats + status pill + chevron (left) */
.pi-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pi-row-identity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pi-row-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary, #1e1a14);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pi-row-name:hover { color: var(--gold-dark, #7a5c2c); }

.pi-row-summary-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--text-secondary, #6b6356);
}

/* Compact stats — inline pill summary used in the collapsed view. */
.pi-stat-compact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-elevated, rgba(30, 26, 20, 0.04));
  color: var(--text-primary, #1e1a14);
  font-size: 12px;
  font-weight: 700;
}
.pi-stat-compact.pi-stat-compact-hot {
  background: rgba(180, 139, 76, 0.14);
  color: var(--gold-dark, #7a5c2c);
}

/* Expand body — full stats + actions, only rendered when row is open.
   The opacity-only fade (no transform) avoids the visual scroll-jump
   the user flagged: transform changes the row's local coordinate
   system mid-animation, which the browser stabilises by nudging the
   page scroll back. Pure opacity = stable layout. */
.pi-row-expand {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(30, 26, 20, 0.06);
  margin-top: 0;
  padding-top: 12px;
  animation: pi-row-fade-in 140ms ease-out;
  /* Stop the new content from being inserted on top of the next paint
     and pushing layout — keep its size predictable so the page
     scrollbar doesn't pingpong. */
  overflow-anchor: auto;
}
@keyframes pi-row-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Timeline — grouped by kind (offer / viewing / agreement / contract /
   meeting). Each group has its own headline so the agent sees what
   they're scrolling. */
.pi-timeline-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pi-timeline-section {
  background: var(--bg-secondary, #fbf7f0);
  border: 1px solid rgba(30, 26, 20, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
}
.pi-timeline-headline {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gold-dark, #7a5c2c);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.pi-timeline-headline-count {
  font-size: 11px;
  color: var(--text-muted, #6b6356);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.pi-timeline-section-offer    { background: rgba(180, 139, 76, 0.06); }
.pi-timeline-section-viewing  { background: rgba(29, 78, 216, 0.04); }
.pi-timeline-section-agreement { background: rgba(21, 128, 61, 0.04); }
.pi-timeline-section-contract { background: rgba(21, 128, 61, 0.04); }
.pi-timeline-section-meeting  { background: rgba(180, 83, 9, 0.04); }

.pi-heat {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
}
.pi-heat-hot   { background: rgba(185, 28, 28, 0.12); color: #b91c1c; }
.pi-heat-warm  { background: rgba(180, 139, 76, 0.16); color: var(--gold-dark, #7a5c2c); }
.pi-heat-cold  { background: rgba(71, 85, 105, 0.12); color: #475569; }

/* ── Status pill ── */
.pi-status-wrap { position: relative; }
.pi-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  border: none;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.pi-tone-active  { background: var(--gold-soft, rgba(180, 139, 76, 0.12)); color: var(--gold-dark, #7a5c2c); }
.pi-tone-won     { background: rgba(21, 128, 61, 0.14); color: #15803d; }
.pi-tone-lost    { background: rgba(185, 28, 28, 0.12); color: #b91c1c; }
.pi-tone-pause   { background: rgba(71, 85, 105, 0.10); color: #475569; }

.pi-status-menu {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(30, 26, 20, 0.12);
  list-style: none;
  padding: 4px;
  margin-block: 4px 0;
  z-index: 10;
  min-width: 120px;
}
.pi-status-menu button {
  width: 100%;
  text-align: start;
  padding: 7px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #1e1a14);
}
.pi-status-menu button:hover { background: var(--gold-soft, rgba(180, 139, 76, 0.10)); }
.pi-status-menu button.is-active {
  background: var(--gold-soft, rgba(180, 139, 76, 0.16));
  color: var(--gold-dark, #7a5c2c);
}

.pi-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary, #6b6356);
}
.pi-row-meta span { white-space: nowrap; }

/* ── Stat chips row ── */
.pi-row-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pi-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-elevated, rgba(30, 26, 20, 0.04));
  color: var(--text-primary, #1e1a14);
  font-size: 12px;
  font-weight: 700;
}
.pi-stat-em { color: var(--gold-dark, #7a5c2c); font-weight: 800; }

/* 2026-05-11 — bidi-isolate the "N <Hebrew noun>" chips so the
   number prefix doesn't get visually re-ordered when wrapped in a
   parent whose paragraph direction the algorithm resolved to LTR. */
.pi-stat,
.pi-stat-compact,
.pi-row-last,
.pi-row-meta,
.pi-event-title,
.pi-event-sub,
.pi-timeline-headline,
.pi-timeline-headline-count {
  direction: rtl;
  unicode-bidi: isolate;
}

.pi-row-last {
  font-size: 12px;
  color: var(--text-secondary, #6b6356);
}
.pi-row-last-time { color: rgba(30, 26, 20, 0.45); }

/* ── Action buttons ── */
.pi-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pi-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(30, 26, 20, 0.12));
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1e1a14);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.pi-action-btn:hover {
  background: var(--gold-soft, rgba(180, 139, 76, 0.10));
  border-color: var(--gold, #b48b4c);
}
.pi-action-btn:active { transform: scale(0.98); }
.pi-action-detach {
  margin-inline-start: auto;
  color: var(--danger, #b91c1c);
}
.pi-action-detach:hover {
  border-color: var(--danger, #b91c1c);
  background: rgba(185, 28, 28, 0.06);
}

.pi-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--gold-dark, #7a5c2c);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 0;
  cursor: pointer;
  align-self: flex-start;
}
.pi-toggle:hover { text-decoration: underline; }

/* ── Timeline (expanded) ── */
.pi-timeline {
  list-style: none;
  padding: 10px;
  margin: 0;
  background: var(--bg-elevated, rgba(30, 26, 20, 0.03));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pi-timeline-empty {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary, #6b6356);
  background: var(--bg-elevated, rgba(30, 26, 20, 0.03));
  border-radius: 10px;
}
.pi-event {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: start;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(30, 26, 20, 0.06));
}
.pi-event-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-soft, rgba(180, 139, 76, 0.14));
  color: var(--gold-dark, #7a5c2c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pi-event-offer .pi-event-icon { background: rgba(21, 128, 61, 0.14); color: #15803d; }
.pi-event-agreement .pi-event-icon { background: rgba(180, 83, 9, 0.14); color: #b45309; }
.pi-event-contract .pi-event-icon  { background: rgba(180, 83, 9, 0.14); color: #b45309; }
.pi-event-meeting .pi-event-icon   { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.pi-event-viewing .pi-event-icon   { background: var(--gold-soft, rgba(180, 139, 76, 0.14)); color: var(--gold-dark, #7a5c2c); }

.pi-event-body { min-width: 0; }
.pi-event-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1e1a14);
}
.pi-event-sub {
  font-size: 11px;
  color: var(--text-secondary, #6b6356);
  margin-top: 2px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pi-event-time {
  font-size: 11px;
  color: rgba(30, 26, 20, 0.45);
  white-space: nowrap;
}

/* ── Commission box (compact display) ── */
.pi-commission-summary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(21, 128, 61, 0.06);
  border: 1px dashed rgba(21, 128, 61, 0.32);
  font-size: 13px;
  color: var(--text-primary, #1e1a14);
}
.pi-commission-summary strong {
  font-weight: 800;
  color: #15803d;
}
.pi-commission-edit,
.pi-commission-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-dark, #7a5c2c);
  padding: 2px 6px;
  border-radius: 6px;
}
.pi-commission-edit:hover,
.pi-commission-add:hover {
  background: rgba(180, 139, 76, 0.10);
}
.pi-commission-add { margin-inline-start: 0; }
.pi-commission-preview {
  grid-column: 1 / -1;
  text-align: end;
  font-size: 13px;
  color: #15803d;
  font-weight: 700;
  padding-top: 4px;
  border-top: 1px solid rgba(21, 128, 61, 0.18);
}

/* ── Modal popup wrapper ── 2026-05-10
 * Centered overlay with a soft fade + lift-in animation. Used by the
 * interest-row action forms (+ סיור / + הצעה / + הסכם / + פגישה) and
 * the owner-activity composer. */
@keyframes pi-popup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pi-popup-lift {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pi-popup-back {
  position: fixed;
  inset: 0;
  background: rgba(13, 15, 20, 0.55);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  animation: pi-popup-fade 180ms ease-out;
  /* Backdrop blur is opt-in (Safari is fine, Chrome is fine; older
     Firefox falls back to the dim overlay alone). */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.pi-popup-card {
  background: #fff;
  border-radius: 16px;
  width: min(640px, 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.12);
  max-height: calc(100vh - 48px);
  overflow: auto;
  animation: pi-popup-lift 220ms cubic-bezier(0.16, 1, 0.3, 1);
  /* The card is the scroll container — keep the card itself fixed in
     viewport while the inner body scrolls when content is tall. */
  display: flex;
  flex-direction: column;
}
.pi-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(30, 26, 20, 0.08);
  background: linear-gradient(180deg, rgba(180, 139, 76, 0.10), transparent);
  position: sticky;
  top: 0;
  z-index: 1;
}
.pi-popup-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary, #1e1a14);
}
.pi-popup-close {
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted, #6b6356);
  transition: background 0.15s;
}
.pi-popup-close:hover { background: rgba(30, 26, 20, 0.06); }
.pi-popup-body {
  padding: 20px;
  overflow: auto;
}

/* ── Inline form (also used inside the popup) ── */
.pi-form {
  background: rgba(180, 139, 76, 0.05);
  border: 1px solid rgba(180, 139, 76, 0.22);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pi-form-title {
  font-weight: 800;
  font-size: 13px;
  color: var(--text-primary, #1e1a14);
}
.pi-form-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.pi-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary, #6b6356);
  font-weight: 700;
}
.pi-field-full { grid-column: 1 / -1; }
.pi-field input,
.pi-field select,
.pi-field textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(30, 26, 20, 0.14));
  background: #fff;
  color: var(--text-primary, #1e1a14);
  direction: rtl;
  text-align: right;
}
.pi-field textarea { resize: vertical; min-height: 50px; }
.pi-form-actions { display: flex; gap: 6px; }
.pi-form-cancel {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(30, 26, 20, 0.14));
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.pi-spread-hint {
  grid-column: 1 / -1;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(180, 139, 76, 0.12);
  font-size: 12px;
  color: var(--gold-dark, #7a5c2c);
  font-weight: 700;
}
.pi-spread-hint strong { color: var(--gold-dark, #7a5c2c); }

.pi-action-btn.is-active {
  background: var(--gold-soft, rgba(180, 139, 76, 0.16));
  border-color: var(--gold, #b48b4c);
  color: var(--gold-dark, #7a5c2c);
}
/* ──────────────────────────────────────────────────────────────
 * PropertyDetail — editorial-luxury dashboard layout.
 *
 *   1. Top bar (back link + manage actions)
 *   2. PropertyHero (gallery + price/CTAs)
 *   3. KPI strip (4 tiles)
 *   4. Dashboard cards grid (Marketing primary + 5 others)
 *   5. Slide-in PropertyPanelSheet for deep editing
 *   6. Mobile sticky action bar (preserved)
 * ────────────────────────────────────────────────────────────── */

.property-detail {
  /* Was 1280px + flush 4px gutters — at 1440+ viewports the page
     edges were hugging the main-rail / sidebar gutter, which the
     user flagged as "too wide". Narrower cap + breathing-room
     padding pulls the whole detail surface visibly inward without
     overshooting on 1280 × 800 laptops. */
  max-width: 1120px;
  margin: 0 auto;
  padding: 4px 24px 28px;
}

/* ── Top bar ───────────────────────────────────────────────── */
.pd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 6px 4px;
  border-radius: 6px;
  text-decoration: none;
  transition: color 0.15s;
}

.pd-back:hover {
  color: var(--gold);
}

.pd-top-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── KPI strip ─────────────────────────────────────────────── */
.pd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

@media (max-width: 1099px) {
  .pd-kpis {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }
}

@media (max-width: 820px) {
  .pd-kpis {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pd-kpis::-webkit-scrollbar { display: none; }
  .pd-kpis > * {
    scroll-snap-align: start;
  }
}

/* ── Dashboard grid ────────────────────────────────────────── */
.pd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 1100px) {
  .pd-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(180px, auto);
  }
  /* The marketing card spans a wider footprint on desktop so it reads
   * as the most-used surface. */
  .pd-grid .dc-primary {
    grid-column: span 2;
  }
}

@media (max-width: 820px) {
  .pd-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ── Card shell (DashCard) ─────────────────────────────────── */
.dc {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  min-width: 0;
}

.dc:hover {
  box-shadow: 0 8px 24px rgba(30, 26, 20, 0.08);
}

/* Marketing card — gold accent because it's the most-used surface */
.dc-primary {
  border-color: var(--gold-border);
  box-shadow: 0 4px 16px rgba(180, 139, 76, 0.06);
}

.dc-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--gold-border);
  pointer-events: none;
}

.dc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;           /* title + action drop to separate rows when crowded */
  row-gap: 8px;
  min-width: 0;
}

.dc-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;              /* allow Hebrew title to shrink/ellipsize in a flex row */
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0;
  text-transform: uppercase;
}

.dc-title > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--gold-glow);
  color: var(--gold);
}

.dc-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;            /* don't stretch, don't shrink — wrap instead */
  max-width: 100%;           /* never exceed the card's inner width */
}

/* When the header wraps (narrow card), push the CTA to the LEFT edge
   (logical end in RTL) so it sits flush with the card instead of
   leaning against the title. */
.dc-header > .dc-cta {
  margin-inline-start: auto;
}

.dc-cta:hover {
  background: var(--gold-glow);
  color: var(--gold);
  border-color: var(--gold-border);
}

/* Owner-card secondary action (החלף בעלים) lives next to the primary
   "פתח כרטיס" — pair them in a small flex row so the card header
   doesn't break to a new line. */
.dc-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

.dc-cta-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}

.dc-cta-ghost:hover {
  border-color: var(--gold-border);
  color: var(--gold);
  background: var(--gold-glow);
}

.dc-cta-ghost:disabled {
  opacity: 0.55;
  cursor: default;
}

.dc-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.dc-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  padding: 6px 0;
}

.dc-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

/* ── Marketing card body ───────────────────────────────────── */
.dc-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dc-progress-row-lg {
  margin-bottom: 18px;
}

.dc-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 99px;
  overflow: hidden;
}

.dc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  border-radius: 99px;
  transition: width 0.3s ease;
}

.dc-progress-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: end;
}

.dc-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 1100px) {
  .dc-channel-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dc-channel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: right;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  min-width: 0;
}

.dc-channel:hover {
  border-color: var(--gold-border);
  background: var(--gold-glow);
  color: var(--text-primary);
}

.dc-channel.is-on {
  background: var(--success-bg);
  color: var(--text-primary);
  border-color: rgba(21, 128, 61, 0.18);
}

.dc-channel-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}

.dc-channel-icon.on {
  color: var(--success);
}

.dc-channel span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Owner card body ───────────────────────────────────────── */
.dc-owner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dc-owner-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-primary);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

.dc-owner-avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 22px;
}

.dc-owner-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.dc-owner-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.dc-owner-link {
  border-bottom: 1px dashed var(--gold-border);
  transition: color 0.15s, border-color 0.15s;
}

.dc-owner-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.dc-owner-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
}

.dc-owner-meta:hover {
  color: var(--gold);
}

.dc-owner-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dc-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.dc-mini:hover {
  background: var(--bg-card-hover);
  border-color: var(--gold-border);
}

.dc-mini-wa {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  border-color: transparent;
}
.dc-mini-wa:hover {
  filter: brightness(1.05);
  border-color: transparent;
}

/* Mobile: 48×48 round tap-target icon buttons next to the name.
   Hidden on desktop (the .dc-mini 2-col grid below handles that). */
.dc-owner-round-actions {
  display: none;
  gap: 8px;
  flex-shrink: 0;
  margin-inline-start: auto;
}

.dc-owner-round {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s, border-color 0.15s, transform 0.1s;
}

.dc-owner-round:active { transform: scale(0.94); }

.dc-owner-round-call {
  color: var(--gold);
  border-color: var(--gold-border);
}

.dc-owner-round-wa {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  border-color: transparent;
}

.dc-owner-round-wa:hover { filter: brightness(1.05); }

@media (max-width: 820px) {
  .dc-owner-round-actions { display: inline-flex; }
  .dc-owner-actions-desktop { display: none; }
}

/* ── Photos card body ──────────────────────────────────────── */
.dc-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.dc-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  padding: 0;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.dc-thumb:hover {
  border-color: var(--gold);
  transform: scale(1.02);
}

.dc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dc-thumb-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 11, 19, 0.55);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ── Exclusivity card body ─────────────────────────────────── */
.dc-excl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dc-excl-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
}

.dc-excl-label {
  color: var(--text-muted);
  font-size: 12px;
}

.dc-excl-value {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dc-excl-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  align-self: flex-start;
}

.dc-excl-pill-soon {
  background: var(--warning-bg);
  color: var(--warning);
}

.dc-excl-pill-expired {
  background: var(--danger-bg);
  color: var(--danger);
}

.dc-excl-status {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.dc-excl-status strong {
  color: var(--text-primary);
}

/* ── Notes / features card body ────────────────────────────── */
.dc-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dc-feature-chips-lg {
  margin-bottom: 16px;
}

.dc-feature-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.dc-feature-chip-more {
  background: var(--gold-glow);
  color: var(--gold);
  border-color: var(--gold-border);
}

.dc-notes-preview {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Map card body ─────────────────────────────────────────── */
.dc-map-mini {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.dc-map-mini iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: contrast(1.05) saturate(0.95);
  pointer-events: none;
}

.dc-map-addr {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ── Videos block (below grid) ─────────────────────────────── */
.pd-videos {
  margin-top: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
}

.pd-videos-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.pd-videos-head h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.pd-videos-head h4 svg { color: var(--gold); }

.pd-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.video-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}

.video-tile video,
.video-tile iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.video-tile-title {
  position: absolute;
  bottom: 8px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}

.link-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 28px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-light);
  border-radius: 14px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}

/* ── Slide-in panel content (marketing groups, owner, etc.) ─ */
.pd-panel-marketing {
  display: flex;
  flex-direction: column;
}

.pd-panel-owner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pd-panel-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.pd-panel-actions .btn {
  justify-content: center;
}

.pd-panel-actions .btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.pd-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted);
}

.pd-panel-empty svg { color: var(--gold); }

.pd-panel-excl {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pd-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.pd-panel-label {
  font-size: 12px;
  color: var(--text-muted);
}

.pd-panel-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pd-panel-pill {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 99px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 13px;
}

.pd-panel-pill-soon {
  background: var(--warning-bg);
  color: var(--warning);
}

.pd-panel-pill-expired {
  background: var(--danger-bg);
  color: var(--danger);
}

.pd-panel-notes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pd-panel-notes-body {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.pd-panel-notes-body h5 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.pd-panel-notes-body p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ── Marketing group accordion (re-used inside panel) ──────── */
.marketing-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: default;
  text-align: right;
}

.checklist-item.interactive {
  cursor: pointer;
  background: none;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: 2px;
  transition: background 0.15s, color 0.15s;
}

.checklist-item.interactive:hover {
  background: var(--gold-glow);
  color: var(--text-primary);
}

.checklist-item.interactive.is-done {
  color: var(--text-primary);
}

.checklist-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: none;
  border: none;
  text-align: right;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  color: inherit;
  border-radius: 6px;
}

.checklist-detail-btn {
  padding: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
}

.checklist-item.interactive:hover .checklist-detail-btn {
  opacity: 1;
}

.checklist-detail-btn:hover {
  color: var(--gold);
  background: var(--bg-card);
}

.check-done {
  color: var(--success);
  flex-shrink: 0;
}

.check-pending {
  color: var(--text-muted);
  flex-shrink: 0;
}

.checklist-item span.done {
  color: var(--text-primary);
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
}

.mg-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.mg-section.open {
  border-color: var(--gold-border);
}

.mg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: right;
  transition: background 0.15s;
}

.mg-header:hover { background: var(--gold-glow); }

.mg-chev {
  color: var(--gold);
  font-size: 12px;
  width: 10px;
  flex-shrink: 0;
}

.mg-title { flex: 1; }

.mg-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mg-bar {
  display: inline-block;
  width: 56px;
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
}

.mg-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  border-radius: 2px;
  transition: width 0.25s;
}

.mg-count {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mg-body {
  padding: 6px 8px 10px;
  background: var(--bg-card);
}

/* ── Lightbox (preserved) ──────────────────────────────────── */
.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: zoom-out;
}

.pd-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  touch-action: pinch-zoom;
  cursor: default;
}

.pd-lightbox-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  left: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ── Sticky action bar — reserve space on mobile ───────────── */
@media (max-width: 900px) {
  .property-detail.pd-dashboard {
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
  }
}

.sab-icons .sab-inner button,
.sab-icons .sab-inner a {
  font-size: 11px;
  gap: 4px;
  padding: 8px 4px;
}
.sab-icons .sab-inner a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 48px;
  border-radius: 12px;
}

/* Hide the top "back" label on small phones, keep the arrow */
@media (max-width: 480px) {
  .pd-top-actions .btn span { display: none; }
  .pd-top-actions .btn { padding: 6px 9px; }
}

/* T5: Instagram-gradient tint on the Story button (native only) */
.pd-ig-btn {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.pd-ig-btn:hover { filter: brightness(1.08); }

/* UX review F-1.1 — Matched-leads quick dispatch row.
   Sits above the KPI strip so agents can send WhatsApp to the 1-3
   best-matching leads without opening the generic picker. Each row is
   a big primary-feel target (Fitts's law applied: the high-frequency
   action is large, centered, visually loudest). */
.pd-matches {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 14px;
  padding: 12px 14px 14px;
  margin-bottom: 16px;
  background-image: linear-gradient(0deg, var(--bg-card), var(--bg-card)),
                    linear-gradient(135deg, var(--gold-glow), transparent 60%);
  background-blend-mode: normal;
}
.pd-matches-head {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
  letter-spacing: 0.1px;
}
.pd-matches-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pd-match-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  text-align: right;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.06s ease;
}
.pd-match-row:hover {
  background: var(--gold-glow);
  border-color: var(--gold-border);
}
.pd-match-row:active { transform: scale(0.99); }
.pd-match-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.pd-match-meta {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-match-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.pd-match-more {
  width: 100%;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
}
.pd-match-more:hover {
  border-color: var(--gold-border);
  color: var(--gold);
}

@media (max-width: 640px) {
  .pd-match-row {
    grid-template-columns: 1fr auto;
  }
  .pd-match-meta {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* UX review F-5.1 — "Saved automatically" chip for forms. Lives
   alongside the save button; fades in once the form is dirty so
   users know tab close is safe. */
.form-autosave-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--success, #2c8a5c);
  background: color-mix(in srgb, var(--success, #2c8a5c) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--success, #2c8a5c) 25%, transparent);
  border-radius: 999px;
  font-weight: 600;
}


/* MLS pipeline preview chips on the card face. */
.pd-pipeline-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.pd-pipeline-label {
  color: var(--text-muted, #757575);
}
.pd-pipeline-chip {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-subtle, #f5f5f5);
  color: var(--text-muted, #555);
  border: 1px solid var(--border-subtle, #e1e1e1);
}

/* ─────────────────────────────────────────────────────────────────
 * 2026-05-10 — V1 Refined property page
 * Header (breadcrumb + identity + status pills + Share/Edit) →
 * KPI hero → 2-column (action rail + tabbed body).
 * Mirrors /tmp/.../property-redesign/refined.jsx; classnames are
 * prefixed prd- so they don't clash with the legacy .pd- system.
 * ───────────────────────────────────────────────────────────────── */
/* V1 Refined uses the full viewport width (capped at 1600 px so the
   KPI tiles + action rail + tabs grid don't stretch past the design
   target). The legacy 1120 px cap from `.property-detail` above made
   the page feel cramped — V1's two-column layout needs the room. */
.property-detail.prd-page {
  max-width: 1600px;
  padding: 4px 32px 28px;
}

.prd-page {
  --prd-cream: #f7f3ec;
  --prd-cream2: #efe9df;
  --prd-white: #ffffff;
  --prd-ink: #1e1a14;
  --prd-ink2: #3a3329;
  --prd-muted: #6b6356;
  --prd-faint: #9c9384;
  --prd-gold: #b48b4c;
  --prd-gold-light: #d9b774;
  --prd-gold-dark: #7a5c2c;
  --prd-gold-soft: rgba(180,139,76,0.12);
  --prd-gold-glow: rgba(180,139,76,0.18);
  --prd-border: rgba(30,26,20,0.08);
  --prd-border-mid: rgba(30,26,20,0.14);
  --prd-success: #15803d;
  --prd-success-bg: rgba(21,128,61,0.12);
  --prd-danger: #b91c1c;
  --prd-danger-bg: rgba(185,28,28,0.10);
  --prd-info: #1d4ed8;

  font-family: 'Assistant', 'Heebo', -apple-system, sans-serif;
}

/* Header */
.prd-header {
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--prd-border);
  margin-bottom: 20px;
}
.prd-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--prd-muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  text-decoration: none;
}
.prd-breadcrumb:hover { color: var(--prd-ink); }
.prd-id-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.prd-id h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: var(--prd-ink);
  letter-spacing: -0.6px;
  line-height: 1.1;
}
.prd-id-meta {
  font-size: 13px;
  color: var(--prd-muted);
  margin-top: 4px;
}
.prd-id-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.prd-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}
.prd-pill-success { background: var(--prd-success-bg); color: var(--prd-success); }
.prd-pill-gold { background: var(--prd-gold-soft); color: var(--prd-gold-dark); }
.prd-pill-danger { background: var(--prd-danger-bg); color: var(--prd-danger); }
.prd-pill-muted { background: rgba(107,99,86,0.10); color: var(--prd-muted); }
.prd-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.prd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--prd-border);
  background: var(--prd-white);
  color: var(--prd-ink);
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
.prd-btn:hover { background: var(--prd-cream); }
.prd-btn-primary {
  background: linear-gradient(180deg, var(--prd-gold-light), var(--prd-gold));
  color: var(--prd-ink);
  border: none;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(180,139,76,0.25);
}
.prd-btn-primary:hover { filter: brightness(0.97); background: linear-gradient(180deg, var(--prd-gold-light), var(--prd-gold)); }
.prd-btn-danger {
  background: var(--prd-danger-bg);
  color: var(--prd-danger);
  border-color: rgba(185,28,28,0.25);
}
.prd-btn-danger:hover { background: rgba(185,28,28,0.16); }

/* Kebab menu */
.prd-more { position: relative; }
.prd-more-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--prd-border);
  background: var(--prd-white);
  color: var(--prd-ink);
  cursor: pointer;
}
.prd-more-btn:hover { background: var(--prd-cream); }
.prd-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  /* Anchor to the END (left in RTL) so the menu opens INWARD instead
     of off-screen — the kebab button sits at the right edge of the
     header in RTL, so opening to start would clip beyond the viewport. */
  inset-inline-end: 0;
  min-width: 240px;
  background: var(--prd-white);
  border: 1px solid var(--prd-border);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(30,26,20,0.18), 0 2px 6px rgba(30,26,20,0.06);
  padding: 6px;
  z-index: 50;
  animation: pi-popup-lift 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.prd-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--prd-ink);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: start;
  font-family: inherit;
}
.prd-more-item:hover { background: var(--prd-cream); }
.prd-more-item-danger { color: var(--prd-danger); }
.prd-more-item-danger:hover { background: var(--prd-danger-bg); }
.prd-more-sep {
  height: 1px;
  background: var(--prd-border);
  margin: 6px 0;
}

/* KPI hero */
.prd-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.prd-kpi {
  background: var(--prd-white);
  border: 1px solid var(--prd-border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.prd-kpi-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.prd-kpi-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--prd-gold-soft);
  color: var(--prd-gold);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.prd-kpi-label {
  font-size: 11px;
  color: var(--prd-muted);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.prd-kpi-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--prd-ink);
  letter-spacing: -0.8px;
  line-height: 1;
  word-break: break-word;
}
.prd-kpi-sub {
  font-size: 11.5px;
  font-weight: 700;
}
.prd-kpi-sub.prd-tone-hot { color: var(--prd-danger); }
.prd-kpi-sub.prd-tone-success { color: var(--prd-success); }
.prd-kpi-sub.prd-tone-info { color: var(--prd-gold-dark); }
.prd-kpi-sub.prd-tone-muted { color: var(--prd-muted); }
@media (max-width: 1100px) {
  .prd-kpis { grid-template-columns: repeat(2, 1fr); }
  .prd-kpi-value { font-size: 24px; }
}

/* Main 2-col grid */
.prd-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .prd-grid { grid-template-columns: 1fr; }
}

/* Action rail */
.prd-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prd-rail-label {
  font-size: 11px;
  color: var(--prd-muted);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 4px;
  margin-bottom: 2px;
}
.prd-next {
  background: linear-gradient(180deg, rgba(180,139,76,0.10), transparent);
  border: 1px solid var(--prd-gold);
  border-radius: 14px;
  padding: 14px;
}
.prd-next-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.prd-next-bolt {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--prd-gold);
  color: var(--prd-ink);
  display: grid; place-items: center;
}
.prd-next-tag {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--prd-gold-dark);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.prd-next-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--prd-ink);
  letter-spacing: -0.2px;
  line-height: 1.35;
}
.prd-next-sub {
  font-size: 11.5px;
  color: var(--prd-muted);
  margin-top: 4px;
}
.prd-next-cta {
  margin-top: 10px;
  padding: 9px 12px;
  background: linear-gradient(180deg, var(--prd-gold-light), var(--prd-gold));
  color: var(--prd-ink);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.prd-next-cta:disabled { opacity: 0.6; cursor: not-allowed; }

.prd-quick {
  background: var(--prd-white);
  color: var(--prd-ink);
  border: 1px solid var(--prd-border);
  border-radius: 11px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  text-align: start;
  width: 100%;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.prd-quick:hover { background: var(--prd-cream); border-color: var(--prd-border-mid); }
.prd-quick-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--prd-gold-soft);
  color: var(--prd-gold);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.prd-quick.prd-quick-wa {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  border: none;
}
.prd-quick.prd-quick-wa:hover { filter: brightness(0.96); background: linear-gradient(135deg, #25D366, #128C7E); }
.prd-quick.prd-quick-wa .prd-quick-ico {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.prd-quick-body { flex: 1; min-width: 0; }
.prd-quick-label {
  font-size: 13px; font-weight: 800; letter-spacing: -0.1px;
  display: block;
}
.prd-quick-sub {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 1px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Bidi safety — make sure each sub-line renders in its own RTL
     paragraph so a number prefix ("1 תמונות") doesn't get visually
     re-ordered to "תמונות 1" when wrapped in a parent that the bidi
     algorithm resolved to LTR (e.g. a button whose first strong
     character is the Latin digit). Applies the same isolate to all
     the mixed-script chips/sub-lines on the page below. */
  direction: rtl;
  unicode-bidi: isolate;
}

/* 2026-05-11 — bidi-isolate wrappers for every place that renders
   "N <Hebrew noun>" strings (KPI subs, pills, stats, meta lines).
   Without this, the bidi algorithm can flip "8 ימים" to "ימים 8"
   when the parent's resolved paragraph direction is LTR (which it
   is for any container whose first strong character is a digit). */
.prd-kpi-sub,
.prd-kpi-label,
.prd-id-meta,
.prd-pill,
.prd-more-pill,
.prd-spec-value,
.prd-spec-label {
  direction: rtl;
  unicode-bidi: isolate;
}

/* Tabs card */
.prd-tabs-card {
  background: var(--prd-white);
  border: 1px solid var(--prd-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.prd-tabs-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--prd-border);
  background: var(--prd-white);
  flex-wrap: wrap;
}
.prd-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--prd-cream);
  border-radius: 11px;
  border: 1px solid var(--prd-border);
}
.prd-tab {
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--prd-muted);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  border: none;
  font-family: inherit;
}
.prd-tab.is-active {
  color: var(--prd-ink);
  background: var(--prd-white);
  box-shadow: 0 1px 2px rgba(30,26,20,0.08), 0 0 0 1px rgba(30,26,20,0.05);
}
.prd-tab-icon { color: var(--prd-muted); display: inline-flex; }
.prd-tab.is-active .prd-tab-icon { color: var(--prd-gold); }
.prd-tab-count {
  background: var(--prd-cream2);
  color: var(--prd-muted);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  min-width: 18px;
  text-align: center;
}
.prd-tab.is-active .prd-tab-count {
  background: var(--prd-gold);
  color: #fff;
}
.prd-more-pills {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.prd-more-pill {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--prd-white);
  border: 1px solid var(--prd-border);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--prd-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-family: inherit;
}
.prd-more-pill:hover { background: var(--prd-cream); }
.prd-more-pill-count {
  color: var(--prd-gold-dark);
  font-weight: 800;
}
.prd-tab-body {
  padding: 22px;
  background: var(--prd-cream);
  flex: 1;
  min-height: 0;
}
.prd-tab-body > * + * { margin-top: 16px; }

/* Tab — הנכס: gallery card + spec grid + price card + map */
.prd-prop-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}
@media (max-width: 980px) {
  .prd-prop-grid { grid-template-columns: 1fr; }
}
.prd-card {
  background: var(--prd-white);
  border: 1px solid var(--prd-border);
  border-radius: 14px;
  padding: 20px;
  min-width: 0;
}
.prd-card.prd-card-flush { padding: 0; overflow: hidden; }
.prd-card-eyebrow {
  font-size: 11px;
  color: var(--prd-muted);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.prd-prop-hero {
  position: relative;
  height: 320px;
  background: var(--prd-cream2);
}
.prd-prop-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prd-prop-thumbs {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 14px;
  display: flex;
  gap: 4px;
}
.prd-prop-thumb {
  width: 44px; height: 44px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.55);
  cursor: pointer;
  background: rgba(0,0,0,0.4);
  padding: 0;
}
.prd-prop-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.prd-prop-thumb.is-active { border-color: var(--prd-gold); }
.prd-prop-thumb-more {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  background: rgba(0,0,0,0.55);
}
.prd-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  row-gap: 18px;
}
@media (max-width: 720px) { .prd-spec-grid { grid-template-columns: repeat(2, 1fr); } }
.prd-spec-label {
  font-size: 10.5px;
  color: var(--prd-muted);
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.prd-spec-value {
  font-size: 14px;
  color: var(--prd-ink);
  font-weight: 700;
}
.prd-price {
  font-size: 32px;
  font-weight: 800;
  color: var(--prd-ink);
  letter-spacing: -0.8px;
  line-height: 1;
}
.prd-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.prd-ai-blurb {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--prd-cream);
  border-radius: 10px;
  border: 1px dashed var(--prd-border-mid);
  font-size: 12.5px;
  color: var(--prd-ink2);
  line-height: 1.6;
}

/* Owner tab. Was 320px / 1fr — the left card felt cramped against
   the 4-action 2x2 inner grid. 38% / 62% gives the bel-ha-nechess
   identity card the room it needs without over-compressing the
   activity timeline. */
.prd-owner-grid {
  display: grid;
  grid-template-columns: minmax(360px, 38%) 1fr;
  gap: 18px;
}
@media (max-width: 980px) { .prd-owner-grid { grid-template-columns: 1fr; } }
.prd-owner-id {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.prd-owner-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--prd-gold), var(--prd-gold-light));
  color: var(--prd-ink);
  display: grid; place-items: center;
  font-weight: 800; font-size: 26px;
  flex-shrink: 0;
}
.prd-owner-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--prd-ink);
  letter-spacing: -0.3px;
}
.prd-owner-meta {
  font-size: 12px;
  color: var(--prd-muted);
  direction: ltr;
  text-align: right;
  margin-top: 2px;
}
.prd-owner-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.prd-owner-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--prd-muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.prd-owner-progress-track {
  height: 6px;
  background: var(--prd-cream2);
  border-radius: 999px;
  overflow: hidden;
}
.prd-owner-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--prd-gold-light), var(--prd-gold));
}

/* Empty/loading helper */
.prd-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--prd-muted);
  font-size: 13px;
}

.customers-loading {
  display: flex;
  justify-content: center;
  padding: 80px;
}

.skel-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  min-height: 280px;
}

.skel-circle { width: 44px; height: 44px; border-radius: 50%; }
.skel-line { height: 10px; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-70 { width: 70%; }
.w-90 { width: 90%; }

.spinner-gold {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--gold-glow);
  border-top-color: var(--gold);
  animation: spin 0.9s linear infinite;
}

/* Filter breadcrumb — shown when arriving from the dashboard KPI */
.filter-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: var(--gold-glow);
  color: var(--gold);
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}

.fb-clear {
  border: none;
  background: transparent;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* Big top-level tabs */
.customers-main-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.cmt-tab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-align: start;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  font-family: var(--font-body);
  color: var(--text-secondary);
}

.cmt-tab:hover {
  border-color: var(--gold-border);
  background: var(--gold-glow);
  color: var(--text-primary);
}

.cmt-tab.active {
  border-color: var(--gold);
  background: var(--gold-glow);
  color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--gold-glow);
}

.cmt-tab-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.cmt-tab.active .cmt-tab-title { color: var(--gold); }

.cmt-tab-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* Cards/list view toggle */
.view-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.view-toggle-btn.active {
  background: var(--gold-glow);
  color: var(--gold);
}

.view-toggle-btn:hover:not(.active) {
  color: var(--text-primary);
}

/* Card grid — equal-height tiles via flex */
.customers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.customer-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.customer-card:hover {
  /* Match .property-card's lift so the two card types read as the
     same design family — gold border, dropped shadow, 4px rise. */
  transform: translateY(-4px);
  border-color: var(--gold-border);
  box-shadow: var(--shadow-lg);
}

.customer-card.active-client {
  border-color: var(--gold-border);
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(180,139,76,0.04) 100%);
}

.customer-card.highlight {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow), var(--shadow-md);
  animation: customer-pulse 2s ease-in-out;
}

@keyframes customer-pulse {
  0% { box-shadow: 0 0 0 0 rgba(180,139,76,0.5); }
  60% { box-shadow: 0 0 0 12px rgba(180,139,76,0); }
  100% { box-shadow: 0 0 0 3px var(--gold-glow), var(--shadow-md); }
}

.customer-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.customer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
}

.customer-info {
  flex: 1;
  min-width: 0;
}

.customer-info h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.customer-source {
  font-size: 12px;
  color: var(--text-muted);
}

.customer-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.customer-card-body {
  padding: 10px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cc-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
  line-height: 1.5;
}

.cc-row:last-child { border-bottom: none; }

.cc-label {
  color: var(--text-muted);
}

.cc-value {
  color: var(--text-primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cc-pos { color: var(--success); font-weight: 600; }
.cc-muted { color: var(--text-muted); }

.cc-agreement-row .cc-value {
  color: var(--gold);
  font-weight: 600;
}

.cc-signed-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--success-bg);
  color: var(--success);
  font-size: 11px;
  margin-inline-end: 6px;
}

.customer-notes {
  padding: 0 18px 10px;
  flex-shrink: 0;
}

.customer-notes p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  gap: 6px;
  margin-top: auto;
  flex-shrink: 0;
}

.customer-dates {
  display: flex;
  gap: 12px;
}

.customer-dates span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.cc-last-contact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.cc-last-contact:hover {
  color: var(--gold);
  border-color: var(--gold-border);
  background: var(--gold-glow);
}

.customer-notes {
  padding: 0 18px 10px;
}

.customer-notes-inline {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  min-height: 32px;
}

.customer-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.customer-actions .btn {
  padding: 5px 8px;
  font-size: 12px;
  gap: 4px;
}

.customer-actions .btn-sm {
  height: 30px;
}

@media (max-width: 540px) {
  .hide-sm { display: none; }
  .customers-main-tabs { grid-template-columns: 1fr; gap: 8px; }
  .cmt-tab { padding: 14px 16px; }
  .customers-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Tighter filter strip + horizontal scroll for filter-tabs */
  .filters-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .customer-card {
    min-height: auto;
  }

  .customer-card-body {
    padding: 10px 16px;
  }

  .customer-card-header {
    padding: 12px 16px;
  }

  .customer-card-footer {
    padding: 10px 12px;
  }

  /* Smaller chips on tiny screens */
  .customer-actions .btn { font-size: 11px; }
}

.customers-empty {
  grid-column: 1 / -1;
  padding: 48px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

.customers-empty.rich {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 24px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
}

.customers-empty.rich .ce-illustration {
  font-size: 44px;
  opacity: 0.8;
}

.customers-empty.rich h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-primary);
  margin: 0;
}

.customers-empty.rich p {
  max-width: 340px;
  margin: 0 0 10px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Status picker (hot/warm/cold with auto-suggestion) */
.status-picker {
  position: relative;
}

.status-badge-btn {
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.status-badge-btn:hover {
  transform: translateY(-1px);
}

.sp-auto-hint {
  color: var(--gold);
  margin-right: 2px;
}

.status-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-menu-hint {
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.status-menu-hint svg {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.status-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-align: start;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.status-menu-item:hover {
  background: var(--bg-elevated);
}

.status-menu-item.active {
  background: var(--gold-glow);
  color: var(--gold);
}

.sp-auto {
  margin-inline-start: auto;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--gold-glow);
  color: var(--gold);
}

.danger-hover:hover {
  color: var(--danger) !important;
  background: var(--danger-bg) !important;
}

/* List view — one row per lead, scannable */
.customer-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.customer-list-head,
.customer-list-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 2fr)      /* name */
    minmax(90px, 1fr)       /* status */
    minmax(150px, 1.2fr)    /* type chips */
    minmax(80px, 1fr)       /* city */
    minmax(60px, 0.7fr)     /* rooms */
    minmax(130px, 1.2fr)    /* budget */
    minmax(160px, 1.4fr)    /* agreement */
    minmax(100px, 0.9fr)    /* last contact */
    minmax(220px, 1.3fr);   /* actions */
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.customer-list-head {
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.customer-list-row {
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.customer-list-row:last-child { border-bottom: none; }

.customer-list-row:hover {
  background: var(--bg-elevated);
}

.customer-list-row.is-active {
  background: linear-gradient(90deg, var(--gold-glow), transparent 80%);
}

.customer-list-row.highlight {
  background: var(--gold-glow);
  box-shadow: inset 3px 0 0 var(--gold);
  animation: list-pulse 2s ease-in-out;
}

@keyframes list-pulse {
  0% { background: var(--gold); }
  100% { background: var(--gold-glow); }
}

.cl-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cl-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}

.cl-name-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cl-name-text strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-name-text small {
  font-size: 11px;
  color: var(--text-muted);
}

.cl-type {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.cl-chip {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-elevated);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.cl-chip.buy { background: var(--gold-glow); color: var(--gold); }
.cl-chip.rent { background: var(--info-bg); color: var(--info); }

.cl-muted {
  color: var(--text-secondary);
}

.cl-agreement {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-primary);
  direction: ltr;
  text-align: right;
}

.cl-agreement small {
  font-size: 11px;
  color: var(--text-muted);
}

.cl-signed-dot {
  position: relative;
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  display: inline-block;
  margin-top: 3px;
}

.cl-actions {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}

.cl-actions-head {
  text-align: left;
  direction: ltr;
}

.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Polish T-1: visual size stays at 28×28 (the icon glyph), but the
     tap target is grown to ≥44pt via padding. Apple HIG minimum +
     stops the empathy-log "I keep tapping the wrong icon" complaints
     on the customers row where 4 actions sit shoulder-to-shoulder. */
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cl-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-light);
}

.cl-btn.danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}

/* Responsive list — collapse less-critical columns */
@media (max-width: 1100px) {
  .customer-list-head,
  .customer-list-row {
    grid-template-columns:
      minmax(160px, 2fr)
      minmax(90px, 1fr)
      minmax(120px, 1fr)
      minmax(80px, 0.9fr)
      minmax(120px, 1.2fr)
      minmax(180px, 1.2fr);
  }
  .customer-list-head > span:nth-child(5),
  .customer-list-row > :nth-child(5),
  .customer-list-head > span:nth-child(8),
  .customer-list-row > :nth-child(8) {
    display: none;
  }
}

@media (max-width: 760px) {
  .customer-list-head { display: none; }
  .customer-list-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
  }
  .customer-list-row > :nth-child(n+4):nth-child(-n+7) { display: none; }
  .cl-actions { justify-content: flex-start; padding-top: 4px; }
}

/* ──────────────────────────────────────────────────────────────
 * MOBILE collapsed customer card (P1-M2/M3/M8, P5-M3)
 * Compact 92px-ish row by default; tap to expand inline.
 * ────────────────────────────────────────────────────────────── */
.customer-card-mobile {
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.customer-card-mobile.is-collapsed {
  min-height: 92px;
}

.ccm-body {
  background: var(--bg-card);
  border-radius: inherit;
}

.ccm-row-outer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  min-height: 92px;
}

.ccm-row-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  color: inherit;
  padding: 4px 0;
}

.ccm-row-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

.ccm-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
}

.ccm-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ccm-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ccm-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ccm-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}

.ccm-status-HOT  { background: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg); }
.ccm-status-WARM { background: var(--warning); box-shadow: 0 0 0 2px var(--warning-bg); }
.ccm-status-COLD { background: var(--info); box-shadow: 0 0 0 2px var(--info-bg); }

.ccm-active-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  flex-shrink: 0;
}

/* S11: stale-lead pill — HOT/WARM leads with ≥ 10 days since lastContact.
   Warm-amber tone so it reads as a reminder, not an alarm. Tap = bump
   lastContact = pill disappears, so the pill *is* the fix button. */
.ccm-stale-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warning, #c18a2e) 45%, transparent);
  background: color-mix(in srgb, var(--warning, #c18a2e) 14%, transparent);
  color: var(--warning, #8a5a1c);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1.2;
  min-height: 22px;
  border: 1px solid transparent;
}

.ccm-stale-pill:active { transform: scale(0.96); }
.ccm-stale-pill:hover { filter: brightness(0.97); }

/* Desktop v2 card variant — same styling, slightly larger for the denser
   card layout where the pill shares space with the pre-approval badge. */
.cc-v2-stale-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning, #c18a2e) 16%, transparent);
  color: var(--warning, #8a5a1c);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--warning, #c18a2e) 40%, transparent);
  line-height: 1.2;
}

.cc-v2-stale-pill:active { transform: scale(0.97); }

/* Desktop table cell and mobile-list row — same last-contact cell, just
   painted amber so the row gets a passive glance-cue without adding a chip
   to an already-dense row. */
.cl-td-stale, .cl-stale {
  color: var(--warning, #8a5a1c) !important;
  font-weight: 600;
}

.ccm-sub {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.ccm-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ccm-chev.open { transform: rotate(180deg); color: var(--gold); }

/* Expand/collapse animation */
.ccm-expand {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.22s ease;
}

.ccm-expand.open {
  max-height: 2000px;
  opacity: 1;
}

.ccm-expand-inner {
  border-top: 1px solid var(--border);
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ccm-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
}

.ccm-last-contact-wrap {
  display: flex;
  justify-content: flex-start;
  padding: 2px 0;
}

.ccm-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding-top: 6px;
}

/* Mobile grid tweak: single column, tight gap */
@media (max-width: 820px) {
  .customers-grid { grid-template-columns: 1fr; gap: 10px; }
  .customer-card.customer-card-mobile { min-height: 0; }
}

/* ──────────────────────────────────────────────────────────────
 * P0-M9/M10/M8/P5-M10: 48x48 quick-action rail (Call/WA/SMS/More)
 * ────────────────────────────────────────────────────────────── */
.ccm-rail {
  display: flex;
  gap: 10px;
  align-items: stretch;
  padding-top: 6px;
  justify-content: flex-start;
}

.ccm-rail-btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.ccm-rail-btn:active { transform: scale(0.94); background: var(--gold-glow); }

.ccm-rail-call {
  background: var(--gold-glow);
  border-color: var(--gold-border);
  color: var(--gold);
}
.ccm-rail-call:active { background: var(--gold); color: #fff; }

.ccm-rail-wa {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}
.ccm-rail-wa:active { filter: brightness(0.94); }

.ccm-rail-sms {
  background: var(--info-bg, var(--bg-elevated));
  border-color: var(--border);
  color: var(--info, var(--text-primary));
}

.ccm-rail-more {
  margin-inline-start: auto; /* push ⋯ to the trailing edge */
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-secondary);
}

/* P2-M17: status reason mini-pill on collapsed mobile card (next to name) */
.ccm-reason-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
  flex-shrink: 1;
  min-width: 0;
}

.ccm-reason-pill strong {
  font-weight: 700;
  font-size: 11px;
}

.ccm-reason-emoji {
  font-size: 12px;
  line-height: 1;
}

.ccm-reason-sep { opacity: 0.5; }

.ccm-reason-suffix {
  font-weight: 500;
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccm-reason-HOT  { background: var(--danger-bg);  color: var(--danger); }
.ccm-reason-WARM { background: var(--warning-bg); color: var(--warning); }
.ccm-reason-COLD { background: var(--info-bg);    color: var(--info); }

/* Loosen the name row so the reason pill fits */
.customer-card-mobile .ccm-name-row {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* P1-M11: Mobile filter pill (single row) + desktop 3-row hide-on-mobile */
.filters-mobile-row {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.filters-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.filters-pill.active {
  border-color: var(--gold);
  background: var(--gold-glow);
  color: var(--gold);
}

.filters-pill:active { transform: scale(0.97); }

.filters-clear-link {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 4px;
}

.filters-desktop {
  display: contents;
}

@media (max-width: 820px) {
  .filters-mobile-row { display: flex; }
  .filters-desktop { display: none; }
}

/* P2-D14: Single-row filter chips on desktop (≥1100 px).
   Folds the 3 filter rows into ONE horizontally-scrollable lane,
   no wrap. Mobile keeps the existing dense layout. */
@media (min-width: 1100px) {
  .filters-desktop {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
  }

  .filters-desktop::-webkit-scrollbar { height: 4px; }
  .filters-desktop::-webkit-scrollbar-track { background: transparent; }
  .filters-desktop::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 4px;
  }

  .filters-desktop .filter-tabs {
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
}

/* P1-M11: Filter bottom sheet body */
.filter-sheet { max-height: 88vh; }

.filter-sheet-body {
  padding: 16px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.filter-sheet-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-sheet-group-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.filter-sheet-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-sheet-chip {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.filter-sheet-chip:active { transform: scale(0.96); }

.filter-sheet-chip.sel {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 2px 8px rgba(201, 169, 110, 0.3);
}

.filter-sheet-actions {
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

.filter-sheet-clear {
  flex: 0 0 auto;
  padding: 14px 22px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.filter-sheet-clear:active { background: var(--border); }

.filter-sheet-apply {
  flex: 1;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.filter-sheet-apply:active { filter: brightness(0.94); }

/* StatusInfoSheet — extra chrome on top of OverflowSheet */
.sis-sheet .sis-explain {
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.sis-current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.sis-current-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 14px;
}

.sis-reason {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.sis-row.sel {
  border-color: var(--gold-border);
  background: var(--gold-glow);
}

.sis-row.sel strong { color: var(--gold); }

/* ──────────────────────────────────────────────────────────────
 * P3-D1 — "N נכסים תואמים" gold pill on lead cards
 * ────────────────────────────────────────────────────────────── */
.cc-match-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gold-glow);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.cc-match-pill:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.cc-match-pill strong {
  font-weight: 800;
  font-size: 12px;
}

.cc-match-pill-mobile {
  margin-top: 0;
  padding: 1px 6px;
  font-size: 10px;
  flex-shrink: 0;
}

.cc-match-pill-mobile strong {
  font-size: 11px;
}

/* Tap the customer name to open the detail page */
.customer-name-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

.customer-name-link:hover {
  color: var(--gold);
}

/* Templates button at the top of /customers (and on detail) — gold accent */
.cust-tpl-btn {
  border-color: var(--gold-border) !important;
  color: var(--gold) !important;
  gap: 6px;
}

.cust-tpl-btn:hover {
  background: var(--gold-glow) !important;
}

/* ──────────────────────────────────────────────────────────────
 * P2-D13 — Real sortable table on desktop (≥900 px)
 * ────────────────────────────────────────────────────────────── */
.customer-table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.customer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.customer-table thead tr {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.customer-table .cl-th {
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  user-select: none;
}

.customer-table .cl-th-sortable {
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.customer-table .cl-th-sortable:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.customer-table .cl-th-sortable.sorted {
  color: var(--gold);
}

.customer-table .cl-th-sortable > span {
  margin-inline-end: 4px;
}

.customer-table .cl-sort-icon {
  vertical-align: -1px;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}

.customer-table .cl-sort-icon.active {
  opacity: 1;
  color: var(--gold);
}

.customer-table .cl-th-num {
  text-align: end;
}

.customer-table .cl-th-actions {
  text-align: end;
  direction: ltr;
}

.customer-table .cl-tr {
  height: 44px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.customer-table .cl-tr:last-child { border-bottom: none; }

.customer-table .cl-tr:hover {
  background: var(--bg-elevated);
}

.customer-table .cl-tr:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.customer-table .cl-tr.is-active {
  background: linear-gradient(90deg, var(--gold-glow), transparent 80%);
}

.customer-table .cl-tr.highlight {
  background: var(--gold-glow);
  box-shadow: inset 3px 0 0 var(--gold);
  animation: list-pulse 2s ease-in-out;
}

.customer-table .cl-td {
  padding: 0 14px;
  vertical-align: middle;
  height: 44px;
}

.customer-table .cl-td-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.customer-table .cl-td-name .cl-avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.customer-table .cl-td-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.customer-table .cl-td-actions {
  text-align: end;
  direction: ltr;
}

.customer-table .cl-td-actions .cl-btn {
  margin-inline-start: 2px;
}

.customer-table .cl-match-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--gold-glow);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  margin-inline-start: 6px;
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .customer-table .cl-th-num,
  .customer-table .cl-td-num {
    /* Keep the columns showing but slightly condensed */
    padding: 0 10px;
  }
}

/* B2 — tighter customer card v2 layout */
.customer-card.cc-v2 {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.4;
}

.cc-v2-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  /* Top-aligned so when the right column stacks chips vertically
     (preapproval + stale-lead pill), the avatar + headline don't
     get vertically shoved by the taller column. */
  align-items: start;
  /* Header section never shrinks — the body (notes) absorbs slack
     via flex:1 above. */
  flex-shrink: 0;
}

/* Right-column children stack with consistent gaps when there's
   more than one (preapproval + stale-lead pill). */
.cc-v2-right {
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.cc-v2-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cc-v2-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cc-v2-name strong {
  font-size: 15px;
  color: var(--text-primary);
}

.cc-v2-mid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cc-v2-mid-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
}

.cc-v2-headline {
  color: var(--text-primary);
}

.cc-v2-headline svg { color: var(--gold); flex-shrink: 0; }

.cc-v2-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: var(--bg-elevated, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.cc-v2-chip-budget {
  color: var(--gold);
  border-color: var(--gold-border);
  background: var(--gold-glow);
  font-weight: 600;
}

.cc-v2-match-pill {
  align-self: flex-start;
}

.cc-v2-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.cc-v2-preapproval {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: white;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.cc-v2-preapproval svg { flex-shrink: 0; }

.cc-v2-notes {
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  /* Notes section grows to fill the slack between header and footer
     so cards with short notes stretch out and cards with long notes
     stay capped — every card's footer lands on the same baseline. */
  flex: 1 1 auto;
  min-height: 0;
}

/* The v2 footer was explicitly overriding margin-top:auto from
   .customer-card-footer, which is what pins the action row to the
   bottom. Without that, every card's footer floated at the height of
   its content — visible jaggedness across a grid of cards. Reinherit
   the auto so the footer sits flush with the bottom edge regardless
   of notes height. */
.cc-v2-footer {
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  margin-top: auto;
}

@media (max-width: 700px) {
  .cc-v2-grid {
    grid-template-columns: auto 1fr;
  }
  .cc-v2-right {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ============================================================
   UX review F-2 · F-7 · F-11 · F-17 — polish pass
   ============================================================ */

/* WhatsApp button on the desktop customer card footer. Previously a
   bold green fill that towered over the neighboring phone + overflow
   chips; reads unprofessionally on cards that are otherwise
   low-chrome. Switched to a ghost chip (transparent background,
   standard border radius, the green lives in the icon + text) so it
   matches the button rhythm of the rest of the lead card and the
   surrounding asset cards. */
.btn.btn-wa {
  background: var(--bg-card);
  color: #15803d;
  border: 1px solid var(--border);
  font-weight: 600;
  gap: 6px;
}
.btn.btn-wa:hover {
  background: var(--bg-card-hover);
  border-color: #25D366;
  color: #15803d;
}
.btn.btn-wa:active { background: rgba(37, 211, 102, 0.08); }
.btn.btn-wa svg { color: #25D366; }
/* Dark-mode: same ghost shape, brighter accent so the green icon
   remains visible on the dark card surface. */
[data-theme="dark"] .btn.btn-wa {
  color: #4ade80;
}
[data-theme="dark"] .btn.btn-wa svg { color: #4ade80; }

/* F-7 — "extra-large" rail: SMS gone → remaining 3 slots get more
   generous targets (56×56) with a label under WhatsApp so agents can
   confirm which of the 3 looks like which. */
.ccm-rail-xl {
  gap: 14px;
}
.ccm-rail-xl .ccm-rail-btn {
  min-width: 56px;
  min-height: 56px;
}
.ccm-rail-xl .ccm-rail-wa {
  background: #25D366;
  color: white;
  border-color: #1DA851;
  flex: 1 1 auto;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
  min-width: 96px;
}
.ccm-rail-xl .ccm-rail-wa svg { color: white; }
.ccm-rail-xl .ccm-rail-label {
  font-size: 11px;
  font-weight: 700;
  color: white;
  line-height: 1;
}

/* F-11 — RoomsInlinePicker popover */
.rooms-inline { position: relative; display: inline-block; }
.rooms-inline-pop {
  position: absolute;
  z-index: 30;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 10px;
  min-width: 240px;
}
.rooms-inline-clear {
  margin-top: 8px;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.rooms-inline-clear:hover { background: var(--bg-card-hover); }

/* F-17 — clickable stale-lead pill in the customer TABLE cell (parity
   with the card view's red pill). */
.cl-stale-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}
.cl-stale-pill:hover {
  background: color-mix(in srgb, var(--danger) 14%, var(--bg-card));
}

/* ─── Sprint 2 C2 + Sprint 7 B3/B4 additions ──────────────────────
 * Header toolbar hosts three new controls (advanced filter, saved-
 * search menu, favorites toggle). Count pill echoes the number of
 * active filters on the trigger. Star aligns with the card name. */

.cust-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-inline-start: 4px;
  border-radius: 999px;
  background: var(--gold, #d4a017);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.btn-ghost.is-active {
  background: var(--gold-soft, color-mix(in srgb, var(--gold, #d4a017) 18%, transparent));
  color: var(--gold-strong, #b8890f);
}

.cc-v2-name-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ─── Phase 4 Lane 3 / C4 — seriousness chip + popover ─────────────
 * Small chip next to the status picker. Opens a Portal-mounted
 * popover anchored to the chip. Four color tiers communicate the
 * NONE → VERY scale without icons (to stay compact on the card). */

.seriousness-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-inline-start: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}
.seriousness-chip:hover { background: var(--bg-card-hover); }
.seriousness-chip:focus-visible {
  outline: 2px solid var(--gold, #d4a017);
  outline-offset: 2px;
}
.seriousness-none {
  color: var(--text-muted);
}
.seriousness-sort_of {
  color: var(--text);
  border-color: color-mix(in srgb, var(--warning, #d4a017) 35%, var(--border));
}
.seriousness-medium {
  color: var(--warning, #b8890f);
  border-color: color-mix(in srgb, var(--warning, #d4a017) 55%, var(--border));
  background: color-mix(in srgb, var(--warning, #d4a017) 10%, var(--bg-card));
}
.seriousness-very {
  color: var(--success, #1a7f4e);
  border-color: color-mix(in srgb, var(--success, #1a7f4e) 55%, var(--border));
  background: color-mix(in srgb, var(--success, #1a7f4e) 12%, var(--bg-card));
}

.seriousness-pop {
  min-width: 160px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
}
.seriousness-pop-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 2px 6px 6px;
  text-transform: none;
}
.seriousness-pop-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.seriousness-pop-item {
  text-align: start;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.seriousness-pop-item:hover,
.seriousness-pop-item:focus-visible {
  background: var(--bg-card-hover);
  outline: none;
}
.seriousness-pop-item.active {
  background: color-mix(in srgb, var(--gold, #d4a017) 18%, transparent);
  color: var(--gold-strong, #b8890f);
  font-weight: 700;
}

/* ─── Phase 4 Lane 3 / L3 — inline lead description edit ───────── */

.customer-description,
.customer-description.cc-v2-description {
  margin-top: 8px;
}
.lead-description {
  display: inline-block;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
}
.lead-description:hover,
.lead-description:focus-visible {
  background: var(--bg-card-hover);
  outline: none;
}
.lead-description.is-empty {
  color: var(--text-muted);
  font-style: italic;
}
.lead-description-input {
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.lead-description-input:focus-visible {
  outline: 2px solid var(--gold, #d4a017);
  outline-offset: 1px;
}


/* L-A — inline AdvancedFilters panel toggle. Matches the properties
   page's "סינון מתקדם" affordance (N-11). Sits between the filter
   strip and the list body. */
.customers-adv-toggle {
  display: flex;
  justify-content: flex-end;
  margin-block: 8px 4px;
  padding-inline: 4px;
}
.customers-adv-toggle .btn.is-active {
  background: var(--gold-glow);
  color: var(--text-primary);
}

/* MatchingList — scoped styles. Rows are link-wrapped for quick nav. */

.matching-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  padding: 16px;
}

.ml-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ml-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
}

.ml-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  border-radius: 10px;
  background: var(--gold-soft, rgba(212, 175, 55, 0.15));
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
}

/* 3-source picker (מערכת / יד2 / קולגות) inside lead matches. */
.ml-sources {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--bg-elevated, rgba(30, 26, 20, 0.04));
  border: 1px solid var(--border);
}
.ml-source-pill {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
}
.ml-source-pill:hover { color: var(--text-primary); }
.ml-source-pill.sel {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(30, 26, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ml-loading,
.ml-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  padding: 12px 4px;
  font-size: 13px;
}
.ml-error { color: var(--danger, #b00020); }

.ml-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.ml-row-link {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  text-decoration: none;
  color: inherit;
}
.ml-row-link:hover { border-color: var(--gold); background: var(--bg-hover, rgba(0, 0, 0, 0.02)); }
.ml-row-static { cursor: default; }
.ml-row-static:hover { border-color: var(--border); background: var(--bg-card); }

.ml-score {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  flex-shrink: 0;
  min-width: 44px;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.04));
  color: var(--text-muted);
}
.ml-score .ml-score-pct { font-size: 10px; margin-inline-start: 1px; }
.ml-score-hot { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.ml-score-warm { background: rgba(234, 179, 8, 0.18); color: #a16207; }
.ml-score-cold { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }

.ml-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.ml-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.ml-sub { font-size: 12px; color: var(--text-muted); }

.ml-reasons {
  list-style: disc;
  padding-inline-start: 18px;
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}
.ml-reasons li { margin: 1px 0; }
.kbov-back {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(10, 10, 15, 0.55);
  backdrop-filter: blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: kbov-fade 0.18s ease;
}

@keyframes kbov-fade { from { opacity: 0; } to { opacity: 1; } }

.kbov-card {
  width: 100%;
  max-width: 720px;
  max-height: 84vh;
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 22px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.28),
    0 8px 22px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: kbov-pop 0.32s cubic-bezier(0.2, 1.1, 0.4, 1);
}

@keyframes kbov-pop {
  from { transform: scale(0.96) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.kbov-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}

.kbov-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--gold-glow);
  color: var(--gold);
  border: 1px solid var(--gold-border);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.kbov-head h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--text-primary);
}

.kbov-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.kbov-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}

.kbov-section h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.kbov-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kbov-section li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  transition: background 0.14s, border-color 0.14s;
}

.kbov-section li:hover {
  background: var(--gold-glow);
  border-color: var(--gold-border);
}

.kbov-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kbov-keys > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kbov-keys em {
  font-style: normal;
  font-size: 9.5px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.kbov-keys kbd,
.kbov-foot kbd {
  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  color: var(--text-primary);
  min-width: 22px;
  text-align: center;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.kbov-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-primary);
  text-align: end;
}

.kbov-foot {
  padding: 12px 22px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

@media (max-width: 700px) {
  .kbov-grid { grid-template-columns: 1fr; }
}
/* ChatWidget — subtle floating button + slide-up panel for the
 * customer ↔ developer chat. Brief: neutral color, no loud badge. */

.chatw-btn {
  position: fixed;
  /* F-2 — stack below the gold QuickCreateFab so the two don't
     overlap. QuickCreateFab anchors at inset-block-end: 28px on
     ≥900px viewports and is 56px tall → chat sits at 28px (its own
     resting bottom) with FAB floating 8px above it (84px inset for
     the FAB). In the 820px–900px band the mobile tab bar is still
     visible (~56px tall), so we lift the chat button above the bar
     with calc(72px + safe-area) — same clearance the FAB uses for
     its mobile anchor. Below 820px the chat launcher is hidden
     entirely (it moved into the mobile header). */
  bottom: calc(72px + env(safe-area-inset-bottom));
  inset-inline-end: 18px;
  /* Below the FAB's z-index (900) — FAB must win if they ever sit
     next to each other; we're one stacking layer behind. */
  z-index: 890;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(30, 26, 20, 0.14);
  transition: color 0.15s, border-color 0.15s, transform 0.1s, background 0.15s;
}

/* F-2 — on viewports wider than the mobile tab bar breakpoint (≥900px)
   the QuickCreateFab uses its desktop anchor (28px / 28px). Keep chat
   at the same inset-inline-end so they stack on a single column; chat
   stays at bottom: 18px (roughly the tab-bar-less resting spot) and
   the FAB floats above via its own CSS. Nothing to do here beyond
   matching the inset-inline-end so the two buttons share a column. */
@media (min-width: 900px) {
  .chatw-btn {
    inset-inline-end: 28px;
    bottom: 28px;
  }
}

/* Task 1 — On mobile the standalone fixed chat button used to sit on
   top of the mobile-header's profile pill (same top-right corner),
   visually clipping the avatar AND drifting out of vertical alignment
   because it wasn't part of the header's flex row. The mobile entry
   point is now rendered inside the header trailing slot in Layout.jsx
   (next to search + profile), so the standalone button hides at ≤820px.
   The panel itself still mounts here via Portal — only the launcher
   moves. */
@media (max-width: 820px) {
  .chatw-btn {
    display: none !important;
  }
}
.chatw-btn:hover  { color: var(--gold); border-color: var(--gold-border); background: var(--gold-glow); }
.chatw-btn:active { transform: scale(0.94); }
.chatw-btn.has-dot { color: var(--gold); border-color: var(--gold-border); }

/* Subtle new-message indicator: a small gold dot. No counts, no pulse. */
.chatw-dot {
  position: absolute;
  top: 9px;
  inset-inline-end: 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg-card);
}

/* Panel */
.chatw-panel-wrap {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
}
.chatw-panel {
  position: absolute;
  bottom: calc(78px + env(safe-area-inset-bottom));
  inset-inline-end: 18px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100dvh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(30, 26, 20, 0.18);
  overflow: hidden;
  pointer-events: auto;
  animation: chatw-rise 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes chatw-rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 640px) {
  .chatw-panel {
    inset-inline-end: 12px;
    inset-inline-start: 12px;
    width: auto;
    /* Mobile button is at the top — open the panel just below it. */
    top: calc(68px + env(safe-area-inset-top));
    bottom: calc(12px + env(safe-area-inset-bottom));
    height: auto;
    max-height: none;
    animation: chatw-rise-top 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes chatw-rise-top {
    from { transform: translateY(-14px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }
}

.chatw-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.chatw-head strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  display: block;
}
.chatw-head span {
  font-size: 11.5px;
  color: var(--text-muted);
}
.chatw-close {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
}
.chatw-close:hover { background: var(--bg-card); color: var(--text-primary); }

.chatw-welcome {
  padding: 14px 16px;
  background: var(--gold-glow);
  border-bottom: 1px solid var(--gold-border);
}
.chatw-welcome p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
}

.chatw-list {
  flex: 1 1 auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  background: var(--bg-primary);
}

.chatw-msg { display: flex; flex-direction: column; max-width: 82%; gap: 2px; }
.chatw-msg.is-me    { align-self: flex-end; align-items: flex-end; }
.chatw-msg.is-admin { align-self: flex-start; align-items: flex-start; }

.chatw-bubble {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.chatw-msg.is-me .chatw-bubble {
  background: var(--gold);
  color: #1a1409;
  border-bottom-right-radius: 4px;
}
.chatw-msg.is-admin .chatw-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.chatw-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  padding: 0 4px;
}
.chatw-meta time { direction: ltr; unicode-bidi: plaintext; }

.chatw-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.chatw-compose textarea {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-elevated);
  resize: none;
  max-height: 140px;
  min-height: 40px;
  outline: none;
}
.chatw-compose textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.chatw-compose button {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  color: #1a1409;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s;
}
.chatw-compose button:disabled { opacity: 0.5; cursor: default; }
.chatw-compose button:hover:not(:disabled) { filter: brightness(1.05); }

/* Hide chat widget when the onboarding tour overlay is up so the tour's
   spotlight isn't competing with the chat button. Joyride uses
   .react-joyride__spotlight — we piggy-back on its presence. */
body:has(.react-joyride__spotlight) .chatw-btn,
body:has(.react-joyride__tooltip) .chatw-btn {
  opacity: 0.3;
  pointer-events: none;
}

/* DT-4 — bound bubble width so a long unbroken token (URL, file name)
   never blows the chat panel out horizontally. The wrapper already
   caps at 82%, but bubbles with no spaces could otherwise force the
   parent flex item past its share. word-break covers languages /
   tokens that lack natural break opportunities (e.g. long URLs). */
.chatw-bubble {
  max-width: 85%;
  word-break: break-word;
}
/* App-level resets - minimal */
.reb-root {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-primary, #f7f3ec);
  color: var(--text-primary, #1e1a14);
  font-family: var(--font-body, 'Heebo', system-ui);
}

.reb-card {
  max-width: 460px;
  width: 100%;
  padding: 32px 28px 24px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, rgba(30,26,20,0.08));
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(30,26,20,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.reb-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--danger-bg, #fdecea);
  color: var(--danger, #b83f2a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.reb-card h1 {
  font-family: var(--font-display, 'Frank Ruhl Libre', serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.1px;
  margin: 0;
}

.reb-card p {
  color: var(--text-muted, #6b6356);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 8px;
}

.reb-actions {
  display: inline-flex;
  gap: 8px;
  margin-top: 4px;
}

.reb-retry {
  margin-top: 8px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted, #6b6356);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}