/* Feature styles for the CRM data pages (contacts grid, lists, import,
   broadcasts, suppression). Only design tokens from styles.css are used, so
   the look follows the brand and dark mode. Every class is prefixed fx-. */

/* ── Bottom sheets on phones (desktop: a normal centred dialog) ─────────── */
.fx-sheet { width: min(620px, 100%); }
.fx-sheet.wide { width: min(980px, 100%); }
.fx-sheet .modal-b { max-height: none; }
@media (max-width: 640px) {
  .overlay:has(> .fx-sheet) { place-items: end stretch; padding: 0; }
  .fx-sheet, .fx-sheet.wide { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; border-bottom: 0; animation: fx-up .24s var(--ease-out, ease); padding-bottom: env(safe-area-inset-bottom, 0); }
  .fx-sheet::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 8px auto 0; }
  .fx-sheet .modal-f { position: sticky; bottom: 0; background: var(--panel); }
  .fx-sheet .modal-f .btn { flex: 1; }
}
@keyframes fx-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ── 44px touch targets on touch screens ───────────────────────────────── */
@media (pointer: coarse) {
  .fx-page .btn, .fx-sheet .btn, .fx-drawer .btn, .fx-page .chip, .fx-page .input, .fx-sheet .input, .fx-drawer .input, .fx-page select, .fx-sheet select { min-height: 44px; }
  .fx-soc { width: 44px !important; height: 44px !important; }
  .fx-check { width: 44px; height: 44px; }
}

/* The first row of a page sits on the header's curve: give it a solid panel. */
.fx-page > .tabs:first-child, .fx-page > .fx-views:first-child { position: relative; z-index: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 4px 6px; margin-bottom: 10px; }
.fx-page > .tabs:first-child button { padding: 9px 12px; }
.fx-page > .tabs:first-child button.on { border-bottom-color: var(--brand); }
.fx-grid .fx-socials { flex-wrap: nowrap; }
@media (max-width: 760px) { .fx-desktop { display: none; } }

/* ── Toolbar, view chips, filter summary ───────────────────────────────── */
.fx-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-toolbar .fx-search { flex: 1 1 220px; max-width: 360px; }
.fx-views { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.fx-views .chip { white-space: nowrap; font-size: 13px; }
.fx-views .chip .fx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.fx-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 650; }
.fx-menu { position: relative; }
.fx-menu > .dropdown, .fx-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 2px; }
.fx-pop button, .fx-pop a { text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); font: inherit; display: flex; gap: 8px; align-items: center; }
.fx-pop button:hover, .fx-pop a:hover { background: var(--sunken); text-decoration: none; }
.fx-pop .fx-pop-h { font-size: 11.5px; color: var(--mute); padding: 6px 10px 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ── Filter builder (AND / OR groups) ──────────────────────────────────── */
.fx-filter { display: grid; gap: 10px; }
.fx-group { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 12px; padding: 10px; display: grid; gap: 8px; background: var(--panel-2); }
.fx-group .fx-group { border-left-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--panel); }
.fx-group-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.fx-rule { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(120px, 1fr) minmax(140px, 1.3fr) auto; gap: 6px; align-items: center; }
.fx-rule .input { padding: 7px 10px; }
.fx-join { font-size: 11px; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); border-radius: 6px; padding: 1px 7px; justify-self: start; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 700px) { .fx-rule { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fx-rule > :nth-child(3) { grid-column: 1 / -1; } .fx-rule > :last-child { grid-column: 2; justify-self: end; } }

/* ── Bulk action bar ───────────────────────────────────────────────────── */
.fx-bulk { position: sticky; top: 8px; z-index: 20; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--panel); box-shadow: var(--shadow-lg); }
.fx-bulk .btn { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--panel) 30%, transparent); }
.fx-bulk .btn:hover { background: color-mix(in srgb, var(--panel) 12%, transparent); }
.fx-bulk a, .fx-bulk .fx-link { color: inherit; text-decoration: underline; cursor: pointer; background: none; border: 0; font: inherit; }

/* ── Data grid (table on desktop, cards on phones) ─────────────────────── */
.fx-grid { width: 100%; border-collapse: collapse; }
.fx-grid th { position: sticky; top: 0; z-index: 1; }
.fx-grid td { padding: 10px 14px; }
.fx-grid th { padding: 10px 14px; }
.fx-grid tr.on td { background: var(--brand-softer); }
.fx-grid tr.fx-row { cursor: pointer; }
.fx-grid tr.fx-row:hover td { background: var(--panel-2); }
.fx-check { display: inline-grid; place-items: center; cursor: pointer; }
.fx-check input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.fx-name { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.fx-name b { display: block; line-height: 1.25; }
.fx-cards { display: none; }
@media (max-width: 760px) {
  .fx-grid-wrap { display: none; }
  .fx-cards { display: grid; gap: 10px; }
}
.fx-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; box-shadow: var(--shadow-xs, none); }
.fx-card.on { border-color: var(--brand); background: var(--brand-softer); }
.fx-card-h { display: flex; gap: 10px; align-items: center; }
.fx-card-h .grow { cursor: pointer; }
.fx-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; flex-wrap: wrap; }

/* ── Social profile icons & company logos ──────────────────────────────── */
.fx-socials { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.fx-soc { width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center; color: #fff; font: 700 11px/1 Poppins, system-ui, sans-serif; text-decoration: none !important; flex: none; transition: transform .12s var(--ease); }
.fx-soc:hover { transform: translateY(-1px); }
.fx-soc svg { width: 15px; height: 15px; }
.fx-soc.lg { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
.fx-soc.lg svg { width: 19px; height: 19px; }
.fx-soc-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.fx-soc-row:last-child { border-bottom: 0; }
.fx-logo { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: #fff; display: inline-grid; place-items: center; overflow: hidden; flex: none; font-size: 11px; font-weight: 700; color: var(--brand-ink); }
.fx-logo img { width: 100%; height: 100%; object-fit: contain; }
.fx-logo.lg { width: 48px; height: 48px; border-radius: 12px; font-size: 16px; }
.fx-logo.init { background: var(--brand-soft); border-color: transparent; }

/* ── Drawer (contact profile) ──────────────────────────────────────────── */
.fx-drawer { width: min(640px, 100vw); }
.fx-drawer .tabs { margin: 0; padding: 0 16px; position: sticky; top: 0; background: var(--panel); z-index: 2; }
.fx-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.fx-kv > div > .muted { font-size: 12px; }
@media (max-width: 520px) { .fx-kv { grid-template-columns: minmax(0, 1fr); } }
.fx-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-actions .btn { flex-direction: column; gap: 4px; padding: 10px 6px; font-size: 12.5px; }
.fx-timeline { display: grid; gap: 10px; }
.fx-timeline > div { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.fx-rev { font-size: 13px; }
.fx-rev del { color: var(--bad); text-decoration: line-through; opacity: .8; }
.fx-rev ins { color: var(--good); text-decoration: none; }

/* ── Lists ─────────────────────────────────────────────────────────────── */
.fx-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.fx-list { padding: 16px; display: grid; gap: 10px; cursor: pointer; }
.fx-list h3 { display: flex; gap: 8px; align-items: center; }
.fx-bars { display: grid; gap: 6px; }
.fx-bar { display: grid; grid-template-columns: 74px minmax(0, 1fr) 42px; gap: 8px; align-items: center; font-size: 12px; color: var(--mute); }
.fx-bar i { display: block; height: 6px; border-radius: 6px; background: var(--sunken); overflow: hidden; }
.fx-bar i b { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.fx-bar span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ── Import wizard ─────────────────────────────────────────────────────── */
.fx-steps { display: flex; gap: 6px; flex-wrap: wrap; counter-reset: fx; }
.fx-steps span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--sunken); }
.fx-steps span::before { counter-increment: fx; content: counter(fx); width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--panel); border: 1px solid var(--line); font-weight: 650; font-size: 12px; }
.fx-steps span.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.fx-steps span.on::before, .fx-steps span.done::before { background: var(--brand); border-color: var(--brand); color: #fff; }
.fx-map { display: grid; gap: 6px; }
.fx-map-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; }
.fx-map-row .fx-sample { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .fx-map-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ── KPI tiles, funnel and message previews ────────────────────────────── */
.fx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.fx-kpi { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.fx-kpi .k { font-size: 12px; color: var(--mute); font-weight: 550; }
.fx-kpi .v { font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.fx-kpi .d { font-size: 12px; color: var(--mute); }
.fx-kpi.good .v { color: var(--good); } .fx-kpi.bad .v { color: var(--bad); } .fx-kpi.warn .v { color: var(--warn); }
.fx-funnel { display: grid; gap: 8px; }
.fx-funnel > div { display: grid; grid-template-columns: 90px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 13px; }
.fx-funnel i { height: 12px; border-radius: 6px; background: var(--sunken); overflow: hidden; display: block; }
.fx-funnel i b { display: block; height: 100%; background: var(--brand); border-radius: 6px; transition: width .4s var(--ease); }
.fx-funnel span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.fx-phone { max-width: 340px; margin: 0 auto; border: 1px solid var(--line); border-radius: 26px; padding: 16px 12px 22px; background: var(--panel-2); display: grid; gap: 8px; }
.fx-phone .fx-to { text-align: center; font-size: 12px; color: var(--mute); }
.fx-bubble { justify-self: end; max-width: 88%; background: var(--brand); color: #fff; border-radius: 16px 16px 4px 16px; padding: 9px 12px; white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.45; }
.fx-bubble.wa { background: #dcf8c6; color: #111827; }
.fx-email { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.fx-email-h { padding: 10px 14px; border-bottom: 1px solid var(--line-2); font-size: 13px; display: grid; gap: 2px; }
.fx-email-b { padding: 14px; white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.55; max-height: 380px; overflow: auto; }
.fx-merge { display: flex; gap: 4px; flex-wrap: wrap; }
.fx-merge button { font: 12px ui-monospace, Consolas, monospace; border: 1px dashed var(--line); background: var(--panel); border-radius: 6px; padding: 3px 7px; cursor: pointer; color: var(--ink-2); }
.fx-merge button:hover { border-color: var(--brand); color: var(--brand-ink); }
.fx-sandbox { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg, var(--sunken)); color: var(--warn); font-size: 13px; }
.fx-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.fx-split > .fx-side { position: sticky; top: 12px; display: grid; gap: 14px; }
@media (max-width: 980px) { .fx-split { grid-template-columns: minmax(0, 1fr); } .fx-split > .fx-side { position: static; } }
.fx-cost { display: grid; gap: 4px; font-size: 13px; }
.fx-cost > div { display: flex; justify-content: space-between; gap: 10px; }
.fx-cost .fx-total { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; font-weight: 650; font-size: 15px; }
.fx-status { text-transform: capitalize; }
.fx-hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }