/* ══════════════════════════════════════════════════════
   BP Emailing — Premium Contact Exchange v2.0
   Author: Oussama Guedouar
══════════════════════════════════════════════════════ */

/* ── KPI strip ── */
.bpe-kpis { display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px; }
.bpe-kpi {
    flex:1;min-width:140px;background:#fff;border-radius:14px;
    box-shadow:0 2px 14px rgba(0,0,0,.07);padding:18px 20px;
    position:relative;overflow:hidden;
}
.bpe-kpi::before {
    content:'';position:absolute;top:0;left:0;
    width:4px;height:100%;background:var(--ac,#6d9cec);
    border-radius:4px 0 0 4px;
}
.bpe-kpi-num { font-size:30px;font-weight:800;color:#212529;line-height:1.1; }
.bpe-kpi-txt { font-size:12px;color:#aaa;margin-top:4px;font-weight:500; }
.bpe-badge {
    display:inline-block;margin-top:7px;font-size:11px;
    font-weight:700;padding:2px 9px;border-radius:20px;
}
.bpe-up  { background:#eafaf1;color:#27ae60; }
.bpe-neu { background:#f4f6fa;color:#888; }
.bpe-dn  { background:#fdf2f2;color:#e74c3c; }

/* ── Section headings ── */
.bpe-section {
    font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:#6d9cec;margin:28px 0 14px;padding-bottom:8px;
    border-bottom:2px solid #f0f4ff;display:flex;align-items:center;gap:8px;
}

/* ── 2-col grid ── */
.bpe-row { display:flex;flex-wrap:wrap;gap:20px;margin-bottom:4px; }
.bpe-row > .analytics-card { flex:1;min-width:260px; }

/* ── Contact table ── */
.bpe-toolbar {
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    margin-bottom:16px;
}
.bpe-search-wrap { position:relative;flex:1;min-width:200px; }
.bpe-search-wrap i {
    position:absolute;left:12px;top:50%;transform:translateY(-50%);
    color:#aaa;font-size:14px;pointer-events:none;
}
.bpe-search {
    width:100%;padding:9px 12px 9px 36px;border:1.5px solid #e5e7eb;
    border-radius:10px;font-size:13px;outline:none;background:#fff;
    transition:border-color .2s;box-sizing:border-box;
}
.bpe-search:focus { border-color:#4361ee; }

.bpe-btn {
    display:inline-flex;align-items:center;gap:7px;
    padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;
    border:none;cursor:pointer;transition:all .15s;text-decoration:none;
}
.bpe-btn-primary { background:#4361ee;color:#fff; }
.bpe-btn-primary:hover { background:#3451d1;color:#fff; }
.bpe-btn-outline { background:#fff;color:#4361ee;border:1.5px solid #e5e7eb; }
.bpe-btn-outline:hover { background:#f0f4ff;border-color:#4361ee; }
.bpe-btn-danger  { background:#fdf2f2;color:#e74c3c; }
.bpe-btn-danger:hover { background:#e74c3c;color:#fff; }
.bpe-btn-sm { padding:6px 12px;font-size:12px;border-radius:8px; }

.bpe-table-wrap { overflow-x:auto;border-radius:14px;box-shadow:0 2px 14px rgba(0,0,0,.06); }
.bpe-table {
    width:100%;border-collapse:collapse;background:#fff;
    font-size:13px;
}
.bpe-table thead tr { background:#f8f9fb; }
.bpe-table th {
    padding:12px 16px;text-align:left;font-size:11px;color:#aaa;
    font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    border-bottom:2px solid #f0f0f0;white-space:nowrap;
}
.bpe-table td { padding:13px 16px;border-bottom:1px solid #f5f5f5;vertical-align:middle; }
.bpe-table tr:last-child td { border-bottom:none; }
.bpe-table tr:hover td { background:#f8f9ff; }
.bpe-table tr.bpe-selected td { background:#eef2ff; }

.bpe-avatar {
    width:36px;height:36px;border-radius:50%;
    background:linear-gradient(135deg,#6d9cec,#4361ee);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:800;color:#fff;flex-shrink:0;
}
.bpe-contact-cell { display:flex;align-items:center;gap:10px; }
.bpe-contact-name { font-weight:700;color:#212529; }
.bpe-contact-date { font-size:11px;color:#aaa;margin-top:1px; }

.bpe-action-btns { display:flex;gap:6px;justify-content:flex-end; }
.bpe-action-btn {
    width:32px;height:32px;border-radius:8px;border:none;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:14px;transition:all .15s;
}
.bpe-action-btn.email { background:#eef2ff;color:#4361ee; }
.bpe-action-btn.email:hover { background:#4361ee;color:#fff; }
.bpe-action-btn.copy  { background:#f0fdf4;color:#27ae60; }
.bpe-action-btn.copy:hover { background:#27ae60;color:#fff; }
.bpe-action-btn.vcard { background:#fff7ed;color:#f59e0b; }
.bpe-action-btn.vcard:hover { background:#f59e0b;color:#fff; }
.bpe-action-btn.del   { background:#fdf2f2;color:#e74c3c; }
.bpe-action-btn.del:hover { background:#e74c3c;color:#fff; }

.bpe-empty {
    text-align:center;padding:50px 20px;color:#aaa;
    background:#fafbfc;border-radius:14px;
}
.bpe-empty .ico { font-size:48px;margin-bottom:12px; }

/* ── Popup (bottom-sheet on mobile, centered modal on desktop) ── */
.bpe-overlay {
    position:fixed;inset:0;background:rgba(0,0,0,.5);
    z-index:9999;display:none;backdrop-filter:blur(4px);
}
.bpe-modal {
    position:fixed;z-index:10000;
    background:#fff;border-radius:20px 20px 0 0;
    padding:28px 24px 32px;
    bottom:0;left:0;right:0;
    display:none;
    box-shadow:0 -8px 40px rgba(0,0,0,.15);
    max-height:90vh;overflow-y:auto;
}
.bpe-modal-header {
    display:flex;align-items:flex-start;justify-content:space-between;
    margin-bottom:18px;
}
.bpe-modal-title { font-size:20px;font-weight:800;color:#212529; }
.bpe-modal-sub   { font-size:13px;color:#aaa;margin-top:3px; }
.bpe-modal-close {
    width:32px;height:32px;border-radius:50%;border:none;
    background:#f4f6fa;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;color:#555;flex-shrink:0;margin-top:2px;
}
.bpe-modal-close:hover { background:#e5e7eb; }

.bpe-field { margin-bottom:14px; }
.bpe-field label { font-size:12px;font-weight:700;color:#555;display:block;margin-bottom:5px;letter-spacing:.04em; }
.bpe-field input {
    width:100%;padding:11px 14px;border:1.5px solid #e5e7eb;
    border-radius:10px;font-size:14px;outline:none;
    transition:border-color .2s;box-sizing:border-box;
}
.bpe-field input:focus { border-color:#4361ee; }
.bpe-field input.error { border-color:#e74c3c; }

.bpe-submit {
    width:100%;padding:13px;background:#4361ee;color:#fff;
    border:none;border-radius:12px;font-size:15px;font-weight:800;
    cursor:pointer;transition:background .15s;margin-top:4px;
}
.bpe-submit:hover   { background:#3451d1; }
.bpe-submit:disabled { background:#a5b4fc;cursor:not-allowed; }

.bpe-legal {
    text-align:center;font-size:11px;color:#aaa;margin-top:12px;line-height:1.6;
}
.bpe-legal a { color:#4361ee; }

.bpe-notice {
    border-radius:10px;padding:10px 14px;font-size:13px;
    font-weight:600;margin-bottom:14px;display:none;
}
.bpe-notice.success { background:#eafaf1;color:#27ae60;border:1px solid #27ae6033; }
.bpe-notice.error   { background:#fdf2f2;color:#e74c3c;border:1px solid #e74c3c33; }

/* Desktop modal: centered */
@media(min-width:768px){
    .bpe-modal {
        bottom:auto;left:50%;top:50%;
        transform:translate(-50%,-50%);
        border-radius:20px;
        width:440px;max-width:94vw;
        max-height:85vh;
    }
}

/* ── Responsive table ── */
@media(max-width:640px){
    .bpe-table th.hide-mobile,
    .bpe-table td.hide-mobile { display:none; }
    .bpe-kpi { min-width:130px; }
    .bpe-action-btns { flex-direction:column;gap:4px; }
}

/* ── Bulk bar ── */
.bpe-bulk-bar {
    background:#4361ee;color:#fff;border-radius:12px;
    padding:10px 16px;display:none;
    align-items:center;gap:12px;flex-wrap:wrap;
    margin-bottom:14px;font-size:13px;font-weight:600;
}
.bpe-bulk-bar.active { display:flex; }
.bpe-bulk-count { background:rgba(255,255,255,.2);border-radius:20px;padding:2px 10px; }

/* ── Toast ── */
.bpe-toast {
    position:fixed;bottom:24px;right:24px;z-index:99999;
    background:#212529;color:#fff;border-radius:12px;
    padding:12px 20px;font-size:13px;font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
    transform:translateY(100px);opacity:0;
    transition:all .3s ease;pointer-events:none;
}
.bpe-toast.show { transform:translateY(0);opacity:1; }
.bpe-toast.success::before { content:'✅ '; }
.bpe-toast.error::before   { content:'❌ '; }
.bpe-toast.info::before    { content:'📋 '; }