/* ============================================================
   MyCRM Theme — Monday.com inspired, Green & White
   ============================================================ */

:root {
  --crm-green:         #00c875;
  --crm-green-dark:    #007a40;
  --crm-green-mid:     #00a65a;
  --crm-green-light:   #e8f5ee;
  --crm-green-lighter: #f0faf5;
  --crm-sidebar-bg:    #e8f5ee;
  --crm-sidebar-hover: #d4ece0;
  --crm-sidebar-active:#00c875;
  --crm-body-bg:       #ffffff;
  --crm-card-bg:       #ffffff;
  --crm-border:        #d8e8df;
  --crm-text:          #1a2e22;
  --crm-text-muted:    #6b7d74;
  --crm-shadow:        0 2px 8px rgba(0, 100, 50, 0.08);
  --crm-shadow-md:     0 4px 16px rgba(0, 100, 50, 0.12);
  --crm-radius:        10px;
  --crm-radius-sm:     6px;

  /* Status colors */
  --status-new:        #e3f0ff;
  --status-new-text:   #1877f2;
  --status-qualified:  #e8f5e9;
  --status-qualified-text: #2e7d32;
  --status-unqualified:#fdecea;
  --status-unqualified-text: #c62828;
  --status-working:    #fff8e1;
  --status-working-text: #f57f17;
  --status-won:        #e8f5e9;
  --status-won-text:   #2e7d32;
  --status-lost:       #fdecea;
  --status-lost-text:  #c62828;
}

/* ── GLOBAL ───────────────────────────────────────────────── */
body {
  background-color: var(--crm-body-bg) !important;
  font-family: 'Inter', 'Poppins', 'Nunito', -apple-system, sans-serif !important;
  font-size: 0.875rem !important;
  color: var(--crm-text) !important;
}

/* Bootstrap 4 gap polyfill — modern browsers support CSS gap natively */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

a { color: var(--crm-green-mid); }
a:hover { color: var(--crm-green-dark); }

/* ── SIDEBAR ──────────────────────────────────────────────── */
.main-sidebar,
.main-sidebar::before {
  background-color: var(--crm-sidebar-bg) !important;
}

.brand-link {
  background-color: var(--crm-sidebar-bg) !important;
  border-bottom: 1px solid #c8e6d4 !important;
  padding: 14px 16px !important;
}

.brand-link:hover {
  background-color: var(--crm-sidebar-hover) !important;
}

.brand-text {
  color: #1a2e22 !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.02em;
}

.brand-text b { color: var(--crm-green-dark) !important; }

/* Sidebar nav links */
.nav-sidebar .nav-item > .nav-link {
  color: #2d5a3d !important;
  border-radius: var(--crm-radius-sm) !important;
  margin: 1px 8px !important;
  padding: 8px 12px !important;
  transition: all 0.18s ease !important;
}

.nav-sidebar .nav-item > .nav-link:hover {
  background-color: var(--crm-sidebar-hover) !important;
  color: #1a2e22 !important;
}

