/* ════════════════════════════════════════════════════════════════════
   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:         #E8833A;
  --crm-accent-strong:  #B35E17;   /* use ONLY when white text sits on orange → 4.6:1 */
  --crm-accent-soft:    rgba(232,131,58,.12);
  --crm-accent-fg:      #1A1207;   /* dark text on orange → 6.8:1 */

  /* 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:     #e8833a;
  --crm-orange-rgb: 232, 131, 58;
  --crm-orange-bg:  rgba(232,131,58,0.08);
  --crm-teal:       #36b5a0;
  --crm-teal-rgb:   54, 181, 160;
  --crm-slate:      #4a5568;
  --crm-slate-rgb:  74, 85, 104;
}

[data-bs-theme="dark"] {
  /* On dark, orange has room to breathe and becomes the primary */
  --crm-primary:        #E8833A;
  --crm-primary-hover:  #F09A4B;
  --crm-primary-active: #C96A22;
  --crm-primary-fg:     #1A1207;   /* 6.8:1 */

  --crm-accent:         #F0913F;
  --crm-accent-soft:    rgba(240,145,63,.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:      232, 131, 58;
  --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: #fff;
  border: none;
}
.btn-crm-orange:hover {
  background: #d5722c;
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════
   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;
}

/* 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 */
.notes-cell    { max-width: 300px; white-space: pre-wrap; word-break: break-word; }
.notes-cell-sm { max-width: 220px; white-space: pre-wrap; word-break: break-word; }

/* 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 */
.ts-w-no     { width: 5%;  }
.ts-w-day    { width: 7%;  }
.ts-w-date   { width: 14%; }
.ts-w-sys    { width: 25%; }
.ts-w-time   { width: 10%; }
.ts-w-status { width: 11%; }
.ts-w-hr     { width: 18%; }

.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); }

/* 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 .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:        #F26522;   /* the REMAX orange */
  --crm-orange-rgb:    242, 101, 34;
  --crm-orange-dark:   #D4501310;
  --crm-orange-hover:  #DA5514;
  --crm-orange-active: #B84410;
  --crm-orange-soft:   rgba(242, 101, 34, .10);
  --crm-orange-border: rgba(242, 101, 34, .28);
  --crm-orange-bg:     rgba(242, 101, 34, .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:       #1A1D21;
  --crm-primary-hover: #2C3238;
  --crm-primary-active:#0E1114;
  --crm-primary-fg:    #FFFFFF;

  --crm-accent:        var(--crm-orange);
  --crm-accent-strong: var(--crm-orange-hover);
  --crm-accent-soft:   var(--crm-orange-soft);
  --crm-accent-fg:     #FFFFFF;

  /* 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: #FFFFFF;
  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: #FFFFFF;
}
.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-orange-hover);
  font-weight: 600;
}
.btn-soft-orange:hover {
  background-color: var(--crm-orange);
  border-color: var(--crm-orange);
  color: #FFFFFF;
}
.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:      #F2761F;
  --crm-orange-soft: rgba(242, 118, 31, .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:       #FF7A33;
  --crm-orange-rgb:   255, 122, 51;
  --crm-orange-hover: #FF8F52;
  --crm-orange-soft:  rgba(255, 122, 51, .16);
  --crm-orange-border:rgba(255, 122, 51, .38);
  --crm-orange-bg:    rgba(255, 122, 51, .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 orange with white text — brand is unchanged */
[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: #14181D !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-orange) !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(242,101,34,.07));
  border: 1px solid var(--crm-orange-border, rgba(242,101,34,.28));
  border-left: 4px solid var(--crm-orange, #F26522);
  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-orange, #F26522);
  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(242,101,34,.10) !important;
  border-color: rgba(242,101,34,.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(240,147,78,.14);  color: #d17c30; border-color: rgba(240,147,78,.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: #f5b57e !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); }

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT FIXES — topbar / sidebar / footer alignment
   The theme's .main-nav is position:fixed with z-index 1010 and a width of
   var(--bs-main-nav-width). Neither .app-topbar nor .footer carried a matching
   offset, so the sidebar sat on top of the global search box and the company
   name in the footer. These rules give both the same offset the content has.
   ═══════════════════════════════════════════════════════════════════════ */
.app-topbar {
    margin-left: var(--bs-main-nav-width, 260px);   /* P-05 PROTECTED FIX */
    z-index: 1005;              /* below .main-nav (1010) but above content */
    position: sticky;           /* the bar stays reachable on long forms */
    top: 0;
    background: var(--bs-body-bg, #fff);
    border-bottom: 1px solid var(--bs-border-color, #e5e7f0);
}
.footer {
    margin-left: var(--bs-main-nav-width, 260px);
}

/* When the sidebar is collapsed the theme narrows --bs-main-nav-width, and
   both bars follow automatically because they read the same variable. */
html[data-menu-size="condensed"] .app-topbar,
html[data-menu-size="condensed"] .footer {
    margin-left: var(--bs-main-nav-width, 70px);
}

/* On mobile the sidebar is off-canvas, so no offset applies. */
@media (max-width: 767.98px) {
    .app-topbar,
    .footer {
        margin-left: 0;
    }
}

/* ── Upload controls — compact, aligned, shrink-proof ─────────────────────
   REBUILT 2026-08-22. The row is a flex line: icon · name · actions. The
   name column must be the ONLY thing that flexes, and it must be allowed to
   shrink to zero (min-width:0) or its text cannot ellipsis. The native file
   input used to live in .pms-doc-actions, where its large intrinsic width
   pushed the name column to a few pixels wide and broke the label onto one
   letter per line. The input is hidden now and a button drives it. */
.pms-doc-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border: 1px solid var(--bs-border-color, #e5e7f0);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
    margin-bottom: .5rem;
    min-width: 0;
}
.pms-doc-row:last-child { margin-bottom: 0; }

.pms-doc-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 15px;            /* never inherit a huge size */
    line-height: 1;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}
.pms-doc-icon.is-uploaded  { background: rgba(42,150,131,.12); color: #2A9683; }
.pms-doc-icon.is-missing   { background: rgba(192,57,47,.10);  color: #C0392F; }
.pms-doc-icon.is-uploading { background: rgba(0,87,255,.10);   color: #0057ff; }

/* min-width:0 is what actually permits the ellipsis. Without it a flex item
   refuses to shrink below its content and the text wraps character by
   character in a narrow column. */
.pms-doc-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .8125rem;
    line-height: 1.35;
}
.pms-doc-label {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pms-doc-name small {
    display: block;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .75rem;
}
/* File name may be long; the size must always stay readable next to it. */
.pms-doc-file { display: inline; }
.pms-doc-size { display: inline; color: var(--bs-secondary-color); }
.pms-doc-size::before { content: " · "; }

.pms-doc-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .25rem;
}
.pms-doc-btn {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .75rem;
    line-height: 1.2;
    white-space: nowrap;
}
.pms-doc-btn i { font-size: 14px; vertical-align: -2px; }

/* The native input is never shown: .pms-upload-btn / .pms-replace-btn click it.
   Rendering it inline is what broke the layout in the first place. */
.pms-doc-row .pms-file-input { display: none !important; }

/* Very narrow columns: let the actions drop to their own line rather than
   crush the file name. */
@media (max-width: 575.98px) {
    .pms-doc-row { flex-wrap: wrap; }
    .pms-doc-name { flex: 1 1 100%; order: 3; }
}

/* ── Topbar layout ────────────────────────────────────────────────────────
   REBUILT 2026-08-22. `.navbar-custom` — the topbar's own row container —
   was referenced by shared/_topbar.php but DEFINED NOWHERE, not in this file
   and not in the CRM theme. With no height, no display:flex and no padding,
   the title, the search box and the action buttons all collapsed onto the
   same point. That is the broken header the client screenshotted.

   The bar is now an explicit flex row of fixed height with the search on the
   left and the user menu on the right. */
.app-topbar .navbar-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 64px;
    padding: 0 1.25rem;
    width: 100%;
}

.topbar-start,
.topbar-end { display: flex; align-items: center; min-width: 0; }
.topbar-start { gap: .875rem; flex: 1 1 auto; }
.topbar-end   { gap: .5rem;  flex: 0 0 auto; }

/* Page title — one line, never wraps, yields space to the search first. */
.topbar-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bs-emphasis-color, #1f2233);
}

/* Mobile sidebar button. */
.topbar-burger {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bs-border-color, #e5e7f0);
    border-radius: 8px;
    background: transparent;
    font-size: 18px; line-height: 1;
    color: var(--bs-body-color);
}
.topbar-burger:hover { background: var(--bs-tertiary-bg, #f4f5f9); }

/* Search — P-06 keeps the 340px width inline on the element itself. */
.topbar-search .form-control {
    height: 38px;
    padding-inline-start: 2.25rem;   /* room for the magnifier */
    border-radius: 8px;
    background: var(--crm-surface-1, #f6f7fb);
    border-color: var(--crm-border, #e5e7f0);
}
.topbar-search .form-control:focus {
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 0 0 3px rgba(0, 87, 255, .10);
}
.topbar-search-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: .75rem;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    color: var(--bs-secondary-color, #8486a7);
    pointer-events: none;
}

/* User chip — avatar + name + role, one tidy control. */
.topbar-user {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    height: 42px;
    padding: 0 .5rem 0 .375rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    max-width: 260px;
}
.topbar-user:hover  { background: var(--bs-tertiary-bg, #f4f5f9); }
.topbar-user::after { display: none; }        /* kill Bootstrap's caret */

.topbar-avatar {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--bs-primary, #0057ff);
    color: #fff;
    font-size: .875rem; font-weight: 600; line-height: 1;
}
.topbar-user-text {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    line-height: 1.2;
}
.topbar-user-name {
    font-size: .8125rem; font-weight: 600;
    max-width: 150px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-user-role {
    font-size: .6875rem;
    color: var(--bs-secondary-color, #8486a7);
    max-width: 150px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-user-caret {
    font-size: 16px;
    color: var(--bs-secondary-color, #8486a7);
}

@media (max-width: 767.98px) {
    .app-topbar .navbar-custom { height: 58px; padding: 0 .75rem; }
    .topbar-user { max-width: none; padding-inline-end: .25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED DESIGN LAYER — added 2026-08-24
   ═══════════════════════════════════════════════════════════════════════════

   THE PROBLEM THIS SOLVES
   Every workspace had drifted into its own look. Six pages measured six
   different <head> blocks and three different title-bar patterns: /admin used
   .page-title-box with a breadcrumb, the newer /leasing and /accounts pages
   used an ad-hoc flex row with an <h4>, and card padding, table density, badge
   tone and empty states were decided per page. The result read like several
   systems bolted together.

   THE APPROACH
   Normalise here, in ONE stylesheet that all 37 pages already load, rather than
   editing every page. Cards, tables, badges, forms, stat tiles and empty states
   now resolve to the same visual language whatever markup pattern a page used.
   Permissions stay exactly as they are — this changes appearance, not access.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --pms-radius:      10px;
    --pms-radius-sm:   8px;
    --pms-gap:         1rem;
    --pms-border:      var(--bs-border-color, #e5e7f0);
    --pms-muted:       var(--bs-secondary-color, #8486a7);
    --pms-shadow:      0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}

/* ── Page canvas ──────────────────────────────────────────────────────── */
.page-content > .container-fluid { padding-top: 1.25rem; padding-bottom: 2rem; }

/* ── Page header: unify BOTH legacy patterns to one look ───────────────
   .page-title-box (admin) and the ad-hoc flex row (leasing/accounts) now
   render identically, so no page had to be rewritten. */
.page-title-box,
.page-content > .container-fluid > .d-flex:first-child {
    padding-bottom: .875rem;
    margin-bottom: 1.25rem !important;
    border-bottom: 1px solid var(--pms-border);
}
.page-title-box h4,
.page-content > .container-fluid > .d-flex:first-child h4 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: .125rem;
}
.page-title-box .breadcrumb { margin-bottom: 0; font-size: .75rem; }
.page-content > .container-fluid > .d-flex:first-child p.text-muted { font-size: .8125rem; }

/* ── Cards: one elevation, one radius, one header weight ───────────────── */
.card {
    border: 1px solid var(--pms-border);
    border-radius: var(--pms-radius);
    box-shadow: var(--pms-shadow);
}
.card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--pms-border);
    padding: .75rem 1rem;
    min-height: auto;
}
.card > .card-header h5,
.card > .card-header h4 {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.005em;
}
.card > .card-header small { font-weight: 400; font-size: .75rem; }
.card > .card-body   { padding: 1rem; }
.card > .card-footer { background: transparent; border-top: 1px solid var(--pms-border); padding: .75rem 1rem; }

/* ── Tables: one density everywhere ────────────────────────────────────── */
.table > :not(caption) > * > * { padding: .625rem .75rem; }
.table > thead th {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pms-muted);
    background: var(--bs-tertiary-bg, #f6f7fb);
    border-bottom: 1px solid var(--pms-border);
    white-space: nowrap;
}
.table > tbody > tr > td { font-size: .8125rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: var(--bs-tertiary-bg, #f6f7fb); }
.table-responsive { border-radius: 0 0 var(--pms-radius) var(--pms-radius); }

/* ── Badges & status chips: same shape and weight in every workspace ───── */
.badge {
    font-size: .6875rem;
    font-weight: 600;
    padding: .3em .55em;
    border-radius: 6px;
    letter-spacing: .01em;
}

/* Canonical unit / contract status colours (SOP §4.2, R-22). Applying them by
   data attribute means a page only has to state the status, not pick a colour —
   which is how three workspaces ended up showing "vacant" in three tones. */
[data-status="vacant"],   [data-status="available"]        { background: rgba(132,134,167,.14); color: #5b5d78; }
[data-status="reserved"]                                    { background: rgba(240,173,78,.16);  color: #a86a00; }
[data-status="leased"],   [data-status="rented"],
[data-status="active"],   [data-status="approved"]          { background: rgba(42,150,131,.14);  color: #1f7364; }
[data-status="under_maintenance"], [data-status="under_process"],
[data-status="pending"],  [data-status="under_verification"] { background: rgba(0,87,255,.10);    color: #0047d1; }
[data-status="legal_case"], [data-status="rejected"],
[data-status="expired"],  [data-status="terminated"]        { background: rgba(192,57,47,.12);   color: #a5281f; }

/* ── Forms: one control height and one label voice ─────────────────────── */
.form-label {
    font-size: .8125rem;
    font-weight: 500;
    margin-bottom: .3125rem;
    color: var(--bs-emphasis-color, #1f2233);
}
.form-control, .form-select {
    border-radius: var(--pms-radius-sm);
    border-color: var(--pms-border);
    font-size: .875rem;
}
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(0, 87, 255, .10);
    border-color: rgba(0, 87, 255, .45);
}
.form-control-sm, .form-select-sm { font-size: .8125rem; border-radius: 6px; }
.form-text, .form-label + small { font-size: .75rem; color: var(--pms-muted); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn { border-radius: var(--pms-radius-sm); font-weight: 500; }
.btn-sm { border-radius: 6px; font-size: .8125rem; }
.btn i { vertical-align: -1px; }

/* ── Stat tiles: /admin, /accounts and /leasing each invented their own ── */
.pms-stat {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    border: 1px solid var(--pms-border);
    border-radius: var(--pms-radius);
    background: var(--bs-body-bg, #fff);
    box-shadow: var(--pms-shadow);
    height: 100%;
}
.pms-stat-icon {
    flex: 0 0 38px; width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--pms-radius-sm);
    font-size: 18px; line-height: 1;
    background: var(--bs-tertiary-bg); color: var(--pms-muted);
}
.pms-stat-value { font-size: 1.375rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.pms-stat-label { font-size: .75rem; color: var(--pms-muted); }

/* ── Empty states: every page wrote its own. One voice now. ────────────── */
.pms-empty { padding: 2.5rem 1rem; text-align: center; color: var(--pms-muted); }
.pms-empty i  { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .25; }
.pms-empty p  { margin-bottom: 0; font-size: .875rem; }

/* Retrofit the hand-written empty states already in the pages, so they match
   without touching 37 files. */
.card-body > p.text-muted.text-center,
.card-body > .text-muted.text-center.py-3,
.card-body > .text-muted.text-center.py-4,
.card-body > .text-muted.text-center.py-5 { font-size: .875rem; }

/* ── Accordion (unit builder floors) ───────────────────────────────────── */
.accordion-item { border-color: var(--pms-border); }
.accordion-button {
    font-size: .875rem;
    font-weight: 500;
    padding: .75rem 1rem;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) { background: var(--bs-tertiary-bg); color: inherit; }
/* The floor action buttons sit beside the toggle, so the toggle must not eat the row. */
.accordion-header.d-flex .accordion-button { flex: 1 1 auto; }

/* ── Modals ───────────────────────────────────────────────────────────── */
.modal-content { border: 0; border-radius: 12px; }
.modal-header  { border-bottom: 1px solid var(--pms-border); padding: .875rem 1rem; }
.modal-title   { font-size: 1rem; font-weight: 600; }
.modal-body    { padding: 1rem; }
.modal-footer  { border-top: 1px solid var(--pms-border); padding: .75rem 1rem; }

/* ── Alerts ───────────────────────────────────────────────────────────── */
.alert { border-radius: var(--pms-radius-sm); border-width: 1px; font-size: .8125rem; }
.alert p:last-child { margin-bottom: 0; }

/* ── Tabs / pills ─────────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--pms-border); gap: .25rem; }
.nav-tabs .nav-link {
    font-size: .8125rem; font-weight: 500;
    border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; color: var(--pms-muted);
}
.nav-tabs .nav-link.active {
    background: transparent; color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
}

/* ── Density on small screens ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .page-content > .container-fluid { padding-top: .875rem; }
    .card > .card-body { padding: .875rem; }
    .table > :not(caption) > * > * { padding: .5rem .625rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS ALWAYS SCROLL — added 2026-08-25, CORRECTED same day
   ═══════════════════════════════════════════════════════════════════════════

   THE ORIGINAL BUG
   Bootstrap only makes a modal body scrollable when the dialog carries
   `modal-dialog-scrollable`. 54 of this project's 64 dialogs did not have it, so
   any modal taller than the viewport overflowed off the bottom with no way to
   reach the buttons. Users were deleting uploaded files just to bring "Next"
   back into view.

   WHY THE FIRST FIX DID NOT WORK — two faults compounding:

   1. THE THEME IS INCOMPLETE. app.min.css ships
        .modal-dialog-scrollable { height: calc(100% - var(--bs-modal-margin)*2) }
      and .modal-dialog-centered, but NOT Bootstrap's combined rule
        .modal-dialog-centered.modal-dialog-scrollable { height: 100% }
      Almost every dialog here is centred, so the combination fell into a gap:
      `align-items:center` on a flex container lets an over-tall child overflow
      both edges, and the height cap never took effect.

   2. MY OWN OVERRIDE MADE IT WORSE. I wrote
        .modal-dialog-scrollable > .modal-content { max-height: 100% }
      "so as not to fight Bootstrap". It is more specific than my viewport cap
      and sits later in the file, so it replaced a cap that always resolves
      (100vh) with one that resolves against a parent whose height the theme had
      already failed to set — i.e. no cap at all. Adding the class to all 64
      dialogs then activated that broken override everywhere, including the 10
      modals that previously worked.

   THE CORRECTION
   Depend on nothing: no percentage chains, no theme variables, no Bootstrap
   combination rules. `100vh` always resolves, and `margin:auto` centres a short
   dialog while letting a tall one sit flush against the cap instead of
   overflowing the way `align-items:center` does.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The dialog: centre it with auto margins, which never overflow. */
.modal .modal-dialog,
.modal .modal-dialog-centered,
.modal .modal-dialog-scrollable,
.modal .modal-dialog-centered.modal-dialog-scrollable {
    max-height: calc(100vh - 1rem);
    height: auto;                 /* undo the theme's calc() height */
    margin: 0.5rem auto;
    display: flex;                /* so the content box can be capped */
    align-items: stretch;         /* NOT center — centre overflows when tall */
}

/* The content box: hard viewport cap, and it clips so the body is what moves. */
.modal .modal-dialog > .modal-content,
.modal .modal-dialog-centered > .modal-content,
.modal .modal-dialog-scrollable > .modal-content,
.modal .modal-dialog-centered.modal-dialog-scrollable > .modal-content {
    max-height: calc(100vh - 1rem);
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Header and footer stay put; only the middle scrolls. This is what keeps the
   submit button permanently visible however long the form grows. */
.modal .modal-header,
.modal .modal-footer { flex: 0 0 auto; }

.modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto !important;   /* beats the theme's shorthand resets */
    overflow-x: hidden;
    min-height: 0;                 /* required, or a flex child refuses to shrink */
    scrollbar-width: thin;
}
.modal .modal-body::-webkit-scrollbar { width: 9px; }
.modal .modal-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 5px; }
.modal .modal-body::-webkit-scrollbar-track { background: rgba(0,0,0,.04); }

/* A visible edge above the pinned footer, so the last row reads as scrollable
   rather than cut off. */
.modal .modal-footer { box-shadow: 0 -1px 0 var(--bs-border-color, #e5e7f0); }

/* The notice-email preview must not force the dialog wider or taller. */
.modal .modal-body iframe { max-width: 100%; }

@media (max-width: 575.98px) {
    .modal .modal-dialog,
    .modal .modal-dialog-centered,
    .modal .modal-dialog-scrollable,
    .modal .modal-dialog-centered.modal-dialog-scrollable,
    .modal .modal-dialog > .modal-content,
    .modal .modal-dialog-centered > .modal-content,
    .modal .modal-dialog-scrollable > .modal-content {
        max-height: calc(100vh - 0.5rem);
        margin: 0.25rem auto;
    }
}