/* ═══════════════════════════════════════════════════════════════════════
   Zawadi Platform Console — Leads & CRM / Kanban Board
   Companion to styles.css — loaded after it.

   Root issue this file fixes: renderPipeline() in app.js generates
   .kanban-board, .kanban-column, .k-card, .k-priority, .k-tag etc.,
   but none of those classes had any CSS. Cards therefore rendered as
   unstyled plain text. This file provides the full visual layer.

   v2 (patch-appjs.js applied):
   - Priority: text badges Low / Med / High instead of unicode ★ stars
   - Activity: ::before SVG calendar dot instead of 📅 emoji
   - Students: ::before person dot instead of 👤 emoji
   - Edit btn: "Edit" text, styled correctly at 10px
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Stage colour tokens ──────────────────────────────────────────── */
:root{
  --c-new:#030b82;          --c-new-soft:#eef1ff;       --c-new-border:#c7ccf2;
  --c-contacted:#b45309;    --c-contacted-soft:#fef3c7; --c-contacted-border:#fcd34d;
  --c-interested:#059669;   --c-interested-soft:#d1fae5;--c-interested-border:#6ee7b7;
  --c-converted:#0D9488;    --c-converted-soft:#e0f2f1; --c-converted-border:#5eead4;
  --c-lost:#dc2626;         --c-lost-soft:#fee2e2;      --c-lost-border:#fca5a5;
}

/* ── View toggle tabs (Pipeline / List View / Client Base) ─────────── */
.crm-view-tabs{display:inline-flex;border:1px solid var(--border);background:var(--surface)}
.crm-view-tab{
  padding:6px 16px;font-size:12px;font-weight:600;color:var(--muted);
  background:none;border:none;border-right:1px solid var(--border);
  cursor:pointer;transition:all .15s;white-space:nowrap
}
.crm-view-tab:last-child{border-right:0}
.crm-view-tab:hover{background:var(--page);color:var(--ink)}
.crm-view-tab.active{background:var(--brand);color:#fff}

/* ── Kanban board outer container ─────────────────────────────────── */
.kanban-board{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  align-items:start;
  overflow-x:hidden;
  padding-bottom:14px;
  min-height:320px
}

/* ── Column ───────────────────────────────────────────────────────── */
.kanban-column{
  width:100%;
  min-width:0;
  background:var(--page);
  border:1px solid var(--border);
  border-top:3px solid var(--border);
  display:flex;flex-direction:column
}
.kanban-column[data-stage="new"]        {border-top-color:var(--c-new)}
.kanban-column[data-stage="contacted"]  {border-top-color:var(--c-contacted)}
.kanban-column[data-stage="interested"] {border-top-color:var(--c-interested)}
.kanban-column[data-stage="converted"]  {border-top-color:var(--c-converted)}
.kanban-column[data-stage="lost"]       {border-top-color:var(--c-lost)}

/* Column header */
.k-col-head{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:12px 13px 10px
}
.k-col-title{display:flex;align-items:center;gap:8px;margin-bottom:3px}

.k-stage-name{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink);flex:1
}

/* Stage count badge */
.k-stage-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  font-size:11px;font-weight:700;font-family:var(--mono);
  border:1px solid var(--border);background:var(--page);color:var(--muted)
}
.kanban-column[data-stage="new"]        .k-stage-count{background:var(--c-new-soft);color:var(--c-new);border-color:var(--c-new-border)}
.kanban-column[data-stage="contacted"]  .k-stage-count{background:var(--c-contacted-soft);color:var(--c-contacted);border-color:var(--c-contacted-border)}
.kanban-column[data-stage="interested"] .k-stage-count{background:var(--c-interested-soft);color:var(--c-interested);border-color:var(--c-interested-border)}
.kanban-column[data-stage="converted"]  .k-stage-count{background:var(--c-converted-soft);color:var(--c-converted);border-color:var(--c-converted-border)}
.kanban-column[data-stage="lost"]       .k-stage-count{background:var(--c-lost-soft);color:var(--c-lost);border-color:var(--c-lost-border)}

.k-col-sub{font-size:11px;color:var(--muted);margin-bottom:8px}

/* Quick add */
.k-quick-add{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--muted);font-size:17px;line-height:1;cursor:pointer;
  transition:all .15s
}
.k-quick-add:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* Drop zone */
.k-col-body{
  padding:8px;min-height:72px;
  display:flex;flex-direction:column;gap:7px;flex:1
}

