/* ============================================================
   Team Work Area — lead manager (v2 light theme)
   ============================================================ */

.work-area-section { padding-top: 40px; }

/* secondary button (v2 only ships btn-primary) */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 22px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.btn-secondary:hover { background: var(--bg-alt); border-color: #d4cdc0; }

/* ── Login ───────────────────────────────────────────────── */
.wa-login {
    max-width: 430px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px;
    box-shadow: 0 10px 40px rgba(12,12,12,0.06);
}
.wa-login-form .form-group { margin-bottom: 18px; }
.wa-remember {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.9rem;
    color: var(--ink-2);
    margin-bottom: 20px;
    cursor: pointer;
}
.wa-remember input { width: 16px; height: 16px; accent-color: var(--blue); }

/* ── Top bar ─────────────────────────────────────────────── */
.wa-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.wa-bar-user { color: var(--ink-2); font-size: 0.95rem; }
.wa-bar-user strong { color: var(--ink); }
.wa-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wa-bar-actions .btn { padding: 11px 20px; }

/* ── Tabs + search ───────────────────────────────────────── */
.wa-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.wa-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
}
.wa-tab span {
    font-size: 0.74rem;
    background: var(--bg-alt);
    color: var(--ink-2);
    padding: 1px 8px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
}
.wa-tab:hover { color: var(--ink); border-color: #d4cdc0; }
.wa-tab.is-active {
    color: var(--white);
    border-color: var(--blue);
    background: var(--blue);
}
.wa-tab.is-active span { background: rgba(255,255,255,0.25); color: var(--white); }
.wa-search {
    margin-left: auto;
    flex: 1 1 220px;
    max-width: 320px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.9rem;
}
.wa-search:focus { outline: none; border-color: var(--blue); }

.wa-people {
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.wa-people:focus { outline: none; border-color: var(--blue); }

/* ── Date navigator ──────────────────────────────────────── */
.wa-datebar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.wa-date-nav {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s var(--ease-out);
}
.wa-date-nav:hover { background: var(--bg-alt); border-color: #d4cdc0; }
.wa-date {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}
.wa-date:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.wa-today {
    padding: 8px 16px;
    border: 1px solid var(--blue);
    border-radius: 10px;
    background: var(--blue-light);
    color: var(--blue-dark);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s var(--ease-out);
}
.wa-today:hover { background: var(--blue); color: var(--white); }
.wa-showall {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s var(--ease-out);
}
.wa-showall:hover { background: var(--bg-alt); border-color: #d4cdc0; color: var(--ink); }
.wa-showall.is-active {
    border-color: var(--blue);
    background: var(--blue-light);
    color: var(--blue-dark);
}
.wa-date-label {
    margin-left: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-2);
}

/* ── Table ───────────────────────────────────────────────── */
.wa-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--white);
}
.wa-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.wa-table thead th {
    text-align: left;
    padding: 12px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.wa-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--bg-alt);
    vertical-align: middle;
}
.wa-row:hover td { background: #faf9f6; }
.wa-col-center { text-align: center; }
.wa-col-toggle { width: 34px; }

.wa-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--ink-2);
    margin-top: 3px;
    white-space: nowrap;
}

/* inputs in the grid */
.wa-input {
    width: 100%;
    min-width: 90px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.88rem;
    transition: all 0.15s var(--ease-out);
}
.wa-input:hover { border-color: var(--border); }
.wa-input:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--blue-light);
}
select.wa-input { cursor: pointer; }
.wa-business { font-weight: 600; }
/* Contact merged under the business name (saves a whole column) */
.wa-contact-inline { font-size: 0.82rem; color: var(--ink-2); margin-top: 1px; font-weight: 400; }
.wa-contact-inline::placeholder { color: var(--border); }

.wa-check { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }

