.leads-crm-wrap { max-width: 1400px; }
.leads-crm-title { color: #2f6fed; font-size: 32px; font-weight: 800; margin-bottom: 2px; }
.leads-crm-subtitle { color: #666; margin-top: 0; }

.leads-crm-tabs { display: flex; gap: 8px; margin: 18px 0 14px; }
.lc-tab { background: #fff; border: 1px solid #d7dee8; color: #333; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.lc-tab.active { background: #2f6fed; color: #fff; border-color: #2f6fed; }

.leads-crm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 16px; }
.leads-crm-controls select, .leads-crm-controls input[type=text], .leads-crm-controls input[type=date] { padding: 7px 10px; border: 1px solid #d7dee8; border-radius: 6px; }
.lc-date-range { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; }
#lc-search { min-width: 220px; }

.lc-status-multiselect { position: relative; }
.lc-status-filter-btn { min-width: 150px; text-align: left; position: relative; padding-right: 26px !important; }
.lc-status-filter-btn::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #888; }
.lc-status-filter-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 100000;
    background: #fff; border: 1px solid #d7dee8; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12);
    padding: 10px; min-width: 220px; max-height: 320px; display: flex; flex-direction: column;
}
.lc-status-filter-options { overflow-y: auto; }
.lc-status-filter-option { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; color: #333; cursor: pointer; border-radius: 4px; }
.lc-status-filter-option:hover { background: #f3f6fb; }
.lc-status-filter-option input { margin: 0; }
.lc-status-filter-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eef1f6; flex-shrink: 0; }

/* Typeable status combobox — an <input list="..."> styled to look like the old <select> */
.lc-status-input { background: #fff; }

.leads-crm-body { display: flex; gap: 16px; align-items: flex-start; }
.leads-crm-sidebar { width: 260px; flex-shrink: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; }
.leads-crm-sidebar h3 { margin-top: 0; color: #888; font-size: 12px; letter-spacing: .05em; }
.lc-adset { display: flex; align-items: center; gap: 8px; padding: 9px 6px; border-radius: 6px; cursor: pointer; font-weight: 600; color: #333; }
.lc-adset:hover { background: #f3f6fb; }
.lc-adset.active { background: #eaf1ff; color: #2f6fed; }
.lc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lc-adset-name { flex: 1; font-size: 13px; }
.lc-badge { background: #2f6fed; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }

.lc-adset-group { margin-bottom: 4px; }
.lc-adname-list { margin: 0 0 6px 25px; padding-left: 8px; border-left: 2px solid #eef1f6; }
.lc-adname { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 12px; color: #666; cursor: pointer; border-radius: 5px; }
.lc-adname:hover { background: #f3f6fb; color: #333; }
.lc-adname.active { background: #eaf1ff; color: #2f6fed; font-weight: 600; }
.lc-adname-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-badge-sm { background: #aebbcd; font-size: 10px; padding: 1px 7px; }

.leads-crm-main { flex: 1; background: #eef4ff; border: 1px solid #d9e6ff; border-radius: 10px; padding: 16px; min-height: 300px; }
.lc-group-header { display: flex; align-items: center; gap: 8px; background: #dbe9ff; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 15px; }
.lc-group-dot { width: 9px; height: 9px; border-radius: 50%; background: #2f6fed; }
.lc-badge-header { margin-left: auto; }

.lc-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.lc-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.lc-name { font-size: 19px; font-weight: 700; }
.lc-source-tag { display: inline-block; background: #f1f3f6; color: #666; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-top: 2px; }
.lc-adname-tag { display: inline-block; background: #eef1ff; color: #4a5cc9; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-top: 2px; margin-left: 6px; }
.lc-status-badge { background: #f1f3f6; color: #444; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.lc-status-Hot-Lead { background: #ffe1e1; color: #c62828; }
.lc-status-Converted { background: #22a94c; color: #fff; }
.lc-status-Follow-Up { background: #dbeafe; color: #1d4ed8; }
.lc-status-Call-Again { background: #ffe9cc; color: #b5590a; }
.lc-status-Cancelled { background: #f1d4d4; color: #7a1f1f; }
.lc-status-Wrong-Number { background: #e4e4e4; color: #444; }
.lc-status-Not-Interested { background: #ece9f7; color: #5b4fb0; }

.lc-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #333; margin: 10px 0; }
.lc-wa-link { margin-left: 6px; color: #1c9c4a; font-weight: 600; text-decoration: none; font-size: 12px; }
.lc-call-link { margin-left: 6px; color: #2f6fed; font-weight: 600; text-decoration: none; font-size: 12px; }

.lc-dup-banner { background: #fff6dc; border: 1px solid #f1e0a3; color: #7a5c00; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin: 10px 0; }

.lc-card-top-right { display: flex; align-items: center; gap: 8px; }
.lc-blocked-badge { background: #fde2e1; color: #a4161a; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.lc-assigned-badge { background: #e6f4ea; color: #1e7a3e; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.lc-quotation-shared-badge { background: #f1f3f6; color: #666; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; cursor: pointer; border: 1px dashed #c7ccd4; user-select: none; }
.lc-quotation-shared-badge:hover { background: #e9ecf1; }
.lc-quotation-shared-badge.is-shared { background: #22a94c; color: #fff; border: 1px solid #1c8c3f; }
.lc-quotation-shared-badge.is-shared:hover { background: #1f9843; }
.lc-blocked-banner { background: #fde2e1; border: 1px solid #f3a5a3; color: #7a1518; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin: 10px 0; }
.lc-blocked-banner a.lc-toggle-block { color: #7a1518; font-weight: 700; text-decoration: underline; margin-left: 6px; }
.lc-card-blocked { background: #fff7f7; border-color: #f3c2c1; opacity: 0.85; }
button.lc-toggle-block[data-action="block"] { color: #a4161a; border-color: #f3a5a3; }
button.lc-toggle-block[data-action="unblock"] { color: #1a7a3a; border-color: #a5d6b3; }

.lc-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.lc-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
.lc-field select, .lc-field input[type=date], .lc-field input[type=text] { padding: 7px 10px; border: 1px solid #d7dee8; border-radius: 6px; min-width: 190px; }

.lc-notes-list { margin-top: 12px; border-top: 1px dashed #e2e8f0; padding-top: 8px; }
.lc-note { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; color: #333; }
.lc-note-text { flex: 1; }
.lc-note-date { color: #999; font-size: 11px; white-space: nowrap; }
.lc-note-delete { color: #c62828; text-decoration: none; font-weight: 700; }
.lc-note-edit { color: #1e6fd9; text-decoration: none; font-weight: 700; }
.lc-note-date em { color: #888; font-style: italic; font-weight: 400; }

.lc-note-row { margin-top: 12px; }
.lc-note-input { flex: 1; padding: 8px 12px; border: 1px solid #d7dee8; border-radius: 6px; min-width: 260px; }

.lc-empty-note { color: #888; font-style: italic; padding: 20px 20px 8px; text-align: center; }
.lc-empty-note + #lc-clear-filters, .lc-empty-note + .button#lc-clear-filters { display: block; margin: 0 auto 20px; }

.lc-modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999999; display: flex; align-items: center; justify-content: center; }
.lc-modal-inner { background: #fff; padding: 22px 26px; border-radius: 10px; width: 420px; max-width: 90vw; max-height: 85vh; overflow: auto; }
.lc-modal-inner h2 { margin-top: 0; }
.lc-modal-inner label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: 13px; }
.lc-modal-inner input, .lc-modal-inner select, .lc-modal-inner textarea { width: 100%; padding: 8px 10px; border: 1px solid #d7dee8; border-radius: 6px; font-family: inherit; box-sizing: border-box; }
.lc-modal-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: flex-end; }

.lc-sources-table input { width: 100%; padding: 6px 8px; }
.lc-sources-table td, .lc-sources-table th { padding: 8px; }

/* Front-end (shortcode) support: wp-admin's .button styles aren't loaded outside wp-admin. */
.leads-crm-front { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.leads-crm-front .button,
.leads-crm-front button.button {
    display: inline-block; text-decoration: none; font-size: 13px; font-weight: 600;
    padding: 8px 14px; border-radius: 6px; border: 1px solid #d7dee8; background: #fff; color: #2c3338; cursor: pointer;
}
.leads-crm-front .button-primary { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.leads-crm-front table.widefat { border-collapse: collapse; width: 100%; background: #fff; }
.leads-crm-front table.widefat th, .leads-crm-front table.widefat td { border: 1px solid #e2e8f0; text-align: left; }
.leads-crm-login-wall { max-width: 380px; margin: 60px auto; padding: 24px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; text-align: center; }

/* ==================== Responsive / Mobile ==================== */

/* Tablets and small laptops */
@media (max-width: 900px) {
    .leads-crm-body { flex-direction: column; }
    .leads-crm-sidebar { width: 100%; max-height: 260px; overflow-y: auto; }
    .leads-crm-main { width: 100%; }
}

/* Phones and narrow tablets */
@media (max-width: 600px) {
    .leads-crm-wrap { max-width: 100%; padding-left: 10px; padding-right: 10px; }
    .leads-crm-title { font-size: 24px; }

    /* Tabs: scroll horizontally instead of wrapping/overflowing the screen */
    .leads-crm-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px -4px; padding: 0 4px 4px; }
    .lc-tab { flex: 0 0 auto; padding: 10px 16px; white-space: nowrap; }

    /* Controls: every field/button becomes a full-width stacked row */
    .leads-crm-controls { flex-direction: column; align-items: stretch; padding: 12px; gap: 10px; }
    .leads-crm-controls > * { width: 100%; }
    .leads-crm-controls select,
    .leads-crm-controls input[type=text],
    .leads-crm-controls input[type=date],
    .leads-crm-controls .button { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; }
    #lc-search { min-width: 0; }

    .lc-status-multiselect { width: 100%; }
    .lc-status-filter-btn { width: 100%; }
    .lc-status-filter-panel { left: 0; right: 0; width: 100%; box-sizing: border-box; max-height: 60vh; }

    .lc-date-range { flex-wrap: wrap; width: 100%; }
    .lc-date-range input[type=date] { flex: 1 1 auto; min-width: 0; }

    /* Sidebar (ad sets) */
    .leads-crm-sidebar { max-height: 220px; padding: 10px; }
    .leads-crm-main { padding: 12px; }

    /* Group header / counts */
    .lc-group-header { flex-wrap: wrap; font-size: 14px; }

    /* Lead cards: stack everything, give touch targets more room */
    .lc-card { padding: 14px; }
    .lc-card-top { flex-direction: column; gap: 8px; }
    .lc-card-top-right { align-self: flex-start; }
    .lc-name { font-size: 17px; }

    .lc-meta { flex-direction: column; gap: 8px; }

    .lc-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .lc-field { width: 100%; }
    .lc-field select, .lc-field input[type=date], .lc-field input[type=text] { width: 100%; min-width: 0; box-sizing: border-box; }
    .lc-row .button { width: 100%; text-align: center; padding: 10px; }

    .lc-note-row { flex-direction: column; align-items: stretch; }
    .lc-note-input { min-width: 0; width: 100%; box-sizing: border-box; }
    .lc-note-row .button { width: 100%; }

    .lc-note { flex-wrap: wrap; }
    .lc-note-date { order: 3; width: 100%; }

    /* Modals: use most of the viewport on small screens */
    .lc-modal-inner { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; margin-top: auto; }
    .lc-modal { align-items: flex-end; }
    .lc-modal-actions { flex-direction: column-reverse; gap: 8px; }
    .lc-modal-actions .button { width: 100%; text-align: center; }

    /* Settings page sources table: allow horizontal scroll instead of squeezing columns */
    .lc-sources-table { display: block; overflow-x: auto; white-space: nowrap; }

    /* Bigger tap targets everywhere */
    .lc-status-filter-option { padding: 10px 6px; font-size: 14px; }
    .lc-status-filter-checkbox { width: 18px; height: 18px; }
    a.lc-wa-link, a.lc-call-link { display: inline-block; margin: 4px 8px 0 0; font-size: 13px; }
}