/*
 * SalesConnect CRM — Professional Theme
 * Commercial Truck Dealership / DMS-grade UI
 * Loads after crm-main.css and overrides with a professional design system.
 *
 * Design principles:
 *   - Dark navy app bar (DealerSocket / CDK / Reynolds & Reynolds pattern)
 *   - Clean light-gray workspace (#eef2f7) — no consumer-app gradients
 *   - Semantic status colors that field sales reps understand instantly
 *   - Professional flat buttons — no pink/purple gradients
 *   - Dense data layout — more information per screen
 *   - Inter/system font stack — modern, highly legible
 */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --pro-navy:        #0f1f3d;
  --pro-navy-mid:    #1e3a5f;
  --pro-blue:        #1d4ed8;
  --pro-blue-light:  #2563eb;
  --pro-blue-faint:  #eff6ff;

  /* Workspace */
  --pro-bg:          #eef2f7;
  --pro-surface:     #ffffff;
  --pro-border:      #dde3ec;
  --pro-border-dark: #c5cdd8;

  /* Text */
  --pro-text:        #111827;
  --pro-text-2:      #374151;
  --pro-text-3:      #6b7280;
  --pro-text-4:      #9ca3af;

  /* Status — semantic, industry-standard */
  --pro-hot:         #dc2626;   /* A — Hot / Ready to buy */
  --pro-hot-bg:      #fef2f2;
  --pro-hot-border:  #fecaca;
  --pro-warm:        #ea580c;   /* B — Warm */
  --pro-warm-bg:     #fff7ed;
  --pro-warm-border: #fed7aa;
  --pro-mild:        #16a34a;   /* C — Mild */
  --pro-mild-bg:     #f0fdf4;
  --pro-mild-border: #bbf7d0;
  --pro-cool:        #2563eb;   /* G — Cool */
  --pro-cool-bg:     #eff6ff;
  --pro-cool-border: #bfdbfe;
  --pro-dead:        #94a3b8;   /* D — Dead */
  --pro-dead-bg:     #f8fafc;
  --pro-dead-border: #e2e8f0;

  /* Functional */
  --pro-success:     #059669;
  --pro-warning:     #d97706;
  --pro-danger:      #dc2626;

  /* Shadows */
  --pro-shadow-sm:   0 1px 2px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --pro-shadow-md:   0 2px 8px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  --pro-shadow-lg:   0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);

  /* Radius */
  --pro-r-sm:        6px;
  --pro-r-md:        8px;
  --pro-r-lg:        12px;
}

/* ── Global reset / font ───────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--pro-navy) !important;
  color: var(--pro-text);
  -webkit-font-smoothing: antialiased;
}

/* Remove the decorative radial gradient overlay */
body::before { display: none !important; }

/* ── App shell ─────────────────────────────────────────────────────────────── */
.container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.main-container {
  background: var(--pro-bg) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  box-shadow: none !important;
  min-height: 100vh;
}

/* ── App header bar ────────────────────────────────────────────────────────── */
.header {
  background: var(--pro-navy) !important;
  border-bottom: none !important;
  padding: 0 20px !important;
  margin-bottom: 0 !important;
  height: 56px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.3);
}

.header-logo-wrapper {
  max-width: none !important;
  padding: 0 !important;
}