/* status pill select */
.wa-status {
    width: 100%;
    max-width: 138px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.wa-status:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.status-new        { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }
.status-called     { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.status-interested { color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }
.status-quoted     { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.status-won        { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.status-dead       { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

/* expand toggle + delete */
.wa-expand, .wa-delete {
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s var(--ease-out);
}
.wa-expand {
    position: relative;
    width: 26px; height: 26px;
    color: var(--ink-2);
    font-size: 1.3rem;
    line-height: 1;
    transform: rotate(0deg);
}
.wa-expand.has-notes::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue);
}
.wa-expand.is-open { transform: rotate(90deg); color: var(--blue); }
.wa-expand:hover { color: var(--ink); }
.wa-delete {
    width: 28px; height: 28px;
    color: var(--ink-2);
    font-size: 1.25rem;
    line-height: 1;
}
.wa-delete:hover { color: #b91c1c; background: #fef2f2; }

/* detail row */
.wa-detail td { background: var(--bg); padding: 4px 16px 16px !important; }
.wa-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    padding-top: 12px;
}
.wa-detail-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wa-detail-grid .wa-input {
    border-color: var(--border);
    background: var(--white);
    text-transform: none;
    font-weight: 400;
}
.wa-detail-notes { grid-column: 1 / -1; }

.wa-empty { text-align: center; padding: 40px 20px; color: var(--ink-2); }

/* tiny save flash */
.wa-saved { animation: waFlash 0.9s var(--ease-out); }
@keyframes waFlash {
    0% { box-shadow: inset 0 0 0 2px #34d399; }
    100% { box-shadow: inset 0 0 0 0 transparent; }
}

/* ── Add Lead modal ──────────────────────────────────────── */
.wa-modal[hidden] { display: none; }
.wa-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 20px;
    background: rgba(12,12,12,0.45);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}
.wa-modal-card {
    position: relative;
    width: 100%;
    max-width: 600px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 24px 70px rgba(12,12,12,0.22);
}
.wa-modal-card h3 { margin: 0 0 20px; font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); }
.wa-modal-close {
    position: absolute;
    top: 16px; right: 18px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}
.wa-modal-close:hover { color: var(--ink); }
.wa-form-error {
    color: #b91c1c;
    font-size: 0.88rem;
    margin: 0 0 14px;
}

/* ── Responsive: stack rows into cards ───────────────────── */
@media (max-width: 860px) {
    .wa-table-wrap { overflow-x: visible; border: none; background: transparent; }
    .wa-table { min-width: 0; }
    .wa-table thead { display: none; }
    .wa-table, .wa-table tbody { display: block; }

    .wa-row {
        display: block;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 12px 12px 0 0;
        border-bottom: none;
        margin-top: 16px;
        padding: 6px 14px;
    }
    .wa-row:hover td { background: transparent; }
    .wa-row td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: none !important;
        padding: 7px 0;
    }
    .wa-row td[data-label]::before {
        content: attr(data-label);
        font-size: 0.74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ink-2);
        flex: 0 0 auto;
    }
    .wa-row .wa-input, .wa-row .wa-status { max-width: 62%; text-align: right; }
    .wa-col-toggle { display: none; }
    .wa-row td.wa-col-center { justify-content: space-between; }
    .wa-row td.wa-col-center:last-child { justify-content: flex-end; }

    .wa-detail { display: block; }
    .wa-detail[hidden] { display: block; }
    .wa-detail td {
        display: block;
        border: 1px solid var(--border) !important;
        border-top: 1px dashed var(--border) !important;
        border-radius: 0 0 12px 12px;
        padding: 4px 14px 16px !important;
        background: var(--bg);
    }
    .wa-detail-grid .wa-input { max-width: none; text-align: left; }

    .wa-search { margin-left: 0; max-width: none; }
    .wa-workspace-nav { overflow-x: auto; }
    .wa-pages-layout { flex-direction: column; }
    .wa-pages-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 20px; margin-bottom: 20px; }
    .wa-editor-toolbar { overflow-x: auto; }
}

/* ── Workspace navigation ──────────────────────────────── */
.wa-workspace-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    width: fit-content;
}
.wa-workspace-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s var(--ease-out);
    white-space: nowrap;
}
.wa-workspace-tab:hover { color: var(--ink); background: var(--white); }
.wa-workspace-tab.is-active {
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 1px 4px rgba(12,12,12,0.10);
}

/* ── Scratchpad ─────────────────────────────────────────── */
.wa-scratchpad {
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    overflow: hidden;
}
.wa-scratchpad-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 11px 16px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s var(--ease-out);
}
.wa-scratchpad-toggle:hover { color: var(--ink); }
.wa-scratchpad-date-hint { font-weight: 400; font-size: 0.8rem; color: var(--ink-2); }
.wa-scratchpad-arrow {
    margin-left: auto;
    font-size: 1.2rem;
    color: var(--ink-2);
    transition: transform 0.2s var(--ease-out);
}
.wa-scratchpad-toggle.is-open .wa-scratchpad-arrow { transform: rotate(90deg); }
.wa-scratchpad-body {
    padding: 0 14px 14px;
    position: relative;
}
.wa-pad {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.9rem;
    resize: vertical;
    line-height: 1.55;
}
.wa-pad:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.wa-pad-status {
    display: block;
    font-size: 0.76rem;
    color: var(--ink-2);
    margin-top: 5px;
    min-height: 1em;
    transition: opacity 0.3s;
}

