/* ==========================================================================
   SistemologIA Open-Source CRM Engine — Stylesheet
   Theme: High-End SistemologIA Navy / Teal Aesthetic
   Palette: #0A192F (Bg), #0B132B (Dark), #112240 (Surface), #233554 (Border),
            #00B4D8 (Teal), #2EC4B6 (Mint), #64FFDA (Cyan), #8892B0 (Slate)
   Fonts: Inter (UI/Body) & IBM Plex Mono (Data/Timestamps/MRR)
   ========================================================================== */

:root {
  /* Colors */
  --bg-main: #0A192F;
  --bg-darker: #0B132B;
  --bg-surface: #112240;
  --bg-surface-hover: #1D2D50;
  --bg-surface-active: #233554;
  --border-color: #233554;
  --border-color-light: #2A3C60;
  --border-focus: #00B4D8;

  /* Accents */
  --teal-primary: #00B4D8;
  --teal-hover: #0096C7;
  --teal-glow: rgba(0, 180, 216, 0.25);
  --mint-accent: #2EC4B6;
  --cyan-neon: #64FFDA;
  --cyan-glow: rgba(100, 255, 218, 0.2);

  /* Status / Semaphores */
  --sem-green: #10B981;
  --sem-green-bg: rgba(16, 185, 129, 0.15);
  --sem-yellow: #F59E0B;
  --sem-yellow-bg: rgba(245, 158, 11, 0.15);
  --sem-red: #EF4444;
  --sem-red-bg: rgba(239, 68, 68, 0.18);
  --purple-trial: #8B5CF6;
  --purple-trial-bg: rgba(139, 92, 246, 0.15);
  --blue-info: #3B82F6;
  --blue-info-bg: rgba(59, 130, 246, 0.15);

  /* Typography */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #8892B0;
  --text-dim: #64748B;

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, 0.7);
  --shadow-teal: 0 0 15px rgba(0, 180, 216, 0.3);
  --shadow-neon: 0 0 20px rgba(100, 255, 218, 0.25);

  /* Dimensions */
  --header-height: 72px;
  --border-radius: 10px;
  --border-radius-sm: 6px;
  --border-radius-lg: 14px;

  /* Spacing scale — use these, not ad-hoc pixel values. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Motion — the built-in CSS easings are too weak for UI work. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-fast: 180ms;
  --dur-panel: 240ms;
}

/* ==========================================================================
   Reset & Base Settings
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Custom Dark Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--bg-darker);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--teal-primary);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* App Container */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-main);
}

/* ==========================================================================
   Header & Top Navigation
   ========================================================================== */

.top-nav {
  height: var(--header-height);
  background-color: var(--bg-darker);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow-sm);
}

.nav-left, .nav-center, .nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--teal-primary), var(--mint-accent));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-darker);
  box-shadow: var(--shadow-teal);
}
.brand-logo-icon svg {
  width: 20px;
  height: 20px;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #FFFFFF;
}

.text-teal {
  color: var(--teal-primary);
}

.brand-subtitle {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.system-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(17, 34, 64, 0.7);
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-muted);
}

.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-indicator-dot.online {
  background-color: var(--sem-green);
  box-shadow: 0 0 8px var(--sem-green);
  animation: pulse-green 2s infinite;
}

.port-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan-neon);
  background: rgba(100, 255, 218, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

/* View Switcher Tabs */
.view-switcher {
  display: flex;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 4px;
  border-radius: var(--border-radius);
  gap: 4px;
}

.view-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}

.view-tab .tab-icon {
  width: 16px;
  height: 16px;
}

.view-tab:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.04);
}

.view-tab.active {
  background-color: var(--teal-primary);
  color: var(--bg-darker);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 180, 216, 0.35);
}

/* Pipeline Selector & Actions */
.pipeline-select {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}
.pipeline-select:focus {
  border-color: var(--teal-primary);
}

/* Generic Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
  text-decoration: none;
}

.btn svg {
  width: 16px;
  height: 16px;
}

.btn-primary {
  background-color: var(--teal-primary);
  color: var(--bg-darker);
  box-shadow: 0 2px 10px rgba(0, 180, 216, 0.3);
}
.btn-primary:hover {
  background-color: #38BDF8;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 180, 216, 0.4);
}

.btn-secondary {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.btn-secondary:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--border-color-light);
}

.btn-icon {
  padding: 8px;
}

.btn-secondary-sm {
  padding: 4px 10px;
  font-size: 12px;
  background-color: var(--bg-surface-hover);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
}
.btn-secondary-sm:hover {
  background-color: var(--border-color);
  border-color: var(--teal-primary);
}

.btn-teal-sm {
  padding: 6px 12px;
  font-size: 12px;
  background-color: var(--teal-primary);
  color: var(--bg-darker);
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-teal-sm:hover {
  background-color: #38BDF8;
}

.btn-whatsapp {
  background-color: #25D366;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp:hover {
  background-color: #20BA56;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45);
}

.btn-takeover {
  width: 100%;
  padding: 10px;
  background-color: var(--sem-red-bg);
  border: 1px solid var(--sem-red);
  color: #FCA5A5;
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn-takeover:hover {
  background-color: var(--sem-red);
  color: #FFFFFF;
}

.btn-danger-ghost {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--text-muted);
  font-size: 12px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.btn-danger-ghost:hover {
  border-color: var(--sem-red);
  color: var(--sem-red);
  background: rgba(239, 68, 68, 0.05);
}

/* ==========================================================================
   Main Content Layout
   ========================================================================== */