.header-logo-img img {
  height: 32px !important;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.user-info {
  gap: 10px !important;
}

.user-badge {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #e2e8f0 !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
}

/* Logout button in header */
.header button[onclick="logout()"],
.header button[onclick*="logout"] {
  background: transparent !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
  padding: 0 !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
  margin: 0 !important;
  transition: all 0.15s !important;
}
.header button[onclick="logout()"]:hover,
.header button[onclick*="logout"]:hover {
  background: rgba(220,38,38,0.2) !important;
  color: #fca5a5 !important;
  border-color: rgba(220,38,38,0.4) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Tab navigation ────────────────────────────────────────────────────────── */
.tabs {
  background: var(--pro-navy) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  margin-bottom: 0 !important;
  padding: 8px 16px !important;
  gap: 8px !important;
  overflow-x: auto;
  white-space: nowrap;
  align-items: center !important;
}

.tab {
  color: rgba(255,255,255,0.82) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 0 16px !important;
  height: 40px !important;
  line-height: 40px !important;
  border-bottom: none !important;
  border-radius: 10px !important;
  letter-spacing: 0.15px;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.tab::before { display: none !important; }

.tab:hover {
  color: #ffffff !important;
  background: rgba(59,130,246,0.18) !important;
  border-color: rgba(96,165,250,0.4) !important;
}

.tab.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(37,99,235,0.95), rgba(99,102,241,0.92)) !important;
  border-color: rgba(147,197,253,0.6) !important;
  box-shadow: 0 8px 18px rgba(37,99,235,0.24), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.tab-group-divider {
  background: rgba(255,255,255,0.18) !important;
  margin: 6px 4px !important;
}

/* Content area padding */
.tab-content.active {
  padding: 20px !important;
  background: var(--pro-bg);
}

/* ── Buttons — replace gradient with professional flat buttons ──────────────── */
button {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--pro-r-sm) !important;
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s !important;
  letter-spacing: 0.1px;
}

button:hover {
  transform: none !important;
  box-shadow: var(--pro-shadow-sm) !important;
  opacity: 0.92;
}

/* Default button → professional blue (no !important — lets inline styles win) */
button:not([class]) {
  background: var(--pro-blue);
  color: #fff;
}

/* Named button classes */
.btn-primary,
button.btn-primary {
  background: var(--pro-blue) !important;
  color: #fff !important;
  border: none !important;
}
.btn-primary:hover { background: #1e40af !important; }

.btn-secondary,
button.btn-secondary {
  background: #f1f5f9 !important;
  color: var(--pro-text-2) !important;
  border: 1px solid var(--pro-border) !important;
}
.btn-secondary:hover { background: #e2e8f0 !important; }

.btn-success,
button.btn-success {
  background: #059669 !important;
  color: #fff !important;
  border: none !important;
}
.btn-success:hover { background: #047857 !important; }

.btn-danger,
button.btn-danger {
  background: #dc2626 !important;
  color: #fff !important;
  border: none !important;
}
.btn-danger:hover { background: #b91c1c !important; }

/* ── Prospect cards ────────────────────────────────────────────────────────── */
.prospect-card {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-r-md) !important;
  border-left-width: 4px !important;
  padding: 10px 12px !important;
  margin-bottom: 4px !important;
  box-shadow: var(--pro-shadow-sm) !important;
  transition: box-shadow 0.15s, border-color 0.15s !important;
}

.prospect-card:hover {
  box-shadow: var(--pro-shadow-md) !important;
  transform: none !important;
  border-color: var(--pro-border-dark) !important;
}

.prospect-card.expanded {
  border-color: var(--pro-blue) !important;
  border-left-color: var(--pro-blue) !important;
  box-shadow: 0 0 0 2px rgba(29,78,216,0.1), var(--pro-shadow-md) !important;
}

.prospect-card.selected {
  background: #f0f7ff !important;
  border-color: #93c5fd !important;
  border-left-color: var(--pro-blue) !important;
}

/* Status-colored left border on cards */
.prospect-card:has(.status-a) { border-left-color: var(--pro-hot) !important; }
.prospect-card:has(.status-b) { border-left-color: var(--pro-warm) !important; }
.prospect-card:has(.status-c) { border-left-color: var(--pro-mild) !important; }
.prospect-card:has(.status-g) { border-left-color: var(--pro-cool) !important; }
.prospect-card:has(.status-d) { border-left-color: var(--pro-dead) !important; }

.prospect-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--pro-text) !important;
  letter-spacing: -0.1px;
}

.prospect-company {
  font-size: 12px !important;
  color: var(--pro-text-3) !important;
}

.expand-toggle {
  font-size: 10px !important;
  color: var(--pro-text-4) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Status badges — professional semantic colors ──────────────────────────── */
.status-badge {
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  letter-spacing: 0.5px;
}

.status-a {
  background: var(--pro-hot-bg) !important;
  color: var(--pro-hot) !important;
  border: 1px solid var(--pro-hot-border) !important;
}
.status-b {
  background: var(--pro-warm-bg) !important;
  color: var(--pro-warm) !important;
  border: 1px solid var(--pro-warm-border) !important;
}
.status-c {
  background: var(--pro-mild-bg) !important;
  color: var(--pro-mild) !important;
  border: 1px solid var(--pro-mild-border) !important;
}
.status-g {
  background: var(--pro-cool-bg) !important;
  color: var(--pro-cool) !important;
  border: 1px solid var(--pro-cool-border) !important;
}
.status-d {
  background: var(--pro-dead-bg) !important;
  color: var(--pro-dead) !important;
  border: 1px solid var(--pro-dead-border) !important;
}
.status-s {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}
.status-q {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}
.status-l {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

/* Sale status badges */
.sale-status-badge {
  border-radius: 4px !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  font-weight: 700 !important;
}
.sale-status-quoted {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}
.sale-status-sold {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}
.sale-status-lost {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

/* Contact status badges */
.contact-status-badge.uncontacted {
  background: #fffbeb !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}
.contact-status-badge.contacted {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

/* Assigned rep badge */
.assigned-badge {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 11px !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
}

/* ── Legend badges ─────────────────────────────────────────────────────────── */
.legend-badge.status-a { background: var(--pro-hot) !important; color: #fff !important; }
.legend-badge.status-b { background: var(--pro-warm) !important; color: #fff !important; }
.legend-badge.status-c { background: var(--pro-mild) !important; color: #fff !important; }
.legend-badge.status-g { background: var(--pro-cool) !important; color: #fff !important; }
.legend-badge.status-d { background: #94a3b8 !important; color: #fff !important; }

/* ── KPI / stat cards ──────────────────────────────────────────────────────── */
.stats-grid {
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.stat-card {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  border-left: 4px solid var(--pro-blue) !important;
  border-radius: var(--pro-r-md) !important;
  padding: 16px 18px !important;
  box-shadow: var(--pro-shadow-sm) !important;
}

.stat-number {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--pro-text) !important;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.stat-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--pro-text-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px !important;
}

.stat-subtext {
  font-size: 11px !important;
  color: var(--pro-text-4) !important;
  margin-top: 2px !important;
}

/* ── Category legend card ──────────────────────────────────────────────────── */
.category-legend {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-r-md) !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  box-shadow: var(--pro-shadow-sm) !important;
}

/* ── Modals ────────────────────────────────────────────────────────────────── */
.modal { background: rgba(15,31,61,0.55) !important; backdrop-filter: blur(4px); }

.modal-content {
  border-radius: var(--pro-r-lg) !important;
  box-shadow: var(--pro-shadow-lg) !important;
  border: 1px solid var(--pro-border) !important;
  padding: 24px !important;
}

.modal-content h2,
.modal-content h3 {
  text-align: left !important;
  color: var(--pro-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pro-border);
}

/* ── Form inputs ───────────────────────────────────────────────────────────── */
input, select, textarea {
  border-color: var(--pro-border) !important;
  border-radius: var(--pro-r-sm) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: var(--pro-text) !important;
  background: #fff !important;
  padding: 8px 10px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--pro-blue) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,0.1) !important;
}

label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--pro-text-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px !important;
}

/* ── Activity items ────────────────────────────────────────────────────────── */
.activity-item {
  background: #fafafa !important;
  border-left: 3px solid var(--pro-blue) !important;
  border-radius: 0 var(--pro-r-sm) var(--pro-r-sm) 0 !important;
  box-shadow: none !important;
}

.activity-type {
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 2px 7px !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.activity-type.call    { background: #dcfce7 !important; color: #166534 !important; }
.activity-type.email   { background: #dbeafe !important; color: #1d4ed8 !important; }
.activity-type.meeting { background: #ede9fe !important; color: #6d28d9 !important; }
.activity-type.note    { background: #fef9c3 !important; color: #854d0e !important; }
.activity-type.quoted  { background: #dbeafe !important; color: #1e40af !important; }
.activity-type.sold    { background: #dcfce7 !important; color: #14532d !important; }
.activity-type.lost    { background: #fee2e2 !important; color: #991b1b !important; }

/* ── Follow-up items ───────────────────────────────────────────────────────── */
.follow-up-date {
  background: #fef9c3 !important;
  color: #854d0e !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}
.follow-up-date.overdue { background: #fee2e2 !important; color: #991b1b !important; }
.follow-up-date.due-today { background: #ffedd5 !important; color: #9a3412 !important; }

.upcoming-followups {
  border: 1px solid var(--pro-border) !important;
  border-top: 3px solid var(--pro-warning) !important;
  border-radius: var(--pro-r-md) !important;
  background: var(--pro-surface) !important;
  box-shadow: var(--pro-shadow-sm) !important;
}

.followup-item {
  border-radius: var(--pro-r-sm) !important;
  box-shadow: var(--pro-shadow-sm) !important;
}
.followup-item:hover {
  transform: none !important;
  box-shadow: var(--pro-shadow-md) !important;
}

/* ── Select-all + bulk actions ─────────────────────────────────────────────── */
.select-all-container {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-r-md) !important;
  padding: 10px 14px !important;
}

.bulk-actions-bar {
  background: var(--pro-blue) !important;
  border-radius: var(--pro-r-md) !important;
  box-shadow: var(--pro-shadow-md) !important;
}

.bulk-actions-bar button {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: var(--pro-r-sm) !important;
}
.bulk-actions-bar button:hover {
  background: rgba(255,255,255,0.25) !important;
  opacity: 1;
}

/* ── Search bar ────────────────────────────────────────────────────────────── */
.search-bar input {
  border-radius: var(--pro-r-sm) !important;
  padding: 9px 14px !important;
  border: 1.5px solid var(--pro-border) !important;
  box-shadow: var(--pro-shadow-sm) !important;
}

/* ── Alert toasts ──────────────────────────────────────────────────────────── */
.alert-success {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
  border-left: 4px solid #16a34a !important;
  border-radius: var(--pro-r-md) !important;
}

.alert-error {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
  border-left: 4px solid #dc2626 !important;
  border-radius: var(--pro-r-md) !important;
}

/* ── Status filter buttons ─────────────────────────────────────────────────── */
.status-sold-btn   { background: #059669 !important; }
.status-quoted-btn { background: #1d4ed8 !important; }
.status-lost-btn   { background: #dc2626 !important; }

.status-sold-btn:hover   { background: #047857 !important; }
.status-quoted-btn:hover { background: #1e40af !important; }
.status-lost-btn:hover   { background: #b91c1c !important; }

.status-sold-btn.active-status-filter   { box-shadow: 0 0 0 3px rgba(5,150,105,0.35) !important; }
.status-quoted-btn.active-status-filter { box-shadow: 0 0 0 3px rgba(29,78,216,0.35) !important; }
.status-lost-btn.active-status-filter   { box-shadow: 0 0 0 3px rgba(220,38,38,0.35) !important; }

/* ── Quick actions in expanded card ───────────────────────────────────────── */
.quick-actions {
  padding-top: 8px;
  border-top: 1px solid var(--pro-border);
  gap: 6px !important;
}

/* ── General h1/h2/h3 inside content areas ─────────────────────────────────── */
.tab-content h2, .tab-content h3 {
  text-align: left !important;
  color: var(--pro-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

/* ── Source badge ──────────────────────────────────────────────────────────── */
.prospect-source-badge {
  border-radius: 4px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  opacity: 0.85;
}

/* ── Activity section inside expanded card ─────────────────────────────────── */
.activity-section {
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-r-md) !important;
  background: #fafbfc !important;
}

/* ── Map tab ───────────────────────────────────────────────────────────────── */
#mapTab, #dg-mapTab {
  padding: 0 !important;
}

/* ── Prospect detail panel integration ─────────────────────────────────────── */
#sc-pd-header {
  background: linear-gradient(135deg, #0f1f3d 0%, #1e3a5f 100%) !important;
}

/* ── DG App (dealer group portal) header ───────────────────────────────────── */
#dgApp .header {
  background: var(--pro-navy) !important;
}
#dgApp .header-logo-img img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* ── Scrollbar polish ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c1c9d6; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Responsive adjustments ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .header { height: 52px !important; padding: 0 12px !important; }
  .tab { padding: 0 10px !important; font-size: 11px !important; }
  .tab-content.active { padding: 12px !important; }
  .stat-number { font-size: 22px !important; }
}