/* ═══════════════════════════════════════════════
   ColdCall Pro — cards.css
   Agent cards, EM cards, status UI, action buttons
═══════════════════════════════════════════════ */

/* ── STATUS CONSTANTS ── */
:root {
  --s-called:        var(--green);
  --s-notpickup:     var(--red);
  --s-interested:    var(--gold2);
  --s-callback:      var(--orange);
  --s-notinterested: var(--purple);
}

/* ── BASE CARD ── */
.card, .em-card {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
  transition: var(--transition);
  animation: fadeUp 0.3s ease both;
}
.card:hover, .em-card:hover {
  border-color: var(--bd2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

/* Status left border */
.card.s-called, .em-card.s-called               { border-left: 3px solid var(--green);  }
.card.s-notpickup, .em-card.s-notpickup         { border-left: 3px solid var(--red);    }
.card.s-interested, .em-card.s-interested       { border-left: 3px solid var(--gold2);  }
.card.s-callback, .em-card.s-callback           { border-left: 3px solid var(--orange); }
.card.s-notinterested, .em-card.s-notinterested { border-left: 3px solid var(--purple); }

/* ── CARD TOP ── */
.card-top { display: flex; gap: 12px; padding: 13px 13px 10px; align-items: flex-start; }
.card-avatar {
  width: 50px; height: 50px; border-radius: 9px; object-fit: cover;
  flex-shrink: 0; background: var(--s2); border: 1px solid var(--bd);
}
.card-avatar-fb {
  width: 50px; height: 50px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 19px; color: #fff;
  border: 1px solid var(--bd);
  background: linear-gradient(135deg, var(--blue), var(--blue2));
}
.card-info { flex: 1; min-width: 0; }
.card-name {
  font-size: 14px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-sub { font-size: 11px; color: var(--t2); margin-top: 3px; display: flex; align-items: center; gap: 4px; }

/* ── STATUS BADGE ── */
.sbadge { padding: 3px 9px; border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; flex-shrink: 0; align-self: flex-start; }
.sb-none        { background: var(--s2);         color: var(--t3);     border: 1px solid var(--bd); }
.sb-called      { background: var(--greenf);     color: var(--green);  border: 1px solid rgba(46,204,113,0.3); }
.sb-notpickup   { background: var(--redf);       color: var(--red);    border: 1px solid rgba(231,76,60,0.3); }
.sb-interested  { background: var(--goldf);      color: var(--gold2);  border: 1px solid rgba(201,150,58,0.3); }
.sb-callback    { background: var(--orangef);    color: var(--orange); border: 1px solid rgba(230,126,34,0.3); }
.sb-notinterested { background: var(--purplef);  color: var(--purple); border: 1px solid rgba(155,89,182,0.3); }

/* ── DIVIDER ── */
.card-divider { height: 1px; background: var(--bd); margin: 0 13px; }

/* ── ACTION BUTTONS ── */
.card-btns { display: flex; gap: 6px; padding: 9px 13px; flex-wrap: wrap; }
.cbtn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 11px; border-radius: 7px; font-size: 11px; font-weight: 600;
  border: 1px solid transparent; transition: var(--transition);
}
.cbtn-call  { background: var(--greenf);               color: var(--green);  border-color: rgba(46,204,113,0.3); }
.cbtn-call:hover { background: rgba(46,204,113,0.2);   border-color: var(--green); }
.cbtn-wa    { background: rgba(37,211,102,0.1);        color: #25d366;       border-color: rgba(37,211,102,0.25); }
.cbtn-wa:hover { background: rgba(37,211,102,0.2);     border-color: #25d366; }
.cbtn-email { background: var(--goldf);                color: var(--gold);   border-color: rgba(201,150,58,0.25); }
.cbtn-email:hover { background: rgba(201,150,58,0.2);  border-color: var(--gold); }
.cbtn-li    { background: rgba(90,143,232,0.1);        color: var(--blue2);  border-color: rgba(90,143,232,0.25); }
.cbtn-li:hover { background: rgba(90,143,232,0.2);     border-color: var(--blue2); }

/* ── CRM SECTION ── */
.card-crm { padding: 9px 13px 13px; display: flex; flex-direction: column; gap: 8px; }
.crm-status-row { display: flex; gap: 5px; flex-wrap: wrap; }
.cs {
  padding: 5px 9px; border-radius: 7px; font-size: 10px; font-weight: 600;
  border: 1px solid var(--bd); background: var(--s2); color: var(--t2);
  transition: var(--transition);
}
.cs:hover { color: var(--text); border-color: var(--bd2); }
.cs.s-called       { background: var(--greenf);  color: var(--green);  border-color: rgba(46,204,113,0.4); }
.cs.s-notpickup    { background: var(--redf);    color: var(--red);    border-color: rgba(231,76,60,0.4); }
.cs.s-interested   { background: var(--goldf);   color: var(--gold2);  border-color: rgba(201,150,58,0.4); }
.cs.s-callback     { background: var(--orangef); color: var(--orange); border-color: rgba(230,126,34,0.4); }
.cs.s-notinterested{ background: var(--purplef); color: var(--purple); border-color: rgba(155,89,182,0.4); }

/* ── DETAIL BUTTON ── */
.btn-detail {
  width: 100%; padding: 8px; border-radius: 8px;
  background: var(--s2); border: 1px dashed var(--bd2);
  color: var(--t2); font-size: 12px; transition: var(--transition); text-align: center;
}
.btn-detail:hover { border-color: var(--gold); color: var(--gold); background: var(--goldf); }
.hist-count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); color: #07090f; font-size: 10px; font-weight: 700; margin-left: 4px;
}

/* ── EM CARD (Owners & Investors) ── */
.em-card-top { display: flex; flex-direction: column; gap: 8px; padding: 13px 13px 10px; }
.em-row1 { display: flex; align-items: flex-start; gap: 10px; }
.em-avatar {
  width: 44px; height: 44px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 17px; color: #fff; border: 1px solid var(--bd);
}
.em-av-owner    { background: linear-gradient(135deg, #c9963a, #e8b656); }
.em-av-investor { background: linear-gradient(135deg, #3a6fc9, #5a8fe8); }
.em-info { flex: 1; min-width: 0; }
.em-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.em-role-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 3px; }
.rb-owner    { background: rgba(201,150,58,0.15); color: var(--gold2); border: 1px solid rgba(201,150,58,0.3); }
.rb-investor { background: rgba(90,143,232,0.15); color: var(--blue2); border: 1px solid rgba(90,143,232,0.3); }

.em-props { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.em-prop  { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--t2); }
.em-prop-val { color: var(--text); font-weight: 500; }
.prop-pill { padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 600; background: var(--s2); border: 1px solid var(--bd); color: var(--t2); }
.pp-villa       { background: rgba(46,204,113,0.1);  color: var(--green);  border-color: rgba(46,204,113,0.25); }
.pp-commercial  { background: rgba(201,150,58,0.1);  color: var(--gold);   border-color: rgba(201,150,58,0.25); }
.pp-residential { background: rgba(90,143,232,0.1);  color: var(--blue2);  border-color: rgba(90,143,232,0.25); }

/* ── PIPELINE ── */
.pipeline-wrap { padding: 20px 28px 40px; }
.pipeline-title { font-family: var(--font-d); font-size: 22px; margin-bottom: 20px; }
.pipe-cols { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.pcol { background: var(--s1); border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; }
.pcol-head { padding: 11px 13px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; }
.p-called        .pcol-head { background: rgba(46,204,113,0.1);   color: var(--green);  }
.p-notpickup     .pcol-head { background: rgba(231,76,60,0.1);    color: var(--red);    }
.p-interested    .pcol-head { background: rgba(201,150,58,0.1);   color: var(--gold2);  }
.p-callback      .pcol-head { background: rgba(230,126,34,0.1);   color: var(--orange); }
.p-notinterested .pcol-head { background: rgba(155,89,182,0.1);   color: var(--purple); }
.pcol-count { padding: 2px 8px; border-radius: 10px; font-size: 10px; background: rgba(0,0,0,0.2); }
.pcol-list { padding: 9px; display: flex; flex-direction: column; gap: 6px; max-height: 480px; overflow-y: auto; }
.pitem { background: var(--bg); border: 1px solid var(--bd); border-radius: 8px; padding: 8px 10px; cursor: pointer; transition: var(--transition); }
.pitem:hover { border-color: var(--bd2); transform: translateX(2px); }
.pitem-name { font-size: 12px; font-weight: 600; }
.pitem-sub  { font-size: 10px; color: var(--t2); }
.pitem-time { font-size: 9px; color: var(--t3); margin-top: 2px; }

@media (max-width: 900px) { .pipe-cols { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .pipe-cols { grid-template-columns: 1fr; } }