/* ════════════════════════════════════════════════════════════════════
   crm-theme.css — Custom CSS for CRM15 components with no Lahomes equivalent.
   Loaded LAST, after app.min.css.
   Every value comes from --bs-* variables. No raw hex. No raw px for spacing.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800&display=swap');

/* ── Root overrides: ensure Figtree everywhere ─────────────────────── */
:root {
  --bs-body-font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  --bs-headings-font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  --crm-kanban-col-width: 320px;

  /* ── Color System Tokens (Task 2) ────────────────────────────── */
  /* Primary — graphite */
  --crm-primary:        #1F2933;   /* white text → 14.8:1 */
  --crm-primary-hover:  #111820;
  --crm-primary-active: #0A0F14;
  --crm-primary-fg:     #FFFFFF;

  /* Accent — brand orange (badges, focus rings, active nav rail, icons) */
  --crm-accent:         #3AABB8;   /* Barakat teal (brand_primary) */
  --crm-accent-strong:  #2C808A;   /* AA form of teal on white → 4.6:1 — the only teal allowed as small text */
  --crm-accent-soft:    rgba(58,171,184,.12);
  --crm-accent-fg:      #000000;   /* black ink on teal → 7.7:1 (white on teal is 2.73:1 — banned) */

  /* Semantic */
  --crm-success: #2A9683;
  --crm-info:    #2E7DA6;
  --crm-warning: #C2740B;
  --crm-danger:  #C0392F;

  /* Surfaces & text */
  --crm-surface-0: #FFFFFF;
  --crm-surface-1: #F7F8FA;
  --crm-surface-2: #EFF1F4;
  --crm-border:    #E1E5EA;
  --crm-text:      #1F2933;
  --crm-text-muted:#5B6875;

  /* Brand Palette Back-compat */
  --crm-orange:     #3AABB8;   /* legacy name, brand colour inside */
  --crm-orange-rgb: 58, 171, 184;
  --crm-orange-bg:  rgba(58,171,184,0.08);
  --crm-teal:       #3AABB8;
  --crm-teal-rgb:   58, 171, 184;
  --crm-slate:      #4a5568;
  --crm-slate-rgb:  74, 85, 104;
}

[data-bs-theme="dark"] {
  /* On dark, the brand teal becomes the primary. Black ink on teal: 7.7:1 */
  --crm-primary:        #3AABB8;
  --crm-primary-hover:  #58B8C3;
  --crm-primary-active: #349AA6;
  --crm-primary-fg:     #000000;   /* 7.7:1 */

  --crm-accent:         #3AABB8;
  --crm-accent-soft:    rgba(58,171,184,.14);

  --crm-success: #4FC3A1;
  --crm-info:    #56B6D8;
  --crm-warning: #E8A33A;
  --crm-danger:  #E8695E;

  --crm-surface-0: #12171D;  /* app background */
  --crm-surface-1: #1A2129;  /* cards */
  --crm-surface-2: #222B35;  /* kanban columns, dropdowns, modals */
  --crm-surface-3: #2B3540;  /* hover, table stripes */
  --crm-border:    #2E3944;
  --crm-text:      #E3E8EE;  /* 14.3:1 */
  --crm-text-muted:#97A3B0;  /* 6.3:1 */
}

/* Remap Bootstrap variables */
:root, [data-bs-theme="light"] {
  --bs-primary:          var(--crm-primary);
  --bs-primary-rgb:      31, 41, 51;
  --bs-secondary:        var(--crm-slate);
  --bs-secondary-rgb:    74, 85, 104;
  --bs-link-color:       var(--crm-primary);
  --bs-link-hover-color: var(--crm-primary-hover);
  --bs-border-color:     var(--crm-border);
  --bs-body-bg:          var(--crm-surface-0);
  --bs-body-color:       var(--crm-text);
  --bs-tertiary-bg:      var(--crm-surface-1);
  --bs-secondary-bg:     var(--crm-surface-2);
}

[data-bs-theme="dark"] {
  --bs-primary:          var(--crm-primary);
  --bs-primary-rgb:      58, 171, 184;
  --bs-secondary:        #718096;
  --bs-secondary-rgb:    113, 128, 150;
  --bs-link-color:       var(--crm-primary);
  --bs-link-hover-color: var(--crm-primary-hover);
  --bs-border-color:     var(--crm-border);
  --bs-body-bg:          var(--crm-surface-0);
  --bs-body-color:       var(--crm-text);
  --bs-tertiary-bg:      var(--crm-surface-1);
  --bs-secondary-bg:     var(--crm-surface-2);
  --bs-card-bg:          var(--crm-surface-1);
  --bs-modal-bg:         var(--crm-surface-2);
}

/* Focus rings on interactive elements */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  outline: 2px solid var(--crm-accent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--crm-accent-soft) !important;
}

/* Touch target for hamburger menu button on mobile */
@media (max-width: 1199.98px) {
  .button-toggle-menu {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

body {
  font-family: var(--bs-body-font-family);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-headings-font-family);
}

.font-tabular-nums {
  font-family: var(--bs-body-font-family);
  font-variant-numeric: tabular-nums;
}

/* ── Brand utility classes ──────────────────────────────────────────── */
.text-crm-orange { color: var(--crm-orange) !important; }
.bg-crm-orange   { background-color: var(--crm-orange) !important; }
.bg-crm-orange-subtle { background-color: var(--crm-orange-bg) !important; }
.text-crm-teal   { color: var(--crm-teal) !important; }
.bg-crm-teal     { background-color: var(--crm-teal) !important; }
.text-crm-slate  { color: var(--crm-slate) !important; }

/* ── CRM-branded buttons ─────────────────────────────────────────── */
.btn-crm-orange {
  background: var(--crm-orange);
  color: var(--crm-accent-fg, #000000);
  border: none;
}
.btn-crm-orange:hover {
  background: var(--crm-orange-hover);
  color: var(--crm-accent-fg, #000000);
}

/* ════════════════════════════════════════════════════════════════════
   1. KANBAN BOARD — leads + tasks
   ════════════════════════════════════════════════════════════════════ */

.kanban-board-container {
  display: flex;
  gap: var(--bs-gutter-x, 1rem);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: calc(var(--bs-gutter-y, 1rem) * 0.5);
  margin: 0 calc(var(--bs-gutter-x, 1rem) * -0.5);
}

.kanban-column {
  flex: 0 0 var(--crm-kanban-col-width);
  background: #f5f6f8;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
  min-height: 200px;
}

[data-bs-theme="dark"] .kanban-column { background: #1e2329; }

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--bs-spacer) * 0.75) calc(var(--bs-spacer) * 0.85);
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.kanban-column-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin: 0;
  text-transform: capitalize;
}

.kanban-column-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.kanban-column-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: calc(var(--bs-spacer) * 0.5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--bs-spacer) * 0.5);
  min-height: 80px;
}

.kanban-column-body[data-empty="true"]::before {
  content: "Drop leads here";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--bs-tertiary-color);
  font-size: 0.75rem;
  font-style: italic;
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
}

.kanban-card {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg, 0.75rem);
  padding: calc(var(--bs-spacer) * 0.75);
  cursor: grab;
  margin-bottom: calc(var(--bs-spacer) * 0.75);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--bs-primary-border-subtle);
}

.kanban-card:active {
  cursor: grabbing;
}

/* Status spine — left border in vibrant theme colour */
.kanban-card[data-status="fresh"]               { border-inline-start: 4px solid var(--bs-info) !important; }
.kanban-card[data-status="not_yet_contacted"]   { border-inline-start: 4px solid var(--bs-warning) !important; }
.kanban-card[data-status="no_answer"]           { border-inline-start: 4px solid var(--bs-secondary) !important; }
.kanban-card[data-status="interested"]          { border-inline-start: 4px solid var(--bs-success) !important; }
.kanban-card[data-status="not_interested"]      { border-inline-start: 4px solid var(--bs-danger) !important; }
.kanban-card[data-status="contacted_follow_up"] { border-inline-start: 4px solid var(--bs-primary) !important; }
.kanban-card[data-status="archive"]             { border-inline-start: 4px solid var(--bs-dark) !important; }
.kanban-card[data-status="unassigned"]          { border-inline-start: 4px solid var(--bs-danger) !important; }

.kanban-card.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

.kanban-column-body.drop-target {
  background: var(--bs-primary-bg-subtle);
  border-radius: var(--bs-border-radius);
}

/* ════════════════════════════════════════════════════════════════════
   2. LEAD CARD v2 — compact card inside the kanban
   ════════════════════════════════════════════════════════════════════ */

.lead-card-v2 {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bs-spacer) * 0.35);
}

.lc-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--bs-spacer) * 0.4);
}

.lc-campaign-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.lc-top-right {
  display: flex;
  align-items: center;
  gap: calc(var(--bs-spacer) * 0.3);
  color: var(--bs-tertiary-color);
}

.lc-source-icon {
  font-size: 0.85rem;
}

.lc-source-icon.facebook    { color: #1877f2; }
.lc-source-icon.instagram   { color: #e1306c; }
.lc-source-icon.whatsapp    { color: #25d366; }
.lc-source-icon.manual      { color: var(--bs-primary); }
.lc-source-icon.other       { color: var(--bs-secondary-color); }

.lc-time {
  font-size: 0.7rem;
  color: var(--bs-tertiary-color);
}

.lc-client-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bs-body-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-meta-row {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-arrival-row {
  font-size: 0.7rem;
  color: var(--bs-tertiary-color);
}

.lc-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--bs-spacer) * 0.4);
  padding-top: calc(var(--bs-spacer) * 0.25);
  border-top: 1px solid var(--bs-border-color);
}

.lc-agent {
  display: flex;
  align-items: center;
  gap: calc(var(--bs-spacer) * 0.3);
  min-width: 0;
}

.lc-agent-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.lc-agent-avatar.unassigned {
  background: var(--bs-danger);
  color: #fff;
}

.lc-agent-name {
  font-size: 0.75rem;
  color: var(--bs-body-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-agent-name.unassigned {
  color: var(--bs-danger);
  font-style: italic;
}

.lc-actions {
  display: flex;
  gap: calc(var(--bs-spacer) * 0.2);
}

.lc-action-btn {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bs-border-radius-sm);
  transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
  cursor: pointer;
  padding: 0;
}

.lc-action-btn:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-primary);
}

