/**
 * CRM shared status + kartabl/activity type color system (DEV)
 * Mandatory:
 *   pending / در انتظار          → orange
 *   cancelled / لغو شده          → red
 *   completed|confirmed / تایید|تکمیل → green
 * Kartabl types each have a distinct chip color; overdue ≠ pending.
 */

:root {
  /* Status */
  --crm-status-pending: #ea580c;
  --crm-status-pending-bg: #ffedd5;
  --crm-status-success: #059669;
  --crm-status-success-bg: #d1fae5;
  --crm-status-cancelled: #dc2626;
  --crm-status-cancelled-bg: #fee2e2;
  --crm-status-overdue: #be123c;
  --crm-status-overdue-bg: #ffe4e6;
  --crm-status-draft: #64748b;
  --crm-status-draft-bg: #f1f5f9;
  --crm-status-progress: #2563eb;
  --crm-status-progress-bg: #dbeafe;
  --crm-status-info: #0891b2;
  --crm-status-info-bg: #cffafe;
  --crm-status-neutral: #64748b;
  --crm-status-neutral-bg: #f1f5f9;

  /* Activity / kartabl types */
  --crm-type-task: #4f46e5;
  --crm-type-task-bg: #e0e7ff;
  --crm-type-call: #0284c7;
  --crm-type-call-bg: #e0f2fe;
  --crm-type-meeting: #7c3aed;
  --crm-type-meeting-bg: #ede9fe;
  --crm-type-email: #b45309;
  --crm-type-email-bg: #fef3c7;
  --crm-type-note: #0d9488;
  --crm-type-note-bg: #ccfbf1;
  --crm-type-assigned: #0e7490;
  --crm-type-assigned-bg: #cffafe;
  --crm-type-overdue: #be123c;
  --crm-type-overdue-bg: #ffe4e6;
}

/* ---------- Shared badge base ---------- */
.crm-status,
.status-badge,
.cdv2-badge.crm-status,
.cdv2-workbox-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Mandatory status tokens (+ aliases used across templates) */
.crm-status-pending,
.status-badge-pending,
.status-badge-warning,
.cdv2-badge-warning,
.company-command-center .badge-warning,
.hr-status-pending,
.cdv2-workbox-status.is-pending {
  color: var(--crm-status-pending) !important;
  background: var(--crm-status-pending-bg) !important;
  border-color: color-mix(in srgb, var(--crm-status-pending) 22%, white);
}

.crm-status-success,
.crm-status-completed,
.crm-status-confirmed,
.crm-status-approved,
.status-badge-success,
.status-badge-completed,
.status-badge-confirmed,
.cdv2-badge-success,
.company-command-center .badge-success,
.hr-status-approved,
.cdv2-workbox-status.is-completed,
.cdv2-workbox-status.is-success {
  color: var(--crm-status-success) !important;
  background: var(--crm-status-success-bg) !important;
  border-color: color-mix(in srgb, var(--crm-status-success) 22%, white);
}

.crm-status-cancelled,
.crm-status-canceled,
.crm-status-rejected,
.status-badge-danger,
.status-badge-cancelled,
.status-badge-canceled,
.cdv2-badge-danger,
.company-command-center .badge-danger,
.hr-status-rejected,
.cdv2-workbox-status.is-cancelled {
  color: var(--crm-status-cancelled) !important;
  background: var(--crm-status-cancelled-bg) !important;
  border-color: color-mix(in srgb, var(--crm-status-cancelled) 22%, white);
}

.crm-status-overdue,
.status-badge-overdue,
.cdv2-workbox-status.is-overdue {
  color: var(--crm-status-overdue) !important;
  background: var(--crm-status-overdue-bg) !important;
  border-color: color-mix(in srgb, var(--crm-status-overdue) 25%, white);
}

.crm-status-draft,
.status-badge-secondary,
.status-badge-draft,
.cdv2-badge-secondary,
.company-command-center .badge-secondary {
  color: var(--crm-status-draft) !important;
  background: var(--crm-status-draft-bg) !important;
  border-color: color-mix(in srgb, var(--crm-status-draft) 20%, white);
}

.crm-status-progress,
.crm-status-sent,
.crm-status-in_progress,
.status-badge-info,
.status-badge-primary,
.cdv2-badge-info,
.cdv2-badge-primary,
.company-command-center .badge-info,
.company-command-center .badge-primary {
  color: var(--crm-status-progress) !important;
  background: var(--crm-status-progress-bg) !important;
  border-color: color-mix(in srgb, var(--crm-status-progress) 20%, white);
}

/* ---------- Activity / kartabl type chips ---------- */
.crm-type,
.activity-type-badge,
.cdv2-workbox-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  border: 1px solid transparent;
}

.crm-type-task,
.activity-type-task,
.activity-type-badge.activity-type-task,
.cdv2-workbox-type.is-task,
.cdv2-workbox-item[data-workbox-type="task"] .cdv2-workbox-type {
  color: var(--crm-type-task);
  background: var(--crm-type-task-bg);
  border-color: color-mix(in srgb, var(--crm-type-task) 18%, white);
}