.main-content {
  flex: 1;
  padding: var(--sp-6);
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 0;
}

/* ==========================================================================
   Dashboard KPI Header Cards
   ========================================================================== */

.kpi-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: var(--sp-3);
}

.kpi-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: none;
  transition: border-color var(--dur-fast) ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kpi-card:hover {
  border-color: var(--border-color-light);
}

.kpi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.kpi-icon-pill {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kpi-icon-pill svg {
  width: 16px;
  height: 16px;
}
.icon-blue { background: rgba(59, 130, 246, 0.15); color: #60A5FA; }
.icon-purple { background: rgba(139, 92, 246, 0.15); color: #C084FC; }
.icon-mint { background: rgba(46, 196, 182, 0.15); color: #2EC4B6; }
.icon-teal { background: rgba(0, 180, 216, 0.15); color: #38BDF8; }
.icon-amber { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }

.kpi-value-mono {
  font-family: var(--font-mono);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin: 2px 0 0;
}

.text-purple { color: #C084FC; }
.text-mint { color: var(--mint-accent); }
.text-amber { color: #FBBF24; }
.text-sm { font-size: 12px; font-weight: normal; color: var(--text-muted); }

.kpi-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 2px;
  min-height: 18px;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.kpi-trend.positive { color: var(--sem-green); }
.kpi-trend svg { width: 12px; height: 12px; }

.kpi-badge-trial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--purple-trial-bg);
  color: #D8B4FE;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
}

.pulse-dot-purple {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #C084FC;
  box-shadow: 0 0 6px #C084FC;
  animation: pulse-purple 2s infinite;
}

.kpi-semaphore-pills {
  display: flex;
  gap: 6px;
}
.sem-mini {
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.sem-green { background: var(--sem-green-bg); color: #6EE7B7; }
.sem-yellow { background: var(--sem-yellow-bg); color: #FCD34D; }
.sem-red { background: var(--sem-red-bg); color: #FCA5A5; }

/* ==========================================================================
   Section Views (Tab 1, Tab 2, Tab 3)
   ========================================================================== */

.view-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.view-section.hidden {
  display: none;
}

/* Controls Bar (Search + Filters) */
.kanban-controls-bar, .table-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.search-box-wrapper {
  position: relative;
  flex: 1;
  min-width: 280px;
  max-width: 480px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-input {
  width: 100%;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 9px 36px 9px 36px;
  border-radius: var(--border-radius);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.search-input:focus {
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 2px var(--teal-glow);
}

.btn-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}
.btn-clear.hidden { display: none; }

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.select-filter {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.select-filter:focus {
  border-color: var(--teal-primary);
}

.table-meta-counter {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ==========================================================================
   VIEW 1: Interactive Kanban Board
   ========================================================================== */

.kanban-scroll-viewport {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 16px;
}

.kanban-board-container {
  display: flex;
  gap: 16px;
  min-width: min-content;
  align-items: flex-start;
}

.kanban-loading-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-muted);
  margin: 0 auto;
}

.kanban-column {
  width: 320px;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 240px);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.kanban-column.drag-over {
  border-color: var(--teal-primary);
  background-color: rgba(0, 180, 216, 0.05);
  box-shadow: var(--shadow-teal);
}

.kanban-column-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(17, 34, 64, 0.4);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.column-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-color-indicator {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.column-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.column-lead-count {
  font-family: var(--font-mono);
  font-size: 11px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 2px 7px;
  border-radius: 10px;
  color: var(--text-muted);
  font-weight: 600;
}

.column-value-sum {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal-primary);
  font-weight: 600;
}

/* Column Cards List Drop Area */
.kanban-cards-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 120px;
  flex: 1;
}

.kanban-empty-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 20px 10px;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
}

/* Kanban Lead Card */
.kanban-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 14px;
  cursor: grab;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 10px;
  user-select: none;
  position: relative;
}

.kanban-card:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--border-color-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kanban-card.dragging {
  opacity: 0.4;
  cursor: grabbing;
  transform: scale(0.96);
  border-color: var(--teal-primary);
}

.card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.card-company-title {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
}

.card-contact-name {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Semaphore Pill Badge */
.semaphore-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.semaphore-badge.sem-green {
  background: var(--sem-green-bg);
  color: #6EE7B7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.semaphore-badge.sem-yellow {
  background: var(--sem-yellow-bg);
  color: #FCD34D;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.semaphore-badge.sem-red {
  background: var(--sem-red-bg);
  color: #FCA5A5;
  border: 1px solid rgba(239, 68, 68, 0.4);
  animation: pulse-border-red 2s infinite;
}

.card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.card-niche-pill {
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 11px;
}

.card-mrr-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--mint-accent);
}

.card-attribution-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.badge-setter, .badge-bot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}
.badge-bot {
  background-color: rgba(100, 255, 218, 0.1);
  color: var(--cyan-neon);
  border: 1px solid rgba(100, 255, 218, 0.2);
}

.card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(35, 53, 84, 0.6);
  font-size: 11px;
}

.card-timestamp {
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 10px;
}

.btn-card-wa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background-color: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.3);
  color: #4ADE80;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn-card-wa:hover {
  background-color: #25D366;
  color: #000000;
}
.btn-card-wa svg {
  width: 12px;
  height: 12px;
}

/* Direct Chat / Conversation Link from Kanban Card */
.btn-card-chat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background-color: rgba(0, 180, 216, 0.14);
  border: 1px solid rgba(0, 180, 216, 0.35);
  color: var(--cyan-neon);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn-card-chat:hover {
  background-color: var(--teal-primary);
  border-color: var(--teal-primary);
  color: #0A192F;
}
.btn-card-chat svg {
  width: 12px;
  height: 12px;
}

/* Unread Messages Pill Badge on Card */
.badge-unread-chat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(0, 180, 216, 0.22);
  color: #64FFDA;
  border: 1px solid rgba(100, 255, 218, 0.4);
  box-shadow: 0 0 8px rgba(0, 180, 216, 0.25);
}
.pulse-dot-unread {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #64FFDA;
  display: inline-block;
  animation: pulse-border-red 1.5s infinite;
}


/* ==========================================================================
   VIEW 2: Contacts Grid Table
   ========================================================================== */

.table-card-surface {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table-scroll-container {
  overflow-x: auto;
  width: 100%;
}

.crm-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.crm-table th {
  background-color: var(--bg-darker);
  color: var(--text-muted);
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.th-sortable {
  cursor: pointer;
}
.th-sortable:hover {
  color: var(--teal-primary);
}

.crm-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.crm-table tbody tr {
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.crm-table tbody tr:hover {
  background-color: var(--bg-surface-hover);
}

.table-company-cell {
  display: flex;
  flex-direction: column;
}
.table-company-name {
  font-weight: 700;
  color: var(--text-primary);
}
.table-contact-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.table-stage-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.table-mrr-cell {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--mint-accent);
}
.text-right { text-align: right; }
.text-center { text-align: center; }

/* ==========================================================================
   VIEW 3: Analytics Dashboard View
   ========================================================================== */

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.col-span-2 { grid-column: span 2; }

.analytics-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.analytics-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header-title h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.icon-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.bg-teal { background-color: var(--teal-primary); }
.bg-mint { background-color: var(--mint-accent); }
.bg-purple { background-color: var(--purple-trial); }
.bg-amber { background-color: var(--sem-yellow); }

.card-header-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

/* Funnel bars */
.funnel-stage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.funnel-stage-name {
  width: 180px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.funnel-bar-wrapper {
  flex: 1;
  height: 24px;
  background-color: var(--bg-darker);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.funnel-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.funnel-stage-stats {
  width: 140px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  color: var(--text-primary);
}

/* Niche breakdown */
.niche-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
}
.niche-item:last-child { border-bottom: none; }
.niche-title { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.niche-stats { font-family: var(--font-mono); font-size: 12px; color: var(--mint-accent); }

/* Workload table */
.workload-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.workload-table th {
  text-align: left;
  padding: 8px 12px;
  background: var(--bg-darker);
  color: var(--text-muted);
}
.workload-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
}

/* ==========================================================================
   Contact Detail Drawer / Modal (3-Column Layout)
   ========================================================================== */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(11, 19, 43, 0.75);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  justify-content: flex-end;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.drawer-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
}

.contact-drawer {
  width: 100%;
  max-width: 1300px;
  background-color: var(--bg-darker);
  border-left: 1px solid var(--border-color);
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-backdrop.hidden .contact-drawer {
  transform: translateX(100%);
}

.drawer-top-header {
  padding: 16px 24px;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.drawer-title {
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
}

.drawer-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.drawer-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-close-drawer {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.btn-close-drawer:hover {
  color: #FFFFFF;
}

/* 3-Column Body */
.drawer-3col-body {
  flex: 1;
  display: grid;
  grid-template-columns: 320px 1fr 340px;
  overflow: hidden;
}

.drawer-col {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drawer-col-profile {
  background-color: rgba(10, 25, 47, 0.6);
  border-right: 1px solid var(--border-color);
}

.drawer-col-timeline {
  background-color: var(--bg-darker);
}

.drawer-col-controls {
  background-color: rgba(17, 34, 64, 0.4);
  border-left: 1px solid var(--border-color);
}

.panel-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--teal-primary);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}
.panel-section-title svg {
  width: 16px;
  height: 16px;
}

.info-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.info-value {
  font-size: 13px;
  color: var(--text-primary);
}

.info-value-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.info-subvalue {
  font-size: 11px;
  color: var(--text-dim);
}

.badge-source {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 11px;
  color: var(--cyan-neon);
}

/* ICP Fit Meter */
.icp-meter-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icp-meter-bar {
  flex: 1;
  height: 8px;
  background-color: var(--bg-surface);
  border-radius: 4px;
  overflow: hidden;
}
.icp-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-primary), var(--mint-accent));
  border-radius: 4px;
}
.icp-score-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mint-accent);
  font-weight: 700;
}