.lc-action-btn.whatsapp:hover { color: #25d366; }
.lc-action-btn.email:hover    { color: var(--bs-secondary); }

.lc-action-btn i,
.lc-action-btn svg {
  font-size: 0.85rem;
}

.lc-assign-dropdown-container {
  flex: 1;
}

.lc-quick-assign-select {
  width: 100%;
  font-size: 0.75rem;
  padding: calc(var(--bs-spacer) * 0.2) calc(var(--bs-spacer) * 0.4);
  border-radius: var(--bs-border-radius-sm);
  border: 1px solid var(--bs-border-color);
  background: var(--bs-card-bg);
  color: var(--bs-body-color);
}

/* ════════════════════════════════════════════════════════════════════
   3. LEAD DETAIL PANEL — inside viewModal (modal-xl)
   ════════════════════════════════════════════════════════════════════ */

.view-lead-panel {
  display: block;
}

/* ── Detail section: left-border accent card ── */
.vlp-detail-section {
  border: 1px solid var(--bs-border-color);
  border-left: 3px solid var(--crm-orange);
  border-radius: var(--bs-border-radius);
  padding: 0;
  background: var(--bs-card-bg);
}

.vlp-detail-section-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bs-body-color);
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vlp-detail-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--bs-border-color);
}

.vlp-detail-table td {
  padding: 0.5rem 0.85rem !important;
  vertical-align: middle;
}

.vlp-info-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin-bottom: calc(var(--bs-spacer) * 0.4);
}

.vlp-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--bs-spacer) * 0.4) calc(var(--bs-spacer) * 0.6);
}

@media (max-width: 575.98px) {
  .vlp-info-grid { grid-template-columns: 1fr; }
}

.vlp-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.vlp-info-label {
  font-size: 0.7rem;
  color: var(--bs-tertiary-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.vlp-info-value {
  font-size: 0.85rem;
  color: var(--bs-body-color);
  word-break: break-word;
}

.vlp-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--bs-spacer) * 0.4);
  padding: calc(var(--bs-spacer) * 0.5);
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.vlp-change-status-btn {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-card-bg);
  color: var(--bs-body-color);
  font-size: 0.75rem;
  padding: calc(var(--bs-spacer) * 0.25) calc(var(--bs-spacer) * 0.5);
  border-radius: var(--bs-border-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.vlp-change-status-btn:hover {
  background: var(--bs-tertiary-bg);
}

.vlp-status-dropdown {
  display: none;
  padding: calc(var(--bs-spacer) * 0.5);
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.vlp-status-dropdown.open {
  display: block;
}

.vlp-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vlp-comments-section {
  max-height: 240px;
  overflow-y: auto;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: calc(var(--bs-spacer) * 0.5);
}

.vlp-comment-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bs-spacer) * 0.4);
}

.vlp-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--bs-spacer) * 0.3);
  padding-top: calc(var(--bs-spacer) * 0.4);
  border-top: 1px solid var(--bs-border-color);
}

.vlp-qa .vlp-info-grid {
  grid-template-columns: 1fr;
}

/* Conversation list (comments) — Lahomes pattern */
.conversation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--bs-spacer) * 0.5);
}

.conversation-list .conversation-item {
  display: flex;
  gap: calc(var(--bs-spacer) * 0.5);
  padding: calc(var(--bs-spacer) * 0.4);
  border-radius: var(--bs-border-radius-sm);
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
}

.conversation-list .conversation-text {
  flex: 1;
  min-width: 0;
}

.conversation-list .conversation-author {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.conversation-list .conversation-meta {
  font-size: 0.7rem;
  color: var(--bs-tertiary-color);
}

/* ════════════════════════════════════════════════════════════════════
   4. COLD-CALL MODULE (.cc-*)
   ════════════════════════════════════════════════════════════════════ */

.cc-card {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: calc(var(--bs-spacer) * 0.75);
  margin-bottom: calc(var(--bs-spacer) * 0.75);
  transition: box-shadow 0.15s ease-in-out;
}

.cc-card:hover {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.05);
}

.cc-agent-card {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: calc(var(--bs-spacer) * 0.6);
  text-align: center;
}

.cc-agent-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-body-color);
  margin-top: calc(var(--bs-spacer) * 0.3);
}

.cc-progress-track {
  height: 6px;
  background: var(--bs-tertiary-bg);
  border-radius: 3px;
  overflow: hidden;
}

.cc-progress-fill {
  height: 100%;
  background: var(--bs-primary);
  transition: width 0.3s ease-in-out;
}

/* ════════════════════════════════════════════════════════════════════
   5. EXAM BUILDER
   ════════════════════════════════════════════════════════════════════ */

.exam-question-card {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: calc(var(--bs-spacer) * 0.75);
  margin-bottom: calc(var(--bs-spacer) * 0.5);
}

.exam-question-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.exam-option {
  display: flex;
  align-items: center;
  gap: calc(var(--bs-spacer) * 0.3);
  padding: calc(var(--bs-spacer) * 0.3) calc(var(--bs-spacer) * 0.5);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  margin-bottom: calc(var(--bs-spacer) * 0.25);
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}

.exam-option:hover {
  background: var(--bs-tertiary-bg);
}

.exam-option.correct {
  background: var(--bs-success-bg-subtle);
  border-color: var(--bs-success);
  color: var(--bs-success-text-emphasis);
}

/* ════════════════════════════════════════════════════════════════════
   6. ATTENDANCE WIDGET
   ════════════════════════════════════════════════════════════════════ */

.attendance-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--bs-border-radius-pill);
}

.attendance-pill.in  { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.attendance-pill.out { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis); }

/* ════════════════════════════════════════════════════════════════════
   7. DARK MODE OVERRIDES
   ════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .kanban-column { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .kanban-column-header { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .vlp-info-section { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .vlp-comments-section { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .cc-card { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .exam-option:hover { background: var(--bs-tertiary-bg); }

/* ════════════════════════════════════════════════════════════════════
   8. UTILITIES — small helpers
   ════════════════════════════════════════════════════════════════════ */

.fs-7  { font-size: 0.78rem !important; }
.fs-12 { font-size: 0.75rem !important; }
.fs-13 { font-size: 0.8125rem !important; }
.fs-14 { font-size: 0.875rem !important; }
.fs-15 { font-size: 0.9375rem !important; }
.fs-18 { font-size: 1.125rem !important; }
.fs-24 { font-size: 1.5rem !important; }
.fs-32 { font-size: 2rem !important; }
.fs-48 { font-size: 3rem !important; }

.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* Auth-page logo image — constrains brand logos (some are wide) inside the
   Lahomes .auth-logo container without overflowing the auth card. */
.auth-logo-img {
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* Login screen background — the theme's purple-blue gradient is replaced by
   the stored brand_login_bg (emitted by api/brand_css.php as --brand-login-bg;
   a flat colour or a custom gradient, admin-picked in Settings → Branding).
   !important wins the load-order fight against the compiled app.css rule. */
body.authentication-bg {
  background: var(--brand-login-bg,
              linear-gradient(160deg, #F5FAFB 0%, #EAF5F6 55%, #E0F1F3 100%)) !important;
}

/* Tabs in dark mode keep legible borders */
[data-bs-theme="dark"] .nav-tabs.nav-dark { border-bottom-color: var(--bs-border-color); }

/* ════════════════════════════════════════════════════════════════════
   9. PROFILE PAGE — cover + avatar + tabs (ref: agents-details.html)
   ════════════════════════════════════════════════════════════════════ */

.profile-cover {
  position: relative;
  height: 8rem;
  background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  overflow: hidden;
}

.profile-cover-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.12) 0, transparent 40%);
  pointer-events: none;
}

.profile-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 6rem;
  height: 6rem;
}

.profile-avatar-wrap .avatar-title {
  width: 100%;
  height: 100%;
}

.profile-cam-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--bs-card-bg);
  border: 2px solid var(--bs-card-bg);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.12);
  pointer-events: none;
}