/* ── Callback badge ─────────────────────────────────────── */
.wa-callback-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    margin-top: 4px;
    margin-left: 2px;
}
/* the class display rule otherwise overrides the [hidden] attribute the JS toggles */
.wa-callback-badge[hidden] { display: none; }

/* ── Private lead lock button ───────────────────────────── */
.wa-col-actions { white-space: nowrap; }
.wa-private-btn {
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--ink-2);
    transition: all 0.15s var(--ease-out);
    vertical-align: middle;
}
.wa-private-btn::before { content: '🔓'; }
.wa-private-btn.is-private::before { content: '🔒'; }
.wa-private-btn:hover { background: var(--bg-alt); }
.wa-private-btn.is-private { color: var(--blue); }
.is-private-lead td { opacity: 0.8; }

/* ── Pages view layout ──────────────────────────────────── */
.wa-pages-layout {
    display: flex;
    gap: 0;
    min-height: 600px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--white);
    overflow: hidden;
}
.wa-pages-sidebar {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    background: var(--bg);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wa-pages-new-btn { width: 100%; justify-content: center; }
.wa-pages-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.wa-pages-list-empty { font-size: 0.82rem; color: var(--ink-2); text-align: center; padding: 16px 8px; line-height: 1.6; }
.wa-page-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.88rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s var(--ease-out);
}
.wa-page-item:hover { background: var(--border); }
.wa-page-item.is-active { background: var(--white); box-shadow: 0 1px 3px rgba(12,12,12,0.08); }
.wa-page-item-icon { font-size: 1rem; flex-shrink: 0; }
.wa-page-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-page-item-badge { font-size: 0.72rem; flex-shrink: 0; }

/* ── Pages main area ────────────────────────────────────── */
.wa-pages-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.wa-page-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 32px;
    color: var(--ink-2);
    text-align: center;
    line-height: 1.6;
}
.wa-page-empty-icon { font-size: 2.8rem; }
.wa-page-editor-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 36px 36px;
}

/* Page title bar */
.wa-page-titlebar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.wa-page-icon-btn {
    font-size: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 6px;
    line-height: 1;
    transition: background 0.15s;
    flex-shrink: 0;
}
.wa-page-icon-btn:hover { background: var(--bg-alt); }
.wa-page-title-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ink);
    padding: 0;
    line-height: 1.2;
}
.wa-page-title-input:focus { outline: none; }
.wa-page-title-input::placeholder { color: var(--border); }

/* Meta bar: privacy + saved + delete */
.wa-page-metabar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.wa-page-privacy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s var(--ease-out);
}
.wa-page-privacy-btn:hover { border-color: #d4cdc0; color: var(--ink); }
.wa-page-privacy-btn.is-private {
    border-color: var(--blue);
    background: var(--blue-light);
    color: var(--blue-dark);
}
.wa-page-saved-status {
    font-size: 0.78rem;
    color: var(--ink-2);
    margin-left: auto;
    min-width: 40px;
    text-align: right;
}
.wa-page-delete-btn {
    border: none;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.15s var(--ease-out);
    display: flex;
    align-items: center;
}
.wa-page-delete-btn:hover { color: #b91c1c; background: #fef2f2; }

/* Formatting toolbar */
.wa-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.wa-fmt {
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s var(--ease-out);
    white-space: nowrap;
}
.wa-fmt:hover { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(12,12,12,0.08); }
.wa-fmt b, .wa-fmt i, .wa-fmt u { font-style: normal; text-decoration: none; pointer-events: none; }
.wa-fmt-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Content editable area */
.wa-editor-content {
    flex: 1;
    min-height: 320px;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ink);
    caret-color: var(--blue);
}
.wa-editor-content:empty::before {
    content: attr(data-placeholder);
    color: var(--border);
    pointer-events: none;
}
.wa-editor-content h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 1.2em 0 0.4em; color: var(--ink); }
.wa-editor-content h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 1em 0 0.3em; color: var(--ink); }
.wa-editor-content p { margin: 0 0 0.6em; }
.wa-editor-content ul, .wa-editor-content ol { padding-left: 1.4em; margin: 0 0 0.6em; }
.wa-editor-content li { margin-bottom: 0.3em; }
.wa-editor-content hr { border: none; border-top: 1px solid var(--border); margin: 1.4em 0; }
.wa-editor-content b, .wa-editor-content strong { font-weight: 700; }
.wa-editor-content i, .wa-editor-content em { font-style: italic; }
.wa-editor-content u { text-decoration: underline; }