/* Tags Container */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-pill {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border-color);
}

.custom-fields-box {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Timeline Tabs */
.timeline-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}
.t-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.t-tab:hover { color: var(--text-primary); }
.t-tab.active {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--teal-primary);
  font-weight: 600;
}

/* Add Interaction Card */
.add-interaction-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.add-form-header {
  display: flex;
  gap: 8px;
}

.select-mini {
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  outline: none;
}

.form-textarea-compact {
  width: 100%;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  resize: vertical;
  outline: none;
}
.form-textarea-compact:focus {
  border-color: var(--teal-primary);
}

.add-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Timeline Feed */
.timeline-feed-viewport {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-item {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timeline-item.pinned {
  border-left: 3px solid var(--teal-primary);
  background-color: rgba(0, 180, 216, 0.04);
}

.timeline-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.timeline-item-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-primary);
}

.timeline-item-date {
  font-family: var(--font-mono);
  color: var(--text-dim);
}

.timeline-item-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  white-space: pre-wrap;
}

.ai-summary-box {
  background-color: rgba(100, 255, 218, 0.05);
  border-left: 2px solid var(--cyan-neon);
  padding: 8px;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: #E2E8F0;
  margin-top: 6px;
}

/* Right Controls Column */
.control-box {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.form-select, .form-select-lg {
  width: 100%;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
}
.form-select-lg {
  font-weight: 700;
  border-color: var(--teal-primary);
}

.stage-transition-note-wrapper {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.form-input-compact {
  flex: 1;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
}

/* Trial Progress Widget */
.trial-widget {
  background: var(--purple-trial-bg);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trial-widget.hidden { display: none; }

.trial-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trial-badge-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #D8B4FE;
}
.trial-days-countdown {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
}

.trial-progress-bar {
  height: 6px;
  background-color: var(--bg-darker);
  border-radius: 3px;
  overflow: hidden;
}
.trial-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #A855F7, #EC4899);
  border-radius: 3px;
}
.trial-dates-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #C084FC;
}

