/* ══════════════════════════════════════════════════════
   JM UI v2 — the Marketing tab in the style of the client demo
   (hq.janszenmedia.com/demo). STYLE ONLY: every element, column and
   text preview stays where the Marketing tab always had it.
   v1.6.68: Tickets, Leads (CRM) and Contacts are back on their original
   look; this sheet now only dresses the Marketing tab (team + clients)
   and the client portal sidebar.
   Uses the HQ theme tokens (--surf, --b1, --txt, --hi, --mu…) so it works
   in dark AND light mode.
   ══════════════════════════════════════════════════════ */
:root {
  --jx-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --jx-card: linear-gradient(180deg, rgba(26,26,40,.88), rgba(14,14,24,.92));
  --jx-card-bd: rgba(255,255,255,.12);
  --jx-card-sh: 0 24px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
  --jx-soft: rgba(255,255,255,.03);
  --jx-new: #5b9bff; --jx-contacted: #22d3ee; --jx-booked: #c084fc; --jx-qualified: #38bdf8; --jx-quote: #f5b84b;
  --jx-notq: #8d9aab; --jx-sold: #4ade80; --jx-lost: #f87171; --jx-spam: #8d9aab; --jx-test: #a78bfa;
}
:root[data-theme="light"] {
  --jx-card: var(--surf);
  --jx-card-bd: var(--b1);
  --jx-card-sh: 0 10px 30px rgba(15,23,42,.06);
  --jx-soft: rgba(15,23,42,.025);
  --jx-new: #2563eb; --jx-contacted: #0891b2; --jx-booked: #9333ea; --jx-qualified: #0284c7; --jx-quote: #b45309;
  --jx-notq: #64748b; --jx-sold: #15803d; --jx-lost: #dc2626; --jx-spam: #64748b; --jx-test: #7c3aed;
}

/* ══════════ client portal sidebar (like the demo's) ══════════ */
#client-nav .ni { display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 0 14px; margin: 2px 6px; border-radius: 13px; font-weight: 600; font-size: 14.5px; color: var(--txt); }
#client-nav .ni .ni-ic { display: inline-flex; width: 20px; justify-content: center; opacity: .85; }
#client-nav .ni .ni-ic svg { width: 20px; height: 20px; }
#client-nav .ni:hover { background: var(--jx-soft); }
#client-nav .ni.on { background: linear-gradient(90deg, rgba(248,107,37,.22), rgba(248,107,37,.04)); color: var(--hi); box-shadow: inset 3px 0 0 var(--orange); }
#client-nav .ni .ct { margin-left: auto; font-family: var(--jx-mono); font-size: 11.5px; color: var(--mu); }

/* ══════════ Marketing detail header + tab row ══════════ */
.mk-detail-header { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 22px !important; }
.jx-mh-title { font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1.08; color: var(--hi); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jx-mh-sub { font-family: var(--jx-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mu); margin-top: 10px; }
.mk-detail-header-actions .btn { border-radius: 11px; }
.mk-detail-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--b1); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; }
.mk-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 2px 13px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--mu); cursor: pointer; white-space: nowrap; }
.mk-tab:hover { color: var(--txt); }
.mk-tab.on { color: var(--hi); border-bottom-color: var(--orange); }
.mk-tab .n { font-family: var(--jx-mono); font-size: 11px; color: var(--mu); margin-left: 7px; font-weight: 500; }
.mk-tab.on .n { color: var(--orange); }

/* ══════════ shared card look ══════════ */
.jx-card { background: var(--jx-card); border: 1px solid var(--jx-card-bd); border-radius: 20px; box-shadow: var(--jx-card-sh); }

/* ── source tabs ── */
.jx-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.jx-tab.mk-leadcat { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--b2); background: transparent; color: var(--txt);
  font: inherit; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.jx-tab.mk-leadcat:hover { border-color: var(--orange); }
.jx-tab .jx-n { font-family: var(--jx-mono); font-size: 11.5px; color: var(--mu); font-weight: 500; }
.jx-tab.on { border-color: var(--orange); background: var(--od); color: var(--hi); }
.jx-tab.on.trash { border-color: var(--red); background: var(--rd); }

