/* LeadsFlow Design System Light theme: leads, bookings, users Dark theme: chats, agents, WhatsApp/accounts Usage: or */ /* ── Fonts ────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap'); /* ── Reset ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } /* ── Design Tokens — Light ────────────────────────────────────────────────── */ [data-theme="light"] { /* Backgrounds */ --bg-page: #f4f6fa; --bg-surface: #ffffff; --bg-sidebar: #ffffff; --bg-hover: #f0f3f8; --bg-selected: #eef2ff; /* Borders */ --border: #e4e8f0; --border-strong: #c8d0e0; /* Text */ --text-primary: #111827; --text-secondary: #6b7280; --text-tertiary: #9ca3af; --text-inverse: #ffffff; /* Brand (indigo) */ --accent: #4f46e5; --accent-hover: #4338ca; --accent-light: #eef2ff; --accent-text: #4f46e5; /* Status colors */ --status-new: #2563eb; --status-follow: #d97706; --status-scheduled: #7c3aed; --status-registered:#16a34a; --status-failed: #dc2626; /* State */ --success: #16a34a; --warning: #d97706; --error: #dc2626; --info: #2563eb; --success-bg: #f0fdf4; --warning-bg: #fffbeb; --error-bg: #fef2f2; --info-bg: #eff6ff; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.12); } /* ── Design Tokens — Dark ─────────────────────────────────────────────────── */ [data-theme="dark"] { --bg-page: #0f1117; --bg-surface: #1a1d27; --bg-sidebar: #141720; --bg-hover: #232634; --bg-selected: #1e2a1e; --border: #2a2d3e; --border-strong: #3a3f56; --text-primary: #f0f2f8; --text-secondary: #8b90a7; --text-tertiary: #5c6278; --text-inverse: #111827; /* Brand (green for operational dark mode) */ --accent: #22c55e; --accent-hover: #16a34a; --accent-light: #052e16; --accent-text: #86efac; --status-new: #60a5fa; --status-follow: #fbbf24; --status-scheduled: #a78bfa; --status-registered:#4ade80; --status-failed: #f87171; --success: #22c55e; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; --success-bg: #052e16; --warning-bg: #1c1200; --error-bg: #1c0404; --info-bg: #03152e; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 8px 24px rgba(0,0,0,.5); } /* ── Shared tokens ────────────────────────────────────────────────────────── */ :root { --sidebar-w: 240px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --transition: 150ms ease; } /* ── Base ─────────────────────────────────────────────────────────────────── */ body { font-family: var(--font-body); background: var(--bg-page); color: var(--text-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); } /* ── Shells ───────────────────────────────────────────────────────────────── */ .app-shell { display: flex; min-height: 100vh; } .app-sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: var(--space-4) 0; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; } .app-main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; } .page-header { padding: var(--space-6) var(--space-8); border-bottom: 1px solid var(--border); background: var(--bg-surface); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .page-header h1 { font-size: 1.5rem; } .page-body { padding: var(--space-6) var(--space-8); flex: 1; } .surface-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } /* Split view (chats) */ .split-view { display: flex; height: 100vh; overflow: hidden; } .split-left { width: 320px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; background: var(--bg-surface); } .split-right { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } /* ── Navigation ───────────────────────────────────────────────────────────── */ .nav-brand { padding: 0 var(--space-4) var(--space-4); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--accent); } .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); color: var(--text-secondary); text-decoration: none; font-size: 0.875rem; font-weight: 500; border-radius: 0; transition: background var(--transition), color var(--transition); cursor: pointer; } .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); } .nav-item.active { background: var(--accent-light); color: var(--accent-text); } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; transition: background var(--transition), opacity var(--transition); font-family: var(--font-body); text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--text-inverse); } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .btn-secondary { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--bg-surface); } .btn-danger { background: var(--error-bg); color: var(--error); border: 1px solid var(--error); } .btn-sm { padding: var(--space-1) var(--space-3); font-size: 0.8rem; } .btn-lg { padding: var(--space-3) var(--space-6); font-size: 1rem; } /* ── Labels: status-pill, badge, tag ─────────────────────────────────────── */ .status-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill-new { color: var(--status-new); background: var(--info-bg); } .pill-follow_up { color: var(--status-follow); background: var(--warning-bg); } .pill-trial_scheduled { color: var(--status-scheduled); background: #f5f3ff; } .pill-registered { color: var(--status-registered); background: var(--success-bg); } .pill-failed { color: var(--status-failed); background: var(--error-bg); } .badge { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 500; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border); } .tag { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 600; background: var(--accent-light); color: var(--accent-text); text-transform: uppercase; letter-spacing: 0.04em; } /* ── Tables ───────────────────────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .data-table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); background: var(--bg-page); } .data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--bg-hover); } /* ── Status tabs ──────────────────────────────────────────────────────────── */ .status-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 var(--space-4); background: var(--bg-surface); overflow-x: auto; } .status-tab { padding: var(--space-3) var(--space-4); font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color var(--transition), border-color var(--transition); background: none; border-top: none; border-left: none; border-right: none; } .status-tab:hover { color: var(--text-primary); } .status-tab.active { color: var(--accent-text); border-bottom-color: var(--accent); } /* ── Forms ────────────────────────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: var(--space-1); } .form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .form-input, .form-select, .form-textarea { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); font-size: 0.875rem; font-family: var(--font-body); transition: border-color var(--transition), box-shadow var(--transition); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .form-textarea { resize: vertical; min-height: 120px; } /* ── Empty states ─────────────────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-secondary); gap: var(--space-3); } .empty-state-icon { width: 48px; height: 48px; opacity: 0.4; } .empty-state-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); } .empty-state-desc { font-size: 0.875rem; max-width: 320px; } /* ── Skeleton loading ─────────────────────────────────────────────────────── */ @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .skeleton { background: var(--bg-hover); border-radius: var(--radius-sm); animation: skeleton-pulse 1.5s ease-in-out infinite; } .skeleton-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); } /* ── Chat bubbles ─────────────────────────────────────────────────────────── */ .chat-bubble { max-width: 75%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 0.9rem; line-height: 1.5; position: relative; word-break: break-word; } .bubble-lead { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: var(--radius-sm); } .bubble-agent_ai { background: #052e16; color: #86efac; align-self: flex-end; border-bottom-right-radius: var(--radius-sm); } .bubble-platform_user { background: #1e1b4b; color: #a5b4fc; align-self: flex-end; border-bottom-right-radius: var(--radius-sm); } .chat-message-row { display: flex; flex-direction: column; padding: var(--space-2) var(--space-4); gap: var(--space-1); } .chat-message-row.from-lead { align-items: flex-start; } .chat-message-row.from-agent, .chat-message-row.from-user { align-items: flex-end; } .chat-meta { font-size: 0.7rem; color: var(--text-tertiary); display: flex; gap: var(--space-2); align-items: center; } /* ── Booking slot states ──────────────────────────────────────────────────── */ .slot-available { border-left: 3px solid var(--success); } .slot-full { border-left: 3px solid var(--border-strong); opacity: 0.6; } .slot-blackout { text-decoration: line-through; opacity: 0.4; } /* ── Responsive collapse ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .app-sidebar { position: fixed; transform: translateX(-100%); transition: transform var(--transition); z-index: 100; } .app-sidebar.open { transform: translateX(0); } .app-main { margin-left: 0; } .split-left { width: 100%; position: fixed; z-index: 10; } .page-body { padding: var(--space-4); } }