/* CRM color scheme + shared component styles. Templates use Tailwind (self-hosted, compiled at build time from tailwind.input.css via `npm run build:css`) for layout/spacing; this file owns the theme tokens and the handful of look-and-feel pieces Tailwind utilities can't express (CSS variables, glass blur, backdrop-filter fallbacks). */ /* ── Theme tokens ─────────────────────────────────────────── Light is the default (:root); dark overrides via the same .dark class the theme toggle sets on . */ :root { --c-bg: #f0f0f0; --c-panel: #e4e4e4; --c-panel-glass: rgba(255, 255, 255, 0.72); --c-surface: #ffffff; --c-border: #cccccc; --c-row-hover: #eef4ff; --c-ink: #1a1a1a; --c-muted: #555555; --c-subtle: #636363; --c-teal: #0f766e; --c-teal-light: #14b8a6; --c-teal-btn: #0a5f58; --c-sold: #198754; --c-pending: #0d6efd; --c-unsold: #c0392b; /* Categorical palette for multi-series charts/legends (e.g. dashboard "Vertical Mix"). Distinct from the status colors above — those carry sold/pending/unsold meaning and must not double as chart categories. */ --c-chart-1: #0f766e; --c-chart-2: #7c3aed; --c-chart-3: #d97706; --c-chart-4: #2563eb; --c-chart-5: #db2777; --c-chart-6: #65a30d; --c-chart-7: #0891b2; --c-chart-8: #9333ea; --c-chart-9: #ca8a04; --c-chart-10: #4f46e5; --c-sidebar-text: #444444; --c-sidebar-text-active: #111111; --c-sidebar-hover: #d8d8d8; --c-sidebar-active: #d0d0d0; --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-data: ui-monospace, "SF Mono", "Cascadia Code", monospace; } .dark { --c-bg: #323232; --c-panel: #292929; --c-panel-glass: rgba(41, 41, 41, 0.72); --c-surface: #3c3c3c; --c-border: #4d4d4d; --c-row-hover: #484848; --c-ink: #e8e8e8; --c-muted: #c2c2c2; --c-subtle: #b0b0b0; --c-teal: #2bc4b0; --c-teal-light: #5eead4; --c-teal-btn: #0e7d70; --c-sold: #28a745; --c-pending: #0d6efd; --c-unsold: #c0392b; --c-chart-1: #2bc4b0; --c-chart-2: #a78bfa; --c-chart-3: #fbbf24; --c-chart-4: #60a5fa; --c-chart-5: #f472b6; --c-chart-6: #a3e635; --c-chart-7: #22d3ee; --c-chart-8: #c084fc; --c-chart-9: #eab308; --c-chart-10: #818cf8; --c-sidebar-text: #c8c8c8; --c-sidebar-text-active: #ffffff; --c-sidebar-hover: #363636; --c-sidebar-active: #3a3a3a; } /* ── Glass card ───────────────────────────────────────────── The dashboard's base surface. Panels, KPI tiles, and list cards all start here; Tailwind utilities handle padding/layout on top. */ .glass-card { background: var(--c-panel-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--c-border); border-radius: 1.25rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } /* ── KPI stat tile ────────────────────────────────────────── crm/components/stat_card.html */ .stat-card__icon { background: color-mix(in srgb, var(--c-teal) 16%, transparent); color: var(--c-teal); } .stat-card__value { font-family: var(--font-data); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--c-ink); } .stat-card__trend--up { color: var(--c-sold); } .stat-card__trend--down { color: var(--c-unsold); } .stat-card__trend--flat { color: var(--c-subtle); } /* ── Rows inside glass cards (tables, lists) ───────────────── */ .glass-row { border-bottom: 1px solid var(--c-border); } .glass-row:last-child { border-bottom: none; } .glass-row__figure { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--c-ink); } /* ── Sidebar reopen pill ──────────────────────────────────── Desktop-only affordance for reopening a manually-collapsed sidebar. Mobile has its own top-bar hamburger instead (base.html), since the sidebar already starts off-canvas there — !important guarantees this wins over the JS-toggled .hidden class regardless of class order. */ @media (max-width: 767px) { #sidebar-reopen { display: none !important; } } /* ── Sidebar collapse ─────────────────────────────────────── crm/components/navbar.html + base.html's openSidebar()/closeSidebar(). Mobile: the sidebar is `fixed` (out of flow), so closing it just slides it off-canvas via transform - main content was never affected by its width to begin with. Desktop: the sidebar is `md:static` (a normal flex child of the app shell in base.html's `.flex.h-screen`), so a transform-only close left its 18rem width permanently reserved in the flex row - a dead gap between the reopen pill and the main content that never actually expanded to fill it. Closing must collapse the width itself there, not just hide the box. */ .sidebar { transition: transform 200ms ease-in-out; } .sidebar.sidebar--closed { transform: translateX(-100%); } @media (min-width: 768px) { .sidebar { transition: width 200ms ease-in-out, border-color 200ms ease-in-out; } .sidebar.sidebar--closed { transform: none; width: 0; border-right-color: transparent; } } /* ── Status pill ──────────────────────────────────────────── crm/components/status_pill.html */ .pill { display: inline-flex; align-items: center; border-radius: 9999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .pill--active { background: color-mix(in srgb, var(--c-sold) 15%, transparent); color: var(--c-sold); } .pill--onboarding { background: color-mix(in srgb, var(--c-pending) 15%, transparent); color: var(--c-pending); } .pill--paused { background: color-mix(in srgb, var(--c-unsold) 15%, transparent); color: var(--c-unsold); } .pill--prospect { background: color-mix(in srgb, var(--c-subtle) 15%, transparent); color: var(--c-subtle); } .pill--draft { background: color-mix(in srgb, var(--c-subtle) 15%, transparent); color: var(--c-subtle); } .pill--completed { background: color-mix(in srgb, var(--c-teal) 15%, transparent); color: var(--c-teal); } /* Lead.Status values - crm/lead_list.html, crm/lead_detail.html */ .pill--new { background: color-mix(in srgb, var(--c-subtle) 15%, transparent); color: var(--c-subtle); } .pill--ready { background: color-mix(in srgb, var(--c-pending) 15%, transparent); color: var(--c-pending); } .pill--routing { background: color-mix(in srgb, var(--c-pending) 15%, transparent); color: var(--c-pending); } .pill--sold { background: color-mix(in srgb, var(--c-sold) 15%, transparent); color: var(--c-sold); } .pill--no_winner { background: color-mix(in srgb, var(--c-unsold) 15%, transparent); color: var(--c-unsold); } .pill--rejected { background: color-mix(in srgb, var(--c-unsold) 15%, transparent); color: var(--c-unsold); } .pill--pending { background: color-mix(in srgb, var(--c-pending) 15%, transparent); color: var(--c-pending); } .pill--charged_back { background: color-mix(in srgb, var(--c-unsold) 15%, transparent); color: var(--c-unsold); } /* ── Stat line (list-page summary strip) ───────────────────── */ .stat-line { border-bottom: 1px solid var(--c-border); } .stat-item__num { font-family: var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--c-ink); } .stat-item__label { color: var(--c-muted); } .stat-sep { color: var(--c-border); } /* ── Breadcrumb ─────────────────────────────────────────────── */ .breadcrumb { color: var(--c-subtle); } .breadcrumb a { color: var(--c-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--c-ink); } /* ── Meta strip (detail-page key facts row) ────────────────── */ .meta-item { font-family: var(--font-data); color: var(--c-subtle); } /* ── Filter bar controls ────────────────────────────────────── */ .filter-input, .filter-select { height: 2.25rem; background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-ink); border-radius: 0.5rem; padding: 0 0.75rem; font-size: 0.875rem; outline: none; transition: border-color 150ms; } .filter-input:focus, .filter-select:focus { border-color: var(--c-teal); } /* ── Buttons ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.25rem; padding: 0 1rem; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; cursor: pointer; text-decoration: none; white-space: nowrap; transition: opacity 100ms, background 100ms, color 100ms, border-color 100ms; } .btn--primary { background: var(--c-teal-btn); color: #fff; border: 1px solid transparent; } .btn--primary:hover { opacity: 0.88; } .btn--ghost { background: transparent; color: var(--c-muted); border: 1px solid var(--c-border); } .btn--ghost:hover { color: var(--c-ink); border-color: var(--c-muted); background: var(--c-row-hover); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Modal ────────────────────────────────────────────────── apps.crm.templatetags.crm_extras's {% modal %} tag renders this shell; crm/components/form_field.html renders fields inside it. */ dialog.crm-modal { border: none; background: transparent; padding: 0; max-width: 32rem; width: calc(100% - 2rem); margin: auto; } dialog.crm-modal::backdrop { background: rgba(0, 0, 0, 0.5); } .crm-modal__panel { padding: 1.5rem; max-height: 85vh; overflow-y: auto; } .crm-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .crm-modal__title { font-size: 1.125rem; font-weight: 700; color: var(--c-ink); } .crm-modal__close { background: transparent; border: none; color: var(--c-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.25rem; } .crm-modal__close:hover { color: var(--c-ink); } /* ── Form fields (crm/components/form_field.html) ──────────── */ .form-field { margin-bottom: 0.875rem; } .form-field__label { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-muted); } .form-field__error { margin-top: 0.25rem; font-size: 0.75rem; color: var(--c-unsold); } .form-field__help { margin-top: 0.25rem; font-size: 0.75rem; color: var(--c-muted); } .form-field--checkbox { display: flex; align-items: center; gap: 0.5rem; } .form-field--checkbox .form-field__label { margin-bottom: 0; text-transform: none; font-size: 0.875rem; font-weight: 500; color: var(--c-ink); } /* CheckboxSelectMultiple (e.g. BulkCampaignCreateForm.verticals) - see apps.crm.forms.CrmStyledFormMixin's comment for why this can't reuse the single-checkbox "h-4 w-4" class on the wrapping div. */ .crm-checklist { display: flex; flex-direction: column; gap: 0.5rem; } .crm-checklist label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 400; color: var(--c-ink) !important; } .crm-checklist input[type="checkbox"] { width: 1rem; height: 1rem; border-radius: 0.25rem; border: 1px solid var(--c-border); background: var(--c-surface); accent-color: var(--c-teal); } /* Belt-and-suspenders on top of --c-ink: force pure white explicitly in dark mode so this can't regress to unreadable text again regardless of what else is loaded on the page (e.g. the Tailwind CDN script - see base.html - injects its own stylesheet at runtime, which has caused exactly this kind of override fight before). */ :root.dark .crm-checklist label { color: #ffffff !important; } .form-nonfield-error { margin-bottom: 0.875rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--c-unsold) 12%, transparent); padding: 0.625rem 0.75rem; font-size: 0.8125rem; color: var(--c-unsold); } .form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--c-border); }