.input-with-icon {
  display: flex;
  align-items: center;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0 8px;
}
.input-icon-prefix {
  font-family: var(--font-mono);
  color: var(--teal-primary);
  font-weight: 700;
}
.form-input-mono {
  width: 100%;
  background: transparent;
  border: none;
  padding: 6px 8px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  outline: none;
}

.semaphore-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-switch-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}

.emergency-actions-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.mt-2 { margin-top: 8px; }
.mt-1 { margin-top: 4px; }

/* ==========================================================================
   MODAL: New Lead Registration
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(11, 19, 43, 0.8);
  backdrop-filter: blur(4px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.modal-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

.modal-container {
  width: 100%;
  max-width: 680px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modal-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header {
  padding: 16px 20px;
  background-color: var(--bg-darker);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-pill-teal {
  width: 32px;
  height: 32px;
  background-color: var(--teal-primary);
  color: var(--bg-darker);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-pill-teal svg { width: 18px; height: 18px; }

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
}

.modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-close-modal {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
}
.btn-close-modal:hover { color: #FFFFFF; }

.modal-form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 75vh;
  overflow-y: auto;
}

.form-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-input, .form-textarea {
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 8px 12px;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s ease;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 2px var(--teal-glow);
}

.phone-input-row {
  display: flex;
  gap: 8px;
}

.select-country {
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  padding: 8px;
  outline: none;
}

.flex-1 { flex: 1; }

.phone-normalizer-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan-neon);
}
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--teal-primary);
}

.modal-footer {
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}

.toast {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 420px;
  animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-primary);
  font-size: 13px;
}

.toast.toast-success { border-left: 4px solid var(--sem-green); }
.toast.toast-error { border-left: 4px solid var(--sem-red); }
.toast.toast-info { border-left: 4px solid var(--teal-primary); }

/* ==========================================================================
   Keyframes & Animations
   ========================================================================== */

@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