[data-bs-theme="dark"] .profile-cam-badge {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

/* Property grid card — used in admin/properties.html grid view */
.prop-grid-card .prop-grid-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.prop-grid-card .prop-grid-meta {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

.prop-grid-card .prop-grid-stat-label {
  font-size: 0.7rem;
  color: var(--bs-tertiary-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prop-grid-card .prop-grid-stat-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

/* Property detail modal — definition grid */
.prop-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--bs-spacer) * 0.5) calc(var(--bs-spacer) * 0.75);
}

@media (max-width: 575.98px) {
  .prop-detail-grid { grid-template-columns: 1fr; }
}

.prop-detail-field { display: flex; flex-direction: column; gap: 0.125rem; }
.prop-detail-field.prop-detail-span { grid-column: 1 / -1; }

.prop-detail-label {
  font-size: 0.7rem;
  color: var(--bs-tertiary-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.prop-detail-value {
  font-size: 0.875rem;
  color: var(--bs-body-color);
  word-break: break-word;
}

.prop-detail-ref {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bs-primary);
  letter-spacing: 0.02em;
}

[data-bs-theme="dark"] .prop-detail-ref { color: var(--bs-primary-text-emphasis); }

/* ════════════════════════════════════════════════════════════════════
   9. INTEGRATIONS — Facebook Lead Ads connection card
   .conn-dot is the connection status dot; integrations.js sets its
   background colour inline based on the API response.
   ════════════════════════════════════════════════════════════════════ */
.conn-dot {
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: var(--bs-danger);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--bs-danger-bg-subtle);
  display: inline-block;
}
.conn-dot.connected {
  background: var(--bs-success);
  box-shadow: 0 0 0 3px var(--bs-success-bg-subtle);
}

/* Integrations tab content (only one tab is enabled at a time) */
.int-tab-content { display: block; }

/* Facebook brand colour — used by integrations tabs/icons.
   Not in the Lahomes palette; this is the only sanctioned brand override. */
.text-facebook { color: #1877f2; }

/* Bidirectional text helper — inquiries render client-typed Arabic mixed with
   English; this keeps the browser's directional heuristic sane. */
.bidi-plaintext { unicode-bidi: plaintext; }

/* ════════════════════════════════════════════════════════════════════
   10. DASHBOARD HELPERS — thin progress bars + legend dots
   ════════════════════════════════════════════════════════════════════ */

.progress-thin { height: 8px; }

/* Small coloured dot for custom chart legends — paired with an inline
   background-color (the only dynamic survivor per row). */
.crm-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Avatar <img> that fills its .avatar-* wrapper preserving aspect ratio.
   Lahomes' avatar classes set width/height on the wrapper; this ensures
   the photo inside covers the circle without distortion. */
.avatar-img-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Definition-list row label inside lead-detail modal — fixed min-width
   so values align in a tidy column. */
.detail-row-label {
  min-width: 120px;
}

/* Kanban empty-column placeholder — keeps the column droppable */
.kanban-empty {
  pointer-events: none;
  font-size: .78rem;
  color: var(--bs-tertiary-color);
  text-align: center;
  padding: 1rem 0;
}

/* Lead detail "section-divider" — used by agents-report inline detail */
.section-divider {
  font-size: .85rem;
  font-weight: 700;
  color: var(--bs-body-color);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1rem;
  margin-bottom: .5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* Generic comments list — mirrors Lahomes .conversation-list pattern but
   slimmer so it fits inside the leadDetailModal without a heavy card chrome */
.crm-comments-section {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 280px;
  overflow-y: auto;
}

.crm-comments-section .crm-comment-item {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  padding: .5rem .65rem;
}

.crm-comments-section .crm-comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .15rem;
}

.crm-comments-section .crm-comment-author {
  font-size: .8rem;
  font-weight: 600;
  color: var(--bs-body-color);
}

.crm-comments-section .crm-comment-time {
  font-size: .7rem;
  color: var(--bs-tertiary-color);
}

.crm-comments-section .crm-comment-text {
  font-size: .85rem;
  color: var(--bs-body-color);
  word-break: break-word;
}

.crm-comments-section .crm-comment-status-change {
  font-size: .72rem;
  color: var(--bs-secondary-color);
  margin-top: .2rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

[data-bs-theme="dark"] .crm-comments-section .crm-comment-item { background: var(--bs-tertiary-bg); }

/* ════════════════════════════════════════════════════════════════════
   10. CAMPAIGNS / TASKS / ATTENDANCE — task 6-B additions
   ════════════════════════════════════════════════════════════════════ */

/* Tasks kanban — coloured column header spine per status.
   Used by admin/tasks.html to colour the four column headers (overdue /
   pending / in_progress / completed) without inlining badge/border classes. */
.kanban-column.col-overdue     .kanban-column-header { border-top: 3px solid var(--bs-danger);  }
.kanban-column.col-pending     .kanban-column-header { border-top: 3px solid var(--bs-warning); }
.kanban-column.col-in_progress .kanban-column-header { border-top: 3px solid var(--bs-info);    }
.kanban-column.col-completed   .kanban-column-header { border-top: 3px solid var(--bs-success); }

/* Tasks kanban — three-column variant (historical dates hide the overdue
   column and span the remaining three columns equally). */
.kanban-board-container.three-cols .kanban-column { flex: 1 1 0; }

/* Campaigns — scrollable form checkbox container used inside the
   campaign-mapping modal for the lead-form list and the agent list.
   Replaces the legacy max-height/overflow inline styles. */
.form-scroll-box {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  padding: calc(var(--bs-spacer) * 0.5);
}

/* Attendance — status dot (replaces the legacy .att-dot.green/.grey/.gold).
   The colour is set by Bootstrap text/bg utilities on the element itself. */
.att-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Attendance — flagged-row indicator (replaces the inline border-left style
   that was applied to flagged attendance sessions). */
.att-flagged-row {
  border-inline-start: 3px solid var(--bs-warning);
}

/* Attendance — print header (hidden on screen, visible only when printing
   the attendance report). Replaces the legacy .att-print-header rule. */
.att-print-header { display: none; }

@media print {
  .main-nav,
  .topbar,
  .nav-tabs,
  .att-tabs,
  .filter-bar,
  .attendance-widget,
  .btn { display: none !important; }
  .page-content { margin: 0 !important; padding: 0 !important; }
  .att-print-header { display: block !important; margin-bottom: 1rem; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; }
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #ccc; padding: 8px; font-size: 12px; }
  thead { display: table-header-group; }
}

[data-bs-theme="dark"] .att-flagged-row { border-inline-start-color: var(--bs-warning-text-emphasis); }

/* ════════════════════════════════════════════════════════════════════
   11. COLD-CALL + OWNER-DATA + EXAM-WIZARD shared primitives
   (.cc-* classes — preserved so the existing innerHTML JS templates
   keep working while visually matching Lahomes' nav-tabs / KPI cards /
   agent cards / progress patterns.)
   ════════════════════════════════════════════════════════════════════ */

/* Panels toggled by .cc-tab buttons (the JS switchTab() flips .active) */
.cc-panel { display: none; }
.cc-panel.active { display: block; }

/* Calculation preview block on the Assign-Data tab */
.cc-calc-preview {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: calc(var(--bs-spacer) * 0.6);
}
.cc-calc-preview .calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--bs-spacer) * 0.2) 0;
  border-bottom: 1px dashed var(--bs-border-color);
  font-size: 0.85rem;
}
.cc-calc-preview .calc-row:last-child { border-bottom: 0; }
.cc-calc-preview .calc-row b { font-family: var(--bs-body-font-family); font-variant-numeric: tabular-nums; }
.cc-calc-preview .calc-row.ok   b { color: var(--bs-success-text-emphasis); }
.cc-calc-preview .calc-row.warn b { color: var(--bs-danger-text-emphasis); }

/* Agent selection grid — used by cold_call, owner_data, exams */
.cc-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: calc(var(--bs-spacer) * 0.5);
  max-height: 360px;
  overflow-y: auto;
  padding: calc(var(--bs-spacer) * 0.5);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-card-bg);
}
.cc-agent-card {
  display: flex;
  align-items: center;
  gap: calc(var(--bs-spacer) * 0.4);
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: calc(var(--bs-spacer) * 0.5);
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, background 0.15s ease-in-out;
}
.cc-agent-card:hover { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.cc-agent-card.selected { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.cc-agent-card input[type="checkbox"] { flex-shrink: 0; margin: 0; }

/* KPI grid (Performance tab) */
.cc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: calc(var(--bs-spacer) * 0.75);
}
.cc-kpi {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: calc(var(--bs-spacer) * 0.85);
  text-align: center;
}
.cc-kpi .num {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bs-body-color);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cc-kpi .lbl {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
}

/* Deadline pill on assignment rows */
.cc-deadline-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--bs-border-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
}
.cc-deadline-pill.normal   { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.cc-deadline-pill.due-soon { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }
.cc-deadline-pill.overdue  { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis);  border-color: var(--bs-danger-border-subtle); }

/* Notes cell — truncate long text + preserve newlines */
/* ── Comment cells in the cold-call tables ──────────────────────────────
   These sit inside <table class="… text-nowrap …">, and Bootstrap's
   .text-nowrap is `white-space: nowrap !important`. It therefore beat the
   `pre-wrap` below, so the text could not break at spaces — and because
   `word-break: break-word` was also set, it broke INSIDE words instead. The
   result was one word per line down a 300px column, which is what the
   Assignment Detail popup was showing.

   Two changes fix it: !important so pre-wrap actually wins, and
   `overflow-wrap: anywhere` in place of `word-break`, which breaks a word
   only when a single word genuinely cannot fit rather than at every chance. */
.notes-cell {
    max-width: 340px;
    min-width: 220px;
    white-space: pre-wrap !important;
    word-break: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
    line-height: 1.45;
}
.notes-cell-sm {
    max-width: 260px;
    min-width: 180px;
    white-space: pre-wrap !important;
    word-break: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
    line-height: 1.45;
}

/* Exam wizard step indicators — the JS toggles .active/.done on these
   divs; we render them as small circular badges connected by a hairline. */
.wizard-steps {
  display: flex;
  justify-content: space-around;
  margin-bottom: calc(var(--bs-spacer) * 1.25);
  position: relative;
}
.wizard-steps::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--bs-border-color);
  z-index: 0;
  transform: translateY(-50%);
}
.step-indicator {
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--bs-body-font-family);
  font-size: 0.85rem;
  transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.step-indicator.active {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}
.step-indicator.done {
  border-color: var(--bs-primary);
  background: var(--bs-primary);
  color: #fff;
}

