/* Agency75 CRM Utilities — things Tailwind Play CDN can't easily express */ /* Swipe row (mobile horizontal scroll, desktop grid) */ .swipe-row { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; } .swipe-row > * { scroll-snap-align: start; } .swipe-row::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { .swipe-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; gap: 1.25rem; overflow: visible; } .swipe-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Safe area bottom padding */ .safe-bottom { padding-bottom: env(safe-area-inset-bottom); } /* Sidebar nav active bar */ .nav-active { position: relative; } .nav-active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: oklch(0.72 0.21 35); border-radius: 0 3px 3px 0; } /* Lovable-style active marker dot */ .nav-active::after { content: ''; position: absolute; right: 0.625rem; top: 50%; width: 0.375rem; height: 0.375rem; margin-top: -0.1875rem; border-radius: 9999px; background: oklch(0.64 0.17 152); box-shadow: 0 0 0 1px oklch(0.22 0.02 30 / 0.45); } /* Sidebar scrollbar */ .sidebar-scroll::-webkit-scrollbar { width: 6px; } .sidebar-scroll::-webkit-scrollbar-thumb { background: oklch(0.3 0.03 30); border-radius: 3px; } /* Lucide default sizing */ [data-lucide] { width: 1em; height: 1em; } /* Avatar gradient */ .avatar-grad { background: linear-gradient(135deg, oklch(0.72 0.21 35), oklch(0.74 0.18 50)); } /* Flash message (Tailwind-styled) */ .a75crm-flash { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 0.625rem; font-size: 0.875rem; margin-bottom: 1rem; } .a75crm-flash-success { background: oklch(0.95 0.06 152); color: oklch(0.40 0.13 142); } .a75crm-flash-error { background: oklch(0.96 0.04 25); color: oklch(0.6 0.22 27); } .a75crm-flash-warning { background: oklch(0.965 0.05 75); color: oklch(0.45 0.15 70); } .a75crm-flash-info { background: oklch(0.955 0.045 30); color: oklch(0.66 0.23 28); } /* Dark theme (class a75crm-dark on ; toggled from topbar, persisted in localStorage) */ html.a75crm-dark { color-scheme: dark; } html.a75crm-dark body.a75crm-lovable-shell { background-color: oklch(0.16 0.02 30) !important; color: oklch(0.93 0.01 50) !important; } html.a75crm-dark #topbar { background-color: oklch(0.2 0.02 28 / 0.92) !important; border-color: oklch(0.32 0.02 30) !important; } html.a75crm-dark #content .max-w-7xl .rounded-2xl, html.a75crm-dark #content .max-w-7xl .rounded-xl, html.a75crm-dark #content .max-w-7xl .bg-card { background-color: oklch(0.22 0.02 30) !important; border-color: oklch(0.34 0.02 32) !important; color: oklch(0.93 0.01 50) !important; } html.a75crm-dark .text-muted-foreground { color: oklch(0.68 0.02 40) !important; } html.a75crm-dark .border-border { border-color: oklch(0.34 0.02 32) !important; } html.a75crm-dark #sidebar, html.a75crm-dark #drawer-sidebar { background-color: oklch(0.18 0.025 30) !important; border-color: oklch(0.3 0.03 30) !important; } html.a75crm-dark .bg-background { background-color: oklch(0.2 0.02 28) !important; } html.a75crm-dark .bg-card\/90, html.a75crm-dark .bg-card { background-color: oklch(0.22 0.02 30) !important; } html.a75crm-dark .bg-primary-soft { background-color: oklch(0.32 0.08 28) !important; color: oklch(0.95 0.04 30) !important; } html.a75crm-dark kbd { background-color: oklch(0.28 0.02 32) !important; border-color: oklch(0.4 0.02 35) !important; color: oklch(0.8 0.02 40) !important; } html.a75crm-dark footer { background-color: oklch(0.2 0.02 28) !important; border-color: oklch(0.34 0.02 32) !important; color: oklch(0.7 0.02 40) !important; } /* Shell — Lovable parity (topbar search pill, preview split control, presence) */ .a75crm-topbar-search-input::placeholder { color: oklch(0.52 0.02 35); } html.a75crm-dark .a75crm-topbar-search-input { background-color: oklch(0.22 0.02 30 / 0.6) !important; border-color: oklch(0.36 0.02 32) !important; } html.a75crm-dark .a75crm-preview-dashboards { background-color: oklch(0.22 0.02 30) !important; border-color: oklch(0.36 0.02 32) !important; } html.a75crm-dark .a75crm-preview-dashboards > div:first-child { background-color: oklch(0.2 0.02 28 / 0.5) !important; border-color: oklch(0.34 0.02 32) !important; } /* Search page (/search) — card surfaces in dark shell */ html.a75crm-dark #content [data-qa-search="page"] .bg-card { background-color: oklch(0.22 0.02 30) !important; } html.a75crm-dark #content [data-qa-search="page"] .border-border { border-color: oklch(0.34 0.02 32) !important; } html.a75crm-dark #content [data-qa-search="page"] .border-dashed.border-border { border-color: oklch(0.38 0.02 34) !important; } /* Presence dot — Lovable: small emerald disk, light ring, on avatar’s bottom-right */ .a75crm-presence-dot { position: absolute; right: -1px; bottom: -1px; width: 0.56rem; height: 0.56rem; box-sizing: content-box; border: 2px solid oklch(1 0 0); border-radius: 9999px; background: oklch(0.64 0.17 152); box-shadow: 0 0 0 1px oklch(0.88 0.01 50 / 0.5); transform: none; pointer-events: none; } html.a75crm-dark .a75crm-presence-dot { border-color: oklch(0.18 0.025 30); box-shadow: 0 0 0 1px oklch(0.3 0.02 32 / 0.6); } .a75crm-presence-dot--sidebar { border-color: oklch(0.205 0.025 30); box-shadow: 0 0 0 1px oklch(0.35 0.03 30 / 0.4); } html.a75crm-dark .a75crm-presence-dot--sidebar { border-color: oklch(0.18 0.025 30); } /* Keep active marker hidden in collapsed icon rail mode */ #sidebar.sidebar-collapsed .nav-active::after { display: none; } /* Mobile product brand: room for Bixi + v — width comes from flex, not a hard cap */ .a75crm-mobile-brand { min-width: 0; } /* Agency75 shell popovers and helper utilities */ .a75crm-popover-enter { animation: a75crm-pop-in 0.14s ease-out; } @keyframes a75crm-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .a75crm-theme-option .a75crm-theme-check { color: oklch(0.66 0.23 28); } .a75crm-role-option.bg-primary-soft .text-muted-foreground { color: oklch(0.46 0.09 30); } .a75crm-role-option { border: 1px solid transparent; } .a75crm-role-option.bg-primary-soft { border-color: oklch(0.72 0.12 30 / 0.28); } .a75crm-skeleton { background: linear-gradient(90deg, oklch(0.94 0.01 45), oklch(0.98 0.01 45), oklch(0.94 0.01 45)); background-size: 200% 100%; animation: a75crm-skeleton 1.2s linear infinite; } @keyframes a75crm-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: 0.65; } /* -------------------------------------------------------- Preview / Design Workspace tokens These are only used by modules/preview/* pages. Promote to the main :root block when approved. -------------------------------------------------------- */ :root { --score-research-color: oklch(0.704 0.14 182); --score-complete-color: oklch(0.62 0.19 230); /* blue-500 equivalent for CV1 */ } /* pd2-ch channel buttons used in contact/company view hero (not just in the drawer) */ .contact-hero-pd2-channels { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; } /* In hero context pd2-ch buttons are slightly smaller than in the drawer */ .contact-hero-pd2-channels .pd2-ch { padding: 5px 10px; font-size: 0.72rem; } .progress-rel { background-color: var(--color-amber-500, #f59e0b); } .progress-pot { background-color: var(--color-emerald-500, #10b981); } /* Preview page banner */ .a75-preview-banner { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.75rem; margin-bottom: 0.75rem; background: oklch(0.97 0.02 260); border: 1px solid oklch(0.85 0.06 260); border-radius: 0.5rem; font-size: 0.8125rem; color: oklch(0.4 0.1 260); } .a75crm-dark .a75-preview-banner { background: oklch(0.2 0.03 260); border-color: oklch(0.35 0.06 260); color: oklch(0.75 0.08 260); } .a75-preview-banner__badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; background: oklch(0.55 0.18 260); color: #fff; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; } .a75-preview-banner__changes { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-left: auto; } .a75-preview-banner__tag { display: inline-block; padding: 0.1rem 0.45rem; background: oklch(0.9 0.04 260); border: 1px solid oklch(0.8 0.07 260); border-radius: 4px; font-size: 0.68rem; font-weight: 500; color: oklch(0.45 0.12 260); } .a75crm-dark .a75-preview-banner__tag { background: oklch(0.28 0.04 260); border-color: oklch(0.38 0.07 260); color: oklch(0.72 0.1 260); } /* ================================================ CONTACTS LIST PREVIEW — redesign components ================================================ */ /* Avatar wrapper with priority dot */ .a75-cl-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .a75-cl-dot { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--color-card, #fff); pointer-events: none; z-index: 1; } .a75-cl-dot--p1 { background-color: var(--color-danger, #ef4444); } .a75-cl-dot--p2 { background-color: var(--color-warning, #f59e0b); } /* Channel chips */ .a75-cl-channels { display: flex; gap: 3px; } .a75-cl-chip { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; } .a75-cl-chip--on { background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .a75-cl-chip--off { color: hsl(var(--border)); } /* Per-channel brand colors */ .a75-cl-chip--on[title="Email"] { background: hsl(221 83% 53% / 0.1); color: hsl(221 83% 50%); } .a75-cl-chip--on[title="Phone"] { background: hsl(142 71% 45% / 0.1); color: hsl(142 62% 38%); } .a75-cl-chip--on[title="LinkedIn"] { background: hsl(201 100% 36% / 0.1); color: hsl(201 100% 32%); } .a75-cl-chip--on[title="WhatsApp"] { background: hsl(133 60% 40% / 0.1); color: hsl(133 55% 35%); } /* Round + large avatars in preview contacts table */ #contacts-datatable .a75-identity-media, #contacts-datatable .a75-avatar-initials { width: 48px !important; height: 48px !important; border-radius: 50% !important; font-size: 15px !important; } #contacts-datatable .a75-identity-media--fallback { line-height: 48px !important; } /* Round avatars in mobile cards */ .a75-mobile-record-card .a75-identity-media, .a75-mobile-record-card .a75-avatar-initials { border-radius: 50% !important; } #companies-datatable .a75-identity-media, #companies-datatable .a75-avatar-initials { border-radius: 50% !important; width: 48px !important; height: 48px !important; font-size: 15px !important; } /* Round avatars in cl_preview table rows and pd2 drawer */ .a75-cl-avatar-wrap .a75-identity-media, .a75-cl-avatar-wrap .a75-avatar-initials, .pd2-avatar .a75-identity-media, .pd2-avatar .a75-avatar-initials { border-radius: 50% !important; } /* ================================================ Compact phase tabs — Intake / Research / Outreach / Manage ================================================ */ .cl-phase-tabs { display: flex; gap: 4px; padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; } .cl-phase-tabs::-webkit-scrollbar { display: none; } .cl-phase-tab { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 7px; border-radius: 6px 6px 0 0; border: 1px solid hsl(var(--border)); border-bottom-color: transparent; background: transparent; font-size: 11.5px; font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s, border-color 0.12s; margin-bottom: -1px; } .cl-phase-tab:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); } .cl-phase-tab.is-active { border-color: hsl(var(--border)) hsl(var(--border)) hsl(var(--card)) hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--primary)); font-weight: 600; } .cl-phase-tab small { font-size: 9.5px; opacity: 0.7; font-weight: 400; } /* Mini completion dial — small conic-gradient ring shown in score column */ .a75-mini-dial { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(var(--dc, hsl(37 91% 55%)) calc(var(--d, 0) * 1%), hsl(var(--muted)) 0); flex-shrink: 0; } .a75-mini-dial::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: hsl(var(--card)); } .a75-mini-dial span { position: relative; z-index: 1; font-size: 8px; font-weight: 700; font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); line-height: 1; } .a75-cl-score-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } /* Stacked REL/POT score */ .a75-cl-score-stack { display: flex; flex-direction: column; gap: 5px; min-width: 88px; } .a75-cl-score-row { display: flex; align-items: center; gap: 5px; } .a75-cl-score-name { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--muted-foreground)); width: 24px; flex-shrink: 0; } .a75-cl-score-bar { flex: 1; height: 5px; border-radius: 3px; background-color: hsl(var(--muted)); overflow: hidden; min-width: 36px; max-width: 52px; } .a75-cl-score-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .a75-cl-score-fill--rel { background-color: hsl(221 83% 53%); } .a75-cl-score-fill--pot { background-color: hsl(37 91% 55%); } .a75-cl-score-val { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); width: 22px; text-align: right; flex-shrink: 0; } /* Follow-up relative date badge */ .a75-cl-followup { display: inline-flex; align-items: center; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .a75-cl-followup--today { background-color: var(--color-warning-soft, #fef3c7); color: var(--color-warning-strong, #b45309); } .a75-cl-followup--overdue { background-color: var(--color-danger-soft, #fee2e2); color: var(--color-danger, #ef4444); } .a75-cl-followup--soon { background-color: var(--color-primary-soft, #eff6ff); color: var(--color-primary, #3b82f6); } .a75-cl-followup--later { color: var(--color-muted-foreground, #6b7280); padding: 1px 0; } /* ================================================ BUG FIX — row menu opaque background The compiled styles.css uses hsl(var(--popover,...)) which can render transparent if --popover is unset. ================================================ */ .a75-row-menu__panel { background-color: hsl(var(--card, 0 0% 100%)) !important; } /* ================================================ KPI STAT CARDS — contacts list preview redesign ================================================ */ .a75-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } @media (min-width: 640px) { .a75-kpi-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .a75-kpi-grid { grid-template-columns: repeat(6, 1fr); } } .a75-kpi-stat { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--card, 0 0% 100%)); text-align: left; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; position: relative; overflow: hidden; } .a75-kpi-stat:hover { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.08); } .a75-kpi-stat.is-active { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.04); } .a75-kpi-stat.is-active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: hsl(var(--primary)); border-radius: 0 0 10px 10px; } .a75-kpi-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .a75-kpi-stat__label { font-size: 11px; font-weight: 500; color: hsl(var(--muted-foreground)); line-height: 1.3; } .a75-kpi-stat__icon { flex-shrink: 0; color: hsl(var(--muted-foreground) / 0.5); } .a75-kpi-stat__value { font-size: 20px; font-weight: 700; line-height: 1; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .a75-kpi-stat.is-active .a75-kpi-stat__value { color: hsl(var(--primary)); } .a75-kpi-stat__sub { font-size: 10px; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; } /* Per-card color accents via data-kpi-color attribute */ .a75-kpi-stat[data-kpi-color="blue"] { --kpi-c: 221 83% 53%; } .a75-kpi-stat[data-kpi-color="violet"] { --kpi-c: 262 83% 58%; } .a75-kpi-stat[data-kpi-color="green"] { --kpi-c: 142 71% 45%; } .a75-kpi-stat[data-kpi-color="amber"] { --kpi-c: 38 92% 50%; } .a75-kpi-stat[data-kpi-color="cyan"] { --kpi-c: 187 85% 43%; } .a75-kpi-stat[data-kpi-color="rose"] { --kpi-c: 347 77% 50%; } .a75-kpi-stat[data-kpi-color] { border-top: 3px solid hsl(var(--kpi-c, var(--border))); } .a75-kpi-stat[data-kpi-color]:hover { border-color: hsl(var(--kpi-c, var(--primary))); box-shadow: 0 0 0 3px hsl(var(--kpi-c, var(--primary)) / 0.1); } .a75-kpi-stat[data-kpi-color].is-active { border-color: hsl(var(--kpi-c, var(--primary))); background: hsl(var(--kpi-c, var(--primary)) / 0.06); } .a75-kpi-stat[data-kpi-color].is-active::after { background: hsl(var(--kpi-c, var(--primary))); } .a75-kpi-stat[data-kpi-color] .a75-kpi-stat__icon { color: hsl(var(--kpi-c, var(--muted-foreground)) / 0.7); } .a75-kpi-stat[data-kpi-color].is-active .a75-kpi-stat__value { color: hsl(var(--kpi-c, var(--primary))); } /* Styled select — replaces plain browser