/* Icon picker popover */
.wa-icon-picker {
    position: fixed;
    z-index: 999;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    box-shadow: 0 10px 40px rgba(12,12,12,0.14);
}
.wa-icon-opt {
    font-size: 1.3rem;
    width: 38px; height: 38px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}
.wa-icon-opt:hover { background: var(--bg-alt); }

/* ── Workspace tab badge (meeting count) ────────────────── */
.wa-workspace-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--blue);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
}
.wa-workspace-tab.is-active .wa-workspace-tab-badge { background: rgba(255,255,255,0.3); }

/* ── Meetings view ──────────────────────────────────────── */
.wa-meetings-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.wa-meetings-title    { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.wa-meetings-subtitle { font-size: 0.88rem; color: var(--ink-2); margin: 0; }
.wa-meetings-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    margin-bottom: 10px;
}
.wa-meetings-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-2);
    line-height: 1.6;
}
.wa-meetings-list { display: flex; flex-direction: column; gap: 10px; }

/* Meeting card */
.wa-meeting-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s var(--ease-out);
}
.wa-meeting-card:hover { box-shadow: 0 2px 12px rgba(12,12,12,0.07); }
.wa-meeting-card.is-past { opacity: 0.65; }
.wa-meeting-card.is-past:hover { opacity: 1; }

.wa-meeting-card-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
}

