/* ================================================================
   Dashboard Layout & Components
   ================================================================ */

.dash-body { display:flex; min-height:100vh; }

/* SIDEBAR */
.sidebar {
  width:240px; min-height:100vh; background:var(--bg2);
  border-right:1px solid var(--border); display:flex;
  flex-direction:column; padding:16px 0; flex-shrink:0;
  position:fixed; top:0; left:0; bottom:0; z-index:50;
}
.sidebar-logo {
  display:flex; align-items:center; gap:10px;
  padding:0 20px 20px; font-size:16px; color:var(--text);
  border-bottom:1px solid var(--border); margin-bottom:12px;
}
.sidebar-logo strong { color:var(--accent); }
.sidebar-nav { flex:1; display:flex; flex-direction:column; gap:2px; padding:0 8px; }
.sidebar-bottom { border-top:1px solid var(--border); padding:12px 8px 0; display:flex; flex-direction:column; gap:2px; }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px; font-size:13px;
  color:var(--text2); cursor:pointer; transition:var(--tr); text-decoration:none;
}
.nav-item:hover { background:var(--surface); color:var(--text); }
.nav-item.active { background:var(--accent-bg); color:var(--accent); }
.nav-item i[data-lucide] { width:18px; height:18px; flex-shrink:0; }
.badge {
  margin-left:auto; padding:1px 8px; border-radius:50px;
  background:var(--red); color:#fff; font-size:11px; font-weight:700;
  min-width:20px; text-align:center;
}
.badge:empty, .badge[data-count="0"] { display:none; }

/* MAIN */
.dash-main { flex:1; margin-left:240px; padding:24px 32px; min-height:100vh; }

/* TAB CONTENT */
.tab-content { display:none; }
.tab-content.active { display:block; }
.tab-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.tab-header h1 { font-size:24px; font-weight:700; }
.tab-actions { display:flex; align-items:center; gap:12px; }
.system-status {
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--accent); padding:6px 14px;
  background:var(--accent-bg); border-radius:50px;
  border:1px solid var(--accent-b);
}
.system-status i[data-lucide] { width:14px; height:14px; }
.system-status.degraded { color:var(--orange); background:rgba(255,159,67,0.08); border-color:rgba(255,159,67,0.25); }

/* STAT CARDS */
.stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:24px; }
.stat-card {
  display:flex; align-items:center; gap:14px;
  padding:20px; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2);
}
.stat-icon {
  width:44px; height:44px; border-radius:12px; background:var(--accent-bg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stat-icon i[data-lucide] { width:20px; height:20px; color:var(--accent); }
.stat-icon.blue { background:rgba(76,154,255,0.1); }
.stat-icon.blue i[data-lucide] { color:var(--blue); }
.stat-icon.orange { background:rgba(255,159,67,0.1); }
.stat-icon.orange i[data-lucide] { color:var(--orange); }
.stat-icon.green { background:rgba(0,230,118,0.1); }
.stat-val { display:block; font-size:22px; font-weight:800; }
.stat-lbl { font-size:12px; color:var(--text3); }

/* CARD */
.card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); padding:20px; margin-bottom:20px;
}
.card-header {
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--text2);
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border);
}
.card-header i[data-lucide] { width:16px; height:16px; color:var(--accent); }

/* PIPELINE BAR */
.pipeline-bar { display:flex; gap:4px; height:48px; border-radius:8px; overflow:hidden; }
.pipe-seg {
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; transition:var(--tr); min-width:40px;
  font-size:11px; font-weight:600; cursor:default;
}
.pipe-seg .pipe-count { font-size:16px; font-weight:800; }

/* PIPELINE CONTAINER — Modern Kanban-style */
.pipeline-container { display:flex; flex-direction:column; gap:24px; }

