/* inSpace CRM — Design Tokens */
:root {
  /* Colors */
  --crm-primary: #0EA5E9;
  --crm-primary-rgb: 14,165,233;
  --crm-primary-on-dark: #0EA5E9;

  /* #0EA5E9 is a fine colour and an unusable ground: white on it is 2.77:1,
     under the 4.5:1 that ordinary text needs and under even the 3:1 asked of a
     control. It stays exactly where it works — borders, icons, dots, bars, any
     accent on a light surface. Anything that puts white ON the colour uses the
     ink instead, which is 5.93:1, and is the same tone the landing page already
     chose, so the product and the page selling it now agree. */
  --crm-primary-ink: #0369A1;
  --crm-primary-ink-hover: #075985;
  --crm-success: #16A34A;
  --crm-warning: #D97706;
  --crm-danger: #DC2626;
  --crm-info: #7C3AED;
  --crm-cyan: #0891B2;

  /* Sidebar */
  --crm-sidebar-bg: #1E293B;
  --crm-sidebar-hover: #334155;
  --crm-sidebar-text: #CBD5E1;
  --crm-sidebar-muted: #94A3B8;
  --crm-sidebar-border: #334155;

  /* The accent as TEXT. The same tone as the ink on a light page, and a
     different one in the dark theme: ink has to stay dark enough to carry
     white on a button, text has to go light enough to be read on a dark card.
     One token cannot do both, and pretending it can is how dark themes end up
     with invisible links. */
  --crm-primary-text: var(--crm-primary-ink);

  /* Status washes: a pale ground and the ink that reads on it. Named rather
     than spelled out, because the dark theme inverts both. */
  --crm-success-bg: #DCFCE7;  --crm-success-fg: #14532D;
  --crm-warning-bg: #FEF3C7;  --crm-warning-fg: #78350F;
  --crm-warning-line: #FDE68A; --crm-warning-soft: #FFFBEB; --crm-warning-strong: #B45309;
  --crm-danger-bg: #FEE2E2;   --crm-danger-fg: #7F1D1D;
  --crm-danger-line: #FECACA; --crm-danger-soft: #FEF2F2;  --crm-danger-strong: #B91C1C;
  --crm-info-bg: #EDE9FE;     --crm-info-fg: #4C1D95;
  --crm-accent-bg: #E0F2FE;   --crm-accent-fg: #0C4A6E;
  --crm-cyan-bg: #ECFEFF;     --crm-cyan-fg: #164E63;  --crm-cyan-badge-bg: #CFFAFE;
  --crm-neutral-bg: #F1F5F9;  --crm-neutral-fg: #334155;

  /* Surfaces with no name of their own. */
  --crm-toast-bg: #0F172A;
  --crm-bulk-bg: #0C4A6E;
  /* The danger red is tuned for white. On a dark band it lands at 2.92:1, so
     anything dark-grounded in either theme uses this instead. */
  --crm-danger-on-dark: #FCA5A5;
  --crm-thread-bg: #FCFCFD;
  --crm-skeleton: #E4ECF4;
  --crm-avatar-bg: #0D9488;
  --crm-won-bg: #F7FDF9;      --crm-won-line: #BBF7D0;  --crm-pin-line: #BAE6FD;

  /* Neutrals */
  --crm-body-bg: #F8FAFC;
  --crm-card-bg: #FFFFFF;
  --crm-raised-bg: #F1F5F9;
  --crm-border: #E2E8F0;
  --crm-border-strong: #CBD5E1;
  --crm-text: #0F172A;
  --crm-text-secondary: #475569;
  --crm-text-muted: #94A3B8;

  /* Module colors */
  --m-contacts: #0D9488;
  --m-pipeline: #0EA5E9;
  --m-conversations: #7C3AED;
  --m-campaigns: #0891B2;
  --m-workflows: #8B5CF6;
  --m-calendar: #16A34A;
  --m-forms: #D97706;
  --m-funnels: #EC4899;
  --m-phone: #0EA5E9;
  --m-reputation: #EAB308;
  --m-payments: #16A34A;
  --m-social: #6366F1;
  --m-reports: #64748B;
  --m-settings: #64748B;

  /* Typography */
  --crm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --crm-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Layout */
  --width-sidebar: 240px;
  --width-sidebar-collapsed: 64px;
  --height-topnav: 60px;
}


/* ── The dark theme ─────────────────────────────────────────────────────────
   Two ways in, one set of values. [data-theme] is what a person chose and is
   written by the server from their account; the media query is for everybody
   who chose nothing, and stands aside the moment they pick "claro". Both are
   spelled out rather than nested, because a browser that does not understand
   one must still apply the other. */
:root[data-theme="dark"] {
  --crm-primary-text: var(--crm-primary-on-dark);

  --crm-success-bg: rgba(22,163,74,.18);   --crm-success-fg: #86EFAC;
  --crm-warning-bg: rgba(217,119,6,.20);   --crm-warning-fg: #FCD34D;
  --crm-warning-line: rgba(217,119,6,.38); --crm-warning-soft: rgba(217,119,6,.12); --crm-warning-strong: #FBBF24;
  --crm-danger-bg: rgba(220,38,38,.20);    --crm-danger-fg: #FCA5A5;
  --crm-danger-line: rgba(220,38,38,.38);  --crm-danger-soft: rgba(220,38,38,.12);  --crm-danger-strong: #F87171;
  --crm-info-bg: rgba(124,58,237,.24);     --crm-info-fg: #C4B5FD;
  --crm-accent-bg: rgba(var(--crm-primary-rgb),.18); --crm-accent-fg: var(--crm-primary-on-dark);
  --crm-cyan-bg: rgba(8,145,178,.18);      --crm-cyan-fg: #67E8F9;  --crm-cyan-badge-bg: rgba(8,145,178,.24);
  --crm-neutral-bg: #1B2537;               --crm-neutral-fg: #CBD5E1;

  --crm-toast-bg: #1E2A44;  --crm-bulk-bg: #16324A;
  --crm-thread-bg: #0E1728;
  --crm-skeleton: #1B2537;
  --crm-won-bg: rgba(22,163,74,.10);       --crm-won-line: rgba(22,163,74,.38);
  --crm-pin-line: rgba(var(--crm-primary-rgb),.45);

  --crm-body-bg: #0B1220;
  --crm-card-bg: #111A2B;
  --crm-raised-bg: #17223A;
  --crm-border: #24304A;
  --crm-border-strong: #33415C;
  --crm-text: #E6EDF7;
  --crm-text-secondary: #A9B6CC;
  --crm-text-muted: #77879F;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --crm-primary-text: var(--crm-primary-on-dark);

    --crm-success-bg: rgba(22,163,74,.18);   --crm-success-fg: #86EFAC;
    --crm-warning-bg: rgba(217,119,6,.20);   --crm-warning-fg: #FCD34D;
    --crm-warning-line: rgba(217,119,6,.38); --crm-warning-soft: rgba(217,119,6,.12); --crm-warning-strong: #FBBF24;
    --crm-danger-bg: rgba(220,38,38,.20);    --crm-danger-fg: #FCA5A5;
    --crm-danger-line: rgba(220,38,38,.38);  --crm-danger-soft: rgba(220,38,38,.12);  --crm-danger-strong: #F87171;
    --crm-info-bg: rgba(124,58,237,.24);     --crm-info-fg: #C4B5FD;
    --crm-accent-bg: rgba(var(--crm-primary-rgb),.18); --crm-accent-fg: var(--crm-primary-on-dark);
    --crm-cyan-bg: rgba(8,145,178,.18);      --crm-cyan-fg: #67E8F9;  --crm-cyan-badge-bg: rgba(8,145,178,.24);
    --crm-neutral-bg: #1B2537;               --crm-neutral-fg: #CBD5E1;

    --crm-toast-bg: #1E2A44;  --crm-bulk-bg: #16324A;
    --crm-thread-bg: #0E1728;
    --crm-skeleton: #1B2537;
    --crm-won-bg: rgba(22,163,74,.10);       --crm-won-line: rgba(22,163,74,.38);
    --crm-pin-line: rgba(var(--crm-primary-rgb),.45);

    --crm-body-bg: #0B1220;
    --crm-card-bg: #111A2B;
    --crm-raised-bg: #17223A;
    --crm-border: #24304A;
    --crm-border-strong: #33415C;
    --crm-text: #E6EDF7;
    --crm-text-secondary: #A9B6CC;
    --crm-text-muted: #77879F;

    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--crm-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--crm-text);
  background: var(--crm-body-bg);
  -webkit-font-smoothing: antialiased;
}

.font-mono { font-family: var(--crm-font-mono); font-feature-settings: 'tnum'; }

/* === Layout === */
.crm-topnav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--height-topnav);
  background: var(--crm-sidebar-bg); z-index: 50;
  display: flex; align-items: center; padding: 0 20px;
  border-bottom: 1px solid var(--crm-sidebar-border);
}
.crm-topnav .brand { display: flex; align-items: center; gap: 10px; color: white; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; }
.crm-topnav .brand img { height: 22px; width: auto; }
.crm-topnav .topnav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--crm-sidebar-text); font-size: 13px; }
.crm-topnav .account-switcher {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--crm-sidebar-border); border-radius: var(--radius-md);
  cursor: pointer; color: var(--crm-sidebar-text);
}
.crm-topnav .account-switcher:hover { background: var(--crm-sidebar-hover); }
.crm-topnav .account-switcher .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--crm-success); }
.crm-topnav .icon-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); color: var(--crm-sidebar-text); cursor: pointer; position: relative;
}
.crm-topnav .icon-btn:hover { background: var(--crm-sidebar-hover); }
.crm-topnav .badge-count {
  position: absolute; top: 4px; right: 4px;
  background: var(--crm-danger); color: white; font-size: 9px; font-weight: 600;
  padding: 1px 5px; border-radius: 10px; min-width: 16px; text-align: center;
}
.crm-topnav .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--crm-avatar-bg); color: white;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px;
  cursor: pointer;
}

.crm-sidebar {
  position: fixed; top: var(--height-topnav); left: 0; bottom: 0;
  width: var(--width-sidebar); background: var(--crm-sidebar-bg); z-index: 40;
  overflow-y: auto; border-right: 1px solid var(--crm-sidebar-border);
  display: flex; flex-direction: column;
}
.crm-sidebar-group { padding: 14px 0 6px; }
.crm-sidebar-group-label {
  padding: 0 20px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--crm-sidebar-muted);
}
.crm-sidebar-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 20px; color: var(--crm-sidebar-text); text-decoration: none;
  font-size: 13.5px; cursor: pointer; border-left: 2px solid transparent;
}
.crm-sidebar-link:hover { background: var(--crm-sidebar-hover); color: white; }
.crm-sidebar-link.active {
  background: var(--crm-sidebar-hover); color: white;
  border-left-color: var(--crm-primary-on-dark);
}
.crm-sidebar-link .icon { width: 16px; font-size: 16px; display: inline-flex; justify-content: center; }
.crm-sidebar-link .count {
  margin-left: auto; font-size: 11px; font-family: var(--crm-font-mono);
  color: var(--crm-sidebar-muted); background: rgba(255,255,255,0.04);
  padding: 1px 7px; border-radius: 10px;
}
.crm-sidebar-link.active .icon { color: var(--crm-primary-on-dark); }

.crm-main {
  margin-left: var(--width-sidebar);
  margin-top: var(--height-topnav);
  padding: 24px 32px 48px;
  min-height: calc(100vh - var(--height-topnav));
}

.crm-breadcrumb {
  font-size: 12px; color: var(--crm-text-secondary);
  display: flex; align-items: center; gap: 6px; margin-bottom: 14px;
}
.crm-breadcrumb a { color: var(--crm-text-secondary); text-decoration: none; }
.crm-breadcrumb a:hover { color: var(--crm-primary-text); }
.crm-breadcrumb .sep { color: var(--crm-text-muted); }
.crm-breadcrumb .current { color: var(--crm-text); font-weight: 500; }

.crm-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.crm-page-header h1 { margin: 0 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.crm-page-header .subtitle { font-size: 13px; color: var(--crm-text-secondary); margin: 0; }
.crm-page-header .actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* === Cards === */
.crm-card {
  background: var(--crm-card-bg); border: 1px solid var(--crm-border);
  border-radius: var(--radius-lg); padding: 20px;
}
.crm-card.p-0 { padding: 0; }
.crm-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.crm-card-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.crm-card-title i { color: var(--crm-text-secondary); }

/* === Buttons === */
.btn-crm-primary, .btn-crm-secondary, .btn-crm-danger, .btn-crm-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; font-size: 13px; font-weight: 500; font-family: inherit;
  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; line-height: 1.2; white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.btn-crm-primary { background: var(--crm-primary-ink); color: white; }
.btn-crm-primary:hover { background: var(--crm-primary-ink-hover); }
.btn-crm-secondary { background: var(--crm-card-bg); color: var(--crm-text); border-color: var(--crm-border); }
.btn-crm-secondary:hover { background: var(--crm-raised-bg); border-color: var(--crm-border-strong); }
.btn-crm-danger { background: var(--crm-danger); color: white; }
.btn-crm-danger:hover { background: var(--crm-danger-strong); }
.btn-crm-ghost { background: transparent; color: var(--crm-text-secondary); }
.btn-crm-ghost:hover { background: var(--crm-raised-bg); color: var(--crm-text); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-crm-icon {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  background: transparent; border: 1px solid transparent;
  color: var(--crm-text-secondary); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.btn-crm-icon:hover { background: var(--crm-raised-bg); color: var(--crm-text); }
.btn-crm-icon.bordered { border-color: var(--crm-border); background: var(--crm-card-bg); }

/* === Inputs === */
.crm-input, .crm-select {
  width: 100%; padding: 8px 12px; font-size: 13px; font-family: inherit;
  background: var(--crm-card-bg); border: 1px solid var(--crm-border); border-radius: var(--radius-md);
  color: var(--crm-text); outline: none;
}
.crm-input:focus, .crm-select:focus { border-color: var(--crm-primary); box-shadow: 0 0 0 3px rgba(var(--crm-primary-rgb),0.12); }
.crm-input::placeholder { color: var(--crm-text-muted); }
.crm-label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 6px; color: var(--crm-text-secondary); }
.crm-search-wrap { position: relative; }
.crm-search-wrap i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--crm-text-muted); pointer-events: none;
}
.crm-search-wrap .crm-input { padding-left: 34px; }

/* === Badges === */
.crm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 10px;
  line-height: 1.5; white-space: nowrap;
}
.crm-badge-success { background: var(--crm-success-bg); color: var(--crm-success-fg); }
.crm-badge-warning { background: var(--crm-warning-bg); color: var(--crm-warning-fg); }
.crm-badge-danger { background: var(--crm-danger-bg); color: var(--crm-danger-fg); }
.crm-badge-info { background: var(--crm-info-bg); color: var(--crm-info-fg); }
.crm-badge-primary { background: var(--crm-accent-bg); color: var(--crm-accent-fg); }
.crm-badge-cyan { background: var(--crm-cyan-badge-bg); color: var(--crm-cyan-fg); }
.crm-badge-neutral { background: var(--crm-neutral-bg); color: var(--crm-neutral-fg); }
.crm-badge-live .dot, .live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--crm-cyan);
  animation: crm-pulse 1.4s infinite;
}
@keyframes crm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.35); }
}

/* === Table === */
.crm-table { width: 100%; border-collapse: collapse; }
.crm-table thead th {
  text-align: left; padding: 10px 16px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--crm-text-secondary);
  border-bottom: 1px solid var(--crm-border); background: var(--crm-raised-bg);
}
.crm-table tbody td {
  padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid var(--crm-border);
  color: var(--crm-text); vertical-align: middle;
}
.crm-table tbody tr:hover td { background: var(--crm-raised-bg); }
.crm-table tbody tr:last-child td { border-bottom: none; }
/* A phone number broken across two lines stops looking like a phone number:
   the eye reads "+52 999 361" and then hunts for the rest. The table already
   scrolls sideways, so keeping it whole costs nothing. */
.crm-table td.crm-nowrap, .crm-table th.crm-nowrap, .crm-table .crm-nowrap { white-space: nowrap; }

.crm-table .name-cell { font-weight: 500; color: var(--crm-primary-text); cursor: pointer; }
.crm-table .name-cell:hover { text-decoration: underline; }

/* === Avatars === */
.crm-avatar, .crm-avatar-lg {
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; color: white; flex-shrink: 0;
}
.crm-avatar { width: 32px; height: 32px; font-size: 11px; }
.crm-avatar-sm { width: 24px; height: 24px; font-size: 10px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: white; }
.crm-avatar-lg { width: 64px; height: 64px; font-size: 22px; }

/* === Metric card === */
.crm-metric-card {
  background: var(--crm-card-bg); border: 1px solid var(--crm-border);
  border-radius: var(--radius-lg); padding: 18px 20px;
}
.crm-metric-label { font-size: 12px; color: var(--crm-text-secondary); font-weight: 500; }
.crm-metric-value { font-size: 28px; font-weight: 600; margin-top: 4px; letter-spacing: -0.02em; }
.crm-metric-delta { font-size: 12px; margin-top: 6px; font-family: var(--crm-font-mono); display: inline-flex; align-items: center; gap: 4px; }
.crm-metric-delta.up { color: var(--crm-success); }
.crm-metric-delta.down { color: var(--crm-danger); }

/* === Grids === */
.crm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.crm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.crm-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* === Empty state === */
.crm-empty-state { text-align: center; padding: 48px 24px; }
.crm-empty-icon {
  width: 56px; height: 56px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  background: var(--crm-raised-bg); border-radius: 50%; color: var(--crm-text-muted); font-size: 24px;
}
.crm-empty-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.crm-empty-desc { font-size: 13px; color: var(--crm-text-secondary); margin: 0 0 16px; }

/* === Timeline === */
.crm-timeline { list-style: none; padding: 0; margin: 0; }
.crm-timeline li {
  position: relative; padding: 12px 0 12px 28px;
  border-bottom: 1px solid var(--crm-border);
}
.crm-timeline li:last-child { border-bottom: none; }
.crm-timeline .tdot {
  position: absolute; left: 4px; top: 16px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--crm-primary);
  border: 2px solid var(--crm-card-bg); box-shadow: 0 0 0 1px var(--crm-border);
}
.crm-timeline .tdot.sms { background: var(--crm-primary); }
.crm-timeline .tdot.email { background: var(--crm-info); }
.crm-timeline .tdot.call { background: var(--crm-success); }
.crm-timeline .tdot.note { background: var(--crm-warning); }
.crm-timeline .tmeta { font-size: 11px; color: var(--crm-text-muted); font-family: var(--crm-font-mono); }
.crm-timeline .ttitle { font-size: 13px; font-weight: 500; margin: 2px 0; }
.crm-timeline .tbody { font-size: 13px; color: var(--crm-text-secondary); }

/* === Tabs === */
.crm-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--crm-border); margin-bottom: 16px;
}
.crm-tab {
  padding: 8px 14px; font-size: 13px; font-weight: 500;
  color: var(--crm-text-secondary); cursor: pointer; border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font-family: inherit;
  line-height: 1.2;
}
.crm-tab:hover { color: var(--crm-text); background: transparent; }
.crm-tab.active { color: var(--crm-primary-text); border-bottom-color: var(--crm-primary); }
.crm-tab:focus { outline: none; }

/* === Bulk bar === */
.crm-bulk-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; margin-bottom: 12px;
  background: var(--crm-bulk-bg); color: white; border-radius: var(--radius-md);
  font-size: 13px;
}
/* The band is dark in both themes, so what sits on it is coloured for dark.
   The ghost button's own grey is tuned for a white card and reads as disabled
   here; the danger red was the least legible thing on the bar at 2.92:1, which
   is the destructive action being the hardest one to read. */
.crm-bulk-bar .btn-crm-ghost { color: rgba(255, 255, 255, 0.88); }
.crm-bulk-bar .btn-crm-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
/* Its own class rather than .text-danger: Bootstrap's utility carries
   !important, so no amount of specificity reaches past it. */
.crm-bulk-bar .btn-crm-ghost.is-danger { color: var(--crm-danger-on-dark); }
.crm-bulk-bar .btn-crm-ghost.is-danger:hover { color: #FFDADA; background: rgba(220, 38, 38, 0.22); }

/* === Utilities === */
.text-secondary { color: var(--crm-text-secondary); }
.text-muted { color: var(--crm-text-muted); }
.text-success { color: var(--crm-success); }
.text-danger { color: var(--crm-danger); }
.small { font-size: 12px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.d-flex { display: flex; } .d-none { display: none; } .d-block { display: block; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow-1 { flex-grow: 1; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.w-100 { width: 100%; }
.ms-auto { margin-left: auto; }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; }

/* === Scrollbars === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--crm-border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--crm-text-muted); }

/* === Compatibility: classes introduced by PHTML views (not in design tokens) === */

/* Filter bar — used by contacts/articles/campaigns/forms/workflows index pages */
.crm-filter-bar {
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.crm-filter-bar .crm-search-wrap { flex: 1; min-width: 220px; max-width: 360px; }

/* View toggle pill tabs */
.crm-view-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--crm-raised-bg);
  border: 1px solid var(--crm-border);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}
.crm-view-btn {
  /* Authored for <a>, so it never reset the UA button styles. Used on a
     <button> the browser's own border and background came through and each
     option read as a separate boxed button instead of one segmented control. */
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--crm-text-secondary);
  text-decoration: none;
  border-radius: calc(var(--radius-md) - 3px);
  transition: background .12s, color .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; white-space: nowrap;
}
.crm-view-btn:focus-visible {
  outline: 2px solid var(--crm-primary);
  outline-offset: -2px;
}
.crm-view-btn:hover { background: var(--crm-card-bg); color: var(--crm-text); }
/* Full-width variant for panels and dropdowns: the options divide the row
   evenly instead of each sizing to its own label. */
.crm-view-toggle--fill { display: flex; width: 100%; }
.crm-view-toggle--fill .crm-view-btn { flex: 1 1 0; justify-content: center; }

.crm-view-btn.active {
  background: var(--crm-card-bg);
  color: var(--crm-primary-text);
  box-shadow: 0 1px 2px rgba(15,23,42,0.08);
}

/* Compact select for filter bars */
.crm-select-sm {
  height: 34px;
  padding: 0 28px 0 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--crm-border);
  border-radius: var(--radius-md);
  background: var(--crm-card-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%2364748B'><path d='M0 0l5 6 5-6z'/></svg>") no-repeat right 10px center / 9px 6px;
  color: var(--crm-text);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.crm-select-sm:focus { outline: none; border-color: var(--crm-primary); box-shadow: 0 0 0 3px rgba(var(--crm-primary-rgb),0.12); }

/* Styled link */
/* Text in the ink, not the accent: #0EA5E9 is 2.77:1 on white, and links are
   the text people most need to find. */
.crm-link { color: var(--crm-primary-text); text-decoration: none; transition: color .12s; }
.crm-link:hover { color: var(--crm-primary-text); text-decoration: underline; text-underline-offset: 2px; }

/* Search input variant (used where .crm-search-wrap is not used) */
.crm-search-input {
  width: 100%; height: 36px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--crm-border);
  border-radius: var(--radius-md);
  background: var(--crm-card-bg);
  font-size: 13px; color: var(--crm-text);
  transition: border-color .12s, box-shadow .12s;
}
.crm-search-input:focus { outline: none; border-color: var(--crm-primary); box-shadow: 0 0 0 3px rgba(var(--crm-primary-rgb),0.12); }
.crm-search-wrap .crm-search-input { padding-left: 34px; }
.crm-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--crm-text-muted); pointer-events: none; font-size: 14px;
}

/* Metric icon badge (campaigns/workflows/articles stat cards) */
.crm-metric-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  margin-bottom: 10px;
}

/* 3-column inbox layout */
.crm-inbox-layout {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  height: calc(100vh - var(--height-topnav) - 48px);
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.crm-inbox-list { border-right: 1px solid var(--crm-border); display: flex; flex-direction: column; }
.crm-inbox-list-header { padding: 14px 16px; border-bottom: 1px solid var(--crm-border); }
.crm-inbox-list-header h2 { font-size: 15px; margin: 0 0 10px; font-weight: 600; }
.crm-inbox-list-body { flex: 1; overflow-y: auto; }
.crm-inbox-list-footer { padding: 10px 14px; border-top: 1px solid var(--crm-border); }
.crm-inbox-thread { display: flex; flex-direction: column; background: var(--crm-thread-bg); }
.crm-inbox-contact-panel { border-left: 1px solid var(--crm-border); padding: 20px; overflow-y: auto; background: var(--crm-card-bg); }
.crm-inbox-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px; color: var(--crm-text-muted);
}

/* Inbox filter tab row */
.crm-inbox-filter-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.crm-inbox-filter-tabs::-webkit-scrollbar { display: none; }
.crm-inbox-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--crm-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  background: var(--crm-raised-bg);
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.crm-inbox-filter i { font-size: 12px; }
.crm-inbox-filter:hover { background: var(--crm-border); color: var(--crm-text); }
.crm-inbox-filter.active { background: var(--crm-primary-ink); color: #fff; }

/* Conversation list row */
.crm-conv-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--crm-border);
  text-decoration: none;
  color: var(--crm-text);
  transition: background .12s;
}
.crm-conv-item:hover { background: var(--crm-raised-bg); }
.crm-conv-item.active {
  background: rgba(var(--crm-primary-rgb),0.08);
  /* Inset rather than a border: a real border changes the box model, which
     is why this rule used to walk padding-left back to 11px to compensate. */
  box-shadow: inset 2px 0 0 var(--crm-primary);
}
.crm-conv-item.unread .crm-conv-name { font-weight: 600; }

.crm-conv-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--crm-primary-ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.crm-conv-body { flex: 1; min-width: 0; }
.crm-conv-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.crm-conv-name {
  font-size: 13.5px;
  color: var(--crm-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-conv-time {
  font-size: 11px;
  color: var(--crm-text-muted);
  font-family: var(--crm-font-mono);
  flex-shrink: 0;
}
.crm-conv-preview {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--crm-text-secondary);
}
.crm-conv-channel-icon { color: var(--crm-text-muted); font-size: 11px; }
.crm-conv-snippet {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-conv-unread-dot {
  background: var(--crm-primary-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Message bubbles */
.crm-msg-bubble-in, .crm-msg-bubble-out {
  max-width: 72%; padding: 10px 14px; border-radius: var(--radius-lg); font-size: 13.5px; line-height: 1.5;
}
.crm-msg-bubble-in { background: var(--crm-raised-bg); color: var(--crm-text); align-self: flex-start; }
.crm-msg-bubble-out { background: var(--crm-primary-ink); color: white; align-self: flex-end; }
.crm-msg-note { background: var(--crm-warning-bg); color: var(--crm-warning-fg); padding: 10px 14px; border-radius: var(--radius-md); font-size: 13px; }

/* Kanban */
.crm-kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.crm-kanban-col {
  min-width: 280px; max-width: 320px; flex: 1 0 280px;
  background: var(--crm-raised-bg); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; max-height: calc(100vh - 260px);
}
.crm-kanban-header {
  padding: 12px 14px; border-bottom: 1px solid var(--crm-border);
  display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13px;
}
.crm-kanban-body { flex: 1; overflow-y: auto; }
.crm-kanban-cards { min-height: 80px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.crm-kanban-cards.drag-over { background: rgba(var(--crm-primary-rgb),0.06); outline: 2px dashed var(--crm-primary); outline-offset: -2px; }
.crm-opp-card {
  background: var(--crm-card-bg); border: 1px solid var(--crm-border); border-radius: var(--radius-md);
  padding: 10px 12px; font-size: 13px; cursor: grab;
}
.crm-opp-card:hover { box-shadow: 0 1px 4px rgba(15,23,42,0.08); }

/* Autocomplete */
.crm-suggest-item {
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--crm-border); font-size: 13px;
}
.crm-suggest-item:last-child { border-bottom: none; }
.crm-suggest-item:hover { background: var(--crm-raised-bg); }

/* Tag chips */
.crm-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 12px; background: var(--crm-raised-bg);
  color: var(--crm-text-secondary); font-size: 11.5px; font-weight: 500;
}
.crm-tag-remove {
  background: none; border: none; color: var(--crm-text-muted);
  cursor: pointer; padding: 0; font-size: 12px; line-height: 1;
}
.crm-tag-remove:hover { color: var(--crm-danger); }

.crm-checkbox { width: 15px; height: 15px; cursor: pointer; accent-color: var(--crm-primary); }

/* Row menu */
.crm-row-menu { position: relative; display: inline-block; }
.crm-row-menu-btn {
  background: none; border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 4px 8px; color: var(--crm-text-secondary); cursor: pointer;
}
.crm-row-menu-btn:hover { background: var(--crm-raised-bg); color: var(--crm-text); }
.crm-row-menu-dropdown {
  position: absolute; right: 0; top: 100%; z-index: 20;
  background: var(--crm-card-bg); border: 1px solid var(--crm-border);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  min-width: 180px; display: none; padding: 4px 0;
}
.crm-row-menu.open .crm-row-menu-dropdown { display: block; }
.crm-row-menu-dropdown a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 13px; color: var(--crm-text); text-decoration: none;
}
.crm-row-menu-dropdown a:hover { background: var(--crm-raised-bg); }
.crm-row-menu-dropdown a.text-danger { color: var(--crm-danger); }
.crm-row-menu-dropdown a.text-danger:hover { background: var(--crm-danger-bg); }

.crm-table th.sortable { cursor: pointer; user-select: none; }
.crm-table th.sortable:hover { color: var(--crm-text); }

/* Sidebar badge / icon alias for our PHP sidebar.phtml */
.crm-sidebar-badge {
  margin-left: auto; font-size: 11px; font-family: var(--crm-font-mono);
  color: var(--crm-sidebar-muted); background: rgba(255,255,255,0.04);
  padding: 1px 7px; border-radius: 10px;
}
.crm-sidebar-link .nav-icon { width: 16px; font-size: 16px; display: inline-flex; justify-content: center; }
.crm-sidebar-link .nav-label { transition: opacity .2s; }
.crm-sidebar-footer {
  margin-top: auto; padding: 12px 20px; font-size: 11px; color: var(--crm-sidebar-muted);
  border-top: 1px solid var(--crm-sidebar-border);
}

/* Topnav aliases used by navbar.phtml */
.crm-topnav-icon {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); color: var(--crm-sidebar-text); cursor: pointer; position: relative;
  background: transparent; border: none;
}
.crm-topnav-icon:hover { background: var(--crm-sidebar-hover); color: white; }
.crm-topnav-icon .badge-count {
  position: absolute; top: 4px; right: 4px;
  background: var(--crm-danger); color: white; font-size: 9px; font-weight: 600;
  padding: 1px 5px; border-radius: 10px; min-width: 16px; text-align: center;
}
.crm-topnav-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--crm-avatar-bg); color: white;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px;
  cursor: pointer;
}
.crm-account-switcher {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--crm-sidebar-border); border-radius: var(--radius-md);
  cursor: pointer; color: var(--crm-sidebar-text);
}
.crm-account-switcher:hover { background: var(--crm-sidebar-hover); }
.crm-account-switcher .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--crm-success); }
/* It is a <button> now, so it needs what a button does not inherit. */
.crm-account-switcher { font: inherit; font-size: 13px; text-decoration: none; }
/* With one workspace there is nowhere to go, so it stops pretending to be a
   control: no pointer, no hover, no chevron. */
.crm-account-switcher.is-static { cursor: default; }
.crm-account-switcher.is-static:hover { background: rgba(255,255,255,0.05); }
.crm-account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crm-ws-dropdown { left: 0; right: auto; min-width: 240px; max-height: 70vh; overflow: auto; padding: 6px; }
/* The rows are buttons, and the base rule was written for links: without the
   reset each one drew the browser's own grey button face inside a dark menu. */
.crm-ws-dropdown .crm-dropdown-item {
  width: 100%; justify-content: space-between; gap: 12px;
  border: 0; background: none; font: inherit; font-size: 13px;
  text-align: left; border-radius: var(--radius-sm);
}
.crm-ws-dropdown .crm-dropdown-item[aria-pressed="true"] { font-weight: 600; cursor: default; }
.crm-ws-dropdown .bi-check2 { color: var(--crm-primary-text); }
.crm-ws-dropdown .crm-dropdown-item--action { margin-top: 6px; border-radius: 0; }
/* The agency this already is: a row like the others, so the list answers
   "where am I" and "where else" in one shape. */
.crm-ws-dropdown .crm-dropdown-item.is-current {
  width: 100%; justify-content: space-between; gap: 12px;
  font-weight: 600; cursor: default;
}
.crm-ws-dropdown .crm-dropdown-item.is-current:hover { background: none; }
/* The lock says this one will ask for a password. --crm-text-muted is the tone
   for a hint beside a control, and this is the only thing distinguishing two
   rows that otherwise look identical. */
.crm-ws-dropdown .js-switch-agency .bi-shield-lock { color: var(--crm-text-secondary); font-size: 13px; }

/* Help text under a control. Written out here because it was an inline style
   repeated in every view that needed it, and --crm-text-muted is 2.56:1 on
   paper — correct on the slate bars and wrong as a sentence somebody reads. */
.crm-hint { font-size: 12px; line-height: 1.5; color: var(--crm-text-secondary); }

/* A dialog that asks one thing. 560px of modal around a single password field
   reads as a form with the fields missing. Doubled class because .crm-modal
   sets its width further down this file and would otherwise win on order. */
.crm-modal.crm-modal--sm { max-width: 440px; }

.crm-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.crm-dropdown-label {
  padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--crm-text-muted);
}

/* ── Global search and language, in the top bar ──────────────────────────── */
.crm-global-search {
  position: relative; display: flex; align-items: center;
  flex: 1 1 auto; min-width: 160px; max-width: 440px; margin: 0 16px 0 20px;
}
.crm-global-search > .bi-search { position: absolute; left: 11px; font-size: 13px; color: var(--crm-sidebar-muted); pointer-events: none; }
.crm-global-search input {
  width: 100%; height: 36px; padding: 0 60px 0 32px;
  background: rgba(255,255,255,.06); border: 1px solid var(--crm-sidebar-border); border-radius: var(--radius-md);
  color: #fff; font: inherit; font-size: 13px; outline: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.crm-global-search input::placeholder { color: var(--crm-sidebar-muted); }
.crm-global-search input:focus { background: rgba(255,255,255,.1); border-color: var(--crm-primary); box-shadow: 0 0 0 3px rgba(var(--crm-primary-rgb),.25); }
.crm-global-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.crm-global-search-kbd {
  position: absolute; right: 8px; padding: 1px 6px; pointer-events: none;
  border: 1px solid var(--crm-sidebar-border); border-radius: 4px; background: transparent;
  color: var(--crm-sidebar-muted); font-family: inherit; font-size: 11px; line-height: 1.5;
}
.crm-global-search:focus-within .crm-global-search-kbd { display: none; }
.crm-global-search-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 1030;
  width: max(100%, 420px); max-width: calc(100vw - 24px); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 6px; background: var(--crm-card-bg); border: 1px solid var(--crm-border);
  border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgba(15,23,42,.18);
}
.crm-global-search-panel[hidden] { display: none; }
.crm-gs-group + .crm-gs-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--crm-border); }
.crm-gs-group-label { display: flex; align-items: center; gap: 7px; padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--crm-text-secondary); }
.crm-gs-item, .crm-gs-all {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 7px 10px; border-radius: 6px; color: var(--crm-text); text-decoration: none;
}
.crm-gs-item:hover, .crm-gs-item.active, .crm-gs-all:hover, .crm-gs-all.active { background: var(--crm-raised-bg); color: var(--crm-text); }
.crm-gs-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.crm-gs-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--crm-text-secondary); }
.crm-gs-all {
  flex-direction: row; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--crm-border); border-radius: 0 0 6px 6px;
  font-size: 13px; font-weight: 500; color: var(--crm-primary-ink);
}
.crm-gs-all:hover, .crm-gs-all.active { color: var(--crm-primary-ink-hover); }
.crm-gs-empty { padding: 18px 12px; text-align: center; font-size: 13px; color: var(--crm-text-secondary); }
.crm-global-search-toggle { display: none; }

.crm-topnav-lang {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer;
  color: var(--crm-sidebar-text); font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
}
.crm-topnav-lang:hover { background: var(--crm-sidebar-hover); color: #fff; }
.crm-topnav-lang:focus-visible, .crm-global-search-toggle:focus-visible { outline: 2px solid var(--crm-primary); outline-offset: 2px; }
/* Doubled class: .crm-dropdown further down sets min-width 380px for the
   notification list, and a language menu that wide reads as broken. */
.crm-dropdown.crm-lang-dropdown { min-width: 0; width: 200px; padding: 4px 0; }
.crm-lang-dropdown .crm-dropdown-item { width: 100%; border: 0; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.crm-lang-dropdown .crm-dropdown-item[aria-pressed="true"] { font-weight: 600; }
.crm-lang-dropdown .bi-check2 { margin-left: auto; color: var(--crm-primary-ink); }

@media (max-width: 767.98px) {
  /* At phone width the right-hand icons were pushed off the screen. The
     workspace switch is also in the profile menu, and help can wait. */
  .crm-topnav { padding: 0 12px; }
  .crm-topnav .brand-sep, .crm-topnav .brand-label, .crm-topnav-help { display: none; }
  .crm-topnav .crm-account-switcher.ms-3 { display: none !important; }
  .crm-topnav-lang { padding: 0 8px; }
  .crm-topnav-lang .bi-translate { display: none; }
  .crm-global-search { margin: 0; }
  .crm-global-search:not(.is-open) { display: none; }
  .crm-global-search.is-open { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 60; max-width: none; }
  .crm-global-search.is-open input { background: var(--crm-sidebar-bg); }
  .crm-global-search-kbd { display: none; }
  .crm-global-search-toggle { display: inline-flex; }
  .crm-global-search-panel { width: 100%; }
}

/* ── Pipeline settings: stage editor ─────────────────────────────────────── */
.crm-stage-editor-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.crm-stage-editor-head .bi-trophy { color: var(--crm-success); }
.crm-stage-editor { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding: 0; }
.crm-stage-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--crm-border); border-radius: var(--radius-md); background: var(--crm-card-bg);
}
.crm-stage-row.sortable-ghost { opacity: .4; }
.crm-stage-grip { padding: 0 2px; color: var(--crm-text-secondary); cursor: grab; }
.crm-stage-color {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0; cursor: pointer;
  border: 1px solid var(--crm-border-strong); border-radius: 50%; background: none;
}
.crm-stage-color::-webkit-color-swatch-wrapper { padding: 0; }
.crm-stage-color::-webkit-color-swatch { border: 0; border-radius: 50%; }
.crm-stage-color::-moz-color-swatch { border: 0; border-radius: 50%; }
.crm-stage-color:focus-visible { outline: 2px solid var(--crm-primary); outline-offset: 2px; }
.crm-stage-name { flex: 1 1 160px; min-width: 0; }
.crm-stage-prob { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; color: var(--crm-text-secondary); }
.crm-stage-prob input { width: 66px; text-align: right; font-variant-numeric: tabular-nums; }
.crm-stage-final { visibility: hidden; color: var(--crm-success); }
.crm-stage-row.is-final .crm-stage-final { visibility: visible; }
.crm-stage-actions { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.crm-stage-actions .crm-card-menu-btn { margin-left: 0; }
.crm-stage-actions .crm-card-menu-btn:disabled { opacity: .35; cursor: default; }
.crm-stage-move {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 2px 0 2px 26px; font-size: 12.5px; color: var(--crm-danger-fg);
}
.crm-stage-move select { width: auto; max-width: 240px; padding: 4px 8px; }
.crm-stage-row.is-removing { border-color: var(--crm-danger-line); background: var(--crm-danger-soft); }
.crm-stage-row.is-removing .crm-stage-name { color: var(--crm-text-secondary); text-decoration: line-through; }
.crm-stage-danger { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--crm-danger-line); border-radius: var(--radius-md); background: var(--crm-danger-soft); font-size: 13px; color: var(--crm-danger-fg); }
.crm-stage-danger p { margin: 0 0 10px; }
.btn-crm-ghost.is-danger { color: var(--crm-danger); }
.btn-crm-ghost.is-danger:hover { background: var(--crm-danger-bg); color: var(--crm-danger-strong); }
/* A slot kept whether or not there is a count, so every name field lines up. */
.crm-stage-deals { display: inline-flex; justify-content: center; min-width: 28px; }
.crm-stage-danger .btn-crm-danger:focus-visible, .btn-crm-ghost.is-danger:focus-visible {
  outline: 2px solid var(--crm-danger); outline-offset: 2px;
}
@media (max-width: 575.98px) {
  /* Three buttons do not fit a phone's footer; delete takes its own line below. */
  .crm-pe-footer { flex-wrap: wrap; }
  .crm-pe-footer #peDelete { order: 3; flex-basis: 100%; margin-right: 0 !important; }
}

/* ── Leads by email ───────────────────────────────────────────────────────── */
.crm-leads-address { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 32px; margin-bottom: 16px; }
@media (max-width: 991.98px) { .crm-leads-address { grid-template-columns: 1fr; } }
.crm-leads-h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.crm-leads-address-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-leads-address-value {
  max-width: 100%; padding: 7px 10px; border: 1px solid var(--crm-border); border-radius: var(--radius-md);
  background: var(--crm-raised-bg); color: var(--crm-text); font-family: var(--crm-font-mono); font-size: 13px; overflow-wrap: anywhere;
}
.crm-leads-address-note { margin: 10px 0 0; max-width: 60ch; font-size: 12.5px; line-height: 1.5; color: var(--crm-text-secondary); }
.crm-leads-steps { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--crm-text-secondary); }
.crm-leads-steps li + li { margin-top: 6px; }
.crm-leads-confirm {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 14px 16px;
  border: 1px solid var(--crm-warning-line); border-radius: var(--radius-lg); background: var(--crm-warning-soft); color: var(--crm-warning-fg);
}
.crm-leads-confirm > i { font-size: 18px; color: var(--crm-warning-strong); }
.crm-leads-confirm p { margin: 2px 0 10px; font-size: 13px; }
.crm-leads-confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-leads-code {
  padding: 4px 10px; border: 1px solid #FDE68A; border-radius: 6px; background: #fff;
  color: var(--crm-warning-fg); font-family: var(--crm-font-mono); font-size: 15px; letter-spacing: .06em;
}
.crm-leads-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.crm-leads-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--crm-text-secondary); text-decoration: none;
}
.crm-leads-tab:hover { background: var(--crm-raised-bg); color: var(--crm-text); }
.crm-leads-tab.active { background: var(--crm-primary-ink); color: #fff; }
.crm-leads-tab .n { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .85; }
.crm-leads-list { list-style: none; margin: 0; padding: 0; }
.crm-leads-item { display: flex; align-items: flex-start; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--crm-border); }
.crm-leads-item:last-child { border-bottom: 0; }
.crm-leads-item:hover { background: var(--crm-raised-bg); }
.crm-leads-open {
  appearance: none; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 0; border: 0; background: none; font: inherit; color: var(--crm-text); text-align: left; cursor: pointer;
}
.crm-leads-open:focus-visible { outline: 2px solid var(--crm-primary); outline-offset: 4px; border-radius: 4px; }
.crm-leads-from { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13.5px; }
.crm-leads-from strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-leads-email { font-size: 12px; color: var(--crm-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-leads-subject { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-leads-snippet {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; color: var(--crm-text-secondary);
}
.crm-leads-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
  font-size: 12px; color: var(--crm-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.crm-leads-retention { margin: 10px 2px 0; font-size: 12px; color: var(--crm-text-secondary); }
.crm-leads-head { margin-bottom: 10px; font-size: 13px; line-height: 1.5; color: var(--crm-text-secondary); overflow-wrap: anywhere; }
.crm-leads-head strong { color: var(--crm-text); }
.crm-leads-body {
  max-height: 300px; overflow-y: auto; margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid var(--crm-border); border-radius: var(--radius-md); background: var(--crm-raised-bg);
  font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.crm-toast a { color: #7DD3FC; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 575.98px) {
  .crm-leads-item { flex-direction: column; gap: 6px; }
  .crm-leads-meta { flex-direction: row; align-items: center; }
}

/* ── Search results page ──────────────────────────────────────────────────── */
.crm-search-page-form { max-width: 560px; margin-bottom: 20px; }
.crm-search-page-hint { font-size: 13px; color: var(--crm-text-secondary); }
.crm-search-page-groups {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}
.crm-search-page-title {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 16px;
  border-bottom: 1px solid var(--crm-border); font-size: 14px; font-weight: 600;
}
.crm-search-page-title .crm-badge { margin-left: auto; }
.crm-search-page-list { list-style: none; margin: 0; padding: 4px; }
.crm-search-page-list a {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  padding: 8px 12px; border-radius: 6px; color: var(--crm-text); text-decoration: none;
}
.crm-search-page-list a:hover, .crm-search-page-list a:focus-visible { background: var(--crm-raised-bg); outline: none; }

/* Textarea + form group */
.crm-textarea {
  width: 100%; padding: 10px 12px; font-size: 13px; font-family: inherit;
  background: var(--crm-card-bg); border: 1px solid var(--crm-border); border-radius: var(--radius-md);
  color: var(--crm-text); outline: none; resize: vertical; line-height: 1.5;
}
.crm-textarea:focus { border-color: var(--crm-primary); box-shadow: 0 0 0 3px rgba(var(--crm-primary-rgb),0.12); }
.crm-form-group { margin-bottom: 16px; }

/* Auth pages */
.crm-auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--crm-body-bg); padding: 20px;
}
.crm-auth-card {
  width: 100%; max-width: 420px; background: var(--crm-card-bg);
  border: 1px solid var(--crm-border); border-radius: var(--radius-lg);
  padding: 40px; box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}
.crm-auth-logo { text-align: center; margin-bottom: 24px; }
/* An agency's own mark. White logos on a white card are a hole, so it sits on
   the same dark the navbar gives it. */
.crm-auth-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--crm-sidebar-bg); border-radius: var(--radius-md); padding: 10px 18px;
}
.crm-auth-chip img { max-height: 26px; max-width: 180px; object-fit: contain; }
/* The product's wordmark, as the landing page sets it (.lp-mark). */
.crm-auth-mark { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--crm-text); }
.crm-auth-mark span { color: var(--crm-primary-ink); }
.crm-auth-title { font-size: 22px; font-weight: 600; text-align: center; margin: 0 0 6px; }
.crm-auth-subtitle { font-size: 13px; color: var(--crm-text-secondary); text-align: center; margin: 0 0 28px; }
.crm-auth-footer { text-align: center; margin-top: 24px; font-size: 13px; color: var(--crm-text-secondary); }
.crm-auth-footer a { color: var(--crm-primary-text); text-decoration: none; }
.crm-auth-footer a:hover { text-decoration: underline; }

/* Skeleton shimmer */
.crm-skeleton {
  background: linear-gradient(90deg, var(--crm-raised-bg) 25%, var(--crm-skeleton) 50%, var(--crm-raised-bg) 75%);
  background-size: 200% 100%;
  animation: crm-skeleton-shine 1.4s infinite;
  border-radius: 4px;
}
@keyframes crm-skeleton-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Toast */
.crm-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 1080;
  background: var(--crm-toast-bg); color: white; padding: 10px 14px;
  border-radius: var(--radius-md); font-size: 13px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.2);
}

/* === Modern timeline (used in contacts/show and dashboard recent activity) === */
.crm-timeline-item {
  display: flex; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--crm-border);
}
.crm-timeline-item:last-child { border-bottom: none; }
.crm-timeline-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  background: var(--crm-raised-bg);
  color: var(--crm-text-secondary);
}
.crm-timeline-icon--email       { background: rgba(124,58,237,0.14);  color: #7C3AED; }
.crm-timeline-icon--sms         { background: rgba(14,165,233,0.14);  color: #0EA5E9; }
.crm-timeline-icon--call        { background: rgba(22,163,74,0.14);   color: #16A34A; }
.crm-timeline-icon--note        { background: rgba(217,119,6,0.14);   color: #D97706; }
.crm-timeline-icon--deal        { background: rgba(14,165,233,0.14);  color: #0EA5E9; }
.crm-timeline-icon--task        { background: rgba(139,92,246,0.14);  color: #8B5CF6; }
.crm-timeline-icon--appointment { background: rgba(22,163,74,0.14);   color: #16A34A; }
.crm-timeline-icon--form        { background: rgba(217,119,6,0.14);   color: #D97706; }
.crm-timeline-icon--tag         { background: rgba(236,72,153,0.14);  color: #EC4899; }
.crm-timeline-icon--system      { background: var(--crm-raised-bg);   color: var(--crm-text-secondary); }
.crm-timeline-icon--meeting     { background: rgba(3,105,161,0.12);   color: #0369A1; }
.crm-timeline-icon--whatsapp    { background: rgba(15,118,110,0.12);  color: #0F766E; }
.crm-timeline-icon--payment     { background: rgba(22,163,74,0.14);   color: #16A34A; }
.crm-timeline-body { flex: 1; min-width: 0; }
.crm-timeline-header {
  display: flex; align-items: baseline; gap: 8px;
  justify-content: space-between;
}
.crm-timeline-title { font-size: 13.5px; font-weight: 500; color: var(--crm-text); }
/* A time is read, not typed in a terminal: the text face with even digits,
   and a grey that holds on white (the muted token is 2.56:1). */
.crm-timeline-time {
  font-size: 12px; color: var(--crm-text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
}
.crm-timeline-text {
  font-size: 12.5px; color: var(--crm-text-secondary);
  margin-top: 3px; line-height: 1.5;
}

/* Sortable drag ghost (form fields reordering etc.) */
.field-ghost { opacity: 0.4; background: rgba(var(--crm-primary-rgb),0.1) !important; }

/* === Dropdown panels (notifications, user menu) === */
.crm-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 380px;
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 32px rgba(15,23,42,0.16);
  z-index: 1000;
  overflow: hidden;
}
.crm-notif-dropdown { width: 400px; }
.crm-dropdown-header {
  display: flex;
  align-items: center;
  /* The neighbouring .crm-dropdown-item has always had a gap; this one did not,
     so an avatar sat flush against the name and email beside it. */
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--crm-border);
  background: var(--crm-card-bg);
}
.crm-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--crm-text);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s;
}
.crm-dropdown-item:hover { background: var(--crm-raised-bg); color: var(--crm-text); }

/* A template in the composer's menu: the name takes the row, the cross sits at
   its end, and the last row is the one that saves a new one. */
.crm-dropdown-row { display: flex; align-items: center; }
.crm-dropdown-row .crm-dropdown-item {
  flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 13px;
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-dropdown-row .crm-chip-x { margin-right: 8px; }
.crm-dropdown-empty { padding: 10px 14px; font-size: 12.5px; color: var(--crm-text-muted); }
.crm-dropdown-item--action {
  width: 100%; border: 0; border-top: 1px solid var(--crm-border); background: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--crm-primary-text); text-align: left;
}
.crm-dropdown-item i { color: var(--crm-text-secondary); }
.crm-dropdown-divider { height: 1px; background: var(--crm-border); margin: 4px 0; }

/* Individual notification row */
.crm-notif-item {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 12px 16px 12px 22px;
  border-bottom: 1px solid var(--crm-border);
  cursor: pointer;
  transition: background .12s;
}
.crm-notif-item:last-child { border-bottom: none; }
.crm-notif-item:hover { background: var(--crm-raised-bg); }
.crm-notif-item.unread { background: rgba(var(--crm-primary-rgb),0.04); }
.crm-notif-unread-dot {
  position: absolute;
  left: 10px;
  top: 18px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--crm-primary);
}
.crm-notif-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

/* === FullCalendar overrides to match design === */
.fc {
  --fc-border-color: var(--crm-border);
  --fc-page-bg-color: var(--crm-card-bg);
  --fc-neutral-bg-color: var(--crm-raised-bg);
  --fc-today-bg-color: rgba(var(--crm-primary-rgb),0.06);
  --fc-event-bg-color: var(--crm-primary);
  --fc-event-border-color: var(--crm-primary);
  --fc-event-text-color: #fff;
  --fc-button-text-color: var(--crm-text);
  --fc-button-bg-color: var(--crm-card-bg);
  --fc-button-border-color: var(--crm-border);
  --fc-button-hover-bg-color: var(--crm-raised-bg);
  --fc-button-hover-border-color: var(--crm-border-strong);
  --fc-button-active-bg-color: var(--crm-primary);
  --fc-button-active-border-color: var(--crm-primary);
  font-family: var(--crm-font-sans);
}
.fc .fc-toolbar { padding: 16px; gap: 12px; flex-wrap: wrap; margin-bottom: 0 !important; }
.fc .fc-toolbar-title { font-size: 17px !important; font-weight: 600; }
.fc .fc-button {
  background: var(--crm-card-bg);
  color: var(--crm-text);
  border: 1px solid var(--crm-border);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  text-transform: capitalize;
  transition: background .12s, border-color .12s;
}
.fc .fc-button:hover { background: var(--crm-raised-bg); border-color: var(--crm-border-strong); color: var(--crm-text); }
.fc .fc-button:focus { box-shadow: 0 0 0 3px rgba(var(--crm-primary-rgb),0.15) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--crm-primary-ink) !important;
  border-color: var(--crm-primary-ink) !important;
  color: #fff !important;
}
.fc .fc-button-group > .fc-button { border-radius: 0; }
.fc .fc-button-group > .fc-button:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.fc .fc-button-group > .fc-button:last-child  { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.fc .fc-today-button { text-transform: capitalize; }

/* Column headers (Sun / Mon / Tue) */
.fc .fc-col-header-cell { background: var(--crm-raised-bg); padding: 8px 0; }
.fc .fc-col-header-cell-cushion {
  color: var(--crm-text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  padding: 6px 8px;
}
.fc a:hover .fc-col-header-cell-cushion { text-decoration: none; color: var(--crm-text); }

/* Day number */
.fc .fc-daygrid-day-top { justify-content: flex-start; padding: 4px 6px; }
.fc .fc-daygrid-day-number {
  color: var(--crm-text-secondary);
  font-size: 12px;
  font-family: var(--crm-font-mono);
  text-decoration: none !important;
  padding: 2px 4px;
  border-radius: 4px;
}
.fc .fc-daygrid-day-number:hover { color: var(--crm-text); background: var(--crm-raised-bg); }
.fc .fc-day-today { background: var(--fc-today-bg-color) !important; }
.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--crm-primary-ink);
  color: #fff;
  font-weight: 600;
}
.fc .fc-day-other .fc-daygrid-day-number { color: var(--crm-text-muted); opacity: 0.5; }

/* Events */
.fc .fc-event {
  border: none;
  border-left: 3px solid var(--crm-primary);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}
.fc .fc-event-title { font-weight: 500; }
.fc .fc-daygrid-event-dot { display: none; }
.fc .fc-h-event { background: rgba(var(--crm-primary-rgb),0.12); color: var(--crm-text); border-left-color: var(--crm-primary); }

/* Time grid (week / day view) */
.fc .fc-timegrid-slot { height: 40px; }
.fc .fc-timegrid-slot-label { font-size: 10.5px; color: var(--crm-text-muted); font-family: var(--crm-font-mono); }
.fc .fc-timegrid-axis { background: var(--crm-raised-bg); }
.fc .fc-scrollgrid { border-color: var(--crm-border); }
.fc .fc-scrollgrid td, .fc .fc-scrollgrid th { border-color: var(--crm-border); }
.fc .fc-now-indicator-line { border-color: var(--crm-danger); border-width: 2px; }
.fc .fc-now-indicator-arrow { border-color: var(--crm-danger); }

/* Modal */
.crm-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: crm-modal-fade .15s ease;
}
@keyframes crm-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.crm-modal {
  background: var(--crm-card-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(15,23,42,0.28);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: crm-modal-pop .18s ease;
}
@keyframes crm-modal-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.crm-modal-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--crm-border);
}
.crm-modal-header h5,
.crm-modal-title { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }
.crm-modal-close {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 14px;
  color: var(--crm-text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
}
.crm-modal-close:hover { background: var(--crm-raised-bg); color: var(--crm-text); }
.crm-modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.crm-modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--crm-border);
  background: var(--crm-raised-bg);
}

/* Settings layout */
.crm-settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.crm-settings-nav { display: flex; flex-direction: column; gap: 6px; }
.crm-settings-nav-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.crm-settings-nav-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--crm-text-muted); padding: 8px 12px 4px;
}
.crm-settings-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 13px; color: var(--crm-text-secondary);
  border-radius: var(--radius-md); cursor: pointer; text-decoration: none;
  transition: background .12s, color .12s;
}
.crm-settings-nav-item i { width: 16px; text-align: center; }
.crm-settings-nav-item:hover { background: var(--crm-raised-bg); color: var(--crm-text); }
.crm-settings-nav-item.active { background: rgba(var(--crm-primary-rgb),0.1); color: var(--crm-primary-text); font-weight: 500; }

.crm-settings-content { min-width: 0; }
.crm-settings-section { }
.crm-settings-title { font-size: 22px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.crm-settings-subtitle { font-size: 13px; color: var(--crm-text-secondary); margin: 0 0 24px; }

.crm-settings-card {
  background: var(--crm-card-bg);
  border: 1px solid var(--crm-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.crm-settings-card-header {
  padding: 14px 20px;
  font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--crm-border);
  background: var(--crm-raised-bg);
}
.crm-settings-card-body { padding: 20px; }
.crm-settings-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--crm-border);
  background: var(--crm-raised-bg);
  display: flex; justify-content: flex-end; gap: 8px;
}

@media (max-width: 767px) {
  .crm-settings-layout { grid-template-columns: 1fr; }
}

/* ── The sidebar, open and shut ─────────────────────────────────────────────
   app.js has toggled .collapsed and .sidebar-collapsed since the button was
   drawn, and this stylesheet answered neither: clicking it added two classes
   that styled nothing, which is why the button appeared to be dead.

   Two different behaviours, because they are two different problems. On a wide
   screen the bar narrows to a rail of icons and the page widens into the space.
   On a phone there is no space to give: the bar is a drawer that slides over
   the page and closes behind you. */
@media (min-width: 992px) {
  .crm-sidebar { transition: width .18s ease; }
  .crm-main    { transition: margin-left .18s ease; }

  .crm-sidebar.collapsed { width: var(--width-sidebar-collapsed); overflow-x: hidden; }
  .crm-main.sidebar-collapsed { margin-left: var(--width-sidebar-collapsed); }

  /* The label, the group heading, the count and the footer all go; the icon
     stays and centres. Every link already carries a title attribute, so the
     name is a hover away rather than gone. */
  .crm-sidebar.collapsed .crm-sidebar-group-label,
  .crm-sidebar.collapsed .nav-label,
  .crm-sidebar.collapsed .crm-sidebar-badge,
  .crm-sidebar.collapsed .crm-sidebar-footer { display: none; }
  .crm-sidebar.collapsed .crm-sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  .crm-sidebar.collapsed .crm-sidebar-group { padding-top: 10px; }
}

/* The drawer and what dims behind it. Hidden outright on a wide screen: it is
   not part of that layout and must not catch a click there. */
.crm-sidebar-scrim {
  position: fixed; inset: var(--height-topnav) 0 0 0; z-index: 39;
  background: rgba(15, 23, 42, .5);
  border: 0; padding: 0; width: 100%;
}
.crm-sidebar-scrim[hidden] { display: none; }
@media (min-width: 992px) { .crm-sidebar-scrim { display: none; } }

/* Responsive */
@media (max-width: 991px) {
  .crm-sidebar {
    width: var(--width-sidebar);
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .crm-sidebar.is-open { transform: none; box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .45); }
  /* Whatever the desktop state was, the page is full width here. */
  .crm-main, .crm-main.sidebar-collapsed { margin-left: 0; }
  /* The body does not scroll behind an open drawer. */
  body.has-drawer { overflow: hidden; }

  .crm-grid-3  { grid-template-columns: 1fr 1fr; }
  .crm-inbox-layout { grid-template-columns: 260px 1fr; }
  .crm-inbox-contact-panel { display: none; }
}
@media (max-width: 767px) {
  .crm-grid-4, .crm-grid-3, .crm-grid-2 { grid-template-columns: 1fr; }
  .crm-main { padding: 16px; }
  .crm-page-header { flex-direction: column; align-items: stretch; }
  .crm-inbox-layout { grid-template-columns: 1fr; }

  /* The four buttons of a page header add up to 487px, which is 97 more than
     a phone has. Stacking them was already half done — the header became a
     column — but the row of actions inside it never learned to wrap, so the
     last button hung off the right edge and took the page with it. */
  .crm-page-header > * { min-width: 0; }
  /* A badge is a word, not a bar: stretching it across the phone made the
     quote's status look like an alert. */
  .crm-page-header > .crm-badge { align-self: flex-start; }
  .crm-page-header .actions,
  .crm-page-header > .d-flex { flex-wrap: wrap; }

  /* A menu wider than the screen it hangs in. 380px was chosen for the
     notification panel and inherited by the language and theme menus, which
     hold three words each. */
  .crm-dropdown { min-width: 0; max-width: calc(100vw - 24px); }
  .crm-notif-dropdown { width: auto; max-width: calc(100vw - 24px); }

  /* A table on a phone scrolls sideways inside its card — which is what
     .table-responsive is for — and the card itself must not scroll the page. */
  .crm-card { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .crm-sidebar, .crm-main { transition: none; }
}


/* ============================================================================
   Classes the views have always used and the stylesheet never defined.

   75 of them, which is why the pipeline board, the message thread, the contact
   sidebar and the public pages rendered as unstyled stacks: the markup was
   written against a stylesheet that was only half written. Everything below is
   built from the existing tokens — no new palette, no new type scale.
   ========================================================================= */

/* ── Page headers ─────────────────────────────────────────────────────────── */
.crm-page-title { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.crm-page-subtitle { font-size: 13px; color: var(--crm-text-muted); margin: 2px 0 0; }
.crm-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.crm-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-top: 1px solid var(--crm-border);
}
.crm-pagination-info { font-size: 12.5px; color: var(--crm-text-muted); }
.crm-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--crm-border); border-radius: var(--radius-md);
  background: var(--crm-card-bg); color: var(--crm-text);
  font-size: 12.5px; text-decoration: none; transition: background .12s, border-color .12s;
}
.crm-page-btn:hover { background: var(--crm-raised-bg); border-color: var(--crm-text-muted); }
.crm-page-btn.active { background: var(--crm-primary-ink); border-color: var(--crm-primary-ink); color: #fff; }

/* ── Contact info rows ────────────────────────────────────────────────────── */
/* The icon belongs beside its label, not stacked above it. */
/* Tight inside a row, generous between rows — the label belongs to its value,
   not to the row above it. Without the separation every field ran together. */
.crm-info-row {
  display: grid; grid-template-columns: 16px 1fr; gap: 0 10px;
  align-items: start; padding: 9px 0;
}
.crm-info-row + .crm-info-row { border-top: 1px solid var(--crm-border); }
.crm-info-row > i { grid-row: 1 / span 2; }
.crm-info-icon { color: var(--crm-text-muted); font-size: 13px; line-height: 15px; }
.crm-info-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--crm-text-muted); line-height: 15px;
}
.crm-info-value {
  font-size: 13.5px; color: var(--crm-text); word-break: break-word;
  margin-top: 3px; line-height: 1.45;
}
/* A badge brings its own height; keep the row on the same rhythm as the rest. */
.crm-info-value .crm-badge { margin-top: 1px; }

/* ── Message thread ───────────────────────────────────────────────────────── */
.crm-thread-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--crm-border);
  background: var(--crm-card-bg); flex-wrap: wrap;
}
.crm-thread-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.crm-message { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.crm-message-in { align-self: flex-start; }
.crm-message-out { align-self: flex-end; flex-direction: row-reverse; }
.crm-message-bubble {
  padding: 10px 14px; border-radius: 14px;
  background: var(--crm-raised-bg); border: 1px solid var(--crm-border);
  font-size: 13.5px; line-height: 1.55;
}
.crm-message-out .crm-message-bubble {
  background: var(--crm-primary-ink); border-color: var(--crm-primary-ink); color: #fff;
}
.crm-message-subject { font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.crm-message-text, .crm-message-html { word-break: break-word; }
.crm-message-html img { max-width: 100%; height: auto; }
.crm-message-time { font-size: 11px; margin-top: 5px; opacity: .7; }
.crm-message-attachments { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.crm-attachment-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
  background: var(--crm-card-bg); border: 1px solid var(--crm-border);
  color: var(--crm-text); text-decoration: none;
}

/* A page about one record, told in a line under its name: the domain it writes
   from, how many people, what it has asked for, when it was last here. Cheaper
   to read than a row of metric cards, and it says nothing when there is nothing
   to say — the dot separators come from the markup's own order, so a fact that
   is absent leaves no gap behind it. */
.crm-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.crm-facts > * + *::before {
  content: '·'; color: var(--crm-border); margin-right: 10px;
}
.crm-facts > span { font-variant-numeric: tabular-nums; }

/* The count beside a card's title: what the section holds, said once, without a
   badge's weight. */
.crm-card-count {
  margin-left: auto; font-size: 12px; color: var(--crm-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* A card with nothing in it yet. One sentence, the section's own padding, and
   the same muted tone every other secondary line uses on paper. */
.crm-card-empty {
  margin: 0; padding: 0 20px 18px;
  font-size: 13px; line-height: 1.55; color: var(--crm-text-secondary);
}

/* The second line of a table row: who it belongs to, where it came from. */
.crm-row-sub { font-size: 11.5px; color: var(--crm-text-secondary); margin-top: 2px; }
.crm-row-when { font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* One line of somebody else's sentence. A request's own words lead its row, and
   a long one stops at the edge instead of wrapping the table open. */
.crm-clamp {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 52ch;
}

/* The details rail follows the reader down a long list of requests instead of
   scrolling away and leaving its half of the page blank. Only where there is
   room for two columns; stacked on a phone it is just the first card. */
@media (min-width: 992px) {
  .crm-rail-sticky { position: sticky; top: 16px; }
}

/* The line under a field that explains it. */
.crm-field-hint { font-size: 11.5px; color: var(--crm-text-secondary); margin-top: 4px; line-height: 1.45; }

/* Files waiting to go out with a reply: the same chip as a sent one, plus the
   way to change your mind about it. */
.crm-reply-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.crm-reply-files .crm-attachment-chip { padding-right: 4px; }
.crm-chip-x {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--crm-text-muted); font-size: 15px; line-height: 1;
  padding: 0 4px; border-radius: 999px;
}
.crm-chip-x:hover { color: var(--crm-danger); background: var(--crm-raised-bg); }

/* ── Reply box ────────────────────────────────────────────────────────────── */
.crm-reply-box { border-top: 1px solid var(--crm-border); background: var(--crm-card-bg); padding: 12px 20px 16px; }
.crm-reply-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.crm-reply-tab {
  appearance: none; border: 0; background: transparent; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-md);
  font-size: 12.5px; font-weight: 500; color: var(--crm-text-secondary); cursor: pointer;
  transition: background .12s, color .12s;
}
.crm-reply-tab:hover { background: var(--crm-raised-bg); color: var(--crm-text); }
.crm-reply-tab.active { background: var(--crm-raised-bg); color: var(--crm-primary-text); font-weight: 600; }
.crm-reply-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.crm-reply-panel textarea, .crm-reply-panel .crm-input { width: 100%; }
.crm-reply-panel .ql-container { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.crm-reply-panel .ql-toolbar { border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* ── Kanban board ─────────────────────────────────────────────────────────── */
.crm-kanban-wrap {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity;
}
.crm-kanban-col-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--crm-border);
}
.crm-kanban-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.crm-kanban-col-title { font-size: 13px; font-weight: 600; flex: 1; margin: 0; min-width: 0; }
/* Money is Inter with tabular figures. It was JetBrains Mono in the muted grey,
   which is 2.6:1 on white and spaced every figure as wide as a W, so an amount
   read as a row of loose digits sitting under the contact name. */
.crm-kanban-col-value { font-size: 12px; font-weight: 500; color: var(--crm-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-kanban-final { font-size: 12px; color: var(--crm-success); }
.crm-kanban-card {
  background: var(--crm-card-bg); border: 1px solid var(--crm-border);
  border-radius: var(--radius-md); padding: 12px 12px 9px; margin: 8px 10px;
  cursor: grab; transition: border-color .12s, box-shadow .12s;
}
.crm-kanban-card:hover { border-color: var(--crm-border-strong); box-shadow: 0 2px 8px rgba(15,23,42,.07); }
.crm-kanban-card:focus-within { border-color: var(--crm-primary); }
.crm-kanban-card.dragging { opacity: .5; cursor: grabbing; }
.crm-kanban-card.is-pinned { border-color: var(--crm-pin-line); }
.crm-kanban-card.is-won { background: var(--crm-won-bg); border-color: var(--crm-won-line); }
.crm-pin-mark { margin-right: 5px; font-size: 12px; color: var(--crm-primary-ink); }
.crm-kanban-card-title {
  appearance: none; display: block; width: 100%; margin: 0; padding: 0;
  border: 0; background: none; text-align: left; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--crm-text);
}
.crm-kanban-card-title:hover { color: var(--crm-primary-ink); }
.crm-kanban-card-title:focus-visible, .crm-card-menu-btn:focus-visible, .crm-table-link:focus-visible {
  outline: 2px solid var(--crm-primary); outline-offset: 2px; border-radius: 4px;
}
.crm-kanban-card-meta { font-size: 11.5px; color: var(--crm-text-secondary); }
.crm-kanban-contact { display: flex; align-items: center; gap: 6px; margin-top: 7px; min-width: 0; font-size: 12px; }
.crm-kanban-contact a {
  color: var(--crm-text-secondary); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-kanban-contact a:hover { color: var(--crm-primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.crm-kanban-value-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.crm-kanban-value { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--crm-text); }
.crm-kanban-card-footer {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--crm-border);
}
.crm-kanban-meta {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11.5px; color: var(--crm-text-secondary); font-variant-numeric: tabular-nums;
}
.is-overdue, .crm-kanban-meta.is-overdue { color: var(--crm-danger); }
.crm-kanban-actions { display: flex; align-items: center; gap: 4px; }
.crm-kanban-add-btn {
  appearance: none; width: calc(100% - 20px); margin: 0 10px 10px;
  border: 1px dashed var(--crm-border-strong); background: transparent;
  border-radius: var(--radius-md); padding: 7px; font-family: inherit;
  font-size: 12px; color: var(--crm-text-secondary); cursor: pointer; transition: border-color .12s, color .12s;
}
.crm-kanban-add-btn:hover { border-color: var(--crm-primary); color: var(--crm-primary-text); }
.crm-card-menu-btn {
  appearance: none; border: 0; background: transparent; margin-left: auto; padding: 3px 7px;
  color: var(--crm-text-secondary); cursor: pointer; font-size: 14px; line-height: 1; border-radius: 4px;
}
.crm-card-menu-btn:hover, .crm-card-menu-btn[aria-expanded="true"] { background: var(--crm-raised-bg); color: var(--crm-text); }
.crm-delta-neutral { color: var(--crm-text-muted); }

/* ── Reports ─────────────────────────────────────────────────────────────── */
/* A chart needs a height of its own: Chart.js sizes to its container, and a
   canvas in a flexible card grew and shrank with whatever sat beside it. */
.crm-report-chart { position: relative; height: 264px; }
.crm-report-donut { position: relative; height: 208px; max-width: 208px; margin: 0 auto; }
.crm-report-unit { font-size: 11.5px; font-weight: 500; color: var(--crm-text-secondary); }

.crm-stat-line { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--crm-border); }
.crm-stat-line:first-child { padding-top: 2px; }
.crm-stat-line:last-child { border-bottom: 0; padding-bottom: 2px; }
.crm-stat-icon {
  width: 34px; height: 34px; border-radius: var(--radius-md); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.crm-stat-value { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.crm-stat-label { font-size: 12.5px; color: var(--crm-text-secondary); }

/* Stages read across the page instead of down one narrow column: a workspace
   with two boards had fourteen of them stacked, a metre of scrolling beside a
   chart three hundred pixels tall. */
.crm-stage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 28px; }
.crm-stage-group {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 10px 0 0;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--crm-text-secondary);
}
.crm-stage-group:first-child { margin-top: 0; }
.crm-stage-group::after { content: ""; flex: 1; height: 1px; background: var(--crm-border); }
.crm-stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 12.5px; }
.crm-stage-amount { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-stage-track { height: 6px; border-radius: 3px; background: var(--crm-border); overflow: hidden; }
.crm-stage-fill { display: block; height: 100%; border-radius: 3px; }
.crm-stage-count { margin-top: 5px; font-size: 11.5px; color: var(--crm-text-secondary); font-variant-numeric: tabular-nums; }
/* An empty stage is still part of the board, so it stays — quieter. */
.crm-stage-cell.is-empty { opacity: .62; }

/* A disabled button looked exactly like an enabled one: "Send now" stayed
   bright blue on a workspace with no mail account and did nothing on click. */
.btn-crm-primary:disabled, .btn-crm-secondary:disabled,
.btn-crm-danger:disabled, .btn-crm-ghost:disabled {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* ── Campaign editor ─────────────────────────────────────────────────────── */
.crm-merge-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; color: var(--crm-text-secondary); }
.crm-merge-chip {
  appearance: none; border: 1px solid var(--crm-border); background: var(--crm-card-bg);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; color: var(--crm-text); cursor: pointer;
  transition: border-color .12s, color .12s;
}
.crm-merge-chip:hover { border-color: var(--crm-primary); color: var(--crm-primary-text); }
.crm-campaign-editor .ql-toolbar { border-radius: var(--radius-md) var(--radius-md) 0 0; border-color: var(--crm-border); }
.crm-campaign-editor .ql-container {
  min-height: 300px; border-radius: 0 0 var(--radius-md) var(--radius-md); border-color: var(--crm-border);
  font-family: inherit; font-size: 14.5px;
}
.crm-campaign-preview { display: block; width: 100%; height: 480px; border: 1px solid var(--crm-border); border-radius: var(--radius-md); background: #fff; }
.crm-campaign-preview[hidden] { display: none; }
.crm-sms-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--crm-text-secondary); font-variant-numeric: tabular-nums; }
.crm-audience-option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; margin: 0; font-size: 13.5px; }
.crm-audience-option + .crm-audience-option { border-top: 1px solid var(--crm-border); }
.crm-audience-option input[type="radio"] { margin-top: 3px; accent-color: var(--crm-primary-ink); }
.crm-audience-option label { cursor: pointer; }
.crm-tag-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.crm-tag-pick {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px;
  border: 1px solid var(--crm-border); border-radius: 999px; font-size: 12.5px; cursor: pointer; user-select: none;
}
.crm-tag-pick input { margin: 0; accent-color: var(--crm-primary-ink); }
.crm-tag-pick:has(input:checked) { border-color: var(--crm-primary); color: var(--crm-primary-ink); background: var(--crm-cyan-bg); }
.crm-audience-count { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.crm-campaign-alert { border: 1px solid var(--crm-danger-line); background: var(--crm-danger-soft); color: var(--crm-danger-fg); border-radius: var(--radius-md); padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.crm-campaign-alert .crm-link { color: var(--crm-danger-fg); text-decoration: underline; text-underline-offset: 2px; }
.crm-campaign-note { border: 1px solid var(--crm-border); background: var(--crm-raised-bg); border-radius: var(--radius-md); padding: 10px 12px; font-size: 12.5px; line-height: 1.45; color: var(--crm-text-secondary); }

/* ── Email builder ───────────────────────────────────────────────────────── */
/* Blocks, the email as it arrives, and the selected block, side by side. */
.crm-builder { display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.crm-builder[hidden] { display: none; }
@media (max-width: 1279px) {
  .crm-builder { grid-template-columns: 220px minmax(0, 1fr); }
  .crm-builder-inspector { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .crm-builder { grid-template-columns: 1fr; } }

.crm-builder-panel { border: 1px solid var(--crm-border); border-radius: var(--radius-md); background: var(--crm-card-bg); }
.crm-builder-panel-title {
  padding: 12px 12px 6px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--crm-text-secondary);
}
.crm-builder-panel-foot { padding: 4px 12px 12px; }
#designStyleBtn.is-active { background: var(--crm-cyan-bg); color: var(--crm-primary-ink); }

.crm-block-list { list-style: none; margin: 0; padding: 0 6px 8px; }
.crm-block-row {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 6px;
  border-radius: 6px; font-size: 13px; cursor: pointer; outline: none;
}
.crm-block-row:hover { background: var(--crm-raised-bg); }
.crm-block-row:focus-visible { box-shadow: 0 0 0 2px var(--crm-primary); }
.crm-block-row.is-selected { background: var(--crm-cyan-bg); color: var(--crm-primary-ink); }
.crm-block-grip { color: var(--crm-text-secondary); cursor: grab; }
.crm-block-icon { color: var(--crm-text-secondary); }
.crm-block-row.is-selected .crm-block-icon { color: var(--crm-primary-ink); }
.crm-block-label { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-block-sum { margin-left: 6px; font-weight: 400; color: var(--crm-text-secondary); }
.crm-block-row .crm-card-menu-btn { margin-left: 0; padding: 4px 5px; font-size: 12.5px; opacity: 0; }
.crm-block-row:hover .crm-card-menu-btn, .crm-block-row.is-selected .crm-card-menu-btn,
.crm-block-row .crm-card-menu-btn:focus-visible { opacity: 1; }
.crm-block-empty { padding: 8px 8px 4px; font-size: 12.5px; color: var(--crm-text-secondary); }
.crm-block-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 12px 10px; }
.crm-block-add {
  appearance: none; display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 8px;
  border: 1px dashed var(--crm-border-strong); border-radius: 6px; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--crm-text); text-align: left; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.crm-block-add:hover { border-color: var(--crm-primary); color: var(--crm-primary-text); }

.crm-builder-canvas {
  position: sticky; top: 76px; padding: 12px;
  background: var(--crm-raised-bg); border: 1px solid var(--crm-border); border-radius: var(--radius-md);
}
.crm-builder-canvas-bar { display: flex; justify-content: center; margin-bottom: 10px; }
.crm-builder-frame {
  display: block; width: 100%; height: 660px; margin: 0 auto;
  border: 0; border-radius: 6px; background: #fff; transition: width .2s ease-out;
}
.crm-builder-frame.is-mobile { width: 390px; max-width: 100%; box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 18px 40px -24px rgba(15,23,42,.35); }
@media (prefers-reduced-motion: reduce) { .crm-builder-frame { transition: none; } }

.crm-builder-inspector { padding: 14px; }
.crm-builder-inspector .crm-form-group { margin-bottom: 12px; }
.crm-inspector-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.crm-inspector-sub {
  margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--crm-border);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--crm-text-secondary);
}
.crm-inspector-sub:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
.crm-inspector-quill .ql-toolbar { border-radius: var(--radius-md) var(--radius-md) 0 0; border-color: var(--crm-border); }
.crm-inspector-quill .ql-container { min-height: 150px; border-radius: 0 0 var(--radius-md) var(--radius-md); border-color: var(--crm-border); font-family: inherit; font-size: 14px; }
.crm-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; cursor: pointer; }
.crm-check input { margin: 0; accent-color: var(--crm-primary-ink); }
.crm-color-field { display: flex; align-items: center; gap: 10px; }
.crm-color-field input[type="color"] {
  width: 40px; height: 34px; padding: 2px; border: 1px solid var(--crm-border);
  border-radius: 6px; background: #fff; cursor: pointer;
}
.crm-color-field input[type="color"]:disabled { opacity: .45; cursor: not-allowed; }
.crm-color-code { font-size: 12px; color: var(--crm-text-secondary); }
.crm-hint-warn { color: var(--crm-warning-strong); }
.crm-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 220px; margin-top: 8px; overflow-y: auto; }
.crm-media-grid[hidden] { display: none; }
.crm-media-thumb {
  appearance: none; aspect-ratio: 1; padding: 0; border: 1px solid var(--crm-border); border-radius: 6px;
  background: #fff center / cover no-repeat; cursor: pointer;
}
.crm-media-thumb:hover, .crm-media-thumb:focus-visible { border-color: var(--crm-primary); box-shadow: 0 0 0 2px var(--crm-cyan-bg); }

/* ── Email templates ─────────────────────────────────────────────────────── */
.crm-builder-template-actions { display: grid; gap: 6px; margin-top: 8px; }
.crm-template-modal { max-width: 1000px; width: calc(100% - 32px); }
.crm-template-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; }
@media (max-width: 767px) {
  .crm-template-body { grid-template-columns: 1fr; }
  .crm-template-preview { min-height: 360px; }
  .crm-template-frame { height: 360px; }
}
.crm-template-list {
  max-height: 560px; overflow-y: auto; padding-bottom: 8px;
  border: 1px solid var(--crm-border); border-radius: var(--radius-md);
}
.crm-template-row { display: flex; align-items: center; gap: 2px; margin: 0 6px; padding-right: 4px; border-radius: 6px; }
.crm-template-row:hover { background: var(--crm-raised-bg); }
.crm-template-row.is-selected { background: var(--crm-cyan-bg); }
.crm-template-row .crm-card-menu-btn { margin-left: 0; }
.crm-template-pick {
  appearance: none; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  padding: 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.crm-template-pick:focus-visible { outline: 2px solid var(--crm-primary); outline-offset: -2px; }
.crm-template-name { font-size: 13px; font-weight: 500; color: var(--crm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-template-row.is-selected .crm-template-name { color: var(--crm-primary-ink); }
.crm-template-sub { font-size: 12px; color: var(--crm-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-template-preview {
  position: relative; min-height: 560px;
  background: var(--crm-raised-bg); border: 1px solid var(--crm-border); border-radius: var(--radius-md);
}
.crm-template-frame { display: block; width: 100%; height: 560px; border: 0; border-radius: var(--radius-md); }
.crm-template-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; font-size: 13px; color: var(--crm-text-secondary); pointer-events: none;
}
.crm-template-hint[hidden] { display: none; }

/* ── Pipeline: stats, list, side panel, quick menu, forecast ─────────────── */
.crm-pipeline-header { flex-wrap: wrap; }
/* Centred only side by side: once the header stacks into a column, centring
   the cross axis pushed the title into the middle of a phone screen. */
@media (min-width: 768px) { .crm-pipeline-header { align-items: center; } }
.crm-pipeline-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-pipeline-stats { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: -6px 0 18px; font-size: 13px; color: var(--crm-text-secondary); }
.crm-pipeline-stats strong { margin-left: 8px; font-weight: 600; color: var(--crm-text); font-variant-numeric: tabular-nums; }
.crm-num, .crm-table .crm-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-nowrap { white-space: nowrap; }
.crm-table-link {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--crm-text); text-align: left;
}
.crm-table-link:hover { color: var(--crm-primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.crm-stage-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.crm-prob { display: flex; align-items: center; gap: 8px; min-width: 104px; }
.crm-prob-track { flex: 1; height: 4px; border-radius: 2px; background: var(--crm-border); overflow: hidden; }
.crm-prob-fill { display: block; height: 100%; border-radius: 2px; background: var(--crm-primary); }
.crm-prob-num { min-width: 36px; text-align: right; font-size: 12px; color: var(--crm-text-secondary); font-variant-numeric: tabular-nums; }
.crm-field-hint { margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: var(--crm-text-secondary); }

.crm-deal-scrim {
  position: fixed; inset: 0; z-index: 1040; background: rgba(15,23,42,.24);
  opacity: 0; visibility: hidden; transition: opacity .2s ease-out, visibility 0s linear .2s;
}
.crm-deal-scrim.open { opacity: 1; visibility: visible; transition: opacity .2s ease-out; }
.crm-deal-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1041;
  width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--crm-card-bg); border-left: 1px solid var(--crm-border);
  box-shadow: -16px 0 40px rgba(15,23,42,.12);
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s;
}
.crm-deal-panel.open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.crm-deal-panel:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .crm-deal-panel, .crm-deal-panel.open, .crm-deal-scrim, .crm-deal-scrim.open { transition: none; }
}
.crm-deal-panel-head {
  display: flex; align-items: center; gap: 10px; min-height: 56px;
  padding: 10px 14px 10px 22px; border-bottom: 1px solid var(--crm-border);
}
.crm-deal-panel-head .crm-modal-close { margin-left: auto; }
.crm-deal-panel-stage { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--crm-text-secondary); }
.crm-deal-panel-body { flex: 1; overflow-y: auto; padding: 22px 22px 28px; }
.crm-deal-panel-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.crm-deal-panel-value { margin-top: 16px; font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.crm-deal-panel-weighted { margin-top: 5px; font-size: 12.5px; color: var(--crm-text-secondary); font-variant-numeric: tabular-nums; }
.crm-deal-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.crm-deal-panel-actions .crm-deal-delete { color: var(--crm-danger); }
.crm-deal-panel-actions .crm-deal-delete:hover { background: var(--crm-danger-bg); color: var(--crm-danger-strong); }
.crm-icon-success { color: var(--crm-success); }
.crm-icon-danger { color: var(--crm-danger); }
.crm-deal-facts {
  display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: 12px 16px;
  margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--crm-border); font-size: 13px;
}
.crm-deal-facts dt { font-weight: 500; color: var(--crm-text-secondary); }
.crm-deal-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.crm-deal-facts-sub { margin-top: 2px; font-size: 12px; color: var(--crm-text-secondary); }
.crm-deal-notes { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--crm-border); }
.crm-deal-notes h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--crm-text-secondary); }
.crm-deal-notes p { margin: 0; max-width: 65ch; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }

.crm-pop-menu {
  position: fixed; z-index: 1060; min-width: 216px; padding: 4px;
  background: var(--crm-card-bg); border: 1px solid var(--crm-border); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(15,23,42,.14);
}
.crm-pop-menu > button, .crm-pop-menu > a {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--crm-text); text-align: left; text-decoration: none;
}
.crm-pop-menu > button:hover, .crm-pop-menu > a:hover,
.crm-pop-menu > button:focus-visible, .crm-pop-menu > a:focus-visible { background: var(--crm-raised-bg); outline: none; }
.crm-pop-menu i { width: 16px; text-align: center; color: var(--crm-text-secondary); }
.crm-pop-menu .is-danger, .crm-pop-menu .is-danger i { color: var(--crm-danger); }
.crm-pop-menu > .is-danger:hover, .crm-pop-menu > .is-danger:focus-visible { background: var(--crm-danger-bg); }
.crm-pop-menu hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--crm-border); opacity: 1; }
.crm-pop-menu[hidden], .crm-pop-menu [hidden] { display: none; }

.crm-funnel-head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 20px; padding: 18px 20px 14px;
}
.crm-funnel-title, .crm-forecast-title { margin: 0; font-size: 15px; font-weight: 600; }
.crm-funnel-total { font-size: 13px; color: var(--crm-text-secondary); }
.crm-funnel-total strong { margin-left: 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--crm-text); font-variant-numeric: tabular-nums; }
.crm-funnel-bar { display: flex; gap: 2px; height: 10px; margin: 0 20px 14px; border-radius: 999px; overflow: hidden; background: var(--crm-raised-bg); }
.crm-funnel-bar span { display: block; height: 100%; min-width: 4px; }
.crm-funnel-table th:first-child, .crm-funnel-table td:first-child { padding-left: 20px; }
.crm-funnel-table th:last-child, .crm-funnel-table td:last-child { padding-right: 20px; }
.crm-forecast-sub { margin: 4px 0 0; max-width: 70ch; font-size: 12.5px; color: var(--crm-text-secondary); text-wrap: pretty; }
.crm-forecast-chart { position: relative; height: 280px; }
.crm-forecast-empty { margin: 0; padding: 32px 0; text-align: center; font-size: 13px; color: var(--crm-text-secondary); }
.crm-forecast-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--crm-text-secondary); font-variant-numeric: tabular-nums; }

/* ── Appointments list ────────────────────────────────────────────────────── */
.crm-appt-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--crm-border); }
.crm-appt-item:last-child { border-bottom: 0; }
.crm-appt-bar { width: 4px; border-radius: 2px; flex-shrink: 0; background: var(--crm-primary); }
.crm-appt-content { flex: 1; min-width: 0; }
.crm-appt-title { font-size: 13px; font-weight: 500; }
.crm-appt-meta { font-size: 11.5px; color: var(--crm-text-muted); font-family: var(--crm-font-mono, monospace); }
.crm-appt-time { font-size: 12px; font-weight: 600; font-family: var(--crm-font-mono, monospace); }
.crm-appt-edit { appearance: none; border: 0; background: transparent; color: var(--crm-text-muted); cursor: pointer; }
.crm-appt-edit:hover { color: var(--crm-primary-text); }
.crm-color-swatch:hover { transform: scale(1.12); }
.crm-color-swatch.selected { border-color: var(--crm-text) !important; }

/* ── Contact detail tabs and cards ────────────────────────────────────────── */
/* ── Contact activity: write down what happened, then the history by day ──── */
.crm-card.crm-activity { padding: 0; overflow: hidden; }
.crm-activity-head { padding: 18px 24px 0; }
.crm-activity-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--crm-text); }

.crm-log { padding: 12px 24px 18px; border-bottom: 1px solid var(--crm-border); }
.crm-log-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
/* Each kind keeps the hue its entry wears in the history, one step darker so it
   holds as text on white. */
.crm-log-kind {
  --kind: var(--crm-text-secondary);
  appearance: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px;
  border: 1px solid var(--crm-border); border-radius: 999px;
  background: var(--crm-card-bg); color: var(--crm-text-secondary);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.crm-log-kind[data-kind="note"]     { --kind: #B45309; }
.crm-log-kind[data-kind="call"]     { --kind: #15803D; }
.crm-log-kind[data-kind="meeting"]  { --kind: #0369A1; }
.crm-log-kind[data-kind="whatsapp"] { --kind: #0F766E; }
.crm-log-kind i { color: var(--kind); font-size: 14px; }
.crm-log-kind:hover { color: var(--crm-text); border-color: color-mix(in srgb, var(--kind) 35%, var(--crm-border)); }
.crm-log-kind[aria-checked="true"] {
  color: var(--kind);
  border-color: color-mix(in srgb, var(--kind) 45%, transparent);
  background: color-mix(in srgb, var(--kind) 9%, var(--crm-card-bg));
}
.crm-log-kind:focus-visible { outline: 2px solid var(--crm-primary); outline-offset: 2px; }
.crm-log-input {
  display: block; width: 100%; min-height: 78px; resize: vertical;
  padding: 10px 12px; border: 1px solid var(--crm-border); border-radius: var(--radius-md);
  background: var(--crm-card-bg); color: var(--crm-text);
  font: inherit; font-size: 14px; line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.crm-log-input::placeholder { color: var(--crm-text-muted); }
.crm-log-input:focus { outline: none; border-color: var(--crm-primary); box-shadow: 0 0 0 3px rgba(var(--crm-primary-rgb),.18); }
.crm-log-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.crm-log-footnote { font-size: 12.5px; color: var(--crm-text-secondary); }
.crm-log-foot .btn-crm-primary { margin-left: auto; }

.crm-activity-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 16px 24px 0; }
.crm-activity-filters-label { margin-right: 4px; font-size: 12.5px; color: var(--crm-text-secondary); }
.crm-activity-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--crm-raised-bg); color: var(--crm-text-secondary);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.crm-activity-chip:hover { color: var(--crm-text); }
.crm-activity-chip.is-active { background: rgba(3,105,161,.08); border-color: rgba(3,105,161,.3); color: var(--crm-primary-ink); }
.crm-activity-chip:focus-visible { outline: 2px solid var(--crm-primary); outline-offset: 2px; }
.crm-activity-chip-count { font-weight: 400; font-variant-numeric: tabular-nums; }

.crm-activity-stream { padding: 4px 24px 20px; }
.crm-day-label { margin: 0; padding: 16px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--crm-text-secondary); }
.crm-day-items { list-style: none; margin: 0; padding: 0; }
.crm-entry {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 12px;
  padding: 8px 0 12px;
}
/* A rail from each icon to the next, so a day reads as one line down the page. */
.crm-entry:not(:last-child)::before {
  content: ''; position: absolute; left: 16.5px; top: 46px; bottom: -4px;
  width: 1px; background: var(--crm-border);
}
.crm-entry-body { min-width: 0; padding-top: 6px; }
.crm-entry-title { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--crm-text); }
.crm-entry-title strong { font-weight: 600; }
.crm-entry-by { color: var(--crm-text-secondary); }
.crm-entry-text {
  max-width: 72ch; margin-top: 3px;
  font-size: 14px; line-height: 1.55; color: var(--crm-text); overflow-wrap: anywhere;
}
.crm-entry-text.is-quiet { font-size: 13px; color: var(--crm-text-secondary); }
/* Two fixed columns, time then delete, so every time lines up whether or not
   its entry can be deleted. */
.crm-entry-meta { display: grid; grid-template-columns: auto 32px; align-items: center; align-self: start; padding-top: 3px; }
.crm-entry-meta time { grid-column: 1; text-align: right; }
.crm-entry-meta .crm-entry-delete { grid-column: 2; }
.crm-entry-meta time {
  font-size: 12.5px; line-height: 28px; color: var(--crm-text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.crm-entry-delete {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: 4px; border: 0; border-radius: 6px;
  background: transparent; color: var(--crm-text-secondary); font-size: 13px; cursor: pointer;
}
.crm-entry-delete:hover { background: rgba(220,38,38,.08); color: var(--crm-danger); }
.crm-entry-delete:focus-visible { outline: 2px solid var(--crm-primary); outline-offset: 0; }
/* With a pointer the delete waits for the row; on touch there is no hover to wait for. */
@media (hover: hover) {
  .crm-entry-delete { opacity: 0; transition: opacity .12s ease; }
  .crm-entry:hover .crm-entry-delete,
  .crm-entry-delete:focus-visible { opacity: 1; }
}
.crm-entry.is-new { animation: crm-entry-in .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes crm-entry-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .crm-entry.is-new { animation: none; } }
.crm-activity-none { margin: 0; padding: 24px 0; text-align: center; font-size: 13px; color: var(--crm-text-secondary); }

@media (max-width: 575px) {
  .crm-activity-head, .crm-log, .crm-activity-filters, .crm-activity-stream { padding-left: 16px; padding-right: 16px; }
  .crm-log-foot .btn-crm-primary { width: 100%; margin-left: 0; justify-content: center; }
  /* Eight chips wrapped into three rows and pushed the history off the screen:
     on a phone they are one row that slides. */
  .crm-activity-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .crm-activity-filters::-webkit-scrollbar { display: none; }
  .crm-activity-filters-label { display: none; }
  .crm-activity-chip { flex: 0 0 auto; }
  .crm-entry-meta { grid-template-columns: auto 28px; }
}

.crm-tab-panel { padding: 16px 20px; }

/* An empty tab should teach the panel, not reserve a void. Sized to its own
   content with a floor, rather than a fixed tall box that dominates the page
   in what is the common case for a new contact. */
.crm-tab-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 36px 24px; max-width: 42ch; margin: 0 auto;
}
.crm-tab-empty > i { font-size: 24px; color: var(--crm-border); }
.crm-tab-empty-title { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--crm-text); }
.crm-tab-empty-hint { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--crm-text-muted); }
.crm-tab-empty-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.crm-note-card {
  background: var(--crm-raised-bg); border: 1px solid var(--crm-border);
  border-radius: var(--radius-md); padding: 11px 13px; margin-bottom: 10px;
}
.crm-task-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--crm-border); font-size: 13px;
}
.crm-task-row:last-child { border-bottom: 0; }
.crm-email-row { padding: 11px 0; border-bottom: 1px solid var(--crm-border); font-size: 13px; }
.crm-email-row:last-child { border-bottom: 0; }
.crm-deal-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--crm-border);
  border-radius: var(--radius-md); font-size: 12.5px; margin-bottom: 6px;
  text-decoration: none; color: var(--crm-text);
}
.crm-deal-chip:hover { border-color: var(--crm-primary); }

/* ── SMS thread on the contact page ───────────────────────────────────────── */
.crm-sms-thread { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.crm-sms-bubble {
  align-self: flex-start; max-width: 80%;
  background: var(--crm-raised-bg); border: 1px solid var(--crm-border);
  border-radius: 14px; padding: 8px 12px;
}
.crm-sms-out { align-self: flex-end; background: var(--crm-primary-ink); border-color: var(--crm-primary-ink); color: #fff; }
.crm-sms-text { font-size: 13px; line-height: 1.5; word-break: break-word; }
.crm-sms-time { font-size: 10.5px; opacity: .7; margin-top: 3px; }
.crm-sms-compose { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }

/* ── Avatar sizes used by the inbox and pipeline ──────────────────────────── */
.crm-avatar-xs { width: 22px; height: 22px; font-size: 9px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; flex-shrink: 0; }
.crm-avatar-md { width: 40px; height: 40px; font-size: 13px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; flex-shrink: 0; }

/* ── Typeahead ────────────────────────────────────────────────────────────── */
/* The box is absolute against its anchor. Without one it was absolute against
   the modal's fixed backdrop, and left:0 right:0 stretched it across the whole
   window. */
.crm-suggest-anchor { position: relative; }
.crm-suggest-box {
  position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
  background: var(--crm-card-bg); border: 1px solid var(--crm-border);
  border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(15,23,42,.10);
  max-height: 240px; overflow-y: auto; margin-top: 4px;
}
.crm-suggest-box[hidden] { display: none; }
.crm-suggest-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.crm-suggest-item:hover, .crm-suggest-item.active { background: var(--crm-raised-bg); }
.crm-suggest-name { font-weight: 500; color: var(--crm-text); }
.crm-suggest-sub { font-size: 11.5px; color: var(--crm-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-suggest-empty { padding: 10px 12px; font-size: 12.5px; color: var(--crm-text-secondary); }

/* ── Bulk bar, import, misc ───────────────────────────────────────────────── */
.crm-bulk-count { font-size: 13px; font-weight: 600; }
.crm-import-drop {
  border: 2px dashed var(--crm-border); border-radius: var(--radius-lg);
  padding: 28px 20px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s;
}
.crm-import-drop:hover, .crm-import-drop.dragover { border-color: var(--crm-primary); background: var(--crm-raised-bg); }
.crm-metric-hint { color: var(--crm-text-muted); margin-left: 4px; font-family: inherit; }
.crm-modal-sm { max-width: 420px; }
.crm-form-card { height: 100%; display: flex; flex-direction: column; }
.crm-toggle { appearance: none; width: 38px; height: 21px; border-radius: 999px;
  background: var(--crm-border); position: relative; cursor: pointer; transition: background .15s; border: 0; }
.crm-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .15s; }
.crm-toggle:checked { background: var(--crm-success); }
.crm-toggle:checked::after { transform: translateX(17px); }
.crm-type-card { cursor: pointer; }
.crm-type-card-inner {
  border: 1px solid var(--crm-border); border-radius: var(--radius-md);
  padding: 14px 10px; text-align: center; transition: border-color .12s, background .12s;
}
.crm-type-card input:checked + .crm-type-card-inner,
.crm-type-card-inner:hover { border-color: var(--crm-primary); background: var(--crm-raised-bg); }

/* ── Public pages (forms, thanks, landing) ────────────────────────────────── */
.crm-public-card {
  width: 100%; max-width: 560px; margin: 0 auto;
  background: var(--crm-card-bg); border: 1px solid var(--crm-border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 4px 24px rgba(15,23,42,.04);
}
.crm-public-header { padding: 28px 32px 20px; border-bottom: 1px solid var(--crm-border); }
.crm-public-header h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
.crm-public-header p { margin: 0; font-size: 13.5px; color: var(--crm-text-secondary); }
.crm-public-body { padding: 24px 32px 28px; }
.crm-public-footer {
  padding: 14px 32px; font-size: 11.5px; color: var(--crm-text-muted);
  text-align: center; border-top: 1px solid var(--crm-border); background: var(--crm-raised-bg);
}

@media (max-width: 640px) {
  .crm-message { max-width: 92%; }
  .crm-public-header, .crm-public-body { padding-left: 20px; padding-right: 20px; }
  .crm-thread-messages { padding: 14px; }
}

/* ── Workflow step editor ─────────────────────────────────────────────────── */
/* A sequence, not a canvas: the things people build here are wait, write, tag,
   hand off, and those read better as a list than as a node graph. */

.crm-wf-step {
  border: 1px solid var(--crm-border);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  background: var(--crm-card-bg);
}
.crm-wf-step + .crm-wf-step { position: relative; }
/* The connector is what makes a list read as a sequence. */
.crm-wf-step + .crm-wf-step::before {
  content: ''; position: absolute; left: 34px; top: -11px;
  width: 1px; height: 10px; background: var(--crm-border-strong);
}

.crm-wf-step-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--crm-border);
  background: var(--crm-raised-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.crm-wf-step-icon {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 14px;
}
.crm-wf-step-head b { font-size: 13.5px; font-weight: 600; }
.crm-wf-step-n {
  font-size: 11px; font-weight: 700; color: var(--crm-text-muted);
  background: var(--crm-card-bg); border: 1px solid var(--crm-border);
  border-radius: 20px; padding: 1px 8px;
}
.crm-wf-step-actions { margin-left: auto; display: flex; gap: 2px; }
.crm-wf-step-actions button:disabled { opacity: .3; cursor: default; }

.crm-wf-step-body { padding: 14px; }
.crm-wf-step-body .crm-label { margin-bottom: 4px; }

.crm-wf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-wf-row label { font-size: 13px; color: var(--crm-text-secondary); margin: 0; }
.crm-wf-row .crm-input { width: 88px; }

.crm-wf-add {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed var(--crm-border-strong);
}
.crm-wf-add-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--radius-md);
  border: 1px solid var(--crm-border); background: var(--crm-card-bg);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--crm-text);
}
.crm-wf-add-btn:hover { background: var(--crm-raised-bg); border-color: var(--crm-border-strong); }
.crm-wf-add-btn i { font-size: 14px; }

.crm-wf-empty {
  text-align: center; padding: 30px 20px;
  color: var(--crm-text-muted);
}
.crm-wf-empty i { font-size: 28px; display: block; margin-bottom: 10px; }

@media (max-width: 620px) {
  .crm-wf-add-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* -- Dark theme: the few things a token cannot say -------------------------
   Eight hues are chosen to read on white — a deep sky, a forest green — and
   they vanish on a dark card. They are the colour of a kind of event, not a
   surface, so they are lifted here rather than given tokens of their own. */
:root[data-theme="dark"] .crm-timeline-icon--meeting,
:root[data-theme="dark"] .crm-timeline-icon--sms,
:root[data-theme="dark"] .crm-timeline-icon--deal { color: #38BDF8; }
:root[data-theme="dark"] .crm-timeline-icon--whatsapp { color: #2DD4BF; }
:root[data-theme="dark"] .crm-timeline-icon--call,
:root[data-theme="dark"] .crm-timeline-icon--appointment,
:root[data-theme="dark"] .crm-timeline-icon--payment { color: #4ADE80; }
:root[data-theme="dark"] .crm-timeline-icon--email,
:root[data-theme="dark"] .crm-timeline-icon--task { color: #A78BFA; }
:root[data-theme="dark"] .crm-timeline-icon--note,
:root[data-theme="dark"] .crm-timeline-icon--form { color: #FBBF24; }
:root[data-theme="dark"] .crm-log-kind[data-kind="note"]     { --kind: #FBBF24; }
:root[data-theme="dark"] .crm-log-kind[data-kind="call"]     { --kind: #4ADE80; }
:root[data-theme="dark"] .crm-log-kind[data-kind="meeting"]  { --kind: #38BDF8; }
:root[data-theme="dark"] .crm-log-kind[data-kind="whatsapp"] { --kind: #2DD4BF; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .crm-timeline-icon--meeting,
  :root:not([data-theme="light"]) .crm-timeline-icon--sms,
  :root:not([data-theme="light"]) .crm-timeline-icon--deal { color: #38BDF8; }
  :root:not([data-theme="light"]) .crm-timeline-icon--whatsapp { color: #2DD4BF; }
  :root:not([data-theme="light"]) .crm-timeline-icon--call,
  :root:not([data-theme="light"]) .crm-timeline-icon--appointment,
  :root:not([data-theme="light"]) .crm-timeline-icon--payment { color: #4ADE80; }
  :root:not([data-theme="light"]) .crm-timeline-icon--email,
  :root:not([data-theme="light"]) .crm-timeline-icon--task { color: #A78BFA; }
  :root:not([data-theme="light"]) .crm-timeline-icon--note,
  :root:not([data-theme="light"]) .crm-timeline-icon--form { color: #FBBF24; }
  :root:not([data-theme="light"]) .crm-log-kind[data-kind="note"]     { --kind: #FBBF24; }
  :root:not([data-theme="light"]) .crm-log-kind[data-kind="call"]     { --kind: #4ADE80; }
  :root:not([data-theme="light"]) .crm-log-kind[data-kind="meeting"]  { --kind: #38BDF8; }
  :root:not([data-theme="light"]) .crm-log-kind[data-kind="whatsapp"] { --kind: #2DD4BF; }
}


/* Bootstrap's text utilities, on the product's own tokens. They are written
   for a white page — .text-muted is near-black at 75% — and the views use them
   for what this stylesheet already names. */
/* --crm-text-secondary, not --crm-text-muted: the views use .text-muted for an
   email address and a date, which are read, not skimmed. The muted token is
   2.5:1 on white — fine for an 11px label, not for a column of a table. */
.text-muted { color: var(--crm-text-secondary) !important; }
.text-secondary { color: var(--crm-text-secondary) !important; }
.text-body { color: var(--crm-text) !important; }
.bg-white, .bg-body { background-color: var(--crm-card-bg) !important; }
.bg-light { background-color: var(--crm-raised-bg) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--crm-border) !important; }

/* Bootstrap, which the CRM loads for its modals and dropdowns, paints its own
   white. Under a dark theme those are the surfaces that would stay white in
   the middle of a dark page. */
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  background: var(--crm-card-bg); color: var(--crm-text); border-color: var(--crm-border);
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--crm-text-muted); }
:root[data-theme="dark"] .table { --bs-table-bg: transparent; color: var(--crm-text); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal-content,
  :root:not([data-theme="light"]) .dropdown-menu,
  :root:not([data-theme="light"]) .list-group-item,
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .form-control,
  :root:not([data-theme="light"]) .form-select {
    background: var(--crm-card-bg); color: var(--crm-text); border-color: var(--crm-border);
  }
  :root:not([data-theme="light"]) .form-control::placeholder { color: var(--crm-text-muted); }
  :root:not([data-theme="light"]) .table { --bs-table-bg: transparent; color: var(--crm-text); }
}

/* ── Who opened, who clicked ─────────────────────────────────────────────── */
.crm-engagement { border-top: 1px solid var(--crm-border); padding-top: 12px; }
.crm-engagement-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--crm-text-secondary);
}
.crm-engagement-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crm-engagement-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;
  align-items: baseline; font-size: 13px;
}
.crm-engagement-list time { font-size: 11.5px; color: var(--crm-text-muted); white-space: nowrap; }
.crm-engagement-url {
  grid-column: 1 / -1; font-size: 11.5px; color: var(--crm-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Tasks ───────────────────────────────────────────────────────────────── */
/* A row is a tick, what to do, and when. The contact and the owner are the
   second line because the question this screen answers is "what now", and a
   name does not answer it. */
/* The group header. Aligned to the same 20px the rows use — it used to sit on
   the card border while the titles started 47px in, which read as two columns
   that had drifted. The red is on the word «overdue» and on the date that has
   passed; putting it on the icon and the count as well turned a list into a
   warning. */
.crm-task-group {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 20px 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--crm-text-secondary);
  border-top: 1px solid var(--crm-border);
}
.crm-task-group:first-child { border-top: 0; }
.crm-task-group.is-late { color: var(--crm-danger-fg); }
.crm-task-group-count { font-weight: 500; color: var(--crm-text-muted); }

.crm-task-list { list-style: none; margin: 0; padding: 0; }
.crm-task-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px;
  padding: 12px 20px; border-top: 1px solid var(--crm-border);
}
.crm-task-list > .crm-task-item:first-child { border-top: 0; }
.crm-task-item:hover { background: var(--crm-raised-bg); }
.crm-task-title { font-size: 13.5px; font-weight: 500; }
.crm-task-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin-top: 2px; font-size: 12px; color: var(--crm-text-secondary);
}
.crm-task-when { font-size: 12px; color: var(--crm-text-muted); white-space: nowrap; }
.crm-task-when.is-late { color: var(--crm-danger-fg); font-weight: 600; }

/* The bin shows up when the row does. On a list of twenty it was twenty
   invitations to delete something, all of them louder than the task. Only
   where there is a pointer to hover with: on a phone it has to stay. */
@media (hover: hover) {
  .crm-task-item .btn-crm-icon { opacity: 0; transition: opacity .12s; }
  .crm-task-item:hover .btn-crm-icon,
  .crm-task-item:focus-within .btn-crm-icon { opacity: 1; }
}

/* Done stays on the screen until the page is left: a row that vanishes under
   the cursor takes away the chance to notice it was the wrong one. */
.crm-task-item.is-done .crm-task-title { text-decoration: line-through; opacity: .55; }
.crm-task-item.is-done .crm-task-meta,
.crm-task-item.is-done .crm-task-when { opacity: .55; }

@media (max-width: 575.98px) {
  .crm-task-item { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; }
  .crm-task-when { grid-column: 2 / 3; }
  .crm-task-item .btn-crm-icon { grid-row: 1; grid-column: 3; }
}

/* ── Quotes: the editor ──────────────────────────────────────────────────── */
/* Laid out as the document it becomes. The first version put the title in a
   side panel and opened on a table of zeros; this puts the title where a title
   goes and keeps the rail for things you do TO the quote. */
.crm-quote-editor { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.crm-quote-doc { min-width: 0; max-width: 860px; }
.crm-quote-editor.is-alone { grid-template-columns: minmax(0, 1fr); }

.crm-quote-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--crm-border); }
.crm-quote-title {
  width: 100%; border: 0; background: none; padding: 0;
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--crm-text);
  font-family: inherit;
}
.crm-quote-title:focus { outline: none; }
.crm-quote-title::placeholder { color: var(--crm-text-muted); font-weight: 500; }

/* The example, under the field. Inside it — in document type, with no box —
   a placeholder reads as a value: the first question about this screen was why
   the quote already said «1,000 litres of nitric acid». It fades once there is
   a real title. */
.crm-quote-title-hint { font-size: 12px; color: var(--crm-text-muted); margin: 6px 0 0; }
.crm-quote-title:not(:placeholder-shown) ~ .crm-quote-title-hint { display: none; }

.crm-quote-meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 14px; }
.crm-quote-meta-field { display: flex; flex-direction: column; gap: 4px; }
.crm-quote-meta-field > span:first-child {
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--crm-text-secondary);
}

/* A date somebody can tap instead of type. */
.crm-chip {
  appearance: none; border: 1px solid var(--crm-border); background: var(--crm-card-bg);
  color: var(--crm-text-secondary); border-radius: 999px; padding: 3px 10px;
  font: inherit; font-size: 12px; cursor: pointer;
}
.crm-chip:hover { border-color: var(--crm-primary); color: var(--crm-primary-text); }

.crm-quote-lines { margin: 0; }
.crm-quote-lines th { font-size: 11.5px; }
.crm-quote-lines td { padding: 8px 12px; vertical-align: middle; }
.crm-quote-lines td:first-child { padding-left: 20px; }
.crm-quote-lines th:first-child { padding-left: 20px; }
.crm-quote-lines .crm-input { padding: 6px 10px; font-size: 13px; }
.crm-quote-lines .crm-num.crm-input { text-align: right; }
.crm-quote-lines .js-amount { color: var(--crm-text); font-variant-numeric: tabular-nums; }

/* The bin shows up with the pointer, like the one on a task row: a column of
   them is a column of invitations to delete, each louder than the line it sits
   beside. */
@media (hover: hover) {
  .crm-quote-line .btn-crm-icon { opacity: 0; transition: opacity .12s; }
  .crm-quote-line:hover .btn-crm-icon,
  .crm-quote-line:focus-within .btn-crm-icon { opacity: 1; }
}

.crm-quote-addbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 20px 14px;
}

/* The money as a column of figures. Before, the labels sat against one wall and
   the numbers against the other, and on a wide screen the gap between them was
   half the card. */
.crm-quote-totals {
  display: flex; justify-content: flex-end;
  padding: 16px 20px; border-top: 1px solid var(--crm-border);
  background: var(--crm-raised-bg);
}
.crm-quote-sum { width: 100%; max-width: 320px; font-size: 13.5px; }
.crm-quote-sum > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 0; }
.crm-quote-sum > div > span { color: var(--crm-text-secondary); display: flex; align-items: center; gap: 6px; }
.crm-quote-sum strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.crm-quote-totals.is-empty strong { color: var(--crm-text-muted); font-weight: 500; }

.crm-quote-tax {
  width: 56px; padding: 2px 6px; font-size: 12.5px; text-align: right;
  border: 1px solid var(--crm-border); border-radius: var(--radius-sm);
  background: var(--crm-card-bg); color: var(--crm-text); font-family: inherit;
}
/* Percent or pesos. Two buttons rather than a select: there are two answers,
   and a dropdown for two answers hides them both behind a click. */
.crm-quote-unit { display: inline-flex; border: 1px solid var(--crm-border); border-radius: var(--radius-sm); overflow: hidden; }
.crm-quote-unit button {
  appearance: none; border: 0; background: var(--crm-card-bg); color: var(--crm-text-secondary);
  font: inherit; font-size: 12px; line-height: 1; padding: 4px 8px; cursor: pointer;
}
.crm-quote-unit button + button { border-left: 1px solid var(--crm-border); }
.crm-quote-unit button.is-on { background: var(--crm-primary-ink); color: #fff; }

/* A discount of zero is not news. The row stays, because somebody has to be
   able to type one, but it stops asking to be read. */
.crm-quote-discount.is-off > strong { color: var(--crm-text-muted); font-weight: 500; }

.crm-quote-grand {
  margin-top: 8px; padding-top: 10px !important; border-top: 1px solid var(--crm-border-strong);
}
.crm-quote-grand-value { display: flex; align-items: baseline; gap: 6px; color: var(--crm-text) !important; }
.crm-quote-grand strong { font-size: 20px; }
.crm-quote-grand em { font-style: normal; color: var(--crm-text-muted); font-size: 12px; }

/* The rail: only what you do to the quote, so nothing in it moves when the
   document grows. */
.crm-quote-rail { position: sticky; top: calc(var(--height-topnav) + 24px); }
.crm-quote-link { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--crm-border); }
.crm-quote-link .crm-input { font-size: 12px; }
.crm-quote-rail-note { font-size: 11.5px; color: var(--crm-text-muted); margin: 8px 0 0; line-height: 1.5; }

@media (max-width: 991px) {
  .crm-quote-editor { grid-template-columns: 1fr; }
  .crm-quote-rail { position: static; }
  .crm-quote-doc { max-width: none; }
}

/* The customer's page. Wider than the other public cards, because a table of
   line items at 560px wraps into something nobody wants to read. */
.crm-quote-public-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.crm-quote-public-table th {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--crm-border);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--crm-text-secondary);
}
.crm-quote-public-table td { padding: 10px; border-bottom: 1px solid var(--crm-border); }
.crm-quote-public-table tfoot td { border-bottom: 0; padding: 6px 10px; color: var(--crm-text-secondary); }
.crm-quote-public-total td { padding-top: 12px; font-size: 16px; font-weight: 700; color: var(--crm-text); }

.crm-quote-prose { margin-top: 24px; }
.crm-quote-prose h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--crm-text-secondary); margin: 0 0 6px; }
.crm-quote-prose p { margin: 0; font-size: 13.5px; line-height: 1.6; }

.crm-quote-decide { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--crm-border); }
.crm-quote-ask { font-size: 15px; font-weight: 600; margin: 0 0 12px; }

.crm-quote-verdict {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: 14px;
}
.crm-quote-verdict .bi { font-size: 20px; }
.crm-quote-verdict.is-yes { background: var(--crm-success-bg); color: var(--crm-success-fg); }
.crm-quote-verdict.is-no  { background: var(--crm-neutral-bg); color: var(--crm-neutral-fg); }

/* Somebody will print it, and what they want on paper is the quote — not the
   buttons that ask them to answer it. */
@media print {
  .crm-quote-decide, .crm-public-footer, .crm-lang-switch { display: none !important; }
  .crm-public-card { border: 0; box-shadow: none; max-width: none; }
  body { padding: 0; }
}

@media (max-width: 575.98px) {
  .crm-quote-lines td { padding: 6px; }
  .crm-quote-totals > div { justify-content: space-between; }
}