/* Date column */
.wa-meeting-date-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    background: var(--bg-alt);
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    flex-shrink: 0;
}
.wa-meeting-day   { font-size: 1.4rem; font-weight: 700; color: var(--ink); line-height: 1; }
.wa-meeting-month { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.wa-meeting-time  { font-size: 0.72rem; color: var(--blue); font-weight: 600; margin-top: 3px; }

/* Info column */
.wa-meeting-info { flex: 1; min-width: 0; }
.wa-meeting-input {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0;
    margin-bottom: 4px;
}
.wa-meeting-input:focus { outline: none; }
.wa-meeting-meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 3px; }
.wa-meeting-meta-item { font-size: 0.8rem; color: var(--ink-2); }
.wa-meeting-notes-preview { font-size: 0.82rem; color: var(--ink-2); margin: 3px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Actions column */
.wa-meeting-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Status badges */
.wa-meeting-status-badge {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}
.mstatus-upcoming  { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.mstatus-done      { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.mstatus-cancelled { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; }

.wa-meeting-done-btn {
    padding: 5px 12px;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s var(--ease-out);
    white-space: nowrap;
}
.wa-meeting-done-btn:hover { background: #047857; color: var(--white); border-color: #047857; }

.wa-meeting-expand-btn {
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-size: 1.3rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s var(--ease-out);
}
.wa-meeting-expand-btn.is-open { transform: rotate(90deg); color: var(--blue); }
.wa-meeting-expand-btn:hover { color: var(--ink); }

.wa-meeting-delete-btn {
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s var(--ease-out);
}
.wa-meeting-delete-btn:hover { color: #b91c1c; background: #fef2f2; }

/* Meeting detail panel */
.wa-meeting-detail { border-top: 1px solid var(--border); padding: 16px; background: var(--bg); }
.wa-meeting-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.wa-meeting-detail-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wa-meeting-detail-grid .wa-input {
    border-color: var(--border);
    background: var(--white);
    text-transform: none;
    font-weight: 400;
}
.wa-meeting-notes-label { grid-column: 1 / -1; }

/* Responsive */
@media (max-width: 640px) {
    .wa-meeting-card-main { flex-wrap: wrap; }
    .wa-meeting-actions   { width: 100%; justify-content: flex-start; }
}

/* ============================================================
   Enhancements: stats, sorting, export, click-to-call,
   toasts, confirm dialog, overdue callbacks
   ============================================================ */

/* ── Stats bar ───────────────────────────────────────────── */
.wa-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.wa-stat-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    border-left: 3px solid var(--border);
}
.wa-stat-num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}
.wa-stat-lbl {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-2);
}
.wa-stat-card[data-tone="new"]        { border-left-color: #9ca3af; }
.wa-stat-card[data-tone="interested"] { border-left-color: #8b5cf6; }
.wa-stat-card[data-tone="quoted"]     { border-left-color: #f59e0b; }
.wa-stat-card[data-tone="won"]        { border-left-color: #10b981; }
.wa-stat-card[data-tone="won"] .wa-stat-num { color: #047857; }
.wa-stat-card[data-tone="callback"]   { border-left-color: var(--blue); }
.wa-stat-card[data-tone="callback"].has-due { background: var(--blue-light); border-color: #bfdbfe; }
.wa-stat-card[data-tone="callback"].has-due .wa-stat-num { color: var(--blue-dark); }
.wa-stat-card[data-tone="rate"]       { border-left-color: var(--ink); }

/* Clickable filter cards */
.wa-stat-card[data-filter] {
    cursor: pointer;
    user-select: none;
    transition: transform 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out), border-color 0.14s var(--ease-out);
}
.wa-stat-card[data-filter]:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(12,12,12,0.08); }
.wa-stat-card[data-filter]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wa-stat-card[data-filter]::after {
    content: 'Filter';
    position: absolute;
    top: 9px; right: 11px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-2);
    opacity: 0;
    transition: opacity 0.14s var(--ease-out);
}
.wa-stat-card { position: relative; }
.wa-stat-card[data-filter]:hover::after { opacity: 0.5; }
.wa-stat-card.is-filter-active {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px var(--blue-light), 0 6px 18px rgba(26,77,255,0.1);
}
.wa-stat-card.is-filter-active::after { content: '✓ Active'; opacity: 1; color: var(--blue); }
@media (max-width: 860px) {
    .wa-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .wa-stats { grid-template-columns: repeat(2, 1fr); }
    .wa-stat-num { font-size: 1.25rem; }
}

/* ── Export button ───────────────────────────────────────── */
.wa-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s var(--ease-out);
}
.wa-export:hover { background: var(--bg-alt); border-color: #d4cdc0; color: var(--ink); }
@media (max-width: 860px) { .wa-export { margin-left: 0; } }

/* ── Sortable headers ────────────────────────────────────── */
.wa-th-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-2);
    cursor: pointer;
    padding: 0;
}
.wa-th-sort:hover { color: var(--ink); }
.wa-sort-caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0;
    transition: opacity 0.15s;
}
.wa-th-sort.sort-asc  .wa-sort-caret { opacity: 1; border-bottom: 5px solid var(--blue); }
.wa-th-sort.sort-desc .wa-sort-caret { opacity: 1; border-top: 5px solid var(--blue); }
.wa-th-sort.sort-asc, .wa-th-sort.sort-desc { color: var(--ink); }

/* ── Click-to-call ───────────────────────────────────────── */
.wa-phone-cell { white-space: nowrap; }
.wa-phone-cell .wa-input { width: calc(100% - 32px); min-width: 108px; display: inline-block; vertical-align: middle; }
.wa-call-btn {
    width: 26px; height: 26px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--white);
    color: var(--blue);
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s var(--ease-out);
}
.wa-call-btn:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }
.wa-call-btn.is-empty { opacity: 0.3; pointer-events: none; }
@media (max-width: 860px) {
    .wa-phone-cell { justify-content: flex-end; }
    .wa-phone-cell .wa-input { width: auto; max-width: 55%; }
}

/* ── Overdue callback ────────────────────────────────────── */
.wa-row.is-overdue td:nth-child(2) { box-shadow: inset 3px 0 0 #ef4444; }
.wa-callback-badge.is-overdue { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* ── Toasts ──────────────────────────────────────────────── */
.wa-toast-wrap {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100vw - 48px);
}
.wa-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--ink);
    color: var(--white);
    font-size: 0.88rem;
    font-weight: 500;
    box-shadow: 0 8px 30px rgba(12,12,12,0.25);
    animation: waToastIn 0.25s var(--ease-out);
    max-width: 360px;
}
.wa-toast.is-out { animation: waToastOut 0.25s var(--ease-out) forwards; }
.wa-toast::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #34d399;
    flex-shrink: 0;
}
.wa-toast.wa-toast-error { background: #7f1d1d; }
.wa-toast.wa-toast-error::before { background: #fca5a5; }
@keyframes waToastIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes waToastOut { to   { opacity: 0; transform: translateY(12px); } }

/* ── Confirm dialog ──────────────────────────────────────── */
.wa-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12,12,12,0.45);
    backdrop-filter: blur(4px);
    animation: waToastIn 0.2s var(--ease-out);
}
.wa-confirm-card {
    width: 100%;
    max-width: 380px;
    background: var(--white);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 24px 70px rgba(12,12,12,0.25);
    text-align: center;
}
.wa-confirm-card p { margin: 0 0 20px; color: var(--ink); font-size: 0.98rem; line-height: 1.5; }
.wa-confirm-card strong { font-weight: 700; }
.wa-confirm-actions { display: flex; gap: 10px; }
.wa-confirm-actions .btn { flex: 1; justify-content: center; }
.wa-confirm-yes {
    background: #b91c1c; color: var(--white);
    border: none; border-radius: 8px; padding: 12px 22px;
    font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; cursor: pointer;
    transition: background 0.15s var(--ease-out);
}
.wa-confirm-yes:hover { background: #991b1b; }

/* ── Remote cursor presence ─────────────────────────────────── */
.wa-remote-cursor {
    position: absolute;            /* anchored in document space so it tracks the same content + scrolls with the page */
    pointer-events: none;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    /* left/top set by JS in document pixels */
}
.wa-rc-dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--wc, #22c55e);
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.wa-rc-label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-body, sans-serif);
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: var(--wc, #22c55e);
    padding: 2px 7px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* ── Online presence bar ────────────────────────────────────── */
.wa-online-bar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-2);
}
.wa-online-bar[hidden] { display: none; }
.wa-online-pip {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}

