/* ═══════════════════════════════════════════
   CRM DEMO - Pipeline (Kanban) Styles
   ═══════════════════════════════════════════ */

/* ─── PIPELINE SUMMARY BAR ─── */
.pl-summary{
  display:flex;gap:12px;margin-bottom:24px;
  animation:fadeIn .5s var(--ease) both;
}
.pl-summary-item{
  flex:1;padding:18px 22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  display:flex;align-items:center;gap:14px;
  transition:border-color .3s,box-shadow .3s;
}
.pl-summary-item:hover{
  border-color:var(--border2);
  box-shadow:var(--shadow);
}
.pl-summary-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
}
.pl-summary-icon.blue{background:rgba(59,130,246,.1);color:#60a5fa}
.pl-summary-icon.green{background:rgba(34,197,94,.1);color:#4ade80}
.pl-summary-icon.purple{background:rgba(168,85,247,.1);color:#c084fc}
.pl-summary-label{font-size:.75rem;color:var(--muted);margin-bottom:2px}
.pl-summary-value{
  font-size:1.35rem;font-weight:800;font-family:var(--en);
  letter-spacing:-.3px;line-height:1;
}

/* ─── VIEW TOGGLE ─── */
.pl-view-toggle{
  display:inline-flex;border-radius:var(--radius);
  border:1px solid var(--border);
  overflow:hidden;background:var(--surface2);
}
.pl-view-btn{
  height:34px;padding:0 16px;border:none;
  background:transparent;color:var(--muted);
  font-size:.78rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .2s var(--ease);
  font-family:var(--font);
}
.pl-view-btn:not(:last-child){border-right:1px solid var(--border)}
.pl-view-btn:hover{color:var(--text2);background:rgba(255,255,255,.03)}
.pl-view-btn.active{
  background:linear-gradient(135deg,var(--accent),#2563eb);
  color:#fff;
  box-shadow:0 2px 8px rgba(59,130,246,.2);
}
.pl-view-btn i{font-size:.75rem}

/* ─── KANBAN BOARD ─── */
.kanban-board{
  display:flex;gap:16px;
  overflow-x:auto;
  padding-bottom:20px;
  min-height:calc(100vh - 340px);
  scroll-behavior:smooth;
}
.kanban-board::-webkit-scrollbar{height:8px}
.kanban-board::-webkit-scrollbar-track{background:rgba(255,255,255,.02);border-radius:4px}
.kanban-board::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:4px}
.kanban-board::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.12)}

/* ─── KANBAN COLUMN ─── */
.kanban-col{
  min-width:290px;max-width:320px;flex:1 0 290px;
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
  animation:fadeIn .4s var(--ease) both;
}
.kanban-col:nth-child(1){animation-delay:.0s}
.kanban-col:nth-child(2){animation-delay:.05s}
.kanban-col:nth-child(3){animation-delay:.1s}
.kanban-col:nth-child(4){animation-delay:.15s}
.kanban-col:nth-child(5){animation-delay:.2s}

.kanban-col.drag-over{
  border-color:rgba(59,130,246,.4);
  box-shadow:0 0 0 3px rgba(59,130,246,.08),0 8px 32px rgba(59,130,246,.1);
  background:rgba(59,130,246,.02);
}

/* ─── COLUMN HEADER ─── */
.kanban-col-head{
  padding:16px 18px 14px;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.kanban-col-head::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--stage-color,var(--accent));
}
.kanban-col-head::after{
  content:'';position:absolute;top:0;left:0;right:0;height:40px;
  background:linear-gradient(180deg,var(--stage-color-soft,rgba(59,130,246,.04)),transparent);
  pointer-events:none;
}
.kanban-col-title{
  display:flex;align-items:center;gap:10px;
  position:relative;z-index:1;
}
.kanban-col-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--stage-color,var(--accent));
  box-shadow:0 0 8px var(--stage-color,var(--accent));
  flex-shrink:0;
}
.kanban-col-name{
  font-size:.88rem;font-weight:700;flex:1;
}
.kanban-col-count{
  font-size:.68rem;font-weight:700;
  padding:2px 8px;border-radius:20px;
  background:rgba(255,255,255,.06);color:var(--text2);
  font-family:var(--en);
}
.kanban-col-amount{
  font-size:.72rem;color:var(--muted);
  margin-top:6px;font-family:var(--en);
  font-weight:500;position:relative;z-index:1;
}

/* ─── CARDS CONTAINER ─── */
.kanban-cards{
  flex:1;padding:12px;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;
  min-height:80px;
}
.kanban-cards::-webkit-scrollbar{width:4px}
.kanban-cards::-webkit-scrollbar-thumb{background:rgba(255,255,255,.04);border-radius:2px}

/* ─── KANBAN CARD ─── */
.kanban-card{
  padding:16px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:grab;
  position:relative;
  overflow:hidden;
  transition:all .25s var(--ease);
}
.kanban-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.kanban-card:hover{
  border-color:var(--border2);
  box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.05);
  transform:translateY(-3px);
}
.kanban-card:hover::before{opacity:1}
.kanban-card:active{cursor:grabbing;transform:scale(.98)}

/* drag ghost */
.kanban-card.dragging{
  opacity:.4;
  transform:scale(.95) rotate(1deg);
  box-shadow:none;
}
.kanban-card.drag-ghost{
  border:2px dashed var(--accent);
  background:rgba(59,130,246,.04);
  box-shadow:0 0 20px rgba(59,130,246,.1);
}