.crm-type-call,
.activity-type-call,
.activity-type-badge.activity-type-call,
.cdv2-workbox-type.is-call,
.cdv2-workbox-item[data-workbox-type="call"] .cdv2-workbox-type {
  color: var(--crm-type-call);
  background: var(--crm-type-call-bg);
  border-color: color-mix(in srgb, var(--crm-type-call) 18%, white);
}

.crm-type-meeting,
.activity-type-meeting,
.activity-type-badge.activity-type-meeting,
.cdv2-workbox-type.is-meeting,
.cdv2-workbox-item[data-workbox-type="meeting"] .cdv2-workbox-type {
  color: var(--crm-type-meeting);
  background: var(--crm-type-meeting-bg);
  border-color: color-mix(in srgb, var(--crm-type-meeting) 18%, white);
}

.crm-type-email,
.activity-type-email,
.activity-type-badge.activity-type-email,
.cdv2-workbox-type.is-email,
.cdv2-workbox-item[data-workbox-type="email"] .cdv2-workbox-type {
  color: var(--crm-type-email);
  background: var(--crm-type-email-bg);
  border-color: color-mix(in srgb, var(--crm-type-email) 18%, white);
}

.crm-type-note,
.activity-type-note,
.activity-type-badge.activity-type-note,
.cdv2-workbox-type.is-note,
.cdv2-workbox-item[data-workbox-type="note"] .cdv2-workbox-type {
  color: var(--crm-type-note);
  background: var(--crm-type-note-bg);
  border-color: color-mix(in srgb, var(--crm-type-note) 18%, white);
}

.crm-type-assigned,
.cdv2-workbox-type.is-assigned,
.cdv2-workbox-item[data-workbox-kind="assigned"] .cdv2-workbox-type {
  color: var(--crm-type-assigned);
  background: var(--crm-type-assigned-bg);
  border-color: color-mix(in srgb, var(--crm-type-assigned) 18%, white);
}

.crm-type-overdue,
.cdv2-workbox-type.is-overdue {
  color: var(--crm-type-overdue);
  background: var(--crm-type-overdue-bg);
  border-color: color-mix(in srgb, var(--crm-type-overdue) 22%, white);
}

/* Workbox row tint for overdue (not the same as cancelled red) */
.company-dashboard-v2 .cdv2-workbox-item.is-overdue {
  border-color: color-mix(in srgb, var(--crm-status-overdue) 28%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--crm-status-overdue) 8%, transparent), var(--cdv2-panel, #fff));
}

.company-dashboard-v2 .cdv2-workbox-item.is-overdue .cdv2-workbox-icon {
  color: var(--crm-status-overdue);
  background: color-mix(in srgb, var(--crm-status-overdue) 10%, transparent);
}

/* Type-colored icons on workbox rows */
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-type="task"] .cdv2-workbox-icon {
  color: var(--crm-type-task);
  background: color-mix(in srgb, var(--crm-type-task) 10%, transparent);
}
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-type="call"] .cdv2-workbox-icon {
  color: var(--crm-type-call);
  background: color-mix(in srgb, var(--crm-type-call) 10%, transparent);
}
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-type="meeting"] .cdv2-workbox-icon {
  color: var(--crm-type-meeting);
  background: color-mix(in srgb, var(--crm-type-meeting) 10%, transparent);
}
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-type="email"] .cdv2-workbox-icon {
  color: var(--crm-type-email);
  background: color-mix(in srgb, var(--crm-type-email) 10%, transparent);
}
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-type="note"] .cdv2-workbox-icon {
  color: var(--crm-type-note);
  background: color-mix(in srgb, var(--crm-type-note) 10%, transparent);
}
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-kind="assigned"]:not(.is-overdue) .cdv2-workbox-icon {
  color: var(--crm-type-assigned);
  background: color-mix(in srgb, var(--crm-type-assigned) 10%, transparent);
}