/* ════════════════════════════════════════════════════════════
   People presence · avatars · live updates  (Discord-vibe)
   ════════════════════════════════════════════════════════════ */

/* ── Avatar primitive ───────────────────────────────────────── */
.wa-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-alt);
    vertical-align: middle;
}
.wa-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-avatar-initials { color: #fff; font-weight: 700; line-height: 1; letter-spacing: 0.01em; }

/* ── Workspace layout: main + people rail ───────────────────── */
.wa-workspace-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.wa-workspace-main { flex: 1 1 auto; min-width: 0; }
.wa-people-panel {
    flex: 0 0 220px;
    width: 220px;
    position: sticky;
    top: 90px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 6px 24px rgba(12,12,12,0.04);
}
.wa-people-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.wa-people-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-2);
}
.wa-people-count {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--blue-dark, #1e40af);
    background: var(--blue-light);
    padding: 2px 9px;
    border-radius: 999px;
}
.wa-people-list { display: flex; flex-direction: column; gap: 4px; }

.wa-person {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 8px;
    border-radius: 10px;
    transition: background 0.15s var(--ease-out);
}
.wa-person:hover { background: var(--bg-alt); }
.wa-person:not(.is-online) { opacity: 0.55; }
.wa-person:not(.is-online):hover { opacity: 1; }

.wa-person-avatar-wrap { position: relative; flex-shrink: 0; line-height: 0; }
.wa-person-avatar { box-shadow: 0 0 0 2px var(--white); }
.wa-person-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #c2c0b8;                 /* offline grey */
    border: 2px solid var(--white);
    box-sizing: content-box;
}
.wa-person.is-online .wa-person-dot {
    background: #22c55e;                 /* online green */
    box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
    animation: waPulseDot 2.4s var(--ease-out) infinite;
}
@keyframes waPulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.wa-person-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.wa-person-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-person-you {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--blue-dark, #1e40af);
    background: var(--blue-light);
    padding: 1px 6px;
    border-radius: 999px;
}
.wa-person-status { font-size: 0.74rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-person.is-online .wa-person-status { color: #15803d; font-weight: 600; }

/* ── Profile button (avatar + camera) in the top bar ────────── */
.wa-bar-user { display: flex; align-items: center; gap: 12px; }
.wa-bar-user-text { line-height: 1.3; }
.wa-profile-btn {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    line-height: 0;
    flex-shrink: 0;
}
.wa-profile-avatar { box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--border); }
.wa-profile-cam {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.15s var(--ease-out);
}
.wa-profile-btn:hover .wa-profile-cam { opacity: 1; transform: scale(1); }
.wa-profile-btn.is-uploading { pointer-events: none; }
.wa-profile-btn.is-uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    border-top-color: var(--blue);
    animation: waSpin 0.7s linear infinite;
}
@keyframes waSpin { to { transform: rotate(360deg); } }

/* ── Assigned-cell avatar ───────────────────────────────────── */
.wa-assigned-cell { display: flex; align-items: center; gap: 7px; }
.wa-assigned-cell .wa-input { min-width: 70px; max-width: 100px; }

/* ── "edited by" meta line ──────────────────────────────────── */
/* Own line, wraps freely — must never force the Business column wider
   (that was pushing the whole table + people panel off-screen). */