@keyframes pulse-purple {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

@keyframes pulse-border-red {
  0%, 100% { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 0 4px rgba(239, 68, 68, 0.2); }
  50% { border-color: rgba(239, 68, 68, 0.9); box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
}

@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--teal-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
  .drawer-3col-body {
    grid-template-columns: 280px 1fr 280px;
  }
}

@media (max-width: 900px) {
  .top-nav {
    flex-direction: column;
    height: auto;
    padding: 12px 16px;
    gap: 12px;
  }
  .drawer-3col-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .drawer-col-profile, .drawer-col-controls {
    border: none;
  }
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  .col-span-2 {
    grid-column: span 1;
  }
}

/* ==========================================================================
   Interaction Foundations — focus, press feedback, inline icons
   ========================================================================== */

/* Visible keyboard focus on everything that can receive it. */
:where(a, button, input, select, textarea, [tabindex], summary, .conv-row, .th-sortable):focus-visible {
  outline: 2px solid var(--teal-primary);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}
/* The mouse should not drag the ring around with it. */
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
  outline: none;
}

/* Pressable elements answer the click immediately. */
.btn, .btn-secondary-sm, .btn-teal-sm, .view-tab, .t-tab, .inbox-send-btn, .btn-load-more {
  transition: background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              color var(--dur-fast) ease,
              transform var(--dur-press) var(--ease-out);
}
.btn:active, .btn-secondary-sm:active, .btn-teal-sm:active,
.inbox-send-btn:active, .btn-load-more:active {
  transform: scale(0.97);
}
.btn:disabled, .btn-secondary-sm:disabled, .inbox-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* The KPI cards no longer lift; keep the primary button's lift only. */
.btn-primary:hover, .btn-whatsapp:hover { transform: translateY(-1px); }
.btn-primary:active, .btn-whatsapp:active { transform: scale(0.97); }

/* Inline SVG icons that replaced the emoji iconography. */
.ui-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  vertical-align: -2px;
}
.badge-setter, .badge-bot, .card-timestamp, .badge-source {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.tab-count-badge {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--sem-red);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.view-tab.active .tab-count-badge { background: var(--bg-darker); color: var(--cyan-neon); }
.tab-count-badge.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Loading / Empty / Error States
   ========================================================================== */

.skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.skeleton-row {
  border-radius: var(--border-radius-sm);
  background: linear-gradient(
    100deg,
    rgba(35, 53, 84, 0.35) 30%,
    rgba(35, 53, 84, 0.75) 50%,
    rgba(35, 53, 84, 0.35) 70%
  );
  background-size: 300% 100%;
  animation: skeleton-sheen 1.4s linear infinite;
}
.skeleton-line { height: 12px; }
.skeleton-title { height: 16px; width: 60%; margin-bottom: var(--sp-3); }
.skeleton-card { height: 92px; }
.skeleton-block { height: 64px; }
.skeleton-conv { height: 58px; }
.skeleton-bubble { height: 46px; width: 62%; }
.skeleton-stack .skeleton-bubble:nth-child(even) { margin-left: auto; width: 48%; }

.skeleton-column {
  min-width: 292px;
  flex: 0 0 292px;
}
.skeleton-tr td { padding: 10px 14px; }

@keyframes skeleton-sheen {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

.state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  margin: auto;
  max-width: 380px;
}
.state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 180, 216, 0.1);
  color: var(--teal-primary);
}
.state-icon .ui-icon { width: 20px; height: 20px; }
.state-icon-danger { background: var(--sem-red-bg); color: #FCA5A5; }
.state-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.state-hint {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.state-error .btn-secondary-sm { margin-top: var(--sp-1); display: inline-flex; gap: 6px; align-items: center; }

/* ==========================================================================
   Drawer — inline editable fields & timeline refinements
   ========================================================================== */

.info-value-editable {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 3px 26px 3px 6px;
  margin-left: -6px;
  border-radius: var(--border-radius-sm);
  border: 1px solid transparent;
  cursor: text;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
  word-break: break-word;
}
.info-value-editable::after {
  content: '';
  position: absolute;
  right: 7px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .info-value-editable:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color);
  }
  .info-value-editable:hover::after { opacity: 0.55; }
}
.info-value-editable.is-editing {
  background-color: var(--bg-darker);
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 2px var(--teal-glow);
  outline: none;
  cursor: text;
}
.info-value-editable.is-editing::after { opacity: 0; }
.info-value-editable.is-saving {
  color: var(--text-muted);
  border-color: var(--border-color);
  filter: blur(0.4px);
}
.info-value-editable.is-saved { border-color: var(--sem-green); }

.timeline-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.timeline-tabs .t-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .timeline-tabs .t-tab:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); }
}
.timeline-tabs .t-tab.active {
  background: rgba(0, 180, 216, 0.14);
  border-color: rgba(0, 180, 216, 0.35);
  color: var(--cyan-neon);
  font-weight: 600;
}
.t-tab-count {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.75;
}
.tl-pinned {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cyan-neon);
}
.tl-author { display: inline-flex; align-items: center; gap: 5px; }

.ai-summary-box {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}
.ai-summary-box .ui-icon { margin-top: 2px; color: var(--cyan-neon); }