/* Workbox filter buttons — type colors when active */
.company-dashboard-v2 .cdv2-workbox-filter button[data-workbox-type="task"].is-active {
  color: var(--crm-type-task);
  background: color-mix(in srgb, var(--crm-type-task) 12%, transparent);
  border-color: color-mix(in srgb, var(--crm-type-task) 28%, transparent);
  box-shadow: none;
}
.company-dashboard-v2 .cdv2-workbox-filter button[data-workbox-type="call"].is-active {
  color: var(--crm-type-call);
  background: color-mix(in srgb, var(--crm-type-call) 12%, transparent);
  border-color: color-mix(in srgb, var(--crm-type-call) 28%, transparent);
  box-shadow: none;
}
.company-dashboard-v2 .cdv2-workbox-filter button[data-workbox-type="meeting"].is-active {
  color: var(--crm-type-meeting);
  background: color-mix(in srgb, var(--crm-type-meeting) 12%, transparent);
  border-color: color-mix(in srgb, var(--crm-type-meeting) 28%, transparent);
  box-shadow: none;
}
.company-dashboard-v2 .cdv2-workbox-filter button[data-workbox-type="email"].is-active {
  color: var(--crm-type-email);
  background: color-mix(in srgb, var(--crm-type-email) 12%, transparent);
  border-color: color-mix(in srgb, var(--crm-type-email) 28%, transparent);
  box-shadow: none;
}
.company-dashboard-v2 .cdv2-workbox-filter button[data-workbox-type="note"].is-active {
  color: var(--crm-type-note);
  background: color-mix(in srgb, var(--crm-type-note) 12%, transparent);
  border-color: color-mix(in srgb, var(--crm-type-note) 28%, transparent);
  box-shadow: none;
}
.company-dashboard-v2 .cdv2-workbox-filter button[data-workbox-type="assigned"].is-active {
  color: var(--crm-type-assigned);
  background: color-mix(in srgb, var(--crm-type-assigned) 12%, transparent);
  border-color: color-mix(in srgb, var(--crm-type-assigned) 28%, transparent);
  box-shadow: none;
}
.company-dashboard-v2 .cdv2-workbox-filter button[data-workbox-type="overdue"].is-active,
.company-dashboard-v2 .cdv2-workbox-date-filter button[data-workbox-date="overdue"].is-active {
  color: var(--crm-type-overdue);
  background: color-mix(in srgb, var(--crm-type-overdue) 12%, transparent);
  border-color: color-mix(in srgb, var(--crm-type-overdue) 28%, transparent);
  box-shadow: none;
}

/* Global activity type badges (not only activities-command-page) */
.activity-type-badge.activity-type-call { color: var(--crm-type-call); background: var(--crm-type-call-bg); }
.activity-type-badge.activity-type-email { color: var(--crm-type-email); background: var(--crm-type-email-bg); }
.activity-type-badge.activity-type-meeting { color: var(--crm-type-meeting); background: var(--crm-type-meeting-bg); }
.activity-type-badge.activity-type-note { color: var(--crm-type-note); background: var(--crm-type-note-bg); }
.activity-type-badge.activity-type-task { color: var(--crm-type-task); background: var(--crm-type-task-bg); }

.activities-command-page .activity-type-call,
.activities-command-page .activity-type-email,
.activities-command-page .activity-type-meeting,
.activities-command-page .activity-type-note,
.activities-command-page .activity-type-task {
  /* align page-scoped overrides with shared palette */
}
.activities-command-page .activity-type-call { background: var(--crm-type-call-bg) !important; color: var(--crm-type-call) !important; }
.activities-command-page .activity-type-email { background: var(--crm-type-email-bg) !important; color: var(--crm-type-email) !important; }
.activities-command-page .activity-type-meeting { background: var(--crm-type-meeting-bg) !important; color: var(--crm-type-meeting) !important; }
.activities-command-page .activity-type-note { background: var(--crm-type-note-bg) !important; color: var(--crm-type-note) !important; }
.activities-command-page .activity-type-task { background: var(--crm-type-task-bg) !important; color: var(--crm-type-task) !important; }


/* Kartabl item row backgrounds by activity type */
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-type="task"]:not(.is-overdue) {
  background: color-mix(in srgb, var(--crm-type-task-bg) 78%, #fff);
  border-color: color-mix(in srgb, var(--crm-type-task) 18%, transparent);
}
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-type="call"]:not(.is-overdue) {
  background: color-mix(in srgb, var(--crm-type-call-bg) 78%, #fff);
  border-color: color-mix(in srgb, var(--crm-type-call) 18%, transparent);
}
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-type="meeting"]:not(.is-overdue) {
  background: color-mix(in srgb, var(--crm-type-meeting-bg) 78%, #fff);
  border-color: color-mix(in srgb, var(--crm-type-meeting) 18%, transparent);
}
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-type="email"]:not(.is-overdue) {
  background: color-mix(in srgb, var(--crm-type-email-bg) 78%, #fff);
  border-color: color-mix(in srgb, var(--crm-type-email) 18%, transparent);
}
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-type="note"]:not(.is-overdue) {
  background: color-mix(in srgb, var(--crm-type-note-bg) 78%, #fff);
  border-color: color-mix(in srgb, var(--crm-type-note) 18%, transparent);
}
.company-dashboard-v2 .cdv2-workbox-item[data-workbox-kind="assigned"]:not(.is-overdue) {
  background: color-mix(in srgb, var(--crm-type-assigned-bg) 78%, #fff);
  border-color: color-mix(in srgb, var(--crm-type-assigned) 18%, transparent);
}
.company-dashboard-v2 .cdv2-workbox-item.is-overdue {
  background: color-mix(in srgb, var(--crm-type-overdue-bg) 82%, #fff) !important;
  border-color: color-mix(in srgb, var(--crm-type-overdue) 28%, transparent) !important;
}