.wa-edited {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--ink-2);
    white-space: normal;
    overflow-wrap: anywhere;
}
.wa-edited-avatar { vertical-align: -3px; margin-right: 3px; }

/* ── Remote-update row flash ────────────────────────────────── */
.wa-row-remote td { animation: waRemoteFlash 1.8s var(--ease-out); }
@keyframes waRemoteFlash {
    0%   { background: var(--blue-light); }
    100% { background: transparent; }
}

/* ── Responsive: stack the people rail above the table on medium
   screens so the table gets the full width (no horizontal scroll) ── */
@media (max-width: 1180px) {
    .wa-workspace-layout { flex-direction: column; }
    .wa-people-panel {
        position: static;
        width: 100%;
        flex-basis: auto;
        order: -1;
    }
    .wa-people-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .wa-person { flex: 1 1 180px; border: 1px solid var(--border); }
}
@media (max-width: 480px) {
    .wa-person { flex-basis: 100%; }
}

/* ════════════════════════════════════════════════════════════
   Pages workspace — upgraded editor
   ════════════════════════════════════════════════════════════ */

/* ── Sidebar search ─────────────────────────────────────────── */
.wa-pages-search-wrap { position: relative; }
.wa-pages-search-icon {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-2);
    pointer-events: none;
}
.wa-pages-search {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.85rem;
}
.wa-pages-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }

/* ── Two-line page list items ───────────────────────────────── */
.wa-page-item { align-items: flex-start; }
.wa-page-item-icon { margin-top: 1px; }
.wa-page-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.wa-page-item-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-page-item-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.71rem;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-page-item.is-active .wa-page-item-sub { color: var(--ink-2); }

/* ── Document column (centred, comfortable reading width) ───── */
.wa-page-titlebar,
.wa-page-metabar,
.wa-editor-toolbar,
.wa-editor-content {
    width: 100%;
    max-width: 820px;
    align-self: center;
}

/* ── Edited-by meta in the metabar ──────────────────────────── */
.wa-page-edited-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--ink-2);
}
.wa-page-edited-meta[hidden] { display: none; }

/* ── Sticky toolbar so formatting is always reachable ───────── */
.wa-editor-toolbar {
    position: sticky;
    top: 70px;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(12,12,12,0.04);
}

/* ── Richer editor content styles ───────────────────────────── */
.wa-editor-content a { color: var(--blue); text-decoration: underline; }
.wa-editor-content a:hover { color: var(--blue-dark, #1e40af); }
.wa-editor-content s, .wa-editor-content strike { text-decoration: line-through; color: var(--ink-2); }
.wa-editor-content blockquote {
    margin: 0.9em 0;
    padding: 8px 16px;
    border-left: 3px solid var(--blue);
    background: var(--bg-alt);
    border-radius: 0 8px 8px 0;
    color: var(--ink-2);
    font-style: italic;
}

/* ── Checklist (class-based so it survives sanitisation) ────── */
.wa-editor-content .wa-checklist { list-style: none; padding-left: 0; margin: 0 0 0.6em; }
.wa-editor-content .wa-task {
    position: relative;
    padding-left: 30px;
    margin-bottom: 0.35em;
    min-height: 1.55em;
    cursor: text;
}
.wa-editor-content .wa-task::before {
    content: '';
    position: absolute;
    left: 0; top: 0.18em;
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-radius: 5px;
    background: var(--white);
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.12s var(--ease-out);
}
.wa-editor-content .wa-task:hover::before { border-color: var(--blue); }
.wa-editor-content .wa-task-done::before { background: var(--blue); border-color: var(--blue); }
.wa-editor-content .wa-task-done::after {
    content: '';
    position: absolute;
    left: 6px; top: 0.3em;
    width: 4px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    pointer-events: none;
}
.wa-editor-content .wa-task-done { color: var(--ink-2); text-decoration: line-through; }

@media (max-width: 860px) {
    .wa-editor-toolbar { position: static; }
}

/* ═══════════════════════════════════════════ FIND LEADS (free OSM finder) */
.wa-finder-intro { margin-bottom: 22px; }
.wa-finder-title { font-family: var(--font-display); color: var(--ink); font-size: 1.5rem; margin: 0 0 6px; }
.wa-finder-sub { color: var(--ink-2); font-family: var(--font-body); max-width: 60ch; margin: 0; line-height: 1.55; }

.wa-finder-form {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px; margin-bottom: 22px;
}
.wa-finder-field { display: flex; flex-direction: column; gap: 6px; }
.wa-finder-field-area { flex: 1 1 260px; }
.wa-finder-field-radius { flex: 0 0 110px; }
.wa-finder-field label {
    font-family: var(--font-body); font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2);
}
.wa-finder-field input,
.wa-finder-field select {
    border: 1px solid var(--border); background: var(--white); color: var(--ink);
    font-family: var(--font-body); font-size: .95rem; border-radius: 9px;
    padding: 11px 12px; transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.wa-finder-field input:focus,
.wa-finder-field select:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-light);
}
.wa-finder-go { flex: 0 0 auto; }