/* Dark-mode tweaks for the cold-call/exam primitives */
[data-bs-theme="dark"] .cc-kpi { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .cc-agent-card { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .cc-agent-card:hover { background: var(--bs-primary-bg-subtle); }
[data-bs-theme="dark"] .cc-agent-card.selected { background: var(--bs-primary-bg-subtle); }

/* ════════════════════════════════════════════════════════════════════
   12. ATTENDANCE WIDGET — status dot on the topbar avatar
   (Replaces the legacy .user-att-dot styles from attendance-widget.js's
   inline injectStyles block. The dot's colour is set by the widget via
   the .on / .warn / .err modifier classes — no inline styles.)
   ════════════════════════════════════════════════════════════════════ */

#sidebarUserAvatar { position: relative; }

.user-att-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  border: 2px solid var(--bs-card-bg);
  background: var(--bs-secondary);
  display: none;
  z-index: 2;
}
.user-att-dot.on   { display: block; background: var(--bs-success); }
.user-att-dot.warn { display: block; background: var(--bs-warning); }
.user-att-dot.err  { display: block; background: var(--bs-danger); }

[data-bs-theme="dark"] .user-att-dot {
  border-color: var(--bs-tertiary-bg);
}

/* ════════════════════════════════════════════════════════════════════
   9. LEGACY MODAL COMPAT SHIM
   ───────────────────────────────────────────────────────────────────────
   Several pages emit the legacy pattern:
     <div class="modal fade" id="X"><div class="modal">…header/body/footer…</div></div>
   Bootstrap expects:
     <div class="modal fade" id="X"><div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content">…</div></div></div>

   Rather than rewrite every modal by hand (risky on 23 pages), we adapt the
   legacy .modal > .modal-header/.modal-body/.modal-footer structure to look
   like Bootstrap's modal-dialog > modal-content via CSS. Bootstrap's JS still
   handles show/hide on the outer .modal.fade element.
   ════════════════════════════════════════════════════════════════════ */

.modal.fade > .modal {
  /* The inner .modal becomes the dialog wrapper */
  position: relative;
  width: auto;
  max-width: 800px;
  margin: 1.75rem auto;
  pointer-events: auto;
  background: var(--bs-modal-bg, #fff);
  background-clip: padding-box;
  border: 1px solid var(--bs-modal-border-color, rgba(0,0,0,.2));
  border-radius: var(--bs-modal-border-radius, .5rem);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  outline: 0;
}

.modal.fade > .modal[style*="max-width"] {
  /* Preserve the legacy max-width:NNNNpx on the inner .modal */
  max-width: none;
}
.modal.fade > .modal[style*="1100px"] { max-width: 1100px; }
.modal.fade > .modal[style*="900px"]  { max-width: 900px; }
.modal.fade > .modal[style*="1200px"] { max-width: 1200px; }

.modal.fade > .modal > .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--bs-modal-border-color, #dee2e6);
  border-top-left-radius: calc(.5rem - 1px);
  border-top-right-radius: calc(.5rem - 1px);
}

.modal.fade > .modal > .modal-header > .modal-title {
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 1.125rem;
  font-weight: 500;
}

.modal.fade > .modal > .modal-header > .modal-close {
  /* Legacy .modal-close button — style as Bootstrap's btn-close */
  padding: .5rem .75rem;
  margin: -.5rem -.75rem -.5rem auto;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bs-modal-close-color, #000);
  cursor: pointer;
  opacity: .5;
}
.modal.fade > .modal > .modal-header > .modal-close:hover { opacity: .75; }

.modal.fade > .modal > .modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal.fade > .modal > .modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--bs-modal-border-color, #dee2e6);
  border-bottom-right-radius: calc(.5rem - 1px);
  border-bottom-left-radius: calc(.5rem - 1px);
}

/* When the outer .modal.fade is shown via Bootstrap's .show class, display the inner .modal */
.modal.fade.show > .modal { display: block; }
.modal.fade:not(.show) > .modal { display: none; }

/* Backdrop is provided by Bootstrap's Modal JS — no CSS needed */

/* Dark mode adjustments for legacy modals */
[data-bs-theme="dark"] .modal.fade > .modal {
  background: var(--bs-modal-bg, #2a2d39);
  border-color: var(--bs-modal-border-color, rgba(255,255,255,.15));
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .modal.fade > .modal > .modal-header { border-bottom-color: rgba(255,255,255,.15); }
[data-bs-theme="dark"] .modal.fade > .modal > .modal-footer { border-top-color: rgba(255,255,255,.15); }
[data-bs-theme="dark"] .modal.fade > .modal > .modal-header > .modal-close { color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   10. LEGACY .donut-* SHIM
   ───────────────────────────────────────────────────────────────────────
   A few pages still have .donut-wrap / .donut-chart / .donut-center /
   .donut-legend / .donut-center-value / .donut-center-label classes
   emitted by innerHTML templates. Restyle them to use Bootstrap tokens.
   ════════════════════════════════════════════════════════════════════ */

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.donut-chart {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}
.donut-chart svg {
  width: 100%;
  height: 100%;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.donut-center-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bs-body-color);
  line-height: 1;
}
.donut-center-label {
  font-size: .75rem;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .25rem;
}
.donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
.donut-legend-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
}
.donut-legend-dot {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   11. LEGACY .spinner SHIM (for sites still using <div class="spinner">)
   ─────────────────────────────────────────────────────────────────────── */
.spinner:not(.spinner-border):not(.spinner-grow) {
  width: 2rem;
  height: 2rem;
  border: .25rem solid var(--bs-primary);
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spinner-border .75s linear infinite;
}
@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════
   12. LEGACY .location-bar-* / .score-bar-* SHIM (for pages still using
       hand-rolled progress bars instead of .progress/.progress-bar)
   ─────────────────────────────────────────────────────────────────────── */
.location-bar-track,
.score-bar-track {
  height: 6px;
  background: var(--bs-tertiary-bg);
  border-radius: 3px;
  overflow: hidden;
}
.location-bar-fill,
.score-bar-fill {
  height: 100%;
  background: var(--bs-primary);
  transition: width .3s ease-in-out;
  border-radius: 3px;
}

/* ════════════════════════════════════════════════════════════════════
   REMINDERS (Task 3)
   ════════════════════════════════════════════════════════════════════ */

/* Chip on the lead card */
.lc-rem-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.4;
}
.lc-rem-chip i { font-size: 0.75rem; }
.lc-rem-chip.is-pending {
  background: rgba(194, 116, 11, 0.14);
  color: var(--crm-warning);
}
.lc-rem-chip.is-overdue {
  background: rgba(192, 57, 47, 0.14);
  color: var(--crm-danger);
}
[data-bs-theme="dark"] .lc-rem-chip.is-pending {
  background: rgba(232, 163, 58, 0.18);
  color: var(--crm-warning);
}
[data-bs-theme="dark"] .lc-rem-chip.is-overdue {
  background: rgba(232, 105, 94, 0.18);
  color: var(--crm-danger);
}

/* Due popups, bottom-right stack */
.crm-reminder-popups {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1085;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 340px;
  pointer-events: none;
}
.crm-reminder-pop {
  pointer-events: auto;
  background: var(--crm-surface-0);
  border: 1px solid var(--crm-border);
  border-left: 4px solid var(--crm-warning);
  border-radius: var(--bs-border-radius, 0.375rem);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: 0.75rem 0.85rem;
  animation: crmRemIn 0.25s ease;
}
[data-bs-theme="dark"] .crm-reminder-pop {
  background: var(--crm-surface-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.crm-reminder-pop.is-high { border-left-color: var(--crm-danger); }
@keyframes crmRemIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.crm-reminder-pop .crp-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--crm-text);
}
.crm-reminder-pop .crp-head i { color: var(--crm-warning); font-size: 1rem; }
.crm-reminder-pop .crp-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.crm-reminder-pop .crp-x {
  background: none; border: 0; font-size: 1.25rem; line-height: 1;
  color: var(--crm-text-muted); cursor: pointer; padding: 0 0.15rem;
}
.crm-reminder-pop .crp-lead,
.crm-reminder-pop .crp-note {
  font-size: 0.75rem;
  color: var(--crm-text-muted);
  margin-top: 0.3rem;
  overflow-wrap: anywhere;
}
.crm-reminder-pop .crp-actions {
  display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem;
}
.crm-reminder-pop.crp-more { text-align: center; border-left-color: var(--crm-accent); }

@media (max-width: 575.98px) {
  .crm-reminder-popups { left: 0.75rem; right: 0.75rem; max-width: none; }
}

/* Topbar reminder badge */
#reminderBadge {
  position: absolute; top: 2px; right: 2px;
  transform: translate(35%, -20%);
}


/* ════════════════════════════════════════════════════════════════════
   MONTHLY TIMESHEET (Task 5)
   ════════════════════════════════════════════════════════════════════ */
.ts-sheet {
  background: #FFFFFF;
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  padding: 1.1rem 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  color: #000;
}
[data-bs-theme="dark"] .ts-sheet {
  background: var(--crm-d-1);
  border-color: var(--crm-d-line);
  color: var(--crm-d-text);
}

/* ── Header: logo left, title centred — matches the approved report ── */
.ts-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  margin-bottom: .9rem;
}
.ts-logo { height: 58px; width: auto; justify-self: start; }
[data-bs-theme="dark"] .ts-logo { filter: brightness(0) invert(1); }
.ts-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  text-align: center;
  letter-spacing: .01em;
}
.ts-top-spacer { }

/* ── Name / Month block ── */
.ts-idblock { margin: 0 0 .9rem; display: flex; flex-direction: column; gap: .45rem; }
.ts-idblock .ts-lbl { display: inline-block; min-width: 92px; font-weight: 700; font-size: .8125rem; }
.ts-idblock .ts-val {
  font-weight: 700;
  font-size: .8125rem;
  border-bottom: 1px solid currentColor;
  padding: 0 1.6rem .1rem .35rem;
}

/* ── The table. No .table-responsive wrapper: an overflow container is
      what forced horizontal scrolling and clipped columns on paper. ── */
.ts-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;      /* every column keeps its share of the page */
  font-size: .78rem;
}
.ts-table th, .ts-table td {
  border: 1px solid #9AA3AD;
  padding: .22rem .3rem;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-bs-theme="dark"] .ts-table th,
[data-bs-theme="dark"] .ts-table td { border-color: var(--crm-d-line); }
.ts-table thead th {
  background: #D9D9D9;
  font-weight: 700;
  text-align: center;
}
[data-bs-theme="dark"] .ts-table thead th { background: var(--crm-d-3) !important; }

/* Column widths add up to 100% so nothing can overflow the page.
   The "from system" column was removed from the report; its 25% is shared
   out between Date, the two time columns, Status and HR Comment. */
.ts-w-no     { width: 6%;  }
.ts-w-day    { width: 10%; }
.ts-w-date   { width: 18%; }
.ts-w-time   { width: 14%; }
.ts-w-status { width: 15%; }
.ts-w-hr     { width: 23%; }