.transcript-details {
  margin-top: var(--sp-2);
  font-size: 12px;
  color: var(--text-muted);
}
.transcript-details summary {
  cursor: pointer;
  color: var(--teal-primary);
  font-weight: 500;
  list-style: none;
}
.transcript-details summary::-webkit-details-marker { display: none; }
.transcript-details summary::before { content: '▸ '; }
.transcript-details[open] summary::before { content: '▾ '; }
.transcript-details p {
  margin-top: var(--sp-1);
  padding: var(--sp-2);
  background: var(--bg-darker);
  border-radius: var(--border-radius-sm);
  line-height: 1.55;
}

/* ==========================================================================
   VIEW 4: Conversations Inbox
   ========================================================================== */

/* Full-height, no page scroll: each column scrolls inside itself. */
body.view-inbox { overflow: hidden; }
body.view-inbox #kpiDashboard { display: none; }
/* The flex chain must be constrained all the way down for the columns to scroll
   inside themselves instead of stretching the page. */
body.view-inbox .app-container { height: 100vh; min-height: 0; }
body.view-inbox .main-content { min-height: 0; overflow: hidden; }

#viewInbox {
  flex: 1 1 0;
  min-height: 0;
}

.inbox-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 300px;
  gap: var(--sp-3);
  height: 100%;
  min-height: 0;
}

.inbox-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* ---- Column 1: conversation list ---- */
.inbox-list-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-color);
}
.inbox-search { min-width: 0; max-width: none; flex: none; }
.inbox-search .search-input { padding: 8px 32px 8px 34px; font-size: 13px; }

.inbox-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.select-filter-sm {
  padding: 5px 8px;
  font-size: 12px;
  max-width: 138px;
}

.toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 7px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.toggle-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-chip-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-color-light);
  border-radius: 4px;
  color: var(--bg-darker);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.toggle-chip-box svg { width: 10px; height: 10px; opacity: 0; transition: opacity var(--dur-press) ease; }
.toggle-chip input:checked ~ .toggle-chip-box { background: var(--teal-primary); border-color: var(--teal-primary); }
.toggle-chip input:checked ~ .toggle-chip-box svg { opacity: 1; }
.toggle-chip:has(input:checked) { color: var(--text-primary); border-color: rgba(0, 180, 216, 0.4); background: rgba(0, 180, 216, 0.08); }
.toggle-chip:focus-within { outline: 2px solid var(--teal-primary); outline-offset: 2px; }

.inbox-list-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.inbox-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.inbox-list-scroll > .skeleton-stack,
.inbox-list > .skeleton-stack { padding: var(--sp-3); }

.conv-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  width: 100%;
  padding: 10px var(--sp-3);
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(35, 53, 84, 0.5);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-ui);
  color: inherit;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .conv-row:hover { background-color: rgba(255, 255, 255, 0.035); }
}
.conv-row.active {
  background-color: rgba(0, 180, 216, 0.1);
  border-left-color: var(--teal-primary);
}
.conv-row:focus-visible { outline-offset: -2px; }

.conv-avatar-wrap { position: relative; flex: 0 0 auto; }
.conv-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(0, 180, 216, 0.28), rgba(46, 196, 182, 0.2));
  color: var(--cyan-neon);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.sem-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
}
.sem-dot-VERDE { background: var(--sem-green); }
.sem-dot-AMARILLO { background: var(--sem-yellow); }
.sem-dot-ROJO { background: var(--sem-red); }
.conv-row.active .sem-dot { border-color: #16304f; }

.conv-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.conv-line-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.conv-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-time {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.conv-company {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-line-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: 2px;
}
.conv-preview {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.conv-preview.is-unread { color: var(--text-secondary); font-weight: 500; }
.conv-unread {
  flex: 0 0 auto;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--teal-primary);
  color: var(--bg-darker);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.inbox-list-footer { padding: var(--sp-3); }
.btn-load-more {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
}
.btn-load-more:hover { border-color: var(--teal-primary); color: var(--text-primary); }
.inbox-list-end {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
}

/* ---- Column 2: thread ---- */
.inbox-thread-col { background-color: var(--bg-darker); }

.inbox-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  flex: 0 0 auto;
}
.inbox-thread-identity { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.inbox-avatar-lg { width: 40px; height: 40px; font-size: 13px; }
.inbox-thread-names { min-width: 0; }
.inbox-thread-name {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-thread-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  min-width: 0;
}
.mono-phone { font-family: var(--font-mono); color: var(--teal-primary); font-size: 11.5px; }
.inbox-thread-company { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-sm svg { width: 14px; height: 14px; }

.inbox-thread-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}
.inbox-thread-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.inbox-thread {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-4);
  min-height: 100%;
}
.thread-skeleton { width: 100%; }

.day-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--sp-4) 0 var(--sp-2);
}
.day-separator span {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(35, 53, 84, 0.6);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.msg-row { display: flex; }
.msg-in { justify-content: flex-start; }
.msg-out { justify-content: flex-end; }

.bubble {
  position: relative;
  max-width: min(560px, 74%);
  padding: 8px 11px 6px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-primary);
}
.msg-in .bubble {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 4px;
}
.msg-out .bubble {
  background-color: rgba(0, 180, 216, 0.16);
  border: 1px solid rgba(0, 180, 216, 0.28);
  border-bottom-right-radius: 4px;
}
.msg-row.is-sending .bubble { opacity: 0.65; }
.msg-row.is-failed .bubble { border-color: var(--sem-red); background-color: var(--sem-red-bg); }