.nav-sidebar .nav-item > .nav-link.active,
.nav-sidebar .nav-item.menu-open > .nav-link {
  background-color: var(--crm-green) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.nav-sidebar .nav-item > .nav-link .nav-icon {
  color: #4a8a5e !important;
  margin-right: 8px;
}

.nav-sidebar .nav-item > .nav-link.active .nav-icon,
.nav-sidebar .nav-item > .nav-link:hover .nav-icon {
  color: var(--crm-green-dark) !important;
}

/* Sidebar headers */
.nav-header {
  color: #4a8a5e !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 12px 16px 4px !important;
}

/* Sidebar search */
.sidebar-search-results {
  background: var(--crm-sidebar-hover) !important;
}

/* Scrollbar in sidebar */
.main-sidebar .os-scrollbar-track { background: transparent !important; }
.main-sidebar .os-scrollbar-handle { background: #b8d4c0 !important; }

/* ── TOP NAVBAR ───────────────────────────────────────────── */
.main-header.navbar {
  background-color: #ffffff !important;
  border-bottom: 2px solid var(--crm-border) !important;
  box-shadow: 0 1px 6px rgba(0, 100, 50, 0.07) !important;
  min-height: 56px;
}

.main-header .navbar-nav .nav-link {
  color: var(--crm-text-muted) !important;
}

.main-header .navbar-nav .nav-link:hover {
  color: var(--crm-green-mid) !important;
}

.main-header .form-control-navbar {
  border-color: var(--crm-border) !important;
  background: var(--crm-green-lighter) !important;
  border-radius: 20px !important;
}

.main-header .btn-navbar {
  background: var(--crm-green-lighter) !important;
  border-color: var(--crm-border) !important;
  color: var(--crm-green-mid) !important;
  border-radius: 0 20px 20px 0 !important;
}

/* ── CONTENT WRAPPER ──────────────────────────────────────── */
.content-wrapper {
  background-color: var(--crm-body-bg) !important;
}

.content-header h1 {
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  color: var(--crm-text) !important;
}

/* ── BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  margin-bottom: 0 !important;
}

.breadcrumb-item a { color: var(--crm-green-mid) !important; }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow) !important;
  background: var(--crm-card-bg) !important;
  margin-bottom: 1rem;
}

.card-header {
  background: var(--crm-card-bg) !important;
  border-bottom: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius) var(--crm-radius) 0 0 !important;
  padding: 14px 18px !important;
}

.card-title {
  color: var(--crm-text) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em;
}

.card-footer {
  background: var(--crm-green-lighter) !important;
  border-top: 1px solid var(--crm-border) !important;
  border-radius: 0 0 var(--crm-radius) var(--crm-radius) !important;
}

/* Card outline variants */
.card-outline.card-primary  { border-top: 3px solid var(--crm-green) !important; }
.card-outline.card-success  { border-top: 3px solid var(--crm-green) !important; }
.card-outline.card-info     { border-top: 3px solid #39b0e5 !important; }
.card-outline.card-warning  { border-top: 3px solid #f59e0b !important; }
.card-outline.card-danger   { border-top: 3px solid #ef4444 !important; }
.card-outline.card-secondary{ border-top: 3px solid #9ca3af !important; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--crm-green) !important;
  border-color: var(--crm-green) !important;
  color: #fff !important;
  border-radius: var(--crm-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: all 0.18s ease !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--crm-green-mid) !important;
  border-color: var(--crm-green-mid) !important;
  box-shadow: 0 4px 12px rgba(0, 200, 117, 0.35) !important;
}

.btn-success {
  background-color: #27ae60 !important;
  border-color: #27ae60 !important;
  border-radius: var(--crm-radius-sm) !important;
  font-weight: 600 !important;
}

.btn-success:hover {
  background-color: #1e8449 !important;
  border-color: #1e8449 !important;
}

.btn-warning {
  border-radius: var(--crm-radius-sm) !important;
  font-weight: 600 !important;
}

.btn-danger {
  border-radius: var(--crm-radius-sm) !important;
  font-weight: 600 !important;
}

.btn-secondary, .btn-default {
  background: var(--crm-green-lighter) !important;
  border-color: var(--crm-border) !important;
  color: var(--crm-text-muted) !important;
  border-radius: var(--crm-radius-sm) !important;
  font-weight: 600 !important;
}

.btn-secondary:hover {
  background: var(--crm-green-light) !important;
  color: var(--crm-green-dark) !important;
}

.btn-info {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  border-radius: var(--crm-radius-sm) !important;
  font-weight: 600 !important;
}

.btn-flat { border-radius: var(--crm-radius-sm) !important; }

/* ── BADGES & STATUS PILLS ────────────────────────────────── */
.badge {
  border-radius: 20px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.02em;
}

.badge-primary   { background: var(--crm-green) !important; color: #fff !important; }
.badge-success   { background: #dcfce7 !important; color: #166534 !important; }
.badge-info      { background: #dbeafe !important; color: #1d4ed8 !important; }
.badge-warning   { background: #fef3c7 !important; color: #92400e !important; }
.badge-danger    { background: #fee2e2 !important; color: #991b1b !important; }
.badge-secondary { background: #f3f4f6 !important; color: #374151 !important; }
.badge-dark      { background: #1f2937 !important; color: #fff !important; }

/* ── SMALL BOXES (Dashboard stats) ───────────────────────── */
.small-box {
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow-md) !important;
  overflow: hidden;
}

.small-box .small-box-footer {
  background-color: rgba(0, 0, 0, 0.12) !important;
  font-weight: 600;
}

.small-box.bg-info    { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important; }
.small-box.bg-success { background: linear-gradient(135deg, var(--crm-green) 0%, var(--crm-green-mid) 100%) !important; }
.small-box.bg-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; }
.small-box.bg-danger  { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; }

/* ── INFO BOXES ───────────────────────────────────────────── */
.info-box {
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow) !important;
  border: 1px solid var(--crm-border) !important;
  min-height: 72px;
  background: #fff !important;
}

.info-box-icon {
  border-radius: var(--crm-radius) 0 0 var(--crm-radius) !important;
  width: 70px;
  font-size: 1.6rem;
}

.info-box.bg-gradient-success .info-box-icon { background: var(--crm-green) !important; }
.info-box.bg-gradient-info .info-box-icon    { background: #0ea5e9 !important; }
.info-box.bg-gradient-warning .info-box-icon { background: #f59e0b !important; }
.info-box.bg-gradient-danger .info-box-icon  { background: #ef4444 !important; }

.info-box-text  { color: var(--crm-text-muted) !important; font-size: 0.8rem !important; font-weight: 600; }
.info-box-number{ color: var(--crm-text) !important; font-weight: 700 !important; font-size: 1.3rem !important; }

/* ── TABLES ───────────────────────────────────────────────── */
.table thead th {
  background-color: #cee7a5 !important;
  color: #3d4f2e !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid #b8d48a !important;
  border-top: none !important;
  padding: 10px 12px !important;
}

.table td {
  vertical-align: middle !important;
  padding: 10px 12px !important;
  border-color: var(--crm-border) !important;
  font-size: 0.875rem;
}

.table-hover tbody tr:hover {
  background-color: var(--crm-green-lighter) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--crm-green-lighter) !important;
}

/* ── FORMS ────────────────────────────────────────────────── */
.form-control {
  border-color: var(--crm-border) !important;
  border-radius: var(--crm-radius-sm) !important;
  background: #fff !important;
  color: var(--crm-text) !important;
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.form-control:focus {
  border-color: var(--crm-green) !important;
  box-shadow: 0 0 0 3px rgba(0, 200, 117, 0.15) !important;
}

.input-group-text {
  background: var(--crm-green-lighter) !important;
  border-color: var(--crm-border) !important;
  color: var(--crm-text-muted) !important;
}

/* ── SELECT2 ──────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  border-color: var(--crm-border) !important;
  border-radius: var(--crm-radius-sm) !important;
  height: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
  color: var(--crm-text) !important;
  font-size: 0.875rem;
}

.select2-results__option--highlighted {
  background-color: var(--crm-green-light) !important;
  color: var(--crm-green-dark) !important;
}

/* ── ALERTS ───────────────────────────────────────────────── */
.alert-success {
  background-color: #dcfce7 !important;
  border-color: #86efac !important;
  color: #166534 !important;
  border-radius: var(--crm-radius-sm) !important;
}

.alert-danger {
  background-color: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
  border-radius: var(--crm-radius-sm) !important;
}

.alert-info {
  background-color: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
  border-radius: var(--crm-radius-sm) !important;
}

.alert-warning {
  background-color: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #92400e !important;
  border-radius: var(--crm-radius-sm) !important;
}

/* ── PAGINATION ───────────────────────────────────────────── */
.page-item.active .page-link {
  background-color: var(--crm-green) !important;
  border-color: var(--crm-green) !important;
}

.page-link {
  color: var(--crm-green-mid) !important;
  border-color: var(--crm-border) !important;
  border-radius: var(--crm-radius-sm) !important;
}

.page-link:hover {
  background-color: var(--crm-green-light) !important;
  color: var(--crm-green-dark) !important;
}

/* ── MODAL ────────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--crm-radius) !important;
  border: 1px solid var(--crm-border) !important;
  box-shadow: var(--crm-shadow-md) !important;
}

.modal-header {
  border-radius: var(--crm-radius) var(--crm-radius) 0 0 !important;
  border-bottom: 1px solid var(--crm-border) !important;
}

.modal-header.bg-success { background: var(--crm-green) !important; }

.modal-footer {
  border-radius: 0 0 var(--crm-radius) var(--crm-radius) !important;
  border-top: 1px solid var(--crm-border) !important;
  background: var(--crm-green-lighter) !important;
}

/* ── CALLOUT ──────────────────────────────────────────────── */
.callout {
  border-radius: var(--crm-radius-sm) !important;
  border-left-width: 4px !important;
  background: #fff !important;
  box-shadow: var(--crm-shadow) !important;
}

.callout-danger  { border-left-color: #ef4444 !important; }
.callout-warning { border-left-color: #f59e0b !important; }
.callout-info    { border-left-color: #0ea5e9 !important; }
.callout-success { border-left-color: var(--crm-green) !important; }

/* ── DATATABLE ────────────────────────────────────────────── */
table.dataTable thead th:after,
table.dataTable thead th:before {
  color: var(--crm-green-mid) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--crm-green) !important;
  color: #fff !important;
  border-radius: var(--crm-radius-sm) !important;
  border-color: var(--crm-green) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--crm-green-light) !important;
  border-color: var(--crm-border) !important;
  color: var(--crm-green-dark) !important;
}

/* ── LIST GROUPS ──────────────────────────────────────────── */
.list-group-item {
  border-color: var(--crm-border) !important;
  background: #fff !important;
}

.list-group-item:hover {
  background: var(--crm-green-lighter) !important;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.main-footer {
  background: #fff !important;
  border-top: 1px solid var(--crm-border) !important;
  color: var(--crm-text-muted) !important;
  font-size: 0.8rem;
}

/* ──────────────────────────────────────────────────────────
   GLOBAL UI/UX STANDARDIZATION — Consistent across all pages
   ────────────────────────────────────────────────────────── */

/* Button sizing — all action buttons use btn-sm */
.btn-action { font-size: 0.75rem !important; padding: 3px 10px !important; }
.table .btn-sm, table .btn-sm { font-size: 0.72rem !important; padding: 2px 8px !important; }
.btn .fas, .btn .far { font-size: 0.8em; }

/* Global button sizing — match /leads page */
.btn-sm, .btn-group-sm > .btn, a.btn-sm {
  font-size: 0.75rem !important;
  padding: 3px 10px !important;
  line-height: 1.4 !important;
}

.btn-xs, a.btn-xs {
  font-size: 0.7rem !important;
  padding: 1px 6px !important;
  line-height: 1.3 !important;
}

/* Input sizing — match /leads page */
.form-control {
  font-size: 0.85rem !important;
  padding: 5px 10px !important;
  height: auto !important;
  min-height: 34px;
}

.form-control-sm {
  font-size: 0.78rem !important;
  padding: 3px 8px !important;
  min-height: 28px;
}

textarea.form-control {
  height: auto !important;
}

/* DataTable search/filter bar */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--crm-border) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 0.82rem !important;
  height: auto !important;
  margin-left: 8px !important;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--crm-border) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 0.82rem !important;
}

/* Card body standard padding */
.card-body {
  padding: 16px 18px !important;
}

.card-body.p-0 { padding: 0 !important; }
.card-body.p-2 { padding: 8px !important; }
.card-body.p-3 { padding: 12px 16px !important; }

/* Form group spacing */
.form-group { margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }

/* Input Select2 consistent height */
.select2-container--default .select2-selection--single {
  height: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
}

/* Standard Badge/Status chip sizing */
.badge { padding: 3px 10px !important; font-size: 0.72rem !important; }

/* Standard label size */
label:not(.form-check-label):not(.custom-file-label):not(.custom-control-label) {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--crm-text) !important;
  margin-bottom: 4px;
}

/* Small text helper */
small, .small, .text-muted { font-size: 0.78rem !important; }

/* Content header spacing */
.content-header { padding: 14px 18px 8px !important; }

/* Widget standard: small-box padding */
.small-box .inner { padding: 14px 16px !important; }
.small-box .inner h3 { font-size: 1.8rem !important; font-weight: 800 !important; }
.small-box .inner p { font-size: 0.82rem !important; }

/* Widget standard: info-box sizing */
.info-box { min-height: 78px !important; }
.info-box .info-box-text { font-size: 0.78rem !important; }
.info-box .info-box-number { font-size: 1.3rem !important; }

/* Dropdown menu items */
.dropdown-item { font-size: 0.85rem !important; padding: 6px 16px !important; }

/* Nav tabs */
.nav-tabs .nav-link { font-size: 0.82rem !important; padding: 8px 16px !important; }

/* Custom file input */
.custom-file-label { font-size: 0.85rem !important; }
.custom-file-label::after { font-size: 0.82rem !important; }

/* Alert boxes */
.alert { font-size: 0.85rem !important; padding: 12px 16px !important; }

/* Toast notifications */
.toast { border-radius: var(--crm-radius-sm) !important; }

/* Kanban / board card standard */
.kanban-card .card-body { padding: 10px 12px !important; }
.kanban-card strong { font-size: 0.85rem !important; }
.kanban-card small { font-size: 0.72rem !important; }

/* Progress bar */
.progress { height: 8px !important; border-radius: 4px !important; background: var(--crm-border) !important; }
.progress-bar { border-radius: 4px !important; }

/* Avatar circle */
.crm-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--crm-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.crm-avatar.avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
}

.crm-avatar.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

/* Lifecycle progress bar */
.crm-lifecycle {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  padding: 12px 20px;
  box-shadow: var(--crm-shadow);
  overflow-x: auto;
}

.crm-lifecycle-step {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 90px;
}

.crm-lifecycle-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--crm-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--crm-text-muted);
  flex-shrink: 0;
  transition: all 0.2s ease;
  z-index: 1;
}

.crm-lifecycle-step.active .crm-lifecycle-dot {
  background: var(--crm-green);
  border-color: var(--crm-green);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(0,200,117,0.2);
}

.crm-lifecycle-step.done .crm-lifecycle-dot {
  background: var(--crm-green-light);
  border-color: var(--crm-green);
  color: var(--crm-green-dark);
}

.crm-lifecycle-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--crm-text-muted);
  margin-left: 8px;
  white-space: nowrap;
}

.crm-lifecycle-step.active .crm-lifecycle-label {
  color: var(--crm-green-dark);
  font-weight: 700;
}

.crm-lifecycle-step.done .crm-lifecycle-label { color: var(--crm-green-mid); }

.crm-lifecycle-line {
  flex: 1;
  height: 2px;
  background: var(--crm-border);
  margin: 0 6px;
}

.crm-lifecycle-step.done ~ .crm-lifecycle-line,
.crm-lifecycle-step.active ~ .crm-lifecycle-line { background: var(--crm-green); }

/* Quick log tabs */
.crm-quick-log {
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: var(--crm-shadow);
}

.crm-quick-log .nav-tabs {
  border-bottom: 1px solid var(--crm-border) !important;
  margin-bottom: 14px;
  gap: 4px;
}

.crm-quick-log .nav-tabs .nav-link {
  border: none !important;
  color: var(--crm-text-muted) !important;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px !important;
  border-radius: var(--crm-radius-sm) var(--crm-radius-sm) 0 0 !important;
  transition: all 0.15s ease;
}

.crm-quick-log .nav-tabs .nav-link:hover {
  background: var(--crm-green-lighter) !important;
  color: var(--crm-green-dark) !important;
}

.crm-quick-log .nav-tabs .nav-link.active {
  background: var(--crm-green-light) !important;
  color: var(--crm-green-dark) !important;
  border-bottom: 2px solid var(--crm-green) !important;
}

.crm-quick-log .nav-tabs .nav-link i { margin-right: 5px; }

/* Communication timeline */
.crm-timeline {
  position: relative;
  padding: 8px 0;
}

.crm-timeline::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--crm-border);
}

.crm-timeline-item {
  display: flex;
  gap: 14px;
  padding: 10px 16px;
  position: relative;
  transition: background 0.15s ease;
}

.crm-timeline-item:hover { background: var(--crm-green-lighter); }

.crm-timeline-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--crm-body-bg);
  background: var(--crm-green-light);
  color: var(--crm-green-dark);
  border: 2px solid var(--crm-border);
}

.crm-timeline-icon.icon-call     { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.crm-timeline-icon.icon-email    { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.crm-timeline-icon.icon-meeting  { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.crm-timeline-icon.icon-note     { background: #f0fdf4; color: #166534; border-color: #86efac; }
.crm-timeline-icon.icon-task     { background: #fdf4ff; color: #7e22ce; border-color: #d8b4fe; }
.crm-timeline-icon.icon-stage    { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.crm-timeline-icon.icon-convert  { background: var(--crm-green-light); color: var(--crm-green-dark); border-color: var(--crm-green); }
.crm-timeline-icon.icon-import   { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.crm-timeline-icon.icon-campaign { background: #ffe4e6; color: #9f1239; border-color: #fda4af; }

.crm-timeline-content {
  flex: 1;
  min-width: 0;
}

.crm-timeline-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--crm-text);
  margin-bottom: 2px;
}

.crm-timeline-desc {
  font-size: 0.8rem;
  color: var(--crm-text-muted);
  margin-bottom: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

.crm-timeline-meta {
  font-size: 0.72rem;
  color: var(--crm-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-timeline-meta .crm-avatar { width: 18px; height: 18px; font-size: 0.55rem; }

/* Score ring */
.crm-score-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 6px solid var(--crm-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
  position: relative;
}

.crm-score-ring.score-hot   { border-color: var(--crm-green); }
.crm-score-ring.score-warm  { border-color: #f59e0b; }
.crm-score-ring.score-cold  { border-color: #0ea5e9; }

.crm-score-ring .score-number {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--crm-text);
}

.crm-score-ring .score-label {
  font-size: 0.6rem;
  color: var(--crm-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Profile card */
.crm-profile-card .crm-profile-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--crm-border);
}

.crm-profile-card .crm-profile-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--crm-text);
  margin: 0 0 4px;
}

.crm-profile-card .crm-profile-meta {
  font-size: 0.8rem;
  color: var(--crm-text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crm-profile-card .crm-profile-meta i {
  width: 14px;
  color: var(--crm-green);
  margin-right: 4px;
}

/* Status pill */
.crm-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.crm-status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pill-new       { background: var(--status-new); color: var(--status-new-text); }
.pill-qualified { background: var(--status-qualified); color: var(--status-qualified-text); }
.pill-unqualified{ background: var(--status-unqualified); color: var(--status-unqualified-text); }
.pill-working   { background: var(--status-working); color: var(--status-working-text); }
.pill-won       { background: var(--status-won); color: var(--status-won-text); }
.pill-lost      { background: var(--status-lost); color: var(--status-lost-text); }
.pill-active    { background: var(--status-qualified); color: var(--status-qualified-text); }
.pill-inactive  { background: #f3f4f6; color: #374151; }
.pill-open      { background: #dbeafe; color: #1d4ed8; }
.pill-resolved  { background: var(--status-qualified); color: var(--status-qualified-text); }
.pill-closed    { background: #f3f4f6; color: #374151; }

/* Detail table */
.crm-detail-table td:first-child {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--crm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 36%;
  padding: 8px 12px;
  white-space: nowrap;
}

.crm-detail-table td:last-child {
  font-size: 0.875rem;
  color: var(--crm-text);
  padding: 8px 12px;
}

.crm-detail-table tr { border-color: var(--crm-border) !important; }

/* Quick action buttons */
.crm-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--crm-border);
}

.crm-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--crm-border);
  background: #fff;
  color: var(--crm-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.crm-action-btn:hover {
  background: var(--crm-green-lighter);
  border-color: var(--crm-green);
  color: var(--crm-green-dark);
  text-decoration: none;
}

.crm-action-btn.btn-call    { border-color: #93c5fd; }
.crm-action-btn.btn-call:hover { background: #dbeafe; color: #1d4ed8; }

.crm-action-btn.btn-email   { border-color: #fde68a; }
.crm-action-btn.btn-email:hover { background: #fef3c7; color: #92400e; }

.crm-action-btn.btn-meet    { border-color: #a5b4fc; }
.crm-action-btn.btn-meet:hover { background: #e0e7ff; color: #3730a3; }

/* NBA card (Next Best Action) */
.crm-nba-card {
  border-radius: var(--crm-radius-sm);
  border-left: 4px solid var(--crm-green);
  padding: 10px 14px;
  background: var(--crm-green-lighter);
  margin-bottom: 8px;
}

.crm-nba-card.nba-high   { border-color: #ef4444; background: #fef2f2; }
.crm-nba-card.nba-medium { border-color: #f59e0b; background: #fffbeb; }
.crm-nba-card.nba-low    { border-color: #0ea5e9; background: #f0f9ff; }

/* Pipeline stage progress */
.crm-pipeline-progress {
  display: flex;
  overflow: hidden;
  border-radius: var(--crm-radius);
  height: 8px;
  background: var(--crm-border);
  margin: 8px 0;
}

.crm-pipeline-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--crm-green), var(--crm-green-mid));
  border-radius: var(--crm-radius);
  transition: width 0.4s ease;
}

/* Deal value display */
.crm-deal-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--crm-green-dark);
  letter-spacing: -0.02em;
}

/* Summary metric row */
.crm-metric-row {
  display: flex;
  gap: 1px;
  background: var(--crm-border);
  border-radius: var(--crm-radius);
  overflow: hidden;
  border: 1px solid var(--crm-border);
  margin-bottom: 16px;
}

.crm-metric-item {
  flex: 1;
  background: #fff;
  padding: 14px 12px;
  text-align: center;
}

.crm-metric-item .metric-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--crm-text);
  line-height: 1;
  display: block;
}

.crm-metric-item .metric-label {
  font-size: 0.7rem;
  color: var(--crm-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
  display: block;
}

/* Board/Kanban column */
.crm-board-col {
  min-width: 280px;
  max-width: 300px;
  background: var(--crm-green-lighter);
  border-radius: var(--crm-radius);
  border: 1px solid var(--crm-border);
  padding: 12px;
}

.crm-board-col-header {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--crm-text-muted);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 4px 2px;
}

.crm-board-card {
  background: #fff;
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius-sm);
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: var(--crm-shadow);
  cursor: pointer;
  transition: all 0.15s ease;
}

.crm-board-card:hover {
  border-color: var(--crm-green);
  box-shadow: 0 4px 12px rgba(0,200,117,0.15);
  transform: translateY(-1px);
}

/* Lead row color coding */
tr.lead-row-qualified  td:first-child { border-left: 3px solid var(--crm-green); }
tr.lead-row-unqualified td:first-child { border-left: 3px solid #ef4444; }
tr.lead-row-new         td:first-child { border-left: 3px solid #0ea5e9; }
tr.lead-row-working     td:first-child { border-left: 3px solid #f59e0b; }

/* Filter bar */
.crm-filter-bar {
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: var(--crm-shadow);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.crm-filter-bar .form-control,
.crm-filter-bar .form-control-sm {
  font-size: 0.82rem !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  height: auto !important;
}

/* Empty state */
.crm-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--crm-text-muted);
}

.crm-empty-state i {
  font-size: 3rem;
  color: var(--crm-border);
  display: block;
  margin-bottom: 12px;
}

.crm-empty-state p { font-size: 0.875rem; margin: 0; }

/* Content header */
.content-header .content-header-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Tag chips */
.crm-tag {
  display: inline-block;
  background: var(--crm-green-light);
  color: var(--crm-green-dark);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  margin: 2px;
}

/* Preloader */
.preloader {
  background-color: var(--crm-sidebar-bg) !important;
}

/* Scrollbar global */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--crm-green-lighter); }
::-webkit-scrollbar-thumb { background: #a8d4b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--crm-green-mid); }