/* PIPELINE SUMMARY STATS — Top Row */
.pipeline-summary {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
}
.pipe-summary-card {
  padding:18px 20px; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); display:flex; align-items:center; gap:14px;
}
.pipe-summary-icon {
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pipe-summary-icon i[data-lucide] { width:18px; height:18px; }
.pipe-summary-val { display:block; font-size:22px; font-weight:800; }
.pipe-summary-lbl { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; }

/* PIPELINE CONVERSION BAR — Thin horizontal flow */
.pipeline-flow {
  display:flex; align-items:center; gap:0;
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  padding:6px; overflow:hidden;
}
.flow-segment {
  height:6px; border-radius:3px; transition:all .4s ease;
  min-width:4px;
}

/* PIPELINE BOARD — Horizontal stage columns */
.pipeline-board {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
}
.pipe-stage {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2);
  padding:0; overflow:hidden; transition:var(--tr); position:relative;
}
.pipe-stage:hover { border-color:var(--border2); }
.pipe-stage-header {
  padding:14px 16px 10px; display:flex; align-items:center; justify-content:space-between;
}
.pipe-stage-name {
  font-size:12px; font-weight:600; color:var(--text2);
  text-transform:uppercase; letter-spacing:0.5px;
  display:flex; align-items:center; gap:6px;
}
.pipe-stage-name i[data-lucide] { width:14px; height:14px; opacity:0.6; }
.pipe-stage-badge {
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:50px;
}
.pipe-stage-count {
  padding:0 16px 14px; font-size:32px; font-weight:800; color:var(--text);
  line-height:1;
}
.pipe-stage-bar {
  height:3px; width:100%; background:var(--border);
}
.pipe-stage-bar-fill {
  height:100%; border-radius:0 3px 3px 0; transition:width .6s ease;
}
.pipe-stage-footer {
  padding:10px 16px; display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:var(--text3);
}
.pipe-stage-pct { font-weight:600; }