/* ── Card ─────────────────────────────────────────────────────────── */
.k-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--border);
  padding:11px 12px 10px;
  cursor:grab;position:relative;
  transition:box-shadow .15s,transform .1s
}
.k-card:hover{box-shadow:0 3px 14px rgba(3,11,130,.1);transform:translateY(-1px)}
.k-card:active{cursor:grabbing}

.k-card.new        {border-left-color:var(--c-new)}
.k-card.contacted  {border-left-color:var(--c-contacted)}
.k-card.interested {border-left-color:var(--c-interested)}
.k-card.converted  {border-left-color:var(--c-converted)}
.k-card.lost       {border-left-color:var(--c-lost);opacity:.65}

.k-card-color{display:none}

/* ── Card header row ──────────────────────────────────────────────── */
.k-card-top{
  display:flex;align-items:center;gap:5px;
  flex-wrap:wrap;margin-bottom:7px
}

/* ── Priority badge — Low / Med / High text (from patch-appjs.js) ── */
.k-priority{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:1px 6px;line-height:1.6;
  border:1px solid transparent;flex-shrink:0
}
.k-priority.p1{background:#f8fafc;color:#94a3b8;border-color:#e2e8f0}
.k-priority.p2{background:var(--amber-soft);color:var(--amber);border-color:#fcd34d}
.k-priority.p3{background:var(--red-soft);color:var(--red);border-color:#fca5a5}

/* Tags */
.k-tag{
  display:inline-block;font-size:10px;font-weight:600;
  padding:1px 7px;line-height:1.6;white-space:nowrap;
  background:var(--page);border:1px solid var(--border);color:var(--muted)
}

/* ── School name ──────────────────────────────────────────────────── */
.k-card-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px;line-height:1.3}

/* ── Contact + phone ─────────────────────────────────────────────── */
.k-card-sub{
  font-size:11px;color:var(--muted);margin-bottom:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* ── Card footer ─────────────────────────────────────────────────── */
.k-card-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:6px;padding-top:8px;border-top:1px solid var(--border)
}

/* Activity — no emoji; CSS provides the visual dot */
.k-activity{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;color:var(--brand);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1
}
.k-activity::before{
  /* Small calendar-style square dot in brand blue */
  content:'';display:inline-block;flex-shrink:0;
  width:6px;height:6px;
  background:var(--brand);
  border-radius:1px;
  opacity:.6
}

/* Students count — no emoji; CSS provides the visual dot */
.k-students{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--muted);
  font-family:var(--mono);white-space:nowrap;flex-shrink:0
}
.k-students::before{
  /* Small person-shaped circle dot */
  content:'';display:inline-block;flex-shrink:0;
  width:6px;height:6px;
  background:var(--teal);
  border-radius:50%;
  opacity:.7
}

/* ── Edit button ─────────────────────────────────────────────────── */
.k-card-edit{
  position:absolute;top:8px;right:8px;
  /* wider to fit "Edit" text */
  width:auto;height:20px;
  padding:0 7px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:transparent;
  color:var(--muted);font-size:10px;font-weight:600;
  cursor:pointer;letter-spacing:.02em;
  opacity:0;transition:all .12s;line-height:1
}
.k-card:hover .k-card-edit{
  opacity:1;border-color:var(--border);background:var(--surface)
}
.k-card-edit:hover{
  background:var(--brand)!important;
  border-color:var(--brand)!important;
  color:#fff!important
}

/* Sortable.js drag ghost */
.k-card-ghost{
  opacity:.28;
  background:#eef1ff!important;
  border:1.5px dashed var(--brand)!important
}

/* ── Lead stage badges (list / table view) ───────────────────────── */
.lead-badge.new       {background:var(--c-new-soft);color:var(--c-new)}
.lead-badge.new::before{background:var(--c-new)}
.lead-badge.contacted {background:var(--c-contacted-soft);color:var(--c-contacted)}
.lead-badge.contacted::before{background:#f59e0b}
.lead-badge.interested{background:var(--c-interested-soft);color:#065f46}
.lead-badge.interested::before{background:var(--c-interested)}
.lead-badge.converted {background:var(--c-converted-soft);color:#0f6e56}
.lead-badge.converted::before{background:var(--c-converted)}
.lead-badge.lost      {background:var(--c-lost-soft);color:var(--c-lost)}
.lead-badge.lost::before{background:var(--c-lost)}

/* ── CRM metric cards (bottom row) ───────────────────────────────── */
.crm-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.crm-metric-card{
  background:var(--surface);border:1px solid var(--border);
  padding:16px 18px;position:relative;overflow:hidden
}
.crm-metric-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.crm-metric-card:nth-child(1)::before{background:var(--brand)}
.crm-metric-card:nth-child(2)::before{background:var(--teal)}
.crm-metric-card:nth-child(3)::before{background:var(--green)}
.crm-metric-card:nth-child(4)::before{background:#f59e0b}
.crm-m-label{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-bottom:6px
}
#crm-m-total,#crm-m-week,#crm-m-converted,#crm-m-rate{
  font-size:30px;font-weight:900;color:var(--ink);
  letter-spacing:-.5px;line-height:1;display:block
}
.crm-m-sub{font-size:12px;color:var(--muted);margin-top:4px}
.crm-m-badge-wrap{position:absolute;top:12px;right:14px}
.crm-m-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:700;padding:2px 8px;
  background:var(--green-soft);color:var(--green)
}

/* ── Running Instances mini cards ────────────────────────────────── */
.ri-card{background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.ri-card-head{padding:14px 16px;border-bottom:1px solid var(--border)}
.ri-card-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
.ri-name{font-size:14px;font-weight:700;color:var(--ink)}
.ri-domain{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.ri-dots-row{display:flex;align-items:center;gap:6px;margin-top:6px}
.ri-container-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.ri-dot-green{background:var(--green)}
.ri-dot-amber{background:#f59e0b}
.ri-dot-red{background:var(--red)}
.ri-dots-label{font-size:11px;color:var(--muted);margin-left:4px}
.ri-container-list{padding:0;border-bottom:1px solid var(--border)}
.ri-container-row{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);font-size:12px}
.ri-container-row:last-child{border-bottom:0}
.ri-c-name{flex:1;font-weight:600}
.ri-c-port{font-family:var(--mono);font-size:11px;color:var(--muted)}
.ri-card-footer{padding:12px 16px}
.ri-meta-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:5px}
.ri-meta-label{color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.ri-meta-val{font-weight:600;color:var(--ink)}
.ri-actions{display:flex;gap:6px;margin-top:10px}

/* ── Space Usage panel ───────────────────────────────────────────── */
.su-summary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.su-summary-stat{background:var(--page);border:1px solid var(--border);padding:12px 14px;text-align:center}
.su-stat-val{font-size:22px;font-weight:900;color:var(--ink);letter-spacing:-.5px}
.su-stat-unit{font-size:14px;font-weight:600;color:var(--muted)}
.su-stat-label{font-size:11px;color:var(--muted);margin-top:3px}
.su-stacked-bar{height:18px;display:flex;overflow:hidden;border:1px solid var(--border);margin-bottom:10px}
.su-seg{height:100%}
.su-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:18px}
.su-legend-item{display:flex;align-items:center;gap:6px;font-size:12px}
.su-legend-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.su-legend-label{color:var(--muted)}
.su-legend-val{font-weight:600;font-family:var(--mono);color:var(--ink)}
.su-breakdown-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.su-breakdown-item{background:var(--page);border:1px solid var(--border);padding:12px 14px}
.su-b-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.su-b-label{font-size:12px;font-weight:600}
.su-b-val{font-size:12px;font-weight:700;font-family:var(--mono)}
.su-meter{height:5px;background:#e8ebf4;overflow:hidden;margin-bottom:4px}
.su-meter-fill{height:100%;transition:width .6s}
.su-b-pct{font-size:10px;color:var(--muted)}
.su-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
.su-per-instance-section{margin-top:4px}
.su-per-instance-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.su-pi-card{background:var(--page);border:1px solid var(--border);padding:12px 14px}
.su-pi-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.su-pi-name{font-size:12px;font-weight:700}
.su-pi-total{font-size:12px;font-weight:700;font-family:var(--mono)}
.su-pi-rows{display:flex;flex-direction:column;gap:3px}
.su-pi-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}

/* Running instances grid */
#running-instances-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;padding:14px 18px
}

@media(max-width:1180px){
  .kanban-board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .crm-metrics{grid-template-columns:repeat(2,1fr)}
  .su-summary-row{grid-template-columns:repeat(2,1fr)}
  .su-breakdown-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:780px){
  .kanban-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .su-breakdown-grid{grid-template-columns:1fr}
  .crm-metrics{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .kanban-board{grid-template-columns:1fr}
}