.wa-finder-state { padding: 8px 0; }
.wa-finder-loading,
.wa-finder-empty {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px;
    padding: 28px; text-align: center; color: var(--ink-2); font-family: var(--font-body);
}
.wa-finder-loading::before {
    content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 9px;
    vertical-align: -2px; border: 2px solid var(--blue-light); border-top-color: var(--blue);
    border-radius: 50%; animation: wa-finder-spin .7s linear infinite;
}
@keyframes wa-finder-spin { to { transform: rotate(360deg); } }

.wa-finder-resultsbar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 12px 4px; margin-bottom: 6px;
}
.wa-finder-selectall {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-family: var(--font-body); font-size: .9rem; color: var(--ink);
}
.wa-finder-summary { color: var(--ink-2); font-family: var(--font-body); font-size: .9rem; }
.wa-finder-summary strong { color: var(--ink); }
.wa-finder-import { margin-left: auto; }

.wa-finder-table-wrap {
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--white);
}
.wa-finder-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.wa-finder-table thead th {
    text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-2); background: var(--bg-alt);
    padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.wa-finder-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--ink); font-size: .92rem; vertical-align: middle; }
.wa-finder-table tr:last-child td { border-bottom: none; }
.wa-finder-col-check, .wa-finder-col-map { width: 1%; white-space: nowrap; text-align: center; }
.wa-finder-row.is-known { opacity: .55; }
.wa-finder-name { font-weight: 600; }
.wa-finder-cat { display: block; font-weight: 400; font-size: .76rem; color: var(--ink-2); margin-top: 2px; }
.wa-finder-known {
    display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--blue); background: var(--blue-light);
    padding: 1px 7px; border-radius: 20px; vertical-align: 1px;
}
.wa-finder-addr { color: var(--ink-2); }
.wa-finder-nophone { color: var(--ink-2); }
.wa-finder-table a { color: var(--blue); text-decoration: none; }
.wa-finder-table a:hover { text-decoration: underline; }
.wa-finder-col-map a { font-size: 1.05rem; text-decoration: none; }

@media (max-width: 720px) {
    .wa-finder-import { margin-left: 0; width: 100%; }
    .wa-finder-addr { display: none; }
    .wa-finder-actions-right { margin-left: 0; width: 100%; }
}

/* ── Hot leads + signals ── */
.wa-finder-row.is-hot .wa-finder-name { font-weight: 700; }
.wa-finder-hot {
    display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: #b42318; background: #fee4e2;
    padding: 1px 7px; border-radius: 20px; vertical-align: 1px;
}
.wa-finder-signals { display: block; font-size: .72rem; color: var(--blue); margin-top: 3px; }

/* ── Results bar right-hand group ── */
.wa-finder-actions-right { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wa-finder-newonly { display: flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--font-body); font-size: .88rem; color: var(--ink); white-space: nowrap; }
.wa-finder-savebtn { white-space: nowrap; }

/* ── "New only" hides businesses already in leads ── */
.wa-finder-table.newonly .wa-finder-row.is-known { display: none; }

/* ── Saved searches ── */
.wa-finder-saved { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: -8px 0 22px; }
.wa-finder-saved-label {
    font-family: var(--font-body); font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-2);
}
.wa-finder-saved-list { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-finder-chip {
    display: inline-flex; align-items: stretch; border: 1px solid var(--border);
    background: var(--white); border-radius: 20px; overflow: hidden;
    transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.wa-finder-chip:hover { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.wa-finder-chip-run {
    border: none; background: none; cursor: pointer; font-family: var(--font-body);
    font-size: .82rem; color: var(--ink); padding: 6px 4px 6px 13px;
}
.wa-finder-chip-del {
    border: none; background: none; cursor: pointer; color: var(--ink-2);
    font-size: 1rem; line-height: 1; padding: 0 11px 0 6px;
}
.wa-finder-chip-del:hover { color: #b42318; }