.bubble-text { white-space: pre-wrap; word-break: break-word; }

.bubble-agent-badge,
.bubble-channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(100, 255, 218, 0.12);
  color: var(--cyan-neon);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.bubble-agent-badge .ui-icon { width: 11px; height: 11px; }
.bubble-channel { background: rgba(139, 92, 246, 0.15); color: #C084FC; }

.bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 2px;
  line-height: 1;
}
.bubble-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.msg-status {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
}
.msg-status .ui-icon { width: 12px; height: 12px; }
.msg-status.is-read { color: #38BDF8; }
.msg-status.is-delivered { color: var(--text-muted); }
.msg-status.is-pending { color: var(--sem-yellow); }
.msg-status.is-failed { color: var(--sem-red); }
.msg-status.is-sending { color: var(--text-dim); }

.msg-audio { display: block; width: 260px; max-width: 100%; margin-top: 6px; height: 34px; }
.msg-transcript { margin-top: 4px; font-size: 11.5px; }

.msg-delivery-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: var(--border-radius-sm);
  background: var(--sem-yellow-bg);
  color: #FCD34D;
  font-size: 11.5px;
  line-height: 1.4;
}
.msg-delivery-note .ui-icon { width: 12px; height: 12px; margin-top: 2px; }

/* Internal notes are deliberately NOT bubbles: the client never sees them. */
.note-card {
  align-self: center;
  width: min(440px, 82%);
  margin: var(--sp-2) 0;
  padding: 8px 12px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-left-width: 3px;
  border-radius: var(--border-radius-sm);
  background: rgba(245, 158, 11, 0.07);
}
.note-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #FCD34D;
}
.note-card-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
}
.note-card-body {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.inbox-jump-latest {
  position: absolute;
  left: 50%;
  bottom: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(0, 180, 216, 0.4);
  border-radius: 999px;
  background-color: #16304f;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transform: translate(-50%, 0);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.inbox-jump-latest svg { width: 14px; height: 14px; }
.inbox-jump-latest.hidden {
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  display: inline-flex;
}
.inbox-jump-latest:active { transform: translate(-50%, 0) scale(0.97); }

.inbox-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  flex: 0 0 auto;
}
.inbox-composer-input {
  flex: 1;
  min-height: 38px;
  max-height: 132px;
  padding: 9px 12px;
  resize: none;
  background-color: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.45;
  outline: none;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.inbox-composer-input::placeholder { color: var(--text-dim); }
.inbox-composer-input:focus {
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 2px var(--teal-glow);
}
.inbox-send-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--teal-primary);
  color: var(--bg-darker);
  cursor: pointer;
}
.inbox-send-btn svg { width: 17px; height: 17px; }
.inbox-send-btn:hover { background-color: #38BDF8; }

/* ---- Column 3: context ---- */
.inbox-context-col { background-color: rgba(17, 34, 64, 0.55); }
.inbox-context-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
}
.inbox-context-body .panel-section-title { margin-bottom: 0; }
.inbox-context-body .info-group { gap: 3px; }
.inbox-context-body .state-block { padding: var(--sp-6) var(--sp-2); }

.control-hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.import-box .btn-secondary-sm { display: inline-flex; align-items: center; gap: 6px; }
.import-feedback { margin-top: 6px; font-size: 11.5px; font-family: var(--font-mono); }
.import-working { color: var(--text-muted); }
.import-ok { color: var(--sem-green); }
.import-fail { color: var(--sem-red); }
.mt-2 { margin-top: var(--sp-2); }

/* ---- Inbox responsiveness: 1440x900 laptops and narrower ---- */
@media (max-width: 1400px) {
  .inbox-layout { grid-template-columns: 288px minmax(0, 1fr) 272px; }
}
@media (max-width: 1180px) {
  .inbox-layout { grid-template-columns: 264px minmax(0, 1fr); }
  .inbox-context-col { display: none; }
}
@media (max-width: 900px) {
  body.view-inbox { overflow: auto; }
  body.view-inbox .app-container { height: auto; min-height: 100vh; }
  body.view-inbox .main-content { overflow: visible; }
  #viewInbox { flex: none; height: auto; }
  .inbox-layout { grid-template-columns: 1fr; height: auto; }
  .inbox-list-col { height: 340px; flex: none; }
  .inbox-thread-col { height: 66vh; flex: none; }
}

/* `.hidden` had no global rule, so hiding the WhatsApp CTA silently did nothing. */
.btn.hidden { display: none; }
.inbox-thread-header[hidden],
.inbox-composer[hidden] { display: none; }