.ts-table .ts-sys { font-size: .72rem; }
.ts-table tbody tr.ts-weekend { background: #F2F2F2; }
[data-bs-theme="dark"] .ts-table tbody tr.ts-weekend { background: var(--crm-d-2); }

/* Half day — open, but for fewer hours. Tinted apart from both a full
   working day (white) and a day off (grey) so the sheet reads at a glance. */
.ts-table tbody tr.ts-half { background: #FFF7E8; }
[data-bs-theme="dark"] .ts-table tbody tr.ts-half { background: rgba(227,179,65,.10); }
.ts-table .ts-halfmark { font-weight: 700; color: #B7791F; }
[data-bs-theme="dark"] .ts-table .ts-halfmark { color: #E3B341; }

.ts-legend {
  margin-top: .5rem;
  font-size: .72rem;
  color: #666;
}
[data-bs-theme="dark"] .ts-legend { color: var(--crm-d-faint); }

/* Status cells reuse the company colour coding */
.ts-table .ts-present { background: #C6E0B4; font-weight: 600; }
.ts-table .ts-absent  { background: #FFC7CE; font-weight: 600; }
.ts-table .ts-warn    { background: #FFE699; font-weight: 600; }
.ts-table .ts-off     { color: #666; }
[data-bs-theme="dark"] .ts-table .ts-present { background: rgba(61,214,140,.22);  color: var(--crm-d-text); }
[data-bs-theme="dark"] .ts-table .ts-absent  { background: rgba(255,107,99,.22);  color: var(--crm-d-text); }
[data-bs-theme="dark"] .ts-table .ts-warn    { background: rgba(227,179,65,.22);  color: var(--crm-d-text); }
[data-bs-theme="dark"] .ts-table .ts-off     { color: var(--crm-d-faint); }

.ts-table .ts-hr { background: #FFFFFF; }
[data-bs-theme="dark"] .ts-table .ts-hr { background: var(--crm-d-1); }
.ts-table tfoot .ts-total td { background: #E7E7E7; font-weight: 700; }
[data-bs-theme="dark"] .ts-table tfoot .ts-total td { background: var(--crm-d-3); }

/* ── Signature line ── */
.ts-signatures {
  width: 100%;
  margin-top: 1.6rem;
  border-collapse: collapse;
  font-size: .8125rem;
  font-weight: 700;
}
.ts-signatures td { padding: .4rem .3rem; }
.ts-signatures .ts-sig-rule { border-bottom: 1px solid currentColor; width: 30%; }

/* ════════════════════════════════════════════════════════════════════
   PRINT — one employee per A4 page, everything visible, no scrolling
   ════════════════════════════════════════════════════════════════════ */
@media print {
  body.printing-timesheet {
    background: #FFF !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Show ONLY the lifted print root. Selecting by class was the bug: the
     timesheet sits inside the tabs .card, so ".card:not(.ts-card){display:none}"
     hid the report itself and printed a blank page. */
  body.printing-timesheet > *:not(#tsPrintRoot) { display: none !important; }

  body.printing-timesheet #tsPrintRoot {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFF !important;
    overflow: visible !important;   /* never clip on paper */
  }
  body.printing-timesheet #tsPrintRoot #tsOutput,
  body.printing-timesheet #tsPrintRoot #tsOutput > * {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Force light rendering even when the app is in dark mode */
  body.printing-timesheet .ts-sheet,
  body.printing-timesheet .ts-sheet * {
    color: #000 !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.printing-timesheet .ts-sheet {
    background: #FFF !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    page-break-inside: auto;
  }

  /* Every employee starts a fresh page and prints identically */
  body.printing-timesheet .ts-break { page-break-after: always; }
  body.printing-timesheet .ts-sheet + .ts-sheet { page-break-before: always; }

  body.printing-timesheet .ts-logo { height: 52px !important; filter: none !important; }
  body.printing-timesheet .ts-title { font-size: 12pt !important; }
  body.printing-timesheet .ts-idblock { font-size: 10pt !important; }

  /* Tuned so a full 31-day month fits one A4 page */
  body.printing-timesheet .ts-table { font-size: 8pt !important; width: 100% !important; }
  body.printing-timesheet .ts-table th,
  body.printing-timesheet .ts-table td {
    padding: 1.5px 3px !important;
    border: 1px solid #000 !important;
  }
  body.printing-timesheet .ts-table .ts-sys { font-size: 7pt !important; }
  body.printing-timesheet .ts-table thead th   { background: #D9D9D9 !important; }
  body.printing-timesheet .ts-table tbody tr.ts-weekend { background: #F2F2F2 !important; }
  body.printing-timesheet .ts-table tbody tr.ts-half    { background: #FFF7E8 !important; }
  body.printing-timesheet .ts-legend { color: #666 !important; }
  body.printing-timesheet .ts-table .ts-present { background: #C6E0B4 !important; }
  body.printing-timesheet .ts-table .ts-absent  { background: #FFC7CE !important; }
  body.printing-timesheet .ts-table .ts-warn    { background: #FFE699 !important; }
  body.printing-timesheet .ts-total td { background: #E7E7E7 !important; }

  /* Header repeats if a month ever spills; rows never split */
  body.printing-timesheet .ts-table thead { display: table-header-group; }
  body.printing-timesheet .ts-table tr    { page-break-inside: avoid; }
  body.printing-timesheet .ts-signatures  { page-break-inside: avoid; margin-top: 10mm !important; }
  body.printing-timesheet .ts-signatures .ts-sig-rule { border-bottom: 1px solid #000 !important; }

  @page { size: A4 portrait; margin: 10mm 9mm; }
}


/* ════════════════════════════════════════════════════════════════════
   ██  BRAND REFRESH — orange · white · graphite
   ────────────────────────────────────────────────────────────────────
   Loaded last, so this section is the final word on colour and beats
   both app.min.css and the older rules above.

   The rule: the interface is white and graphite. Orange is the ONLY
   brand colour and is reserved for what the user should act on —
   primary buttons, the active nav item, focus rings, section accents.
   Semantic colour (green / red / amber / blue) survives ONLY where it
   carries meaning: lead status, call / WhatsApp / email icons, and
   success / danger feedback. Nothing else gets a colour.
   ════════════════════════════════════════════════════════════════════ */

:root, [data-bs-theme="light"] {
  /* ── Brand ── */
  --crm-orange:        #3AABB8;   /* Barakat teal — token name is legacy, value is the brand */
  --crm-orange-rgb:    58, 171, 184;
  --crm-orange-dark:   rgba(58, 171, 184, 0.28);
  --crm-orange-hover:  #349AA6;
  --crm-orange-active: #308C97;
  --crm-orange-soft:   rgba(58, 171, 184, .10);
  --crm-orange-border: rgba(58, 171, 184, .28);
  --crm-orange-bg:     rgba(58, 171, 184, .07);

  /* ── Neutrals: white surfaces, graphite ink ── */
  --crm-ink:           #1A1D21;   /* headings, primary text */
  --crm-ink-soft:      #5A6570;   /* secondary text */
  --crm-ink-faint:     #8A94A0;   /* meta text */
  --crm-line:          #E4E7EB;   /* borders */
  --crm-line-soft:     #EFF1F4;

  --crm-surface-0:     #FFFFFF;   /* page background — white, not grey */
  --crm-surface-1:     #FFFFFF;   /* cards */
  --crm-surface-2:     #FAFBFC;   /* the faintest possible tint */
  --crm-border:        var(--crm-line);
  --crm-text:          var(--crm-ink);
  --crm-text-muted:    var(--crm-ink-soft);

  /* Primary = graphite (buttons that aren't the main action) */
  --crm-primary:       #000000;   /* brand_accent — the ink */
  --crm-primary-hover: #1A1A1A;
  --crm-primary-active:#000000;
  --crm-primary-fg:    #FFFFFF;

  --crm-accent:        var(--crm-orange);
  --crm-accent-strong: #2C808A;   /* 4.6:1 on white — text-safe teal */
  --crm-accent-soft:   var(--crm-orange-soft);
  --crm-accent-fg:     #000000;   /* black ink on teal: 7.7:1 — fixes the shipped 2.71:1 white-on-orange */

  /* Semantic — muted, used only where colour means something */
  --crm-success: #1F9D6B;
  --crm-info:    #2B7FC4;
  --crm-warning: #C9860B;
  --crm-danger:  #D0342C;

  /* Legacy token kept so old rules stop rendering teal everywhere */
  --crm-teal:    var(--crm-orange);
  --crm-slate:   var(--crm-ink-soft);

  /* Bootstrap remap */
  --bs-body-bg:            #FFFFFF;
  --bs-body-color:         var(--crm-ink);
  --bs-secondary-color:    var(--crm-ink-soft);
  --bs-tertiary-color:     var(--crm-ink-faint);
  --bs-border-color:       var(--crm-line);
  --bs-card-bg:            #FFFFFF;
  --bs-modal-bg:           #FFFFFF;
  --bs-tertiary-bg:        #FAFBFC;
  --bs-secondary-bg:       #FFFFFF;
  --bs-light-bg-subtle:    #FFFFFF;
  --bs-emphasis-color:     var(--crm-ink);
  --bs-heading-color:      var(--crm-ink);
}

/* ── The page itself: white everywhere ─────────────────────────────── */
[data-bs-theme="light"] body,
[data-bs-theme="light"] .page-content,
[data-bs-theme="light"] .wrapper {
  background-color: #FFFFFF;
}

/* Cards read as white panels separated by a hairline, not grey boxes */
[data-bs-theme="light"] .card {
  background-color: #FFFFFF;
  border: 1px solid var(--crm-line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
[data-bs-theme="light"] .card-header {
  background-color: #FFFFFF;
  border-bottom-color: var(--crm-line);
}
[data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] .modal.fade > .modal,
[data-bs-theme="light"] .dropdown-menu,
[data-bs-theme="light"] .offcanvas {
  background-color: #FFFFFF;
}
[data-bs-theme="light"] .bg-light-subtle,
[data-bs-theme="light"] .bg-body-secondary,
[data-bs-theme="light"] .bg-light {
  background-color: #FFFFFF !important;
}
/* Table heads and kanban columns keep a whisper of tint for structure */
[data-bs-theme="light"] .table > thead th { background-color: #FAFBFC; }
[data-bs-theme="light"] .kanban-column    { background-color: #FAFBFC; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn-crm-orange,
[data-bs-theme] .btn-primary {
  background-color: var(--crm-orange);
  border-color: var(--crm-orange);
  color: var(--crm-accent-fg, #000000);
  font-weight: 600;
}
.btn-crm-orange:hover, .btn-crm-orange:focus,
[data-bs-theme] .btn-primary:hover, [data-bs-theme] .btn-primary:focus {
  background-color: var(--crm-orange-hover);
  border-color: var(--crm-orange-hover);
  color: var(--crm-accent-fg, #000000);
}
.btn-crm-orange:active,
[data-bs-theme] .btn-primary:active {
  background-color: var(--crm-orange-active) !important;
  border-color: var(--crm-orange-active) !important;
}
.btn-soft-orange {
  background-color: var(--crm-orange-soft);
  border: 1px solid var(--crm-orange-border);
  color: var(--crm-accent-strong);
  font-weight: 600;
}
.btn-soft-orange:hover {
  background-color: var(--crm-orange);
  border-color: var(--crm-orange);
  color: var(--crm-accent-fg, #000000);
}
.btn-outline-dark {
  border-color: var(--crm-line);
  color: var(--crm-ink);
}
.btn-outline-dark:hover {
  background-color: var(--crm-ink);
  border-color: var(--crm-ink);
  color: #FFFFFF;
}
/* Neutralise the theme's blue/teal soft buttons down to grey */
[data-bs-theme="light"] .btn-soft-secondary,
[data-bs-theme="light"] .btn-soft-primary,
[data-bs-theme="light"] .btn-soft-info {
  background-color: #F4F6F8;
  border: 1px solid var(--crm-line);
  color: var(--crm-ink-soft);
}
[data-bs-theme="light"] .btn-soft-secondary:hover,
[data-bs-theme="light"] .btn-soft-primary:hover,
[data-bs-theme="light"] .btn-soft-info:hover {
  background-color: #EAEDF1;
  color: var(--crm-ink);
}

/* Links and focus follow the brand */
a { color: var(--crm-ink); }
a:hover { color: var(--crm-orange); }
.text-primary { color: var(--crm-orange) !important; }
.badge.bg-primary, .bg-primary { background-color: var(--crm-orange) !important; }
a:focus-visible, button:focus-visible, .form-control:focus, .form-select:focus {
  outline: 2px solid var(--crm-orange) !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 3px var(--crm-orange-soft) !important;
  border-color: var(--crm-orange) !important;
}

/* ── Sidebar: graphite panel, orange only for the active item ──────── */
html[data-menu-color="dark"] .main-nav { background: #1A1D21; }
html[data-menu-color="dark"] .main-nav .logo-box { background: #1A1D21; }
html[data-menu-color="dark"] .main-nav .nav-link { color: #A8B1BC; }
html[data-menu-color="dark"] .main-nav .nav-link:hover {
  color: #FFFFFF;
  background: rgba(255,255,255,.05);
}
html[data-menu-color="dark"] .main-nav .nav-link.active {
  color: #FFFFFF;
  background: var(--crm-orange-soft);
  box-shadow: inset 3px 0 0 var(--crm-orange);
}
html[data-menu-color="dark"] .main-nav .nav-link.active .nav-icon i { color: var(--crm-orange); }
html[data-menu-color="dark"] .main-nav .menu-title {
  color: #6B7581;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .68rem;
  font-weight: 700;
}
/* Every sidebar icon the same neutral tone — no rainbow menu */
html[data-menu-color="dark"] .main-nav .nav-link .nav-icon i { color: #8B95A1; }
html[data-menu-color="dark"] .main-nav .nav-link:hover .nav-icon i { color: #FFFFFF; }

/* ── Logo: displayed unmodified, sized with CSS only ───────────────
   The brand file is a stacked lockup (≈1.7:1), so the theme's 30px cap
   rendered it about 51px wide — unreadable. Nothing is cropped or
   redrawn; the sidebar header is simply given the height the artwork
   needs. */
:root {
  --bs-logo-lg-height: 84px;
  --bs-logo-sm-height: 40px;
}
.main-nav .logo-box {
  height: 118px;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-box .logo-lg {
  height: 84px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.logo-box .logo-sm { height: 40px; width: auto; object-fit: contain; }
/* Collapsed rail: only the square mark, centred */
html[data-menu-size="condensed"] .main-nav .logo-box,
html[data-menu-size="sm-hover"]  .main-nav .logo-box { height: 70px; padding: 0; }

/* Login page logo — the dark lockup, given room to breathe */
.auth-logo-img { max-height: 130px; max-width: 300px; width: auto; height: auto; }

/* ── Lead detail panel ─────────────────────────────────────────────── */
.vlp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--crm-line);
}

/* Contact + reminder action bar */
.vlp-actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .85rem 0 1rem;
}
.vlp-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 8px;
  border: 1px solid var(--crm-line);
  background: #FFFFFF;
  color: var(--crm-ink);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all .15s ease;
}
.vlp-contact-btn i { font-size: 1rem; }
.vlp-contact-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(16,24,40,.08); }
/* The one place extra colour is allowed: channel identity */
.vlp-contact-btn.is-call   i { color: #2B7FC4; }
.vlp-contact-btn.is-wa     i { color: #25D366; }
.vlp-contact-btn.is-mail   i { color: #D0342C; }
.vlp-contact-btn.is-remind i { color: var(--crm-orange); }
.vlp-contact-btn.is-call:hover   { border-color: #2B7FC4; background: rgba(43,127,196,.06); }
.vlp-contact-btn.is-wa:hover     { border-color: #25D366; background: rgba(37,211,102,.07); }
.vlp-contact-btn.is-mail:hover   { border-color: #D0342C; background: rgba(208,52,44,.06); }
.vlp-contact-btn.is-remind:hover { border-color: var(--crm-orange); background: var(--crm-orange-soft); }

.vlp-detail-section {
  border: 1px solid var(--crm-line);
  border-left: 3px solid var(--crm-orange);
  border-radius: 10px;
  background: #FFFFFF;
  overflow: hidden;
}
.vlp-detail-section-title {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--crm-ink);
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--crm-line-soft);
  background: #FFFFFF;
}
.vlp-detail-section-title i { color: var(--crm-orange); }
.vlp-detail-table td { padding: .55rem .9rem !important; }
.vlp-detail-table tr:not(:last-child) td { border-bottom: 1px solid var(--crm-line-soft); }

.vlp-status-card {
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  padding: .85rem;
  background: #FFFFFF;
}

.vlp-block-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--crm-ink-soft);
}
.vlp-block-title i { color: var(--crm-orange); font-size: .95rem; }

/* ── Reminders inside the lead panel ───────────────────────────────── */
.vlp-reminders {
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  background: #FFFFFF;
  overflow: hidden;
}
.vlp-reminders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--crm-line-soft);
}
.vlp-reminders-body { padding: .5rem .8rem .7rem; max-height: 190px; overflow-y: auto; }
.vlp-rem-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px dashed var(--crm-line-soft);
}
.vlp-rem-item:last-child { border-bottom: 0; }
.vlp-rem-title { font-size: .82rem; font-weight: 600; color: var(--crm-ink); }
.vlp-rem-when  { font-size: .72rem; color: var(--crm-ink-faint); display: flex; align-items: center; gap: .25rem; }
.vlp-rem-item.is-overdue .vlp-rem-when { color: var(--crm-danger); }
.vlp-rem-late  { font-weight: 700; text-transform: uppercase; font-size: .65rem; }
.vlp-rem-actions { display: flex; gap: .25rem; flex-shrink: 0; }

/* ── Comments: the box scrolls, the page does not ──────────────────── */
.vlp-comments-block { min-height: 0; }
.vlp-comments-scroll {
  border: 1px solid var(--crm-line);
  border-radius: 10px;
  background: #FFFFFF;
  padding: .6rem;
  margin-bottom: .6rem;
  min-height: 150px;
  /* Grows with the modal, then scrolls internally instead of pushing
     the comment box and Submit button off the bottom of the screen. */
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.vlp-comments-scroll::-webkit-scrollbar { width: 8px; }
.vlp-comments-scroll::-webkit-scrollbar-track { background: transparent; }
.vlp-comments-scroll::-webkit-scrollbar-thumb {
  background: #D6DBE1;
  border-radius: 8px;
  border: 2px solid #FFFFFF;
}
.vlp-comments-scroll::-webkit-scrollbar-thumb:hover { background: var(--crm-orange); }
.vlp-comments-scroll .crm-comment-item {
  background: #FAFBFC;
  border: 1px solid var(--crm-line-soft);
  border-radius: 8px;
  padding: .5rem .65rem;
}
.vlp-comments-scroll .crm-comment-text { white-space: pre-wrap; word-break: break-word; }

/* Keep the lead modal itself inside the viewport so only the comment
   list scrolls, never the whole dialog. */
#viewModal .modal-body,
#leadDetailModal .modal-body,
.modal.fade > .modal > .modal-body {
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
}

/* ── Reminder pop-ups ──────────────────────────────────────────────── */
.crm-reminder-pop {
  background: #FFFFFF;
  border: 1px solid var(--crm-line);
  border-left: 4px solid var(--crm-orange);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.crm-reminder-pop.is-high { border-left-color: var(--crm-danger); }

/* ── Dark mode: same discipline, inverted surfaces ─────────────────── */
[data-bs-theme="dark"] {
  --crm-orange:      #3AABB8;
  --crm-orange-soft: rgba(58, 171, 184, .16);
  --crm-teal:        var(--crm-orange);
  --crm-surface-0:   #14181D;
  --crm-surface-1:   #1B2026;
  --crm-surface-2:   #232930;
  --crm-line:        #2C333B;
  --crm-line-soft:   #262C33;
  --crm-ink:         #E6EAEF;
  --crm-ink-soft:    #98A2AE;
  --crm-ink-faint:   #7A8492;
  --bs-body-bg:      #14181D;
  --bs-card-bg:      #1B2026;
  --bs-modal-bg:     #1B2026;
  --bs-border-color: #2C333B;
}
[data-bs-theme="dark"] .vlp-detail-section,
[data-bs-theme="dark"] .vlp-status-card,
[data-bs-theme="dark"] .vlp-reminders,
[data-bs-theme="dark"] .vlp-comments-scroll,
[data-bs-theme="dark"] .vlp-contact-btn,
[data-bs-theme="dark"] .crm-reminder-pop { background: #1B2026; border-color: #2C333B; }
[data-bs-theme="dark"] .vlp-detail-section { border-left-color: var(--crm-orange); }
[data-bs-theme="dark"] .vlp-contact-btn { color: var(--crm-ink); }
[data-bs-theme="dark"] .vlp-comments-scroll .crm-comment-item { background: #232930; border-color: #2C333B; }
[data-bs-theme="dark"] .vlp-detail-section-title { background: #1B2026; color: var(--crm-ink); }


/* ════════════════════════════════════════════════════════════════════
   ██  DARK MODE — full coverage
   ────────────────────────────────────────────────────────────────────
   The problem this fixes: the app markup uses Bootstrap utility classes
   (.bg-light-subtle ×83, .text-dark ×88, .text-muted ×407 …) whose values
   are hard-wired to light-theme colours. Switching the theme changed the
   page background but left those panels white and, worse, left the text
   dark-on-dark and unreadable.

   Rather than edit ~600 call sites, every one of those utilities is
   remapped here. Rule: surfaces go dark first, then text goes light.
   Orange stays the only accent — the branding does not change.
   ════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] {
  /* ── Surfaces, darkest → lightest ── */
  --crm-d-0:  #0E1116;   /* app background */
  --crm-d-1:  #161B22;   /* cards, modals, sidebar */
  --crm-d-2:  #1D242C;   /* raised: table heads, kanban, inputs */
  --crm-d-3:  #262E37;   /* hover, stripes */
  --crm-d-line:      #2B333D;
  --crm-d-line-soft: #222932;

  /* ── Text ── */
  --crm-d-text:   #E9EDF2;   /* 13.9:1 on --crm-d-1 */
  --crm-d-soft:   #A9B4C0;   /*  7.4:1 */
  --crm-d-faint:  #7F8A97;   /*  4.7:1 */

  --crm-orange:       #3AABB8;
  --crm-orange-rgb:   58, 171, 184;
  --crm-orange-hover: #58B8C3;
  --crm-orange-soft:  rgba(58, 171, 184, .16);
  --crm-orange-border:rgba(58, 171, 184, .38);
  --crm-orange-bg:    rgba(58, 171, 184, .10);

  --crm-ink:        var(--crm-d-text);
  --crm-ink-soft:   var(--crm-d-soft);
  --crm-ink-faint:  var(--crm-d-faint);
  --crm-line:       var(--crm-d-line);
  --crm-line-soft:  var(--crm-d-line-soft);
  --crm-teal:       var(--crm-orange);
  --crm-slate:      var(--crm-d-soft);
  --crm-surface-0:  var(--crm-d-0);
  --crm-surface-1:  var(--crm-d-1);
  --crm-surface-2:  var(--crm-d-2);

  --crm-success: #3DD68C;
  --crm-info:    #58A6FF;
  --crm-warning: #E3B341;
  --crm-danger:  #FF6B63;

  /* ── Bootstrap remap ── */
  --bs-body-bg:              var(--crm-d-0);
  --bs-body-color:           var(--crm-d-text);
  --bs-emphasis-color:       #FFFFFF;
  --bs-heading-color:        var(--crm-d-text);
  --bs-secondary-color:      var(--crm-d-soft);
  --bs-tertiary-color:       var(--crm-d-faint);
  --bs-border-color:         var(--crm-d-line);
  --bs-border-color-translucent: var(--crm-d-line);
  --bs-card-bg:              var(--crm-d-1);
  --bs-card-cap-bg:          var(--crm-d-1);
  --bs-modal-bg:             var(--crm-d-1);
  --bs-modal-header-border-color: var(--crm-d-line);
  --bs-modal-footer-border-color: var(--crm-d-line);
  --bs-dropdown-bg:          var(--crm-d-1);
  --bs-dropdown-link-color:  var(--crm-d-text);
  --bs-dropdown-link-hover-bg: var(--crm-d-3);
  --bs-dropdown-border-color: var(--crm-d-line);
  --bs-tertiary-bg:          var(--crm-d-2);
  --bs-secondary-bg:         var(--crm-d-2);
  --bs-light:                var(--crm-d-2);
  --bs-light-rgb:            29, 36, 44;
  --bs-light-bg-subtle:      var(--crm-d-2);
  --bs-dark:                 var(--crm-d-text);
  --bs-dark-rgb:             233, 237, 242;
  --bs-black:                var(--crm-d-text);
  --bs-white:                var(--crm-d-1);
  --bs-table-bg:             transparent;
  --bs-table-color:          var(--crm-d-text);
  --bs-table-border-color:   var(--crm-d-line);
  --bs-table-striped-bg:     var(--crm-d-2);
  --bs-table-hover-bg:       var(--crm-d-3);
  --bs-form-control-bg:      var(--crm-d-2);
  --bs-form-control-color:   var(--crm-d-text);
  --bs-link-color:           var(--crm-d-text);
  --bs-link-hover-color:     var(--crm-orange);
}

/* ── 1. Surfaces: nothing stays white ─────────────────────────────── */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .wrapper,
[data-bs-theme="dark"] .page-content { background-color: var(--crm-d-0) !important; }

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .modal.fade > .modal,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .accordion-button,
[data-bs-theme="dark"] .toast,
[data-bs-theme="dark"] .popover,
[data-bs-theme="dark"] .alert {
  background-color: var(--crm-d-1) !important;
  border-color: var(--crm-d-line);
  color: var(--crm-d-text);
}

/* The utility classes the markup actually uses */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light-subtle,
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .bg-body-tertiary,
[data-bs-theme="dark"] .bg-body-secondary,
[data-bs-theme="dark"] .bg-secondary-subtle {
  background-color: var(--crm-d-2) !important;
  color: var(--crm-d-text);
}

/* Raised surfaces inside a card */
[data-bs-theme="dark"] .table > thead th,
[data-bs-theme="dark"] .kanban-column,
[data-bs-theme="dark"] .kanban-column-header,
[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .page-link {
  background-color: var(--crm-d-2) !important;
  color: var(--crm-d-text) !important;
  border-color: var(--crm-d-line);
}

/* Inline background:#fff written by third-party widgets */
[data-bs-theme="dark"] [style*="background: #fff"],
[data-bs-theme="dark"] [style*="background:#fff"],
[data-bs-theme="dark"] [style*="background-color: #fff"],
[data-bs-theme="dark"] [style*="background-color:#fff"] {
  background-color: var(--crm-d-2) !important;
}

/* ── 2. Text: nothing stays dark-on-dark ──────────────────────────── */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black,
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .text-body-emphasis,
[data-bs-theme="dark"] .text-reset,
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .modal-title,
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] dt, [data-bs-theme="dark"] th,
[data-bs-theme="dark"] strong, [data-bs-theme="dark"] b {
  color: var(--crm-d-text) !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-body-secondary,
[data-bs-theme="dark"] small,
[data-bs-theme="dark"] .form-text {
  color: var(--crm-d-soft) !important;
}

[data-bs-theme="dark"] .text-body-tertiary { color: var(--crm-d-faint) !important; }

/* Semantic text keeps meaning, brightened for contrast on dark */
[data-bs-theme="dark"] .text-success { color: var(--crm-success) !important; }
[data-bs-theme="dark"] .text-danger  { color: var(--crm-danger)  !important; }
[data-bs-theme="dark"] .text-warning { color: var(--crm-warning) !important; }
[data-bs-theme="dark"] .text-info    { color: var(--crm-info)    !important; }
[data-bs-theme="dark"] .text-primary { color: var(--crm-orange)  !important; }

/* ── 3. Badges: readable tint, not a white pill ───────────────────── */
[data-bs-theme="dark"] .badge.bg-success-subtle { background-color: rgba(61,214,140,.16) !important; color: var(--crm-success) !important; }
[data-bs-theme="dark"] .badge.bg-danger-subtle  { background-color: rgba(255,107,99,.16)  !important; color: var(--crm-danger)  !important; }
[data-bs-theme="dark"] .badge.bg-warning-subtle { background-color: rgba(227,179,65,.16)  !important; color: var(--crm-warning) !important; }
[data-bs-theme="dark"] .badge.bg-info-subtle    { background-color: rgba(88,166,255,.16)  !important; color: var(--crm-info)    !important; }
[data-bs-theme="dark"] .badge.bg-primary-subtle,
[data-bs-theme="dark"] .badge.bg-crm-orange-subtle { background-color: var(--crm-orange-soft) !important; color: var(--crm-orange) !important; }
[data-bs-theme="dark"] .badge.bg-secondary-subtle,
[data-bs-theme="dark"] .badge.bg-light          { background-color: var(--crm-d-3) !important; color: var(--crm-d-soft) !important; }

/* Same for the -subtle text helpers used outside badges */
[data-bs-theme="dark"] .text-success-emphasis { color: var(--crm-success) !important; }
[data-bs-theme="dark"] .text-danger-emphasis  { color: var(--crm-danger)  !important; }
[data-bs-theme="dark"] .text-warning-emphasis { color: var(--crm-warning) !important; }
[data-bs-theme="dark"] .text-info-emphasis    { color: var(--crm-info)    !important; }

/* ── 4. Forms ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="search"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] input[type="password"],
[data-bs-theme="dark"] input[type="number"],
[data-bs-theme="dark"] input[type="date"],
[data-bs-theme="dark"] input[type="datetime-local"] {
  background-color: var(--crm-d-2) !important;
  border-color: var(--crm-d-line) !important;
  color: var(--crm-d-text) !important;
}
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea::placeholder { color: var(--crm-d-faint) !important; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--crm-d-2) !important;
  border-color: var(--crm-orange) !important;
}
/* Native date/time pickers render a black glyph on dark otherwise */
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.7);
}
[data-bs-theme="dark"] .form-check-input {
  background-color: var(--crm-d-3);
  border-color: var(--crm-d-line);
}
[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--crm-orange);
  border-color: var(--crm-orange);
}

/* ── 5. Buttons ───────────────────────────────────────────────────── */
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-soft-secondary,
[data-bs-theme="dark"] .btn-soft-primary,
[data-bs-theme="dark"] .btn-soft-info {
  background-color: var(--crm-d-3) !important;
  border-color: var(--crm-d-line) !important;
  color: var(--crm-d-text) !important;
}
[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-soft-secondary:hover,
[data-bs-theme="dark"] .btn-soft-primary:hover,
[data-bs-theme="dark"] .btn-soft-info:hover { background-color: #333C47 !important; }

[data-bs-theme="dark"] .btn-outline-dark,
[data-bs-theme="dark"] .btn-outline-secondary {
  border-color: var(--crm-d-line) !important;
  color: var(--crm-d-text) !important;
  background-color: transparent !important;
}
[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--crm-d-3) !important;
  color: #FFFFFF !important;
}
[data-bs-theme="dark"] .btn-soft-success { background-color: rgba(61,214,140,.16) !important; color: var(--crm-success) !important; border-color: transparent !important; }
[data-bs-theme="dark"] .btn-soft-danger  { background-color: rgba(255,107,99,.16)  !important; color: var(--crm-danger)  !important; border-color: transparent !important; }
[data-bs-theme="dark"] .btn-soft-warning { background-color: rgba(227,179,65,.16)  !important; color: var(--crm-warning) !important; border-color: transparent !important; }
/* The primary action stays the brand teal — ink is computed, not assumed */
[data-bs-theme="dark"] .btn-crm-orange,
[data-bs-theme="dark"] .btn-primary {
  background-color: var(--crm-orange) !important;
  border-color: var(--crm-orange) !important;
  color: var(--crm-accent-fg, #000000) !important;
  font-weight: 700;
}
[data-bs-theme="dark"] .btn-soft-orange {
  background-color: var(--crm-orange-soft) !important;
  border-color: var(--crm-orange-border) !important;
  color: var(--crm-accent-strong) !important;
}
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ── 6. Tables, borders, dividers ─────────────────────────────────── */
[data-bs-theme="dark"] .table { color: var(--crm-d-text); }
[data-bs-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--crm-d-text);
  border-bottom-color: var(--crm-d-line-soft);
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--crm-d-3) !important; }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .border-end,
[data-bs-theme="dark"] .border-dashed, [data-bs-theme="dark"] .dropdown-divider,
[data-bs-theme="dark"] hr { border-color: var(--crm-d-line) !important; }

/* ── 7. App chrome ────────────────────────────────────────────────── */
[data-bs-theme="dark"] .topbar,
[data-bs-theme="dark"] .navbar-header { background-color: var(--crm-d-1) !important; }
[data-bs-theme="dark"] .topbar-button { color: var(--crm-d-soft) !important; }
[data-bs-theme="dark"] .topbar-button:hover { color: var(--crm-orange) !important; }
[data-bs-theme="dark"] .app-search .form-control { background-color: var(--crm-d-2) !important; }
[data-bs-theme="dark"] .footer { background-color: var(--crm-d-0) !important; color: var(--crm-d-faint); }
[data-bs-theme="dark"] .main-nav { background: var(--crm-d-1) !important; }
[data-bs-theme="dark"] .main-nav .logo-box { background: var(--crm-d-1) !important; }
[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--crm-d-soft); }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: var(--crm-orange) !important; }

/* ── 8. CRM components ────────────────────────────────────────────── */
[data-bs-theme="dark"] .kanban-card,
[data-bs-theme="dark"] .lead-card-v2 {
  background-color: var(--crm-d-1) !important;
  border-color: var(--crm-d-line) !important;
  color: var(--crm-d-text);
}
[data-bs-theme="dark"] .lead-card-v2:hover { background-color: var(--crm-d-2) !important; }
[data-bs-theme="dark"] .lc-client-name { color: var(--crm-d-text) !important; }
[data-bs-theme="dark"] .int-card-head { background-color: var(--crm-d-1) !important; }
[data-bs-theme="dark"] .conn-dot { background-color: var(--crm-d-3); }

/* Charts drawn on canvas can't inherit CSS — lighten their gridlines */
[data-bs-theme="dark"] .apexcharts-text tspan,
[data-bs-theme="dark"] .apexcharts-legend-text { fill: var(--crm-d-soft) !important; color: var(--crm-d-soft) !important; }
[data-bs-theme="dark"] .apexcharts-gridline,
[data-bs-theme="dark"] .apexcharts-xaxis line,
[data-bs-theme="dark"] .apexcharts-yaxis line { stroke: var(--crm-d-line) !important; }
[data-bs-theme="dark"] .apexcharts-tooltip {
  background: var(--crm-d-2) !important;
  border-color: var(--crm-d-line) !important;
  color: var(--crm-d-text) !important;
}

/* Scrollbars */
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A434E; border-color: var(--crm-d-1); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--crm-orange); }

/* ── 9. Anything still literally white slips through here ─────────── */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .card.bg-white,
[data-bs-theme="dark"] .vlp-detail-section,
[data-bs-theme="dark"] .vlp-status-card,
[data-bs-theme="dark"] .vlp-reminders,
[data-bs-theme="dark"] .vlp-comments-scroll,
[data-bs-theme="dark"] .vlp-contact-btn,
[data-bs-theme="dark"] .vlp-detail-section-title,
[data-bs-theme="dark"] .crm-reminder-pop {
  background-color: var(--crm-d-1) !important;
  border-color: var(--crm-d-line) !important;
  color: var(--crm-d-text) !important;
}
[data-bs-theme="dark"] .vlp-detail-section { border-left-color: var(--crm-orange) !important; }
[data-bs-theme="dark"] .vlp-comments-scroll .crm-comment-item {
  background-color: var(--crm-d-2) !important;
  border-color: var(--crm-d-line) !important;
}


/* The print root only exists during printing. */
#tsPrintRoot { display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   PINNED COMMENT — the one fixed note that sits on top of a lead card.
   Rendered by loadPinnedComment() in app.js into #vlpPinnedSlot.
   ═══════════════════════════════════════════════════════════════════════ */
.vlp-pinned-slot:empty { display: none; }

.vlp-pinned {
  background: var(--crm-orange-bg, rgba(58,171,184,.07));
  border: 1px solid var(--crm-orange-border, rgba(58,171,184,.28));
  border-left: 4px solid var(--crm-orange, #3AABB8);
  border-radius: .5rem;
  padding: .65rem .8rem;
  margin-bottom: .85rem;
}
.vlp-pinned.is-loading {
  display: flex; align-items: center; gap: .4rem;
  background: transparent; border-style: dashed;
}
.vlp-pinned.is-empty { background: transparent; border-style: dashed; }

.vlp-pinned-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .35rem;
}
.vlp-pinned-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--crm-accent-strong, #2C808A);
  display: inline-flex; align-items: center; gap: .3rem;
}
.vlp-pinned-text {
  font-size: .875rem; font-weight: 500; line-height: 1.55;
  color: var(--bs-body-color); white-space: normal; word-break: break-word;
}
.vlp-pinned-empty { font-size: .8rem; color: var(--bs-secondary-color, #8486a7); }
.vlp-pinned-meta  { font-size: .7rem; color: var(--bs-secondary-color, #8486a7); margin-top: .4rem; }
.vlp-pinned-edit  { padding: .12rem .5rem; font-size: .75rem; }

[data-bs-theme="dark"] .vlp-pinned {
  background-color: rgba(58,171,184,.10) !important;
  border-color: rgba(58,171,184,.35) !important;
  border-left-color: var(--crm-orange) !important;
  color: var(--crm-d-text) !important;
}
[data-bs-theme="dark"] .vlp-pinned-text { color: var(--crm-d-text) !important; }


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSE TIME — duration chips on the Agents Performance screen.
   Colour tracks how long the agent took: fast / ok / slow / none.
   ═══════════════════════════════════════════════════════════════════════ */
.rt-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.rt-chip.rt-fast    { background: rgba(92,193,132,.14); color: #3d9c68; border-color: rgba(92,193,132,.30); }
.rt-chip.rt-ok      { background: rgba(143,98,8,.12);    color: #8F6208; border-color: rgba(143,98,8,.30); }
.rt-chip.rt-slow    { background: rgba(233,103,103,.14); color: #d05252; border-color: rgba(233,103,103,.30); }
.rt-chip.rt-none    { background: rgba(132,134,167,.14); color: #7a7c99; border-color: rgba(132,134,167,.28); }
.rt-chip.rt-pending { background: rgba(96,74,227,.12);   color: #604ae3; border-color: rgba(96,74,227,.28); }

[data-bs-theme="dark"] .rt-chip.rt-fast    { color: #7fd9a4 !important; }
[data-bs-theme="dark"] .rt-chip.rt-ok      { color: #e3b341 !important; }
[data-bs-theme="dark"] .rt-chip.rt-slow    { color: #f08e8e !important; }
[data-bs-theme="dark"] .rt-chip.rt-none    { color: #a9abc4 !important; }
[data-bs-theme="dark"] .rt-chip.rt-pending { color: #a294f5 !important; }

.rt-kpi-value { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.rt-kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color, #8486a7); }

/* ═══════════════════════════════════════════════════════════════════════════
   Cold Call — the comment box                              (21 August 2026)

   The box was one row tall. A two-line note showed as a sliver with the rest
   hidden behind an internal scrollbar nobody thinks to look for, so comments
   that had been written appeared to have vanished.

   Three rows is now the floor and ccGrowComment() in the page grows the box
   to whatever is in it, up to a ceiling that keeps the rest of the table
   usable. The column is given real width as well — without it the table
   hands most of the row to Name and Phone and squeezes the notes.
   ═══════════════════════════════════════════════════════════════════════════ */

.cc-comment-area {
    min-height: 66px;
    line-height: 1.45;
    overflow-y: auto;
    resize: vertical;          /* the reader can still drag it taller */
    white-space: pre-wrap;     /* keep the line breaks they typed */
}

#ccContactsBody td:nth-child(5) { min-width: 300px; width: 34%; vertical-align: top; }

/* The header cell of the same column, on every page that shows this table. */
#viewColdcall table thead th:nth-child(5) { min-width: 300px; }