/* Stage accent colors — monochromatic progression */
.pipe-accent-gray .pipe-stage-badge { background:rgba(107,114,128,0.15); color:#9ca3af; }
.pipe-accent-gray .pipe-stage-bar-fill { background:#6b7280; }
.pipe-accent-slate .pipe-stage-badge { background:rgba(100,116,139,0.15); color:#94a3b8; }
.pipe-accent-slate .pipe-stage-bar-fill { background:#64748b; }
.pipe-accent-blue .pipe-stage-badge { background:rgba(76,154,255,0.12); color:var(--blue); }
.pipe-accent-blue .pipe-stage-bar-fill { background:var(--blue); }
.pipe-accent-cyan .pipe-stage-badge { background:rgba(34,211,238,0.12); color:#22d3ee; }
.pipe-accent-cyan .pipe-stage-bar-fill { background:#22d3ee; }
.pipe-accent-amber .pipe-stage-badge { background:rgba(251,191,36,0.12); color:#fbbf24; }
.pipe-accent-amber .pipe-stage-bar-fill { background:#fbbf24; }
.pipe-accent-purple .pipe-stage-badge { background:rgba(167,139,250,0.12); color:var(--purple); }
.pipe-accent-purple .pipe-stage-bar-fill { background:var(--purple); }
.pipe-accent-emerald .pipe-stage-badge { background:rgba(52,211,153,0.12); color:#34d399; }
.pipe-accent-emerald .pipe-stage-bar-fill { background:#34d399; }
.pipe-accent-green .pipe-stage-badge { background:var(--accent-bg); color:var(--accent); }
.pipe-accent-green .pipe-stage-bar-fill { background:var(--accent); }
.pipe-accent-green .pipe-stage-count { color:var(--accent); }

/* CONVERSATIONS */
.conv-layout { display:grid; grid-template-columns:320px 1fr; gap:0; height:calc(100vh - 140px); }
.conv-list {
  border-right:1px solid var(--border); overflow-y:auto;
  background:var(--bg2); border-radius:var(--r2) 0 0 var(--r2);
}
.conv-item {
  padding:14px 16px; border-bottom:1px solid var(--border);
  cursor:pointer; transition:var(--tr);
}
.conv-item:hover { background:var(--surface); }
.conv-item.active { background:var(--accent-bg); border-left:3px solid var(--accent); }
.conv-item-top { display:flex; justify-content:space-between; margin-bottom:4px; }
.conv-name { font-weight:600; font-size:13px; }
.conv-time { font-size:11px; color:var(--text3); }
.conv-preview { font-size:12px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.conv-meta { display:flex; gap:8px; margin-top:6px; }
.conv-tag {
  font-size:10px; padding:2px 8px; border-radius:50px;
  font-weight:600; text-transform:uppercase;
}
.tag-outreach { background:rgba(76,154,255,0.1); color:var(--blue); }
.tag-interested { background:rgba(255,159,67,0.1); color:var(--orange); }
.tag-negotiating { background:rgba(167,139,250,0.1); color:var(--purple); }
.tag-closing { background:rgba(0,230,118,0.1); color:var(--accent); }
.tag-closed_won { background:var(--accent); color:#000; }
.tag-rejected { background:rgba(255,76,106,0.1); color:var(--red); }

/* CHAT */
.conv-chat {
  display:flex; flex-direction:column; background:var(--bg);
  border-radius:0 var(--r2) var(--r2) 0; overflow:hidden;
}
.chat-empty {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:var(--text3); gap:12px;
}
.chat-empty i[data-lucide] { width:40px; height:40px; }
.chat-head {
  padding:14px 20px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg2);
}
.chat-head-info h3 { font-size:14px; }
.chat-head-info span { font-size:12px; color:var(--text3); }
.chat-head-actions { display:flex; gap:8px; }
.chat-messages { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:75%; }
.msg-out { align-self:flex-end; }
.msg-in { align-self:flex-start; }
.msg-bubble {
  padding:10px 14px; border-radius:12px;
  font-size:13px; line-height:1.6; white-space:pre-wrap;
}
.msg-out .msg-bubble { background:var(--accent-bg); border:1px solid var(--accent-b); border-bottom-right-radius:4px; }
.msg-in .msg-bubble { background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:4px; }
.msg-meta { font-size:10px; color:var(--text3); margin-top:4px; padding:0 4px; }
.msg-out .msg-meta { text-align:right; }
.chat-input {
  display:flex; padding:12px 16px; gap:8px;
  border-top:1px solid var(--border); background:var(--bg2);
}
.chat-input input {
  flex:1; padding:10px 14px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:13px; outline:none;
}
.chat-input input:focus { border-color:var(--accent); }

/* FILTERS */
.conv-filters { display:flex; gap:6px; flex-wrap:wrap; }
.filter-btn {
  padding:6px 14px; border:1px solid var(--border); border-radius:50px;
  background:transparent; color:var(--text2); font-size:12px;
  cursor:pointer; transition:var(--tr);
}
.filter-btn:hover, .filter-btn.active { background:var(--accent); color:#000; border-color:var(--accent); }

/* TABLE */
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th {
  text-align:left; padding:10px 14px; font-size:11px;
  text-transform:uppercase; letter-spacing:0.5px; color:var(--text3);
  border-bottom:1px solid var(--border); font-weight:600;
}
.data-table td {
  padding:10px 14px; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.03);
  color:var(--text2);
}
.data-table tr:hover td { background:var(--surface); }
.score-badge {
  display:inline-block; padding:2px 10px; border-radius:50px;
  font-size:12px; font-weight:700; min-width:36px; text-align:center;
}
.score-high { background:rgba(0,230,118,0.15); color:var(--accent); }
.score-mid { background:rgba(255,159,67,0.15); color:var(--orange); }
.score-low { background:rgba(76,154,255,0.15); color:var(--blue); }
.platform-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 10px; border-radius:50px; font-size:11px; font-weight:600;
  background:var(--surface); color:var(--text2);
}
.status-badge {
  padding:2px 10px; border-radius:50px; font-size:11px; font-weight:600;
}

/* LOGS */
.log-list { max-height:400px; overflow-y:auto; }
.log-list.full-logs { max-height:calc(100vh - 140px); }
.log-entry {
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.03);
  font-size:13px;
}
.log-agent {
  font-weight:600; font-size:11px; padding:2px 10px;
  border-radius:50px; min-width:60px; text-align:center;
}
.log-agent-scout { background:rgba(0,230,118,0.1); color:var(--accent); }
.log-agent-closer { background:rgba(76,154,255,0.1); color:var(--blue); }
.log-agent-finance { background:rgba(255,159,67,0.1); color:var(--orange); }
.log-agent-guardian { background:rgba(167,139,250,0.1); color:var(--purple); }
.log-action { color:var(--text2); flex:1; }
.log-time { font-size:11px; color:var(--text3); white-space:nowrap; }

/* BUTTON */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; background:var(--accent); color:#000; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:var(--tr); font-family:var(--font); }
.btn:hover { background:#2ea043; }
.btn svg { width:16px; height:16px; }
.btn-lg { padding:12px 28px; font-size:15px; }

/* PROFILE FORM */
.profile-form { max-width:800px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group.full { grid-column:1 / -1; }
.form-group label { font-size:12px; font-weight:600; color:var(--text2); }
.form-group label small { font-weight:400; color:var(--text3); }
.form-group input, .form-group textarea, .form-group select {
  padding:10px 14px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:13px; font-family:var(--font);
  outline:none; transition:var(--tr); resize:vertical;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--accent); }
.form-group select { appearance:none; cursor:pointer; }
.form-actions { display:flex; align-items:center; }

/* URL INPUT ROW */
.url-input-row { display:flex; gap:8px; }
.url-input { flex:1; }
.field-status { font-size:12px; margin-top:4px; min-height:16px; }
.field-status.ok { color:var(--accent); }
.field-status.loading { color:var(--blue); }
.field-status.err { color:var(--red); }

/* FILE UPLOAD */
.file-upload-zone {
  border:2px dashed var(--border); border-radius:12px;
  padding:32px 24px; text-align:center; cursor:pointer;
  transition:var(--tr); background:var(--bg);
}
.file-upload-zone:hover, .file-upload-zone.dragover { border-color:var(--accent); background:var(--accent-bg); }
.file-upload-zone i[data-lucide] { width:32px; height:32px; color:var(--text3); margin-bottom:8px; }
.file-upload-zone p { font-size:14px; color:var(--text2); margin-bottom:4px; }
.file-upload-zone small { color:var(--text3); }
.file-browse { color:var(--accent); cursor:pointer; font-weight:600; text-decoration:underline; }
.uploaded-files-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.uploaded-file {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--surface); border-radius:8px; font-size:13px;
}
.uploaded-file i[data-lucide] { width:16px; height:16px; color:var(--accent); flex-shrink:0; }
.uploaded-file .file-name { flex:1; color:var(--text2); }
.uploaded-file .file-size { color:var(--text3); font-size:11px; }
.uploaded-file .file-status { font-size:11px; font-weight:600; }
.uploaded-file .file-status.parsed { color:var(--accent); }

/* SECTION DIVIDER */
.section-divider { height:1px; background:var(--border); margin:36px 0; }

/* TEST CHAT */
.test-chat-title { display:flex; align-items:center; gap:10px; font-size:20px; margin-bottom:8px; }
.test-chat-title i[data-lucide] { width:22px; height:22px; color:var(--accent); }
.test-chat-box {
  max-width:800px; border:1px solid var(--border); border-radius:var(--r2);
  background:var(--bg); overflow:hidden; display:flex; flex-direction:column;
  height:400px;
}
.test-chat-messages {
  flex:1; overflow-y:auto; padding:16px 20px;
  display:flex; flex-direction:column; gap:10px;
}
.test-chat-input {
  display:flex; padding:12px 16px; gap:8px;
  border-top:1px solid var(--border); background:var(--bg2);
}
.test-chat-input input {
  flex:1; padding:10px 14px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:13px; outline:none; font-family:var(--font);
}
.test-chat-input input:focus { border-color:var(--accent); }

/* EXPANDABLE LEAD CONTENT */
.lead-content { cursor:pointer; position:relative; }
.lead-content-short { display:block; }
.lead-content-full { display:none; white-space:pre-wrap; word-break:break-word; max-height:300px; overflow-y:auto; padding:12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; margin-top:6px; font-size:12px; line-height:1.6; }
.lead-content.expanded .lead-content-short { display:none; }
.lead-content.expanded .lead-content-full { display:block; }
.lead-expand-btn { color:var(--accent); font-size:11px; cursor:pointer; margin-left:4px; }

/* INTEGRATIONS */
.integrations-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.integration-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  padding:24px; transition:var(--tr); position:relative;
}
.integration-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.integration-card.connected { border-color:var(--accent); }
.integration-card.connected::after {
  content:'Connected'; position:absolute; top:12px; right:12px;
  background:var(--accent); color:#000; font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:0.5px;
}
.int-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.int-label { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.int-icon { border-radius:8px; }
.int-card-title { font-size:18px; font-weight:800; margin-bottom:6px; }
.int-card-desc { font-size:13px; color:var(--text2); line-height:1.5; margin-bottom:14px; }
.int-card-status { font-size:12px; margin-bottom:10px; min-height:18px; }
.int-card-status .connected-info { color:var(--accent); display:flex; align-items:center; gap:4px; }
.int-card-status .connected-info i { width:14px; height:14px; }
.int-connect-btn { font-size:13px !important; padding:10px 16px !important; }
.integration-card.connected .int-connect-btn { background:var(--surface); color:var(--red); border:1px solid var(--border); }

@media (max-width:900px) {
  .sidebar { width:60px; overflow:hidden; }
  .sidebar-logo span, .nav-item span:not(.badge) { display:none; }
  .dash-main { margin-left:60px; padding:16px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .conv-layout { grid-template-columns:1fr; }
  .pipeline-board { grid-template-columns:1fr 1fr; }
  .pipeline-summary { grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:1fr; }
  .integrations-grid { grid-template-columns:1fr 1fr; }
}