/* ==========================================================================
   Contacts table — density, fixed column widths, sort affordance
   A single long value used to blow one column out to 1400px and push the
   table to 3200px wide. Fixed layout + truncation keeps it readable.
   ========================================================================== */

.crm-table {
  table-layout: fixed;
  min-width: 1140px;
}
.crm-table th { padding: 9px var(--sp-3); font-size: 11px; letter-spacing: 0.6px; }
.crm-table td { padding: 9px var(--sp-3); vertical-align: middle; }
.crm-table th:nth-child(1), .crm-table td:nth-child(1) { width: 104px; }
.crm-table th:nth-child(3), .crm-table td:nth-child(3) { width: 172px; }
.crm-table th:nth-child(4), .crm-table td:nth-child(4) { width: 168px; }
.crm-table th:nth-child(5), .crm-table td:nth-child(5) { width: 184px; }
.crm-table th:nth-child(6), .crm-table td:nth-child(6) { width: 124px; }
.crm-table th:nth-child(7), .crm-table td:nth-child(7) { width: 156px; }
.crm-table th:nth-child(8), .crm-table td:nth-child(8) { width: 132px; }
.crm-table th:nth-child(9), .crm-table td:nth-child(9) { width: 108px; }

.crm-table td > *,
.table-company-name,
.table-contact-sub,
.card-niche-pill,
.table-stage-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-company-cell { min-width: 0; }
.crm-table .btn-card-wa { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.crm-table .btn-card-wa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Which column is sorted, and which way. */
.th-sortable { position: relative; padding-right: 26px !important; user-select: none; }
.th-sortable::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -3px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .th-sortable:hover::after { opacity: 0.35; }
}
.th-sortable.sorted-asc, .th-sortable.sorted-desc { color: var(--teal-primary); }
.th-sortable.sorted-asc::after, .th-sortable.sorted-desc::after { opacity: 1; }
.th-sortable.sorted-desc::after {
  border-bottom: none;
  border-top: 5px solid currentColor;
}
.crm-table tbody tr:last-child td { border-bottom: none; }
.crm-table td .state-block { margin: 0 auto; }

/* ==========================================================================
   Top bar responsiveness — below ~1400px the nav used to overflow and clip
   the primary "Nuevo Prospecto" action off-screen.
   ========================================================================== */
.top-nav { gap: var(--sp-3); }
.nav-center { flex: 0 1 auto; min-width: 0; }
.nav-right { flex: 0 0 auto; }
.pipeline-select { max-width: 260px; text-overflow: ellipsis; }

@media (max-width: 1440px) {
  .system-status-pill { display: none; }
}
@media (max-width: 1240px) {
  .top-nav { padding: 0 var(--sp-3); }
  .nav-left, .nav-center, .nav-right { gap: var(--sp-2); }
  .brand-subtitle { display: none; }
  .view-tab { padding: 8px 10px; font-size: 12px; gap: 6px; }
  .pipeline-select { max-width: 190px; }
  #btnNewLead span { display: none; }
  #btnNewLead { padding: 8px; }
}
@media (max-width: 1040px) {
  .brand-text { display: none; }
  .view-tab span:not(.tab-count-badge) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .view-tab { padding: 8px 12px; }
}
@media (max-width: 900px) {
  .view-tab span:not(.tab-count-badge) { position: static; width: auto; height: auto; clip: auto; }
}
.bubble-empty { color: var(--text-dim); font-style: italic; }


/* =========================================================================
   API Key Gate
   ========================================================================= */
.api-gate {
  /* Por encima de todo: mientras no haya clave, no hay CRM debajo que tocar. */
  z-index: 9000;
}

.api-gate-card {
  max-width: 460px;
}

.api-gate .modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.api-gate-error {
  color: var(--sem-red);
  font-size: 13px;
  margin: 0;
}

.api-gate-hint {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}

.api-gate-hint code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--cyan-neon);
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
  margin-top: 4px;
  word-break: break-all;
}

.api-gate-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* =========================================================================
   Stage Manager Modal (Configurar Columnas)
   ========================================================================= */
.modal-stages-container {
  max-width: 720px;
  width: 95%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.modal-body-stages {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stages-manager-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.stage-manage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 8px 12px;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.stage-manage-row:hover {
  border-color: var(--teal-primary);
}

.stage-pos-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.stage-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

.stage-name-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  min-width: 140px;
}

.stage-name-input:focus {
  border-color: var(--teal-primary);
  outline: none;
}

.stage-color-select {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  max-width: 110px;
}

.stage-deals-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.stage-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-stage-action {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 4px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  transition: all var(--dur-fast) ease;
}

.btn-stage-action:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--teal-primary);
}

.btn-stage-action:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-stage-action.btn-stage-delete:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--sem-red);
  color: var(--sem-red);
}

.add-stage-card {
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 12px 14px;
}

.add-stage-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.add-stage-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.add-stage-row input {
  flex: 1;
}

.add-stage-row select {
  max-width: 140px;
}