/* ── filter bar (search, Add Lead, Import CSV, filters, List | Cards) ── */
.jx-fbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px; margin-bottom: 16px; }
.jx-fbar .jx-in { flex: 1 1 220px; min-width: 150px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--surf2); border: 1px solid var(--b1); color: var(--hi); font: inherit; font-size: 14px; outline: none; }
.jx-fbar .jx-in:focus { border-color: var(--orange); }
.jx-fbar .jx-sel { height: 42px; padding: 0 34px 0 13px; border-radius: 12px; background-color: var(--surf2); border: 1px solid var(--b1); color: var(--hi); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; min-width: 0;
  -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mu) 50%), linear-gradient(135deg, var(--mu) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.jx-btn-p { height: 42px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--orange); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.jx-btn-p:hover { filter: brightness(1.08); }
.jx-btn-o { height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--b2); background: transparent; color: var(--txt); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.jx-btn-o:hover { border-color: var(--orange); }
.jx-vt { display: inline-flex; margin-left: auto; border: 1px solid var(--b2); border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.jx-vt button { height: 40px; padding: 0 15px; background: transparent; border: 0; color: var(--mu); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.jx-vt button.on { background: var(--od); color: var(--orange); }

/* ── "needs tagging" banner ── */
.jx-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 18px; border-radius: 16px; margin-bottom: 16px;
  background: var(--bd); border: 1px solid color-mix(in srgb, var(--jx-new) 45%, transparent); font-size: 14px; color: var(--hi); }
.jx-banner .jx-ic { color: var(--jx-new); display: inline-flex; }
.jx-banner .jx-sub { color: var(--mu); }
.jx-banner .jx-go { margin-left: auto; font-family: var(--jx-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px;
  border-radius: 9px; border: 1px solid var(--b2); background: transparent; color: var(--hi); cursor: pointer; }
.jx-banner .jx-go:hover { border-color: var(--jx-new); }

/* ══════════ Marketing → Leads table — every original column:
   Status · Customer · Source · Email · Phone · Address · Message · Received.
   Like the original, columns compress + ellipsis (full text in the tooltip)
   instead of dropping out; headings never overlap. ══════════ */
.jx-ltable { background: var(--jx-card); border: 1px solid var(--jx-card-bd); border-radius: 22px; padding: 6px 12px 10px; box-shadow: var(--jx-card-sh); }
.jx-lhead, .jx-lrow { display: grid; grid-template-columns: 142px minmax(110px, 1.25fr) 134px minmax(0, 1.15fr) 112px minmax(0, 1fr) minmax(0, 1.3fr) 124px; gap: 10px; align-items: center; }
.jx-lhead { padding: 14px 12px 10px; font-family: var(--jx-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--mu); }
.jx-lhead > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jx-lhead .mk-leadsorth { cursor: pointer; user-select: none; }
.jx-lhead .mk-leadsorth.on { color: var(--orange); }
.jx-lrow { min-height: 60px; padding: 8px 12px; border-radius: 14px; border-bottom: 1px solid var(--b1); cursor: pointer; transition: background .12s; }
.jx-lrow:last-child { border-bottom: 0; }
.jx-lrow:hover { background: var(--surf2); }
.jx-lrow.is-spam { opacity: .62; }
.jx-lrow > * { min-width: 0; }
.jx-nm { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.jx-nm .jx-name { font-size: 14.5px; font-weight: 600; color: var(--hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jx-badges { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.jx-badges > span { font-size: 10px !important; }
.jx-src { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; color: var(--txt); flex-wrap: wrap; row-gap: 4px; }
.jx-src .jx-sic { display: inline-flex; flex: none; }
.jx-src .jx-slabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-bottom: 1px dashed transparent; min-width: 0; }
.jx-src .jx-slabel:hover { border-bottom-color: currentColor; }
.jx-em, .jx-ph, .jx-ad, .jx-dt { font-size: 13px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jx-em { color: var(--mu); }
.jx-ms { font-size: 13px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jx-dt { font-size: 12.5px; }
.jx-meta, .jx-foot2 { display: none; }
.jx-foot { margin-top: 12px; text-align: center; font-family: var(--jx-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mu2, var(--mu)); }

/* status pill (a styled <select>) */
select.jx-st { height: 30px; padding: 0 24px 0 26px; border-radius: 999px; border: 1.5px solid currentColor; background-color: transparent; color: var(--jx-new);
  font: inherit; font-size: 12px; font-weight: 650; outline: none; cursor: pointer; max-width: 100%; -webkit-appearance: none; appearance: none;
  background-image: radial-gradient(circle at 13px 50%, currentColor 0 3.6px, transparent 4.2px), linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: 0 0, calc(100% - 13px) 52%, calc(100% - 8.5px) 52%; background-size: 100% 100%, 4.5px 4.5px, 4.5px 4.5px; background-repeat: no-repeat; }
select.jx-st option { color: var(--hi); background: var(--surf); }
select.jx-st[data-s="contacted"] { color: var(--jx-contacted); }
select.jx-st[data-s="booked"] { color: var(--jx-booked); }
select.jx-st[data-s="qualified"] { color: var(--jx-qualified); }
select.jx-st[data-s="sent_quote"] { color: var(--jx-quote); }
select.jx-st[data-s="not_qualified"] { color: var(--jx-notq); }
select.jx-st[data-s="closed"] { color: var(--jx-sold); }
select.jx-st[data-s="lost"] { color: var(--jx-lost); }
select.jx-st[data-s="spam"] { color: var(--jx-spam); }
select.jx-st[data-s="test"] { color: var(--jx-test); }

/* ── cards view: same content, demo card look ── */
.mk-lead-card { background: var(--jx-card) !important; border-color: var(--jx-card-bd) !important; border-radius: 20px !important; padding: 18px !important; box-shadow: var(--jx-card-sh); }
.mk-lead-card:hover { border-color: var(--orange) !important; }

/* ══════════ lead window (same sections, demo look) ══════════ */
.modal.jx-lmodal { background: var(--jx-card); border: 1px solid var(--jx-card-bd); border-radius: 24px; box-shadow: 0 40px 120px rgba(0,0,0,.5); }
.jx-lmodal .mo-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.jx-lsec { background: var(--jx-soft) !important; border-radius: 16px !important; padding: 14px 18px !important; }

/* ══════════ reports / requests / client settings ══════════ */
.jx-rcard { background: var(--jx-card) !important; border: 1px solid var(--jx-card-bd) !important; border-radius: 20px !important; padding: 18px 22px !important; box-shadow: var(--jx-card-sh); }
.jx-rcard:hover { border-color: var(--orange) !important; }
.jx-panel { background: var(--jx-card) !important; border: 1px solid var(--jx-card-bd) !important; border-radius: 20px !important; padding: 20px 24px !important; box-shadow: var(--jx-card-sh); }
.jx-req { border-radius: 18px !important; padding: 18px 20px !important; box-shadow: var(--jx-card-sh); }
.jx-set .set-card { background: var(--jx-card); border: 1px solid var(--jx-card-bd); border-radius: 20px; padding: 18px 22px; box-shadow: var(--jx-card-sh); }

/* ══════════ phone ══════════ */
@media (max-width: 768px) {
  .jx-mh-title { font-size: 26px; }
  .mk-detail-tabs { gap: 20px; }
  .jx-lhead { display: none; }
  .jx-ltable { background: none; border: 0; box-shadow: none; padding: 0; display: grid; gap: 12px; }
  /* each lead is a card — the same fields the original phone card showed:
     name + status, phone + source, message, then date + address */
  .jx-lrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm st" "meta meta" "ms ms" "ft ft"; gap: 6px 10px;
    padding: 16px; min-height: 0; border: 1px solid var(--jx-card-bd); border-radius: 20px; background: var(--jx-card); box-shadow: var(--jx-card-sh); }
  .jx-lrow:last-child { border-bottom: 1px solid var(--jx-card-bd); }
  .jx-nm { grid-area: nm; } .jx-nm .jx-name { font-size: 16.5px; }
  .jx-lrow .c-st { grid-area: st; justify-self: end; }
  .jx-src, .jx-ph, .jx-em, .jx-ad, .jx-dt { display: none; }
  .jx-meta { grid-area: meta; display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--mu); min-width: 0; flex-wrap: wrap; }
  .jx-meta .jx-sic { display: inline-flex; }
  .jx-ms { grid-area: ms; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--txt); font-size: 14px; line-height: 1.4; }
  .jx-foot2 { grid-area: ft; display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--mu); min-width: 0; }
  .jx-foot2 span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
  .jx-foot2 span:first-child { white-space: nowrap; flex-shrink: 0; }
  /* the mobile form-floor would blow the pill up to 44px — keep it a pill */
  select.jx-st.mk-status-pill { min-height: 0 !important; height: 30px !important; font-size: 12.5px !important; padding: 0 24px 0 26px !important; }
  .jx-banner { font-size: 13.5px; } .jx-banner .jx-sub { display: none; }
  .jx-tab.mk-leadcat { height: 36px; padding: 0 14px; font-size: 13px; }
  .jx-fbar { padding: 10px; } .jx-fbar .jx-in { flex-basis: 100%; } .jx-fbar .jx-sel { flex: 1 1 40%; } .jx-vt { margin-left: 0; }
  .jx-fbar .jx-btn-p, .jx-fbar .jx-btn-o, .jx-fbar .jx-sel, .jx-fbar .jx-in { min-height: 42px !important; font-size: 14px !important; }
  /* page headers: a long <option> (e.g. the Industry filter) made the select —
     and the whole header row — wider than the phone, so the page slid sideways */
  .ph-row > * { min-width: 0; max-width: 100%; }
  .ph-row select { max-width: 100%; }
}