/* ======================================================
   CRM MODULE — styles following the existing design system
====================================================== */

/* ======================================================
   PAGE WRAPPER
====================================================== */

.crm-page {
  padding: 32px 72px 48px;
  background: #f4f6fb;
  min-height: 100vh;
}

/* ======================================================
   SEARCH BAR + FILTER TABS
====================================================== */

.crm-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.crm-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.crm-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 15px;
  pointer-events: none;
}

.crm-search-input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
  background: #ffffff;
  height: 38px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.crm-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.crm-status-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-status-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.crm-status-tab:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #2563eb;
}

.crm-status-tab.crm-tab-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* ======================================================
   KPI ROW
====================================================== */

.crm-kpi-row {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.crm-kpi-card {
  flex: 1;
  min-width: 120px;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crm-kpi-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.crm-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

.crm-kpi-value.kpi-blue   { color: #2563eb; }
.crm-kpi-value.kpi-green  { color: #16a34a; }
.crm-kpi-value.kpi-amber  { color: #d97706; }
.crm-kpi-value.kpi-purple { color: #7c3aed; }

/* ======================================================
   CLIENT TABLE
====================================================== */

.crm-table-wrap {
  margin-top: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

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

.crm-table thead th {
  background: #f8fafc;
  color: #374151;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.crm-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.1s;
}

.crm-table tbody tr:last-child {
  border-bottom: none;
}

.crm-table tbody tr:hover {
  background: #f8fafc;
}

.crm-table td {
  padding: 10px 14px;
  vertical-align: middle;
  color: #111827;
}

.crm-table td.crm-col-name {
  font-weight: 600;
}

.crm-table td.crm-col-subtle {
  color: #64748b;
}

.crm-table-empty {
  padding: 40px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}

.crm-open-btn {
  padding: 5px 12px;
  border: 1px solid #2563eb;
  border-radius: 6px;
  background: #fff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.15s;
}

.crm-open-btn:hover {
  background: #eff6ff;
}

/* ======================================================
   STATUS BADGES
====================================================== */

.crm-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.crm-badge-active   { background: #dcfce7; color: #166534; }
.crm-badge-inactive { background: #fef9c3; color: #854d0e; }
.crm-badge-cold     { background: #dbeafe; color: #1e40af; }
.crm-badge-archived { background: #f1f5f9; color: #475569; }
.crm-badge-deleted  { background: #fee2e2; color: #991b1b; }

/* ======================================================
   TRAFFIC LIGHT DOTS
====================================================== */

.crm-tl-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 6px;
}

.crm-tl-green { background: #16a34a; }
.crm-tl-red   { background: #dc2626; }
.crm-tl-gray  { background: #94a3b8; }

/* ======================================================
   CLIENT CARD — two-column layout
====================================================== */

.crm-card-page {
  padding: 28px 40px 48px;
  background: #f4f6fb;
  min-height: 100vh;
}

.crm-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: 0.15s;
  margin-bottom: 20px;
}

.crm-back-btn:hover {
  background: #f8fafc;
  border-color: #93c5fd;
  color: #2563eb;
}

/* Two-column shell */
.crm-card-layout {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 20px;
  align-items: start;
}

/* ── LEFT COLUMN ─────────────────────────────────────── */
.crm-card-left {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  padding: 24px;
  position: sticky;
  top: 16px;
}

.crm-left-name {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 10px;
  word-break: break-word;
}

.crm-left-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.crm-svc-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #e0e7ff;
  color: #3730a3;
  letter-spacing: 0.03em;
}

/* Next activity block */
.crm-next-act-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 4px;
}

.crm-next-act-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 6px;
}

.crm-next-act-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-next-act-type {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.crm-next-act-date {
  font-size: 12px;
  color: #64748b;
}

.crm-next-act-empty {
  font-size: 13px;
  color: #94a3b8;
  padding: 10px 0;
}

/* Divider */
.crm-left-divider {
  border: none;
  border-top: 1px solid #f1f5f9;
  margin: 16px 0;
}

/* Editable fields list */
.crm-detail-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.crm-detail-field {
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.crm-detail-field:last-child {
  border-bottom: none;
}

.crm-detail-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-bottom: 3px;
}

.crm-detail-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 4px;
  transition: background 0.12s;
}

.crm-detail-field-clickable .crm-detail-value-row:hover {
  background: #f1f5f9;
}

.crm-detail-value {
  font-size: 13px;
  color: #111827;
  flex: 1;
  word-break: break-word;
}

.crm-detail-edit-icon {
  font-size: 11px;
  color: #cbd5e1;
  opacity: 0;
  transition: opacity 0.12s;
}

.crm-detail-field-clickable:hover .crm-detail-edit-icon {
  opacity: 1;
}

.crm-field-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-field-edit-input {
  flex: 1;
  min-width: 0;
  font-size: 13px !important;
  height: 32px !important;
  padding: 4px 8px !important;
}

.crm-field-edit-dropdown {
  flex: 1;
  font-size: 13px;
}

.crm-field-save-btn {
  padding: 4px 10px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.crm-field-save-btn:hover { background: #1d4ed8; }

.crm-field-cancel-btn {
  padding: 4px 8px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.crm-field-cancel-btn:hover { background: #e2e8f0; }

/* Actions section */
.crm-actions-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-actions-toggle-btn {
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}

.crm-actions-toggle-btn:hover {
  border-color: #93c5fd;
  background: #f8fafc;
}

.crm-actions-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.10);
}

.crm-action-menu-item {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  transition: background 0.12s;
}

.crm-action-menu-item:hover { background: #f1f5f9; }

.crm-action-menu-danger { color: #dc2626; }
.crm-action-menu-danger:hover { background: #fee2e2; }

.crm-actions-form {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-actions-form-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.crm-actions-dropdown { font-size: 13px; }
.crm-actions-input { font-size: 13px !important; }

.crm-actions-form-btns {
  display: flex;
  gap: 8px;
}

.crm-action-confirm-btn {
  padding: 6px 14px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.crm-action-confirm-btn:hover { background: #1d4ed8; }

.crm-action-cancel-btn {
  padding: 6px 12px;
  background: #f1f5f9;
  color: #374151;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}

.crm-action-cancel-btn:hover { background: #e2e8f0; }

/* crm-msg reused in many places */
.crm-msg {
  font-size: 13px;
  color: #16a34a;
  margin-top: 4px;
  min-height: 16px;
}

.crm-msg.crm-msg-error { color: #dc2626; }

/* ── RIGHT COLUMN ────────────────────────────────────── */
.crm-card-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.crm-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.crm-timeline-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #374151;
}

.crm-new-act-btn {
  padding: 6px 14px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.crm-new-act-btn:hover { background: #1d4ed8; }

/* New activity inline form */
.crm-new-act-form {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.crm-new-act-form-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 12px;
}

.crm-new-act-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.crm-new-act-notes-group {
  grid-column: span 1;
}

.crm-new-act-dropdown { font-size: 13px; }

.crm-new-act-form-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crm-new-act-cancel-btn,
.crm-new-act-save-btn {
  font-size: 12px !important;
  padding: 6px 14px !important;
}

/* Activity timeline */
.crm-timeline-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-timeline-empty {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  padding: 32px 0;
}

/* Activity card */
.crm-act-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-act-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.crm-act-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.crm-act-type {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

.crm-act-date {
  font-size: 12px;
  color: #64748b;
}

.crm-act-notes {
  font-size: 12px;
  color: #475569;
  word-break: break-word;
}

/* Generated text block */
.crm-act-text-block {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.crm-act-text-area {
  flex: 1;
  font-size: 12px;
  color: #374151;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  resize: vertical;
  min-height: 64px;
  max-height: 160px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}

.crm-act-copy-btn {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.15s;
  flex-shrink: 0;
}

.crm-act-copy-btn:hover {
  border-color: #93c5fd;
  color: #2563eb;
}

/* Action buttons inside card */
.crm-act-card-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-act-btn {
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.15s;
}

.crm-act-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
  background: #eff6ff;
}

.crm-act-btn.crm-act-btn-sent    { color: #16a34a; border-color: #86efac; }
.crm-act-btn.crm-act-btn-replied { color: #2563eb; border-color: #93c5fd; }
.crm-act-btn.crm-act-btn-noreply { color: #d97706; border-color: #fcd34d; }

/* Delete button */
.crm-act-delete-btn {
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
  flex-shrink: 0;
}

.crm-act-delete-btn:hover { color: #dc2626; }

/* Delete confirmation */
.crm-act-delete-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.crm-act-delete-q {
  font-size: 12px;
  color: #dc2626;
  font-weight: 600;
}

.crm-act-delete-yes {
  padding: 3px 10px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.crm-act-delete-no {
  padding: 3px 10px;
  background: #f1f5f9;
  color: #374151;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
}

/* ======================================================
   GLOBAL ACTIVITIES PANEL
====================================================== */

.crm-act-filter-bar {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.crm-act-filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.crm-act-filter-search {
  min-width: 196px;
}

.crm-act-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.crm-act-list-wrap {
  margin-top: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  overflow: visible;
}

.crm-act-list-header {
  display: grid;
  grid-template-columns: 28px 1fr 90px 100px 120px 260px;
  gap: 8px;
  padding: 10px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #374151;
}

.crm-act-list-row {
  display: grid;
  grid-template-columns: 28px 1fr 90px 100px 120px 260px;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  align-items: center;
  font-size: 13px;
  color: #111827;
}

.crm-act-list-row:last-child {
  border-bottom: none;
}

.crm-act-list-row:hover {
  background: #f8fafc;
}

.crm-act-client-link {
  color: #2563eb;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}

.crm-act-client-link:hover {
  text-decoration: underline;
}

.crm-act-type-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
}

.crm-act-status-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.crm-act-status-pending  { background: #fef9c3; color: #854d0e; }
.crm-act-status-sent     { background: #dcfce7; color: #166534; }
.crm-act-status-replied  { background: #dbeafe; color: #1e40af; }
.crm-act-status-no_reply { background: #fee2e2; color: #991b1b; }

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 900px) {
  .crm-page,
  .crm-card-page {
    padding: 20px 16px 40px;
  }

  .crm-card-layout {
    grid-template-columns: 1fr;
  }

  .crm-card-left {
    position: static;
  }

  .crm-new-act-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .crm-act-list-header,
  .crm-act-list-row {
    grid-template-columns: 22px 1fr 80px 90px 100px 180px;
  }
}

@media (max-width: 600px) {
  .crm-page,
  .crm-card-page {
    padding: 14px 14px 32px;
  }

  .crm-new-act-form-grid {
    grid-template-columns: 1fr;
  }

  .crm-act-list-header,
  .crm-act-list-row {
    grid-template-columns: 22px 1fr 80px 120px;
  }

  .crm-act-list-header > :nth-child(n+5),
  .crm-act-list-row > :nth-child(n+5) {
    display: none;
  }
}

/* ======================================================
   CRM SUB-NAVIGATION
====================================================== */

.crm-subnav {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
}

.crm-subnav-link {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.15s;
}

.crm-subnav-link:hover {
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.crm-subnav-link-active {
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

/* ======================================================
   TEMPLATES EDITOR
====================================================== */

.crm-tpl-content-area {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-tpl-textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
  line-height: 1.55;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.crm-tpl-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

/* Variable chips */
.crm-vars-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.crm-vars-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-right: 4px;
}

.crm-var-chip {
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Courier New', Courier, monospace;
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
}

.crm-var-chip:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
}

/* Live preview */
.crm-preview-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.crm-preview-title {
  padding: 7px 12px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.crm-preview-body {
  padding: 12px 14px;
  font-size: 13px;
  color: #1e293b;
  line-height: 1.6;
  white-space: pre-wrap;
  min-height: 52px;
  background: #ffffff;
}

.crm-preview-empty {
  color: #94a3b8;
  font-style: italic;
}

/* Active checkbox */
.crm-tpl-active-check label {
  font-size: 13px;
  color: #374151;
}

/* Template table action buttons */
.crm-tpl-edit-btn {
  padding: 4px 10px;
  border: 1px solid #2563eb;
  border-radius: 6px;
  background: #fff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 4px;
  transition: 0.15s;
}

.crm-tpl-edit-btn:hover {
  background: #eff6ff;
}

.crm-tpl-delete-btn {
  padding: 4px 10px;
  border: 1px solid #dc2626;
  border-radius: 6px;
  background: #fff;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}

.crm-tpl-delete-btn:hover {
  background: #fee2e2;
}

.crm-tpl-inactive-row {
  opacity: 0.55;
}

/* Drag-and-drop */
.crm-tpl-drag-cell {
  width: 28px;
  text-align: center;
  padding: 0 4px;
}

.crm-tpl-drag-handle {
  display: inline-block;
  cursor: grab;
  color: #9ca3af;
  font-size: 16px;
  line-height: 1;
  user-select: none;
  padding: 4px 2px;
}

.crm-tpl-drag-handle:hover {
  color: #4b5563;
}

.crm-tpl-row {
  transition: background 0.1s;
}

.crm-tpl-dragging {
  opacity: 0.4;
}

.crm-tpl-drop-above td {
  box-shadow: 0 -2px 0 0 #2563eb;
}

.crm-tpl-drop-below td {
  box-shadow: 0 2px 0 0 #2563eb;
}

/* Secondary button */
.secondary-button {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
}

.secondary-button:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* ======================================================
   TRASH & ARCHIVED TABLES
====================================================== */

.crm-restore-btn {
  padding: 4px 10px;
  border: 1px solid #16a34a;
  border-radius: 6px;
  background: #fff;
  color: #16a34a;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 4px;
  transition: 0.15s;
  white-space: nowrap;
}

.crm-restore-btn:hover {
  background: #dcfce7;
}

.crm-perm-delete-btn {
  padding: 4px 10px;
  border: 1px solid #dc2626;
  border-radius: 6px;
  background: #fff;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
}

.crm-perm-delete-btn:hover {
  background: #fee2e2;
}

.crm-col-reason {
  font-size: 12px;
  color: #64748b;
  max-width: 260px;
  word-break: break-word;
}

/* ── New client button ───────────────────────────────────── */
.crm-new-client-btn {
  margin-left: auto;
  padding: 8px 16px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  height: 38px;
}

.crm-new-client-btn:hover {
  background: #1d4ed8;
}

/* ── New client modal ────────────────────────────────────── */
.crm-new-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.crm-new-modal-dialog {
  width: min(640px, 96vw);
  max-height: min(90vh, 760px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.crm-new-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eef2f7;
  flex-shrink: 0;
}

.crm-new-modal-title {
  font-weight: 700;
  font-size: 15px;
  color: #111827;
}

.crm-new-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.crm-new-modal-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.crm-new-modal-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.crm-field-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crm-new-input {
  width: 100%;
  box-sizing: border-box;
}

.crm-new-dropdown {
  font-size: 13px;
}

.crm-new-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #eef2f7;
  flex-shrink: 0;
}

.crm-new-modal-footer .primary-button,
.crm-new-modal-footer .secondary-button {
  font-size: 13px;
  padding: 8px 20px;
}

@media (max-width: 560px) {
  .crm-new-modal-form {
    grid-template-columns: 1fr;
  }
}

/* ── Clickable rows ──────────────────────────────────────── */
.crm-row-clickable {
  cursor: pointer;
}

.crm-row-clickable:hover td {
  background: #f8fafc;
}

.crm-row-link {
  display: block;
  color: inherit;
  text-decoration: none;
  width: 100%;
}

/* ── Activity indicator column ──────────────────────────── */
.crm-col-indicator {
  padding: 0 8px;
  text-align: center;
  width: 40px;
}

.crm-act-indicator-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 28px;
}

.crm-act-indicator-line {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 6px;
}

.crm-act-indicator-line::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: #e2e8f0;
  border-radius: 1px;
}

.crm-act-indicator-line .crm-tl-dot {
  position: relative;
  z-index: 1;
}

.crm-act-indicator-empty {
  width: 28px;
  height: 28px;
}

/* Popover positioning — align right so it doesn't overflow */
.crm-act-indicator-wrap .agenda-tooltip {
  left: auto;
  right: 0;
  min-width: 240px;
  max-width: 320px;
}

.crm-act-indicator-type {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  color: #111827;
}

.crm-act-indicator-date {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}

.crm-act-indicator-text {
  font-size: 12px;
  color: #374151;
  margin-bottom: 8px;
  word-break: break-word;
  line-height: 1.4;
}

/* ======================================================
   CARD — RIGHT COLUMN TABS
====================================================== */

.crm-card-tabs-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0;
}

.crm-card-tab-btn {
  padding: 8px 18px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  border-radius: 0;
  margin-bottom: -1px;
}

.crm-card-tab-btn:hover {
  color: #2563eb;
}

.crm-card-tab-btn-active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

/* ======================================================
   SERVICE HISTORY
====================================================== */

.crm-history-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Linked client info bar */
.crm-hist-info-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 4px;
}

.crm-hist-info-name {
  font-weight: 700;
  font-size: 13px;
  color: #0c4a6e;
}

.crm-hist-info-item {
  font-size: 12px;
  color: #075985;
}

.crm-hist-info-item::before {
  content: '·';
  margin-right: 10px;
  color: #7dd3fc;
}

.crm-hist-info-total {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

/* History card — extends .crm-act-card */
.crm-hist-card {
  gap: 8px;
}

.crm-hist-id {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  font-family: 'Courier New', monospace;
}

/* Field rows inside history card */
.crm-hist-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crm-hist-field-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.crm-hist-field-label {
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
  min-width: 90px;
  flex-shrink: 0;
}

.crm-hist-field-value {
  color: #1e293b;
  word-break: break-word;
}

/* Sub-visits */
.crm-hist-sub-visits {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
}

.crm-hist-sub-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-bottom: 6px;
}

.crm-hist-sub-list {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crm-hist-sub-list li {
  font-size: 12px;
  color: #475569;
}

/* Empty state */
.crm-hist-empty {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  padding: 32px 0 6px;
  text-align: center;
}

.crm-hist-empty-sub {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  padding-bottom: 32px;
}

/* ── Template table three-dots menu ─────────────────────────── */
.crm-tpl-dots-cell {
  width: 40px;
  text-align: center;
  padding: 0 4px;
}

.crm-tpl-dots-wrap {
  display: inline-block;
}

.crm-tpl-dots-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #94a3b8;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.crm-tpl-dots-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.crm-tpl-dots-menu {
  min-width: 130px;
  max-width: 160px;
  padding: 6px;
  left: auto;
  right: 0;
}

.crm-tpl-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #374151;
  transition: background 0.12s;
}

.crm-tpl-menu-item:hover {
  background: #f3f4f6;
}

.crm-tpl-menu-danger {
  color: #dc2626;
}

.crm-tpl-menu-danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.crm-tpl-status-toggle {
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.crm-tpl-status-toggle:hover {
  opacity: 0.8;
}

.crm-tpl-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.crm-tpl-page-header .crm-new-client-btn {
  margin-left: 16px;
  flex-shrink: 0;
  align-self: center;
}

/* ── Activity type code badge ────────────────────────────────── */
.crm-act-type-code {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  background: #f1f5f9;
  color: #334155;
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 600;
}

/* ── Activities panel inline action buttons ──────────────────── */
.crm-actpnl-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.crm-actpnl-btn {
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.crm-actpnl-btn:hover { opacity: 0.82; }

.crm-actpnl-btn-sent {
  background: #dbeafe;
  color: #1d4ed8;
}

.crm-actpnl-btn-replied {
  background: #d1fae5;
  color: #065f46;
}

.crm-actpnl-btn-noreply {
  background: #fee2e2;
  color: #991b1b;
}

.crm-actpnl-done-label {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

.crm-actpnl-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 6px;
  color: #94a3b8;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.crm-actpnl-delete-btn:hover {
  color: #dc2626;
  background: #fee2e2;
}

.crm-actpnl-delete-confirming {
  font-size: 12px;
  font-weight: 700;
  color: #dc2626;
  background: #fee2e2;
  padding: 4px 10px;
  border-radius: 6px;
}

/* ── Pagination ─────────────────────────────────────────────── */
.crm-pagination { margin-top: 16px; }

.crm-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0;
}

.crm-page-btn {
  padding: 6px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.crm-page-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.crm-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.crm-page-info {
  font-size: 13px;
  color: #6b7280;
  min-width: 140px;
  text-align: center;
}

/* ── BLOCKED activity status ─────────────────────────────────── */

.crm-tl-blocked {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #5F5E5A;
  flex-shrink: 0;
}

.crm-act-status-blocked {
  background: #e5e4e0;
  color: #5F5E5A;
}

.crm-act-btn-block {
  background: #f3f3f2;
  color: #5F5E5A;
  border: 1px solid #d1d0cc;
}

.crm-act-btn-block:hover {
  background: #e8e7e3;
}

.crm-act-btn-block-confirm {
  background: #5F5E5A;
  color: #fff;
  border: none;
}

.crm-act-btn-block-confirm:hover {
  background: #48474a;
}

.crm-actpnl-btn-block {
  background: #f3f3f2;
  color: #5F5E5A;
  border: 1px solid #d1d0cc;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.crm-actpnl-btn-block:hover {
  background: #e8e7e3;
}

.crm-actpnl-btn-block-confirm {
  background: #5F5E5A;
  color: #fff;
  border: none;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.crm-actpnl-btn-block-confirm:hover {
  background: #48474a;
}

.crm-act-block-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0 2px;
}

.crm-act-block-label {
  font-size: 12px;
  color: #5F5E5A;
  font-weight: 500;
  white-space: nowrap;
}

.crm-act-block-reason-input {
  flex: 1;
  min-width: 180px;
  font-size: 13px;
}

.crm-act-block-btns {
  display: flex;
  gap: 6px;
}

/* ── Advanced filter panel ───────────────────────────────────── */

.crm-toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.crm-filter-toggle-btn {
  padding: 8px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.crm-filter-toggle-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.crm-filter-toggle-active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
}

.crm-filter-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.crm-filter-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.crm-filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.crm-filter-dropdown {
  min-width: 160px;
  flex: 1;
}

.crm-filter-value-input {
  flex: 2;
  min-width: 120px;
}

.crm-filter-remove-btn {
  padding: 4px 8px;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  background: #fff;
  color: #dc2626;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.crm-filter-remove-btn:hover {
  background: #fee2e2;
}

.crm-filter-panel-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.crm-filter-add-btn {
  padding: 6px 12px;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
}

.crm-filter-add-btn:hover {
  background: #f1f5f9;
}

.crm-filter-apply-btn {
  padding: 6px 16px;
}

.crm-filter-clear-btn {
  padding: 6px 12px;
}

.crm-filter-save-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

.crm-filter-save-input {
  width: 160px;
  font-size: 13px;
}

/* Saved filter chips */

.crm-saved-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.crm-saved-chips-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.crm-saved-chip {
  display: flex;
  align-items: center;
  border: 1px solid #dbeafe;
  border-radius: 20px;
  background: #eff6ff;
  overflow: hidden;
}

.crm-saved-chip-btn {
  padding: 4px 10px;
  background: transparent;
  border: none;
  color: #2563eb;
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
}

.crm-saved-chip-btn:hover {
  background: #dbeafe;
}

.crm-saved-chip-del {
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-left: 1px solid #bfdbfe;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}

.crm-saved-chip-del:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* ── Sortable column headers ─────────────────────────────────── */

.crm-th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.1s;
}

.crm-th-sortable:hover {
  color: #3b82f6;
}

.crm-th-sorted {
  color: #2563eb;
  font-weight: 600;
}

/* ======================================================
   ACTIVITIES PANEL — REDESIGN (Pipedrive-style)
====================================================== */

/* Override grid columns for new 8-column layout */
.crm-act-list-header,
.crm-act-list-row {
  grid-template-columns: 28px 36px 1fr 130px 155px 90px 110px 190px;
}

/* Quick filter chip row */
.crm-act-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.crm-act-chip {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.crm-act-chip:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #2563eb;
}

.crm-act-chip-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.crm-act-chip-active:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}

/* Row wrapper (row grid + expand panel) */
.crm-act-row-wrap {
  border-bottom: 1px solid #f1f5f9;
}

.crm-act-row-wrap:last-child {
  border-bottom: none;
}

.crm-act-row-wrap > .crm-act-list-row {
  border-bottom: none;
}

/* Done column */
.crm-act-done-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.crm-act-done-btn {
  background: none;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #94a3b8;
  transition: border-color 0.13s, color 0.13s, background 0.13s;
  line-height: 1;
}

.crm-act-done-btn:hover {
  border-color: #22c55e;
  color: #22c55e;
  background: #f0fdf4;
}

.crm-act-done-check {
  font-size: 14px;
  font-weight: 700;
  color: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crm-act-done-blocked {
  font-size: 13px;
  font-weight: 700;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phone cell */
.crm-act-phone-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #334155;
}

.crm-act-phone-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-copy-phone-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: #94a3b8;
  font-size: 13px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.13s;
  line-height: 1;
}

.crm-copy-phone-btn:hover {
  color: #2563eb;
  background: #eff6ff;
}

.crm-copy-success {
  color: #22c55e !important;
}

/* Tipo cell */
.crm-act-tipo-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.crm-act-expand-btn {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  color: #2563eb;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
  white-space: nowrap;
}

.crm-act-expand-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

/* Text expand panel */
.crm-act-text-panel {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.crm-act-text-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.crm-act-text-area {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  resize: vertical;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: #1e293b;
  background: #ffffff;
  font-family: inherit;
  box-sizing: border-box;
}

.crm-copy-text-btn {
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  cursor: pointer;
}

.crm-copy-text-btn:hover {
  background: #f1f5f9;
}

/* Row actions container */
.crm-act-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

/* Responsive overrides for new layout */
@media (max-width: 900px) {
  .crm-act-list-header,
  .crm-act-list-row {
    grid-template-columns: 22px 30px 1fr 90px 90px;
  }
  .crm-act-list-header > :nth-child(n+6),
  .crm-act-list-row > :nth-child(n+6) {
    display: none;
  }
}

@media (max-width: 640px) {
  .crm-act-list-header,
  .crm-act-list-row {
    grid-template-columns: 22px 30px 1fr 90px;
  }
  .crm-act-list-header > :nth-child(n+5),
  .crm-act-list-row > :nth-child(n+5) {
    display: none;
  }
}

/* ============================================================
   CHATGURU — Enviar button + Toast notification
   ============================================================ */

/* Done column inner: circle ○ + Enviar side by side */
.crm-act-done-col-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Enviar button (WhatsApp green) */
.crm-act-send-btn {
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.6;
  transition: background 0.15s;
}

.crm-act-send-btn:hover {
  background: #128C7E;
}

/* Override grid to give done column enough room for ○ + Enviar */
.crm-act-list-header,
.crm-act-list-row {
  grid-template-columns: 28px 90px 1fr 130px 155px 90px 110px 160px;
}

/* Toast notification */
.crm-act-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e293b;
  color: #f8fafc;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  max-width: 380px;
  display: none;
}

.crm-toast-show {
  display: block;
  animation: crm-toast-fadeinout 4s ease forwards;
}

@keyframes crm-toast-fadeinout {
  0%   { opacity: 0; transform: translateY(8px); }
  12%  { opacity: 1; transform: translateY(0);   }
  75%  { opacity: 1;                              }
  100% { opacity: 0;                              }
}

/* needs_review badge */
.crm-badge-review {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

/* activity card edit button + inline edit form */
.crm-act-card-header-btns { display: flex; align-items: center; gap: 4px; }
.crm-act-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 5px;
  color: #94a3b8;
  border-radius: 4px;
  line-height: 1;
}
.crm-act-edit-btn:hover { color: #3b82f6; background: #eff6ff; }
.crm-act-edit-form {
  padding: 10px 12px 6px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
.crm-act-edit-form-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.crm-act-edit-form-footer {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.crm-act-edit-cancel-btn { font-size: 12px; padding: 4px 10px; }
.crm-act-edit-save-btn   { font-size: 12px; padding: 4px 10px; }