/* ==========================================================================
   Eclat CRM theme — built on Bootstrap 5.3. No inline styles anywhere
   (the security policy blocks them), so every look lives here.
   ========================================================================== */
:root {
    --brand: #1565c0;
    --brand-600: #0f56a8;
    --brand-700: #0d47a1;
    --brand-50: #eaf2fd;
    --navy: #0a1730;
    --navy-2: #102347;
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #64748b;
    --line: #e5e9f2;
    --canvas: #f3f5fa;
    --card: #ffffff;
    --ok: #15803d;   --ok-bg: #dcfce7;
    --warn: #a16207; --warn-bg: #fef3c7;
    --bad: #b91c1c;  --bad-bg: #fee2e2;
    --info: #0e7490; --info-bg: #cffafe;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -18px rgba(15, 23, 42, .18);
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --bs-body-font-family: var(--font);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--canvas);
    --bs-border-color: var(--line);
    --bs-primary: var(--brand);
    --bs-primary-rgb: 21, 101, 192;
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 21, 101, 192;
    --bs-link-hover-color: var(--brand-700);
    --bs-link-hover-color-rgb: 13, 71, 161;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
}

body { background: var(--canvas); font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.ic { width: 18px; height: 18px; flex: none; }

/* ---------- App shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
    --bs-offcanvas-width: 264px;
    --bs-offcanvas-bg: var(--navy);
    width: 264px; flex: none;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%) !important;
    color: #cbd5e1;
    display: flex; flex-direction: column;
}
@media (min-width: 992px) {
    .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.brand { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.25rem 1rem; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: linear-gradient(135deg, #3b8cff, var(--brand-700));
    color: #fff; font-weight: 800; font-size: 1.15rem; box-shadow: 0 6px 18px -6px rgba(59, 140, 255, .7);
}
.brand-name { color: #fff; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.brand-sub { font-size: .75rem; color: #8ea3c4; }

.side-nav { padding: .5rem .75rem; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #6f86ab; padding: 1rem .75rem .35rem; }
.side-link {
    display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 10px;
    color: #c4d0e3; font-weight: 500; font-size: .93rem; position: relative;
    transition: background .15s, color .15s;
}
.side-link:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.side-link.active { background: rgba(59, 140, 255, .16); color: #fff; }
.side-link.active::before {
    content: ""; position: absolute; left: -.75rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #4d9bff;
}
.side-link .ic { opacity: .9; }
.side-count {
    margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: grid; place-items: center;
    background: #f59e0b; color: #1f1300; font-size: .72rem; font-weight: 700;
}
.side-foot { padding: .75rem; border-top: 1px solid rgba(255, 255, 255, .07); display: flex; flex-direction: column; gap: .6rem; }
.tour-btn {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .75rem; border-radius: 10px;
    border: 1px dashed rgba(148, 178, 222, .45); background: rgba(59, 140, 255, .08); color: #dbe7f8; font-weight: 500; font-size: .9rem;
}
.tour-btn:hover { background: rgba(59, 140, 255, .18); color: #fff; }
.me { display: flex; align-items: center; gap: .65rem; padding: .35rem .25rem; }
.avatar {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: linear-gradient(135deg, #f59e0b, #ef6c00); color: #fff; font-weight: 700; font-size: .85rem;
}
.me-text { min-width: 0; }
.me-name { color: #fff; font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-role { color: #8ea3c4; font-size: .74rem; }
.icon-btn {
    border: 0; background: transparent; color: inherit; width: 36px; height: 36px; border-radius: 9px;
    display: inline-grid; place-items: center;
}
.sidebar .icon-btn { color: #9fb2cf; }
.sidebar .icon-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem;
    padding: .7rem 1.75rem; background: rgba(243, 245, 250, .82); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.topbar .icon-btn { color: var(--ink-2); }
.topbar .icon-btn:hover { background: #e7ebf3; }
.topbar-title { font-weight: 600; color: var(--ink-2); font-size: .95rem; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.clock-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); }
.clock-chip .ic { width: 15px; height: 15px; }
@media (max-width: 575.98px) { .clock-chip { display: none; } .topbar { padding: .6rem 1rem; } }
.content { padding: 1.5rem 1.75rem 3rem; }
@media (max-width: 575.98px) { .content { padding: 1rem 1rem 3rem; } }

/* ---------- Typography ---------- */
.content h1.h4 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.content h1.h4 .fs-6 { font-weight: 500; }
.small-muted { font-size: .8rem; color: var(--muted); }
.text-muted { color: var(--muted) !important; }
.pre-wrap { white-space: pre-wrap; }
.lede { color: var(--muted); max-width: 70ch; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); }
.card-header {
    background: transparent !important; border-bottom: 1px solid var(--line); padding: .85rem 1.1rem;
    font-weight: 650; font-size: .95rem; letter-spacing: -.005em;
}
.card-header:first-child { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.card-body { padding: 1.1rem; }
.card.border-primary { border-color: #b9d3f5 !important; box-shadow: 0 0 0 3px var(--brand-50), var(--shadow); }
.card.border-warning { border-color: #f6d27a !important; box-shadow: 0 0 0 3px #fff8e6, var(--shadow); }
.card > .table-responsive:last-child, .card > .table-responsive:last-child .table { border-radius: 0 0 var(--radius) var(--radius); }
.card > .table-responsive:first-child { border-radius: var(--radius); }

/* Stat tiles */
.stat-card .card-body { display: flex; gap: .9rem; align-items: center; }
.stat-icon {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
    background: var(--brand-50); color: var(--brand);
}
.stat-icon.green { background: var(--ok-bg); color: var(--ok); }
.stat-icon.amber { background: var(--warn-bg); color: var(--warn); }
.stat-icon.violet { background: #ede9fe; color: #6d28d9; }
.stat-icon .ic { width: 22px; height: 22px; }
.stat-card .num { font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.stat-card .lbl { color: var(--muted); font-size: .82rem; margin-top: .25rem; }

/* Workflow tracker (dashboard) */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; }
@media (max-width: 991.98px) { .flow { grid-template-columns: repeat(2, 1fr); } }
.flow-step {
    position: relative; display: block; padding: 1rem; border-radius: 12px; border: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, #f8fafd); color: var(--ink);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
a.flow-step:hover { text-decoration: none; transform: translateY(-2px); border-color: #b9d3f5; box-shadow: 0 10px 24px -16px rgba(21, 101, 192, .6); }
.flow-num {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700;
    background: var(--brand); color: #fff; margin-bottom: .6rem;
}
.flow-step.danger .flow-num { background: var(--bad); }
.flow-step.done .flow-num { background: var(--ok); }
.flow-count { font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.flow-step.danger .flow-count { color: var(--bad); }
.flow-label { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.flow-who { font-size: .72rem; color: var(--brand-700); font-weight: 600; margin-top: .35rem; text-transform: uppercase; letter-spacing: .06em; }

/* Pipeline bars */
.pipeline-bar { height: 8px; background: #edf1f7; border-radius: 6px; overflow: hidden; }
.pipeline-bar > div { height: 100%; background: linear-gradient(90deg, #4d9bff, var(--brand)); border-radius: 6px; }
.w-pct-0 { width: 0%; }
.stage-badge { width: 92px; }

/* ---------- Tables ---------- */
.table { --bs-table-hover-bg: #f6f9fe; margin-bottom: 0; }
.table > thead th, .table > thead.table-light th {
    background: #f8fafc !important; color: var(--muted); font-size: .72rem; font-weight: 650;
    text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--line); padding-top: .7rem; padding-bottom: .7rem;
    white-space: nowrap;
}
.table td { border-color: #eef1f6; }
.table-sm td, .table-sm th { vertical-align: middle; padding: .6rem .75rem; }
.table td a.fw-semibold { color: var(--ink); }
.table td a.fw-semibold:hover { color: var(--brand); }
tr.in-window { --bs-table-bg: #eefbf2; }
tr.in-window > td { background-color: #eefbf2 !important; }
tr.in-window > td:first-child { box-shadow: inset 3px 0 0 #22c55e; }

/* ---------- Badges (soft) ---------- */
.badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; letter-spacing: .01em; }
.badge.bg-success { background: var(--ok-bg) !important; color: var(--ok) !important; }
.badge.bg-danger { background: var(--bad-bg) !important; color: var(--bad) !important; }
.badge.bg-warning { background: var(--warn-bg) !important; color: var(--warn) !important; }
.badge.bg-info { background: var(--info-bg) !important; color: var(--info) !important; }
.badge.bg-primary { background: var(--brand-50) !important; color: var(--brand-700) !important; }
.badge.bg-secondary { background: #e9edf4 !important; color: #475569 !important; }
.badge.bg-dark { background: #1e293b !important; color: #e2e8f0 !important; }
.badge.bg-light { background: #f8fafc !important; color: var(--ink-2) !important; border-color: var(--line) !important; }

/* ---------- Buttons & forms ---------- */
.btn { font-weight: 550; border-radius: 10px; }
.btn-sm { border-radius: 8px; }
.btn-eclat {
    background: linear-gradient(180deg, #1e74d8, var(--brand-600)); color: #fff; border: 1px solid var(--brand-600);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 6px 14px -8px rgba(21, 101, 192, .8);
}
.btn-eclat:hover, .btn-eclat:focus { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }
/* Bootstrap's pressed/focus-visible/disabled states have no colours for this custom button: set them, so it never shows blank */
.btn-eclat:active, .btn-eclat.active, .btn-eclat:focus-visible, .btn.btn-eclat:first-child:active {
    background: var(--brand-700); color: #fff; border-color: var(--brand-700);
}
.btn-eclat:disabled, .btn-eclat.disabled { background: #9db7d8; color: #fff; border-color: #9db7d8; opacity: 1; }
.btn-soft { background: #fff; border: 1px solid var(--line); color: var(--ink-2); display: inline-flex; align-items: center; gap: .4rem; }
.btn-soft:hover { background: var(--brand-50); border-color: #b9d3f5; color: var(--brand-700); }
.btn-soft .ic { width: 16px; height: 16px; }
.btn-success { --bs-btn-bg: #16a34a; --bs-btn-border-color: #16a34a; --bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d; }
.form-control, .form-select { border-color: #d9dfea; }
.form-control:focus, .form-select:focus { border-color: #7fb0ec; box-shadow: 0 0 0 .22rem rgba(21, 101, 192, .14); }
.form-label { font-weight: 550; color: var(--ink-2); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* ---------- Tabs (segmented) ---------- */
.nav-tabs { border: 0; gap: .4rem; background: #e9edf5; padding: .3rem; border-radius: 12px; display: inline-flex; flex-wrap: wrap; }
.nav-tabs .nav-link {
    border: 0 !important; border-radius: 9px !important; color: var(--ink-2); font-weight: 550; font-size: .9rem; padding: .45rem .9rem;
}
.nav-tabs .nav-link:hover { background: rgba(255, 255, 255, .6); text-decoration: none; }
.nav-tabs .nav-link.active { background: #fff; color: var(--brand-700); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.nav-tabs .badge { margin-left: .25rem; }

/* ---------- Alerts ---------- */
.alert { border-radius: 12px; border-width: 1px; }
.alert-success { background: #effcf3; border-color: #bbf0cc; color: #14532d; }
.alert-danger { background: #fef2f2; border-color: #fbcaca; color: #7f1d1d; }
.alert-warning { background: #fffaeb; border-color: #fbe3a0; color: #713f12; }
.alert-info { background: #eff7ff; border-color: #c4def9; color: #0c3d73; }

/* ---------- Misc existing helpers ---------- */
.timeline-item { border-left: 2px solid var(--line); padding: .25rem 0 .6rem .85rem; margin-left: .3rem; position: relative; }
.timeline-item::before { content: ""; position: absolute; left: -6px; top: .55rem; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; border: 2px solid #fff; }
.timeline-item.call::before { background: var(--brand); }
.qr-box img { width: 200px; height: 200px; image-rendering: pixelated; }
.code-input { letter-spacing: .4em; font-size: 1.4rem; text-align: center; }
/* Validation summaries normally hide themselves with an inline style, which the security policy blocks. */
.validation-summary-valid { display: none; }
details > summary { cursor: pointer; }
.list-group-item { border-color: #eef1f6; }
.pagination { --bs-pagination-border-radius: 8px; }

/* ---------- Sign-in pages ---------- */
body.auth {
    min-height: 100vh;
    background:
        radial-gradient(900px 500px at 10% -10%, rgba(59, 140, 255, .35), transparent 60%),
        radial-gradient(700px 500px at 110% 110%, rgba(245, 158, 11, .18), transparent 60%),
        linear-gradient(160deg, #0a1730 0%, #0f2b5c 100%);
}
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1rem; }
.auth-alert { max-width: 460px; width: 100%; }
.auth-card { width: 100%; max-width: 460px; margin: 0 auto; }
.auth-card .card { border: 0; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.auth-card .card-body { padding: 2rem !important; }
.auth-card h1.h4 { font-weight: 700; letter-spacing: -.02em; }
.auth-card > p, .auth-card > p a { color: #c7d5ec; }
.auth-card > p a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-head { text-align: center; margin-bottom: 1.5rem; }
.auth-logo { height: 46px; }
.auth-tagline { color: #9fb4d6; font-size: .82rem; margin-top: .6rem; letter-spacing: .02em; }
.auth-wrap > .container, .auth-wrap > div:not(.auth-card):not(.alert) { width: 100%; max-width: 760px; }

/* ==========================================================================
   Guided tour
   ========================================================================== */
.tour-veil { position: fixed; inset: 0; z-index: 2000; }
.tour-spot {
    position: fixed; z-index: 2001; border-radius: 12px; pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(8, 18, 38, .62), 0 0 0 3px #4d9bff, 0 0 30px 6px rgba(77, 155, 255, .45);
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.tour-spot.centered { box-shadow: 0 0 0 9999px rgba(8, 18, 38, .62); }
.tour-pop {
    position: fixed; z-index: 2002; width: min(360px, calc(100vw - 24px)); background: #fff; color: var(--ink);
    border-radius: 16px; padding: 1.1rem 1.2rem 1rem; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
    animation: tourIn .2s ease;
}
@keyframes tourIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour-kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); font-weight: 700; }
.tour-title { font-size: 1.08rem; font-weight: 700; margin: .25rem 0 .4rem; letter-spacing: -.01em; }
.tour-text { font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.tour-text strong { color: var(--ink); }
.tour-dots { display: flex; gap: 5px; margin: .9rem 0 .1rem; }
.tour-dots span { width: 6px; height: 6px; border-radius: 3px; background: #d6deea; transition: width .2s; }
.tour-dots span.on { width: 18px; background: var(--brand); }
.tour-actions { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; }
.tour-actions .skip { margin-right: auto; border: 0; background: none; color: var(--muted); font-size: .85rem; padding: 0; }
.tour-actions .skip:hover { color: var(--ink); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-pop, .flow-step { transition: none; animation: none; } }

/* Call queue */
.lead-cell { min-width: 230px; }
.log-col { min-width: 380px; }
.lead-name { font-size: 1rem; }

/* ---------- Content area ---------- */
.content-list { display: grid; gap: 1rem; }
.content-card .card-body { padding: 1.1rem 1.25rem; }
.content-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.content-when { font-weight: 650; color: var(--ink); }
.content-topic { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: .1rem 0 .75rem; }
.post-text {
    background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem;
    font-size: .92rem; line-height: 1.55; max-height: 320px; overflow: auto;
}
.asset-box { border: 1px dashed #c9d5e6; border-radius: 12px; padding: .75rem; background: #fbfcfe; }
.asset-preview { display: block; width: 100%; max-height: 340px; object-fit: contain; border-radius: 8px; background: #eef2f8; }
.asset-file { padding: 1.5rem; text-align: center; color: var(--muted); }
.content-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .85rem; font-size: .8rem; color: var(--muted); }
.chan { font-weight: 600; }
.badge.chan-li { background: #e0edff !important; color: #0a66c2 !important; }
.badge.chan-fb { background: #e7efff !important; color: #1877f2 !important; }
.badge.chan-ig { background: #fde7f3 !important; color: #be185d !important; }
.badge.chan-waqas { background: #fef3c7 !important; color: #92400e !important; }
.bulk-bar { position: sticky; top: 58px; z-index: 5; background: var(--canvas); padding: .5rem 0; }

/* ---------- Collapsible menu (desktop) ---------- */
@media (min-width: 992px) {
    .sidebar { transition: width .2s ease; }
    .sidebar-collapsed .sidebar { width: 78px; }
    .sidebar-collapsed .sidebar .brand { padding: 1.25rem 0 1rem; justify-content: center; }
    .sidebar-collapsed .sidebar .brand > div,
    .sidebar-collapsed .sidebar .nav-label,
    .sidebar-collapsed .sidebar .side-link > span:not(.side-count),
    .sidebar-collapsed .sidebar .tour-btn > span,
    .sidebar-collapsed .sidebar .me-text { display: none; }
    .sidebar-collapsed .sidebar .side-nav { padding: .75rem .6rem; }
    .sidebar-collapsed .sidebar .side-link { justify-content: center; padding: .7rem 0; }
    .sidebar-collapsed .sidebar .side-link .ic { width: 20px; height: 20px; }
    .sidebar-collapsed .sidebar .side-link.active::before { left: -.6rem; }
    .sidebar-collapsed .sidebar .side-count { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; font-size: .65rem; padding: 0 5px; }
    .sidebar-collapsed .sidebar .tour-btn { justify-content: center; padding: .6rem 0; }
    .sidebar-collapsed .sidebar .me { flex-direction: column; gap: .4rem; }
    .sidebar-collapsed .sidebar .me form { margin-left: 0 !important; }
}
#sidebar-toggle { margin-left: -.4rem; }

/* My leads + legends */
tr.mine > td { background-color: #eef5ff !important; }
tr.mine > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.legend { color: var(--muted); }
.legend-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 4px; }
.legend-swatch.mine { background: #eef5ff; box-shadow: inset 3px 0 0 var(--brand); border: 1px solid #cfe0f7; }
.legend-swatch.in-window { background: #eefbf2; box-shadow: inset 3px 0 0 #22c55e; border: 1px solid #c9eed5; }

/* Log-a-call: highlight the follow-up when the client asked for a call back */
#fu-block.fu-required { background: #eef6ff; border: 1px solid #b6d4fe; border-radius: 10px; padding: .5rem .75rem; }
#fu-block .fu-zone { max-width: 14rem; }
.outcome-help td, .outcome-help th { white-space: normal; }

/* Lead status: the stage path New → … → Won */
.stage-path { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.stage-path li { font-size: .75rem; padding: .2rem .55rem; border-radius: 999px; background: #eef1f6; color: #6b7280; }
.stage-path li.done { background: #dcfce7; color: #166534; }
.stage-path li.current { background: #2563eb; color: #fff; font-weight: 600; }
.stage-path li.lost.current { background: #1f2937; }
.status-facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; }
.status-facts dt { font-weight: 600; color: #374151; }
.status-facts dd { margin: 0; }

/* Grids: "Load more" footer and live-search refresh */
.load-more { display: flex; justify-content: center; align-items: center; gap: .75rem; padding: .75rem; color: var(--ink-2, #4b5563); border-top: 1px solid var(--line, #e5e7eb); }
.load-more-link { font-weight: 600; }
[data-live-sync].is-refreshing { opacity: .55; transition: opacity .15s; }
.search-box { position: relative; }
.search-box input { padding-left: 2rem; }
.search-box::before { content: ""; position: absolute; left: .65rem; top: 50%; width: .8rem; height: .8rem; margin-top: -.45rem;
    border: 2px solid #9ca3af; border-radius: 50%; }
.search-box::after { content: ""; position: absolute; left: 1.25rem; top: 50%; width: .35rem; height: 2px; margin-top: .3rem; background: #9ca3af; transform: rotate(45deg); }
tr.row-saved td { background: #f3fbf5 !important; }
tr.row-saved .lead-name { color: #166534; }
.card.row-saved { background: #f3fbf5; border-color: #bbe5c8; }
.timeline-item.archived { opacity: .8; }