.kanban-card-name{
  font-size:.84rem;font-weight:600;
  margin-bottom:8px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.kanban-card-customer{
  font-size:.75rem;color:var(--muted);
  display:flex;align-items:center;gap:5px;
  margin-bottom:10px;
}
.kanban-card-customer i{font-size:.65rem;color:var(--dim)}

.kanban-card-amount{
  font-size:.88rem;font-weight:700;
  color:var(--text);font-family:var(--en);
  margin-bottom:10px;
  display:flex;align-items:baseline;gap:2px;
}
.kanban-card-amount .won{
  font-size:.7rem;font-weight:500;color:var(--muted);
  margin-right:1px;
}

.kanban-card-meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
}
.kanban-card-assignee{
  font-size:.7rem;color:var(--muted);
  display:flex;align-items:center;gap:5px;
}
.kanban-card-assignee i{font-size:.6rem}
.kanban-card-date{
  font-size:.68rem;color:var(--dim);
  font-family:var(--en);
  display:flex;align-items:center;gap:4px;
}
.kanban-card-date i{font-size:.6rem}

/* Probability Badge */
.prob-badge{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:20px;
  font-size:.62rem;font-weight:700;
  font-family:var(--en);
  letter-spacing:.3px;
}
.prob-10{background:rgba(148,163,184,.1);color:#94a3b8;border:1px solid rgba(148,163,184,.1)}
.prob-25{background:rgba(96,165,250,.1);color:#60a5fa;border:1px solid rgba(96,165,250,.1)}
.prob-50{background:rgba(167,139,250,.1);color:#a78bfa;border:1px solid rgba(167,139,250,.1)}
.prob-75{background:rgba(251,191,36,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.1)}
.prob-100{background:rgba(74,222,128,.1);color:#4ade80;border:1px solid rgba(74,222,128,.1)}

/* Stage badges (for list view) */
.stage-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;
  font-size:.7rem;font-weight:600;
}
.stage-badge .dot{
  width:7px;height:7px;border-radius:50%;
  flex-shrink:0;
}

/* ─── EMPTY COLUMN ─── */
.kanban-empty{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:32px 16px;
  color:var(--dim);
}
.kanban-empty i{font-size:1.8rem;margin-bottom:10px;opacity:.3}
.kanban-empty span{font-size:.78rem}

/* ─── LIST VIEW TABLE ENHANCEMENTS ─── */
#listView .e-table .td-amount{
  font-family:var(--en);font-weight:600;
  font-feature-settings:'tnum';
}

/* ─── AUTOCOMPLETE ─── */
.ac-wrap{position:relative}
.ac-list{
  position:absolute;top:100%;left:0;right:0;z-index:50;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  max-height:200px;overflow-y:auto;display:none;
  margin-top:4px;
}
.ac-list.open{display:block}
.ac-item{
  padding:10px 14px;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--border);
  transition:background .15s;
}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.focused{
  background:var(--accent-soft);
}
.ac-item-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;flex-shrink:0;
  background:rgba(59,130,246,.1);color:#60a5fa;
}
.ac-item-info{flex:1;min-width:0}
.ac-item-code{font-size:.68rem;color:var(--dim);font-family:var(--en)}
.ac-item-name{font-size:.82rem;font-weight:500}
.ac-item-grade{
  font-size:.6rem;font-weight:600;padding:2px 6px;border-radius:10px;
}
.ac-item-grade.VIP{background:rgba(245,158,11,.1);color:#fbbf24}
.ac-item-grade.일반{background:rgba(59,130,246,.1);color:#60a5fa}
.ac-item-grade.잠재{background:rgba(100,116,139,.08);color:#94a3b8}
.ac-no-result{
  padding:20px;text-align:center;color:var(--dim);font-size:.8rem;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}

/* ─── CARD CLICK INDICATOR ─── */
.kanban-card-actions{
  position:absolute;top:10px;right:10px;
  display:flex;gap:4px;
  opacity:0;transition:opacity .2s;
}
.kanban-card:hover .kanban-card-actions{opacity:1}
.kanban-card-btn{
  width:26px;height:26px;border-radius:6px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;transition:all .15s;
}
.kanban-card-btn:hover{
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-soft);
}
.kanban-card-btn.danger:hover{
  border-color:var(--red);color:var(--red);
  background:rgba(239,68,68,.08);
}

/* ─── STATUS BADGES ─── */
.status-진행{background:rgba(59,130,246,.1);color:#60a5fa;border:1px solid rgba(59,130,246,.1)}
.status-성공{background:rgba(34,197,94,.08);color:#4ade80;border:1px solid rgba(34,197,94,.08)}
.status-실패{background:rgba(239,68,68,.08);color:#f87171;border:1px solid rgba(239,68,68,.08)}
.status-보류{background:rgba(100,116,139,.08);color:#94a3b8;border:1px solid rgba(100,116,139,.08)}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  .pl-summary{flex-wrap:wrap}
  .pl-summary-item{flex:1 1 calc(50% - 6px);min-width:0}
  .kanban-board{flex-direction:column;overflow-x:visible;min-height:auto}
  .kanban-col{min-width:100%;max-width:100%;flex:none}
  .kanban-cards{max-height:400px}
  .e-page-head{flex-direction:column;gap:12px}
}
@media(max-width:768px){
  .pl-summary{gap:8px;margin-bottom:16px}
  .pl-summary-item{padding:12px 14px;gap:10px}
  .pl-summary-icon{width:36px;height:36px;font-size:.95rem}
  .pl-summary-value{font-size:1.1rem}
  .pl-summary-label{font-size:.68rem}
  .pl-view-toggle{align-self:flex-start}
  .pl-view-btn{padding:0 12px;font-size:.74rem}
  .kanban-col-head{padding:12px 14px}
  .kanban-col-name{font-size:.82rem}
  .kanban-card{padding:12px}
  .kanban-card-name{font-size:.84rem}
}
@media(max-width:640px){
  .e-form-grid{grid-template-columns:1fr}
  .pl-summary-item{flex:1 1 100%}
}