/* =============================================================
   CRM Contacts — crm-contacts.css
   Bootstrap 5 + Select2 companion stylesheet
   ============================================================= */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── Bootstrap 5 ───────────────────────────────────────────── */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');

/* ── Select2 ───────────────────────────────────────────────── */
@import url('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
    --crm-font:          'DM Sans', system-ui, sans-serif;
    --crm-font-mono:     'DM Mono', monospace;

    --crm-bg:            #f5f6f8;
    --crm-surface:       #ffffff;
    --crm-border:        #e4e7ec;
    --crm-border-light:  #f0f2f5;

    --crm-text:          #1a1f2e;
    --crm-text-secondary:#6b7280;
    --crm-text-muted:    #9ca3af;

    --crm-primary:       #0d6efd;
    --crm-primary-hover: #0b5ed7;
    --crm-primary-light: #e8f0fe;

    --crm-radius-sm:     6px;
    --crm-radius:        10px;
    --crm-radius-lg:     14px;

    --crm-shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --crm-shadow:        0 4px 16px rgba(0,0,0,.08);

    /* Status palette */
    --s-novo:            #3b82f6;
    --s-novo-bg:         #eff6ff;
    --s-contactado:      #8b5cf6;
    --s-contactado-bg:   #f5f3ff;
    --s-em_acompanhamento:#f59e0b;
    --s-em_acompanhamento-bg:#fffbeb;
    --s-especificado:    #10b981;
    --s-especificado-bg: #ecfdf5;
    --s-cliente_ativo:   #059669;
    --s-cliente_ativo-bg:#d1fae5;
}

/* ── Base ───────────────────────────────────────────────────── */
.crm-wrap {
    font-family:     var(--crm-font);
    background:      var(--crm-bg);
    min-height:      100vh;
    color:           var(--crm-text);
    font-size:       14px;
    line-height:     1.5;
    -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */
.crm-header {
    background:  var(--crm-surface);
    border-bottom: 1px solid var(--crm-border);
    padding:     20px 32px;
    position:    sticky;
    top:         0;
    z-index:     100;
    box-shadow:  var(--crm-shadow-sm);
}

.crm-header__inner {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    gap:            16px;
    max-width:      1400px;
    margin:         0 auto;
}

.crm-header__eyebrow {
    display:      block;
    font-size:    11px;
    font-weight:  500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:        var(--crm-text-muted);
    margin-bottom: 2px;
}

.crm-header__h1 {
    font-size:   22px;
    font-weight: 600;
    margin:      0;
    line-height: 1.2;
    color:       var(--crm-text);
}

.crm-header__sub {
    display:    flex;
    flex-wrap:  wrap;
    gap:        12px;
    margin-top: 6px;
    font-size:  13px;
    color:      var(--crm-text-secondary);
}

.crm-header__email::before { content: '✉ '; opacity: .6; }
.crm-header__company::before { content: '🏢 '; opacity: .7; }

.crm-header__meta {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

.crm-back {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    font-size:   13px;
    font-weight: 500;
    color:       var(--crm-primary);
    text-decoration: none;
    margin-bottom: 6px;
    transition:  opacity .15s;
}
.crm-back:hover { opacity: .75; }

/* ══════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════ */
.crm-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       4px 10px;
    border-radius: 20px;
    font-size:     12px;
    font-weight:   600;
    white-space:   nowrap;
}

.crm-badge--count {
    background: var(--crm-primary-light);
    color:      var(--crm-primary);
}

.crm-badge--admin {
    background: #fef3c7;
    color:      #92400e;
}

.crm-badge--score-header {
    background: #fef9c3;
    color:      #713f12;
}

.crm-badge--events {
    background: var(--crm-border-light);
    color:      var(--crm-text-secondary);
}

/* ══════════════════════════════════════════════════════════════
   INNER WRAPPER
   ══════════════════════════════════════════════════════════════ */
.crm-inner {
    max-width: 1400px;
    margin:    0 auto;
    padding:   28px 32px 48px;
}

/* ══════════════════════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════════════════════ */
.crm-alert {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       12px 16px;
    border-radius: var(--crm-radius-sm);
    font-size:     13px;
    font-weight:   500;
    margin-bottom: 20px;
}

.crm-alert--success {
    background: #ecfdf5;
    color:      #065f46;
    border:     1px solid #a7f3d0;
}

/* ══════════════════════════════════════════════════════════════
   FILTERS FORM
   ══════════════════════════════════════════════════════════════ */
.crm-filters {
    background:    var(--crm-surface);
    border:        1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding:       20px 24px;
    margin-bottom: 24px;
    box-shadow:    var(--crm-shadow-sm);
}

.crm-filters__grid {
    display:    flex;
    flex-wrap:  wrap;
    gap:        12px 16px;
    align-items: flex-end;
}

.crm-field {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    flex:           1 1 160px;
    min-width:      140px;
}

.crm-field--search { flex: 2 1 240px; }
.crm-field--full   { flex: 1 1 100%; }

.crm-field--actions {
    flex:        0 0 auto;
    flex-direction: row;
    align-items: flex-end;
    gap:         8px;
}

.crm-label {
    font-size:   12px;
    font-weight: 600;
    color:       var(--crm-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Inputs ────────────────────────────────────────────────── */
.crm-input,
.crm-select,
.crm-textarea {
    font-family:   var(--crm-font);
    font-size:     13.5px;
    color:         var(--crm-text);
    background:    #fff;
    border:        1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    padding:       8px 12px;
    width:         100%;
    outline:       none;
    transition:    border-color .15s, box-shadow .15s;
    appearance:    none;
    -webkit-appearance: none;
}

.crm-input:focus,
.crm-select:focus,
.crm-textarea:focus {
    border-color: var(--crm-primary);
    box-shadow:   0 0 0 3px rgba(13,110,253,.15);
}

.crm-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4.293 5.293a1 1 0 0 1 1.414 0L8 7.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 32px;
    cursor: pointer;
}

/* ── Search wrap ───────────────────────────────────────────── */
.crm-search-wrap {
    position: relative;
}

.crm-search-icon {
    position:    absolute;
    right:        10px;
    top:         50%;
    transform:   translateY(-50%);
    color:       var(--crm-text-muted);
    pointer-events: none;
}

.crm-input--search { padding-left: 32px; }

/* ── Select2 overrides ─────────────────────────────────────── */
.select2-container--default .select2-selection--single {
    font-family:   var(--crm-font);
    font-size:     13.5px;
    height:        36px;
    border:        1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    background:    #fff;
    display:       flex;
    align-items:   center;
    transition:    border-color .15s, box-shadow .15s;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--crm-primary);
    box-shadow:   0 0 0 3px rgba(13,110,253,.15);
    outline:      none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color:       var(--crm-text);
    line-height: 34px;
    padding:     0 30px 0 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
    right:  6px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--crm-primary);
}

.select2-dropdown {
    border:        1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    box-shadow:    var(--crm-shadow);
    font-family:   var(--crm-font);
    font-size:     13.5px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border:        1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    padding:       6px 10px;
    font-size:     13px;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.crm-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 18px;
    border-radius: var(--crm-radius-sm);
    font-family:   var(--crm-font);
    font-size:     13.5px;
    font-weight:   600;
    line-height:   1;
    cursor:        pointer;
    text-decoration: none;
    border:        1px solid transparent;
    transition:    background .15s, border-color .15s, box-shadow .15s, opacity .15s;
    white-space:   nowrap;
}

.crm-btn--primary {
    background: var(--crm-primary);
    color:      #fff;
    border-color: var(--crm-primary);
}
.crm-btn--primary:hover {
    background:   var(--crm-primary-hover);
    border-color: var(--crm-primary-hover);
    color:        #fff;
}

.crm-btn--ghost {
    background:   transparent;
    color:        var(--crm-text-secondary);
    border-color: var(--crm-border);
}
.crm-btn--ghost:hover {
    background:   var(--crm-border-light);
    color:        var(--crm-text);
    border-color: #d1d5db;
}

.crm-btn--small {
    padding:   5px 12px;
    font-size: 12px;
}

/* ══════════════════════════════════════════════════════════════
   TABLE  (Level 1)
   ══════════════════════════════════════════════════════════════ */
.crm-table-wrap {
    background:    var(--crm-surface);
    border:        1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    overflow:      hidden;
    box-shadow:    var(--crm-shadow-sm);
}

.crm-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13.5px;
}

.crm-table thead tr {
    background:    var(--crm-bg);
    border-bottom: 2px solid var(--crm-border);
}

.crm-table th {
    padding:      11px 16px;
    text-align:   left;
    font-size:    11.5px;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:        var(--crm-text-secondary);
    white-space:  nowrap;
}

.crm-table td {
    padding:       13px 16px;
    border-bottom: 1px solid var(--crm-border-light);
    vertical-align: middle;
}

.crm-table tbody tr:last-child td { border-bottom: none; }

.crm-row {
    transition: background .12s;
}
.crm-row:hover { background: #f8f9ff; }

/* sort links */
.crm-sort-link {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    color:       var(--crm-text-secondary);
    text-decoration: none;
    font-size:   11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition:  color .15s;
}
.crm-sort-link:hover,
.crm-sort-link.is-active { color: var(--crm-primary); }

/* ── Contact cell ──────────────────────────────────────────── */
.crm-contact-cell {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.crm-avatar {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    background:    var(--crm-primary-light);
    color:         var(--crm-primary);
    font-size:     14px;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    font-family:   var(--crm-font);
}

.crm-contact-info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.crm-contact-name {
    font-weight: 600;
    color:       var(--crm-text);
    font-size:   14px;
}

.crm-contact-email {
    font-size: 12px;
    color:     var(--crm-text-muted);
}

/* ── Company cell ──────────────────────────────────────────── */
.crm-td--company {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}
.crm-company    { font-weight: 500; color: var(--crm-text); }
.crm-job-title  { font-size: 12px; color: var(--crm-text-muted); }

/* ── Status pills ──────────────────────────────────────────── */
.crm-status-pill {
    display:       inline-flex;
    align-items:   center;
    padding:       3px 10px;
    border-radius: 20px;
    font-size:     11.5px;
    font-weight:   700;
    letter-spacing:.02em;
    white-space:   nowrap;
}

.crm-status--novo             { background: var(--s-novo-bg);            color: var(--s-novo); }
.crm-status--contactado       { background: var(--s-contactado-bg);      color: var(--s-contactado); }
.crm-status--em_acompanhamento{ background: var(--s-em_acompanhamento-bg); color: var(--s-em_acompanhamento); }
.crm-status--especificado     { background: var(--s-especificado-bg);    color: var(--s-especificado); }
.crm-status--cliente_ativo    { background: var(--s-cliente_ativo-bg);   color: var(--s-cliente_ativo); }

/* badge variant (header) */
.crm-status-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }

/* ── Score bar ─────────────────────────────────────────────── */
.crm-score-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
    min-width:   80px;
}

.crm-score-num {
    font-family: var(--crm-font-mono);
    font-size:   13px;
    font-weight: 600;
    width:       28px;
    text-align:  right;
    flex-shrink: 0;
}

.crm-score--high { color: #059669; }
.crm-score--mid  { color: #d97706; }
.crm-score--low  { color: #9ca3af; }

.crm-score-bar {
    flex:          1;
    height:        5px;
    background:    var(--crm-border);
    border-radius: 99px;
    overflow:      hidden;
}

.crm-score-fill {
    height:        100%;
    border-radius: 99px;
    transition:    width .4s ease;
}

.crm-score-fill.crm-score--high { background: #10b981; }
.crm-score-fill.crm-score--mid  { background: #f59e0b; }
.crm-score-fill.crm-score--low  { background: #d1d5db; }

/* ── Activity cell ─────────────────────────────────────────── */
.crm-td--activity {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}
.crm-last-date { font-weight: 500; color: var(--crm-text); font-size: 13px; }
.crm-last-ago  { font-size: 12px; color: var(--crm-text-muted); }
.crm-nil       { color: var(--crm-text-muted); font-size: 13px; }

/* ── Action cell ───────────────────────────────────────────── */
.crm-td--action { text-align: right; }

/* ══════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════ */
.crm-pagination {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px;
    margin-top:  24px;
    justify-content: flex-start;
}

.crm-page-btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     34px;
    height:        34px;
    padding:       0 10px;
    border-radius: var(--crm-radius-sm);
    font-size:     13px;
    font-weight:   600;
    color:         var(--crm-text-secondary);
    background:    var(--crm-surface);
    border:        1px solid var(--crm-border);
    text-decoration: none;
    transition:    all .15s;
}

.crm-page-btn:hover       { background: var(--crm-primary-light); color: var(--crm-primary); border-color: var(--crm-primary); }
.crm-page-btn.is-active   { background: var(--crm-primary); color: #fff; border-color: var(--crm-primary); }

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════ */
.crm-empty {
    background:    var(--crm-surface);
    border:        1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding:       48px 24px;
    text-align:    center;
    color:         var(--crm-text-muted);
    font-size:     14px;
}

.crm-notice {
    color:       var(--crm-text-secondary);
    font-size:   14px;
    padding:     12px 0;
}

/* ══════════════════════════════════════════════════════════════
   TIMELINE  (Level 2)
   ══════════════════════════════════════════════════════════════ */

/* ── Contact info card ─────────────────────────────────────── */
.crm-contact-card {
    background:    var(--crm-surface);
    border:        1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding:       20px 24px;
    margin-bottom: 24px;
    display:       flex;
    align-items:   center;
    gap:           16px;
    box-shadow:    var(--crm-shadow-sm);
}

/* ── Note drawer ───────────────────────────────────────────── */
.crm-note-drawer {
    background:    var(--crm-surface);
    border:        1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    margin-bottom: 24px;
    overflow:      hidden;
    box-shadow:    var(--crm-shadow-sm);
}

.crm-note-drawer__toggle {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     14px 20px;
    cursor:      pointer;
    font-size:   13.5px;
    font-weight: 600;
    color:       var(--crm-text);
    list-style:  none;
    user-select: none;
    transition:  background .15s;
}
.crm-note-drawer__toggle::-webkit-details-marker { display: none; }
.crm-note-drawer[open] .crm-note-drawer__toggle { background: var(--crm-bg); border-bottom: 1px solid var(--crm-border); }
.crm-note-drawer__toggle:hover { background: var(--crm-border-light); }

.crm-note-form-wrap { padding: 20px 24px; }

.crm-note-grid {
    display:   grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:       14px 16px;
}

.crm-required { color: #ef4444; margin-left: 2px; }

.crm-textarea {
    resize:     vertical;
    min-height: 80px;
}

.crm-note-form__footer {
    margin-top:  16px;
    padding-top: 14px;
    border-top:  1px solid var(--crm-border-light);
}

/* ── Timeline ──────────────────────────────────────────────── */
.crm-timeline {
    display:        flex;
    flex-direction: column;
    gap:            0;
    position:       relative;
}

/* vertical rule */
.crm-timeline::before {
    content:    '';
    position:   absolute;
    left:       17px;
    top:        28px;
    bottom:     28px;
    width:      2px;
    background: var(--crm-border);
    z-index:    0;
}

/* ── Day marker ────────────────────────────────────────────── */
.crm-day-marker {
    display:      flex;
    align-items:  center;
    gap:          12px;
    margin:       20px 0 6px;
    font-size:    11.5px;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:        var(--crm-text-muted);
    padding-left: 44px;
    position:     relative;
    z-index:      1;
}

.crm-day-marker::after {
    content:   '';
    flex:      1;
    height:    1px;
    background:var(--crm-border-light);
}

/* ── Event card ────────────────────────────────────────────── */
.crm-event {
    display:      flex;
    align-items:  flex-start;
    gap:          16px;
    padding:      6px 0;
    position:     relative;
    z-index:      1;
}

.crm-event__dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    var(--crm-primary);
    border:        2px solid var(--crm-surface);
    flex-shrink:   0;
    margin-top:    16px;
    box-shadow:    0 0 0 2px var(--crm-border);
    position:      relative;
    z-index:       2;
}

/* dot colour by event type */
.crm-event--professional_register .crm-event__dot { background: #6366f1; }
.crm-event--newsletter_subscribe  .crm-event__dot { background: #0ea5e9; }
.crm-event--sample_request        .crm-event__dot { background: #f59e0b; }
.crm-event--contact_request       .crm-event__dot { background: #10b981; }
.crm-event--bim_download          .crm-event__dot { background: #8b5cf6; }
.crm-event--architect_kit_request .crm-event__dot { background: #ec4899; }

.crm-event__card {
    flex:          1;
    background:    var(--crm-surface);
    border:        1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    padding:       14px 18px;
    box-shadow:    var(--crm-shadow-sm);
    transition:    box-shadow .15s, border-color .15s;
    margin-bottom: 8px;
}
.crm-event__card:hover {
    box-shadow:   var(--crm-shadow);
    border-color: #c7d2fe;
}

.crm-event__top {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         12px;
    flex-wrap:   wrap;
    margin-bottom: 8px;
}

.crm-event__type {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    font-size:   13px;
    font-weight: 600;
    color:       var(--crm-text);
}

.crm-event__meta {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

.crm-event__time {
    font-family: var(--crm-font-mono);
    font-size:   12px;
    color:       var(--crm-text-muted);
}

.crm-event__body {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px 14px;
    align-items: center;
}

.crm-event__url {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    font-size:   12.5px;
    color:       var(--crm-primary);
    text-decoration: none;
    word-break:  break-all;
    transition:  opacity .15s;
}
.crm-event__url:hover { opacity: .75; }

.crm-event__campaign {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    font-size:   12px;
    color:       var(--crm-text-secondary);
}

/* ── Pills ─────────────────────────────────────────────────── */
.crm-pill {
    display:       inline-flex;
    align-items:   center;
    padding:       2px 8px;
    border-radius: 99px;
    font-size:     11px;
    font-weight:   600;
    white-space:   nowrap;
}

.crm-pill--collection {
    background: #ede9fe;
    color:      #5b21b6;
}

.crm-pill--source {
    background: #e0f2fe;
    color:      #0369a1;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .crm-header { padding: 16px 20px; }
    .crm-inner  { padding: 20px 20px 40px; }
}

@media (max-width: 768px) {
    .crm-header__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .crm-filters { padding: 16px; }
    .crm-filters__grid { gap: 10px 12px; }
    .crm-field { flex: 1 1 100%; }
    .crm-field--actions { flex-direction: row; }
    .crm-table th,
    .crm-table td { padding: 10px 12px; }
    .crm-td--score,
    .crm-th--score { display: none; }
    .crm-timeline::before { left: 13px; }
    .crm-event__dot { margin-top: 14px; }
}

@media (max-width: 480px) {
    .crm-header { padding: 14px 16px; }
    .crm-inner  { padding: 16px 16px 32px; }
    .crm-table { font-size: 12.5px; }
    .crm-td--activity { display: none; }
}