Spaces:
Running
Running
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| LeadGen Pro v2 — Premium Dark Dashboard Theme | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| /* ── CSS Custom Properties ──────────────────────────────────────────────── */ | |
| :root { | |
| --bg-primary: #0a0e1a; | |
| --bg-secondary: #111827; | |
| --bg-card: #1a2035; | |
| --bg-card-hover: #1f2847; | |
| --bg-surface: #232b3f; | |
| --bg-input: #1e2740; | |
| --text-primary: #f1f5f9; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| --accent-blue: #3b82f6; | |
| --accent-purple: #8b5cf6; | |
| --accent-cyan: #06b6d4; | |
| --accent-teal: #14b8a6; | |
| --score-high: #ef4444; | |
| --score-high-bg: rgba(239,68,68,0.12); | |
| --score-medium: #f59e0b; | |
| --score-medium-bg:rgba(245,158,11,0.12); | |
| --score-low: #22c55e; | |
| --score-low-bg: rgba(34,197,94,0.12); | |
| --status-new: #3b82f6; | |
| --status-new-bg: rgba(59,130,246,0.12); | |
| --status-contacted: #f59e0b; | |
| --status-contacted-bg:rgba(245,158,11,0.12); | |
| --status-converted: #22c55e; | |
| --status-converted-bg:rgba(34,197,94,0.12); | |
| --status-rejected: #ef4444; | |
| --status-rejected-bg:rgba(239,68,68,0.12); | |
| --border-color: rgba(255,255,255,0.06); | |
| --border-light: rgba(255,255,255,0.1); | |
| --gradient-primary: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| --gradient-header: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| --shadow-sm: 0 2px 8px rgba(0,0,0,0.2); | |
| --shadow-md: 0 4px 20px rgba(0,0,0,0.3); | |
| --shadow-lg: 0 8px 40px rgba(0,0,0,0.4); | |
| --shadow-glow: 0 0 20px rgba(59,130,246,0.15); | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 20px; | |
| --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* ── Base Reset ─────────────────────────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { font-size: 15px; scroll-behavior: smooth; } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| -webkit-font-smoothing: antialiased; | |
| overflow-x: hidden; | |
| } | |
| a { color: var(--accent-blue); text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| /* ── Layout ─────────────────────────────────────────────────────────────── */ | |
| .app-container { display: flex; min-height: 100vh; } | |
| .sidebar { | |
| width: 260px; | |
| background: var(--bg-secondary); | |
| border-right: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| position: fixed; | |
| top: 0; left: 0; bottom: 0; | |
| z-index: 100; | |
| transition: transform var(--transition); | |
| } | |
| .main-content { | |
| flex: 1; | |
| margin-left: 260px; | |
| padding: 28px 32px; | |
| min-height: 100vh; | |
| max-width: calc(100vw - 260px); | |
| overflow-x: hidden; | |
| } | |
| /* ── Sidebar ────────────────────────────────────────────────────────────── */ | |
| .sidebar-header { | |
| padding: 24px 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .sidebar-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .logo-icon { | |
| width: 42px; height: 42px; | |
| background: var(--gradient-primary); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .logo-text h1 { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .logo-text span { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| .sidebar-nav { | |
| flex: 1; | |
| padding: 16px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| border-radius: var(--radius-md); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| font-weight: 500; | |
| font-size: 0.93rem; | |
| border: none; | |
| background: none; | |
| width: 100%; | |
| text-align: left; | |
| } | |
| .nav-item:hover { | |
| background: var(--bg-card); | |
| color: var(--text-primary); | |
| } | |
| .nav-item.active { | |
| background: rgba(59,130,246,0.1); | |
| color: var(--accent-blue); | |
| box-shadow: inset 3px 0 0 var(--accent-blue); | |
| } | |
| .nav-item .icon { width: 24px; display: inline-flex; align-items: center; justify-content: center; } | |
| .nav-item .icon svg { flex-shrink: 0; } | |
| /* Colored dots replacing emoji circles */ | |
| .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; } | |
| .dot-high { background: var(--score-high); } | |
| .dot-medium { background: var(--score-medium); } | |
| .dot-low { background: var(--score-low); } | |
| /* Inline SVG alignment helpers */ | |
| .btn svg, label svg, .wa-link svg { vertical-align: -2px; margin-right: 2px; } | |
| .search-box .icon svg { vertical-align: middle; } | |
| .nav-divider { | |
| height: 1px; | |
| background: var(--border-color); | |
| margin: 12px 8px; | |
| } | |
| .sidebar-footer { | |
| padding: 16px 20px; | |
| border-top: 1px solid var(--border-color); | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-align: center; | |
| } | |
| /* ── Page header ────────────────────────────────────────────────────────── */ | |
| .page-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 28px; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .page-header h2 { | |
| font-size: 1.6rem; | |
| font-weight: 700; | |
| } | |
| .page-header p { | |
| color: var(--text-secondary); | |
| margin-top: 4px; | |
| font-size: 0.9rem; | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| flex-shrink: 0; | |
| } | |
| /* ── Cards ──────────────────────────────────────────────────────────────── */ | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| transition: all var(--transition); | |
| } | |
| .card:hover { | |
| border-color: var(--border-light); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .card-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .card-subtitle { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| /* ── Stat Cards Grid ────────────────────────────────────────────────────── */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 28px; | |
| } | |
| .stat-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| padding: 22px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all var(--transition); | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 3px; | |
| background: var(--gradient-primary); | |
| opacity: 0; | |
| transition: opacity var(--transition); | |
| } | |
| .stat-card:hover::before { opacity: 1; } | |
| .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } | |
| .stat-card .stat-icon { | |
| width: 44px; height: 44px; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| margin-bottom: 14px; | |
| } | |
| .stat-card .stat-icon.blue { background: rgba(59,130,246,0.12); color: var(--accent-blue); } | |
| .stat-card .stat-icon.red { background: var(--score-high-bg); color: var(--score-high); } | |
| .stat-card .stat-icon.amber { background: var(--score-medium-bg); color: var(--score-medium); } | |
| .stat-card .stat-icon.green { background: var(--score-low-bg); color: var(--score-low); } | |
| .stat-card .stat-icon.purple { background: rgba(139,92,246,0.12); color: var(--accent-purple); } | |
| .stat-card .stat-icon.cyan { background: rgba(6,182,212,0.12); color: var(--accent-cyan); } | |
| .stat-card .stat-value { | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| margin-bottom: 4px; | |
| line-height: 1; | |
| } | |
| .stat-card .stat-label { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| /* ── Charts Grid ────────────────────────────────────────────────────────── */ | |
| .charts-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| margin-bottom: 28px; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 280px; | |
| } | |
| /* ── Buttons ────────────────────────────────────────────────────────────── */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 20px; | |
| border-radius: var(--radius-md); | |
| font-weight: 600; | |
| font-size: 0.87rem; | |
| cursor: pointer; | |
| border: none; | |
| transition: all var(--transition); | |
| font-family: inherit; | |
| } | |
| .btn-primary { | |
| background: var(--gradient-primary); | |
| color: white; | |
| box-shadow: 0 2px 10px rgba(59,130,246,0.3); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 20px rgba(59,130,246,0.4); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-surface); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-light); | |
| } | |
| .btn-secondary:hover { background: var(--bg-card-hover); } | |
| .btn-danger { | |
| background: rgba(239,68,68,0.15); | |
| color: var(--score-high); | |
| border: 1px solid rgba(239,68,68,0.2); | |
| } | |
| .btn-danger:hover { background: rgba(239,68,68,0.25); } | |
| .btn-sm { padding: 6px 14px; font-size: 0.8rem; } | |
| .btn-xs { padding: 4px 10px; font-size: 0.73rem; border-radius: 6px; } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none ; | |
| } | |
| /* ── Badges ─────────────────────────────────────────────────────────────── */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 3px 10px; | |
| border-radius: 20px; | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| letter-spacing: 0.3px; | |
| text-transform: uppercase; | |
| } | |
| .badge-high { background: var(--score-high-bg); color: var(--score-high); } | |
| .badge-medium { background: var(--score-medium-bg); color: var(--score-medium); } | |
| .badge-low { background: var(--score-low-bg); color: var(--score-low); } | |
| .badge-new { background: var(--status-new-bg); color: var(--status-new); } | |
| .badge-contacted { background: var(--status-contacted-bg); color: var(--status-contacted); } | |
| .badge-converted { background: var(--status-converted-bg); color: var(--status-converted); } | |
| .badge-rejected { background: var(--status-rejected-bg); color: var(--status-rejected); } | |
| /* ── Inputs ─────────────────────────────────────────────────────────────── */ | |
| .input, .select { | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-color); | |
| color: var(--text-primary); | |
| padding: 10px 14px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.87rem; | |
| font-family: inherit; | |
| transition: border-color var(--transition); | |
| outline: none; | |
| } | |
| .input:focus, .select:focus { | |
| border-color: var(--accent-blue); | |
| box-shadow: 0 0 0 3px rgba(59,130,246,0.1); | |
| } | |
| .input::placeholder { color: var(--text-muted); } | |
| .select { cursor: pointer; appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } | |
| .select option { background: var(--bg-card); color: var(--text-primary); padding: 6px 12px; } | |
| .select optgroup { background: var(--bg-surface); color: var(--accent-blue); font-weight: 700; font-style: normal; padding: 4px 0; } | |
| /* ── Filter / Toolbar ───────────────────────────────────────────────────── */ | |
| .toolbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| margin-bottom: 20px; | |
| } | |
| .search-box { | |
| position: relative; | |
| flex: 1; | |
| min-width: 200px; | |
| } | |
| .search-box .icon { | |
| position: absolute; | |
| left: 14px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| .search-box .input { | |
| width: 100%; | |
| padding-left: 40px; | |
| } | |
| .filter-chips { | |
| display: flex; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .chip { | |
| padding: 6px 14px; | |
| border-radius: 20px; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| border: 1px solid var(--border-light); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| transition: all var(--transition); | |
| } | |
| .chip:hover { background: var(--bg-card-hover); color: var(--text-primary); } | |
| .chip.active { background: rgba(59,130,246,0.15); color: var(--accent-blue); border-color: var(--accent-blue); } | |
| /* ── Table ──────────────────────────────────────────────────────────────── */ | |
| .table-wrapper { | |
| overflow-x: auto; | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-color); | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.85rem; | |
| } | |
| thead th { | |
| background: var(--bg-surface); | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| font-size: 0.73rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| padding: 12px 10px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border-color); | |
| white-space: nowrap; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| thead th:hover { color: var(--text-primary); } | |
| tbody tr { | |
| border-bottom: 1px solid var(--border-color); | |
| transition: background var(--transition); | |
| } | |
| tbody tr:hover { background: var(--bg-card-hover); } | |
| tbody tr:last-child { border-bottom: none; } | |
| tbody td { | |
| padding: 12px 10px; | |
| vertical-align: middle; | |
| max-width: 180px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .td-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| max-width: 180px; | |
| } | |
| .td-small { | |
| font-size: 0.78rem; | |
| color: var(--text-secondary); | |
| } | |
| .td-pitch { | |
| font-size: 0.78rem; | |
| color: var(--accent-cyan); | |
| font-style: italic; | |
| max-width: 200px; | |
| } | |
| /* Row checkbox */ | |
| .row-check { | |
| width: 16px; height: 16px; | |
| accent-color: var(--accent-blue); | |
| cursor: pointer; | |
| } | |
| /* ── Pagination ─────────────────────────────────────────────────────────── */ | |
| .pagination { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 16px 0; | |
| } | |
| .pagination-info { | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| } | |
| .pagination-controls { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .page-btn { | |
| width: 36px; height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-color); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| transition: all var(--transition); | |
| } | |
| .page-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); } | |
| .page-btn.active { background: var(--accent-blue); color: white; border-color: var(--accent-blue); } | |
| .page-btn:disabled { opacity: 0.3; cursor: not-allowed; } | |
| /* ── Bulk Actions Bar ───────────────────────────────────────────────────── */ | |
| .bulk-bar { | |
| display: none; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 20px; | |
| background: rgba(59,130,246,0.1); | |
| border: 1px solid rgba(59,130,246,0.2); | |
| border-radius: var(--radius-md); | |
| margin-bottom: 16px; | |
| animation: slideDown 0.3s ease; | |
| } | |
| .bulk-bar.show { display: flex; } | |
| .bulk-count { | |
| font-weight: 700; | |
| color: var(--accent-blue); | |
| } | |
| @keyframes slideDown { | |
| from { opacity: 0; transform: translateY(-10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ── Modal ──────────────────────────────────────────────────────────────── */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.7); | |
| backdrop-filter: blur(4px); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| animation: fadeIn 0.2s ease; | |
| } | |
| .modal-overlay.show { display: flex; } | |
| .modal { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-xl); | |
| max-width: 640px; | |
| width: 90%; | |
| max-height: 85vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow-lg); | |
| animation: slideUp 0.3s ease; | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 24px 28px 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .modal-header h3 { font-size: 1.15rem; font-weight: 700; } | |
| .modal-close { | |
| width: 34px; height: 34px; | |
| border-radius: 50%; | |
| border: none; | |
| background: var(--bg-surface); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| font-size: 1.1rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition); | |
| } | |
| .modal-close:hover { background: var(--bg-card-hover); color: var(--text-primary); } | |
| .modal-body { padding: 24px 28px; } | |
| .modal-footer { padding: 16px 28px 24px; display: flex; gap: 10px; justify-content: flex-end; } | |
| /* Modal detail rows */ | |
| .detail-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| } | |
| .detail-item label { | |
| font-size: 0.73rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| display: block; | |
| margin-bottom: 4px; | |
| } | |
| .detail-item .value { | |
| font-size: 0.9rem; | |
| color: var(--text-primary); | |
| font-weight: 500; | |
| word-break: break-all; | |
| } | |
| .detail-full { grid-column: 1 / -1; } | |
| .notes-textarea { | |
| width: 100%; | |
| min-height: 80px; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| padding: 10px 14px; | |
| font-family: inherit; | |
| font-size: 0.87rem; | |
| resize: vertical; | |
| outline: none; | |
| transition: border-color var(--transition); | |
| } | |
| .notes-textarea:focus { border-color: var(--accent-blue); } | |
| /* Analysis flags */ | |
| .flags-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-top: 6px; | |
| } | |
| .flag { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 3px 10px; | |
| border-radius: 6px; | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| } | |
| .flag-yes { background: var(--score-low-bg); color: var(--score-low); } | |
| .flag-no { background: var(--score-high-bg); color: var(--score-high); } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ── Progress Overlay ───────────────────────────────────────────────────── */ | |
| .progress-overlay { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.8); | |
| backdrop-filter: blur(8px); | |
| z-index: 2000; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .progress-overlay.show { display: flex; } | |
| .progress-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-xl); | |
| padding: 48px; | |
| text-align: center; | |
| max-width: 440px; | |
| width: 90%; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .progress-spinner { | |
| width: 64px; height: 64px; | |
| border: 4px solid var(--border-color); | |
| border-top-color: var(--accent-blue); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| margin: 0 auto 24px; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .progress-text { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .progress-sub { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| .progress-bar-container { | |
| width: 100%; | |
| height: 6px; | |
| background: var(--bg-surface); | |
| border-radius: 3px; | |
| margin-top: 20px; | |
| overflow: hidden; | |
| } | |
| .progress-bar-fill { | |
| height: 100%; | |
| background: var(--gradient-primary); | |
| border-radius: 3px; | |
| width: 0%; | |
| transition: width 0.5s ease; | |
| animation: progressPulse 2s ease-in-out infinite; | |
| } | |
| @keyframes progressPulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| /* ── Generate Page ──────────────────────────────────────────────────────── */ | |
| .generate-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| margin-bottom: 28px; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .form-group label { | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .form-group .input, .form-group .select { width: 100%; } | |
| .toggle-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 0; | |
| } | |
| .toggle-row label { font-weight: 500; } | |
| .toggle { | |
| position: relative; | |
| width: 48px; height: 26px; | |
| } | |
| .toggle input { | |
| opacity: 0; width: 0; height: 0; | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| inset: 0; | |
| background: var(--bg-surface); | |
| border-radius: 13px; | |
| cursor: pointer; | |
| transition: background var(--transition); | |
| } | |
| .toggle-slider::before { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; height: 20px; | |
| left: 3px; bottom: 3px; | |
| background: white; | |
| border-radius: 50%; | |
| transition: transform var(--transition); | |
| } | |
| .toggle input:checked + .toggle-slider { background: var(--accent-blue); } | |
| .toggle input:checked + .toggle-slider::before { transform: translateX(22px); } | |
| /* ── Export Cards ───────────────────────────────────────────────────────── */ | |
| .export-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| margin-bottom: 28px; | |
| } | |
| .export-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| padding: 28px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| } | |
| .export-card:hover { | |
| border-color: var(--accent-blue); | |
| background: var(--bg-card-hover); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .export-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 14px; | |
| } | |
| .export-card h3 { font-size: 1.05rem; margin-bottom: 6px; } | |
| .export-card p { font-size: 0.8rem; color: var(--text-muted); } | |
| /* ── Toast ──────────────────────────────────────────────────────────────── */ | |
| .toast-container { | |
| position: fixed; | |
| top: 20px; right: 20px; | |
| z-index: 9999; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .toast { | |
| padding: 14px 20px; | |
| border-radius: var(--radius-md); | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| animation: toastIn 0.3s ease; | |
| box-shadow: var(--shadow-md); | |
| max-width: 380px; | |
| } | |
| .toast-success { background: rgba(34,197,94,0.15); color: var(--score-low); border: 1px solid rgba(34,197,94,0.3); } | |
| .toast-error { background: rgba(239,68,68,0.15); color: var(--score-high); border: 1px solid rgba(239,68,68,0.3); } | |
| .toast-info { background: rgba(59,130,246,0.15); color: var(--accent-blue); border: 1px solid rgba(59,130,246,0.3); } | |
| @keyframes toastIn { | |
| from { opacity: 0; transform: translateX(40px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| /* ── Page sections ──────────────────────────────────────────────────────── */ | |
| .page-section { display: none; } | |
| .page-section.active { display: block; } | |
| /* ── Status dropdown ────────────────────────────────────────────────────── */ | |
| .status-select { | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| border: 1px solid var(--border-color); | |
| background: var(--bg-input); | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| outline: none; | |
| } | |
| /* ── WhatsApp link ──────────────────────────────────────────────────────── */ | |
| .wa-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| color: #25d366; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .wa-link:hover { text-decoration: none; opacity: 0.8; } | |
| /* ── Responsive ─────────────────────────────────────────────────────────── */ | |
| /* Mobile menu toggle */ | |
| .mobile-menu-btn { | |
| display: none; | |
| position: fixed; | |
| top: 16px; left: 16px; | |
| z-index: 200; | |
| width: 40px; height: 40px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-light); | |
| background: var(--bg-card); | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| box-shadow: var(--shadow-sm); | |
| transition: all var(--transition); | |
| } | |
| .mobile-menu-btn:hover { background: var(--bg-card-hover); } | |
| /* Sidebar overlay for mobile */ | |
| .sidebar-overlay { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.5); | |
| z-index: 99; | |
| } | |
| .sidebar-overlay.show { display: block; } | |
| /* Tablet breakpoint */ | |
| @media (max-width: 1280px) { | |
| .sidebar { width: 220px; } | |
| .main-content { margin-left: 220px; max-width: calc(100vw - 220px); padding: 24px 20px; } | |
| .stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } | |
| } | |
| @media (max-width: 1024px) { | |
| .mobile-menu-btn { display: flex; } | |
| .sidebar { transform: translateX(-100%); z-index: 150; width: 260px; } | |
| .sidebar.open { transform: translateX(0); } | |
| .main-content { margin-left: 0; padding: 20px 16px; max-width: 100vw; } | |
| .charts-grid { grid-template-columns: 1fr; } | |
| .generate-grid { grid-template-columns: 1fr; } | |
| .export-grid { grid-template-columns: 1fr; } | |
| .detail-grid { grid-template-columns: 1fr; } | |
| .stats-grid { grid-template-columns: repeat(2, 1fr); } | |
| .page-header { padding-top: 48px; } | |
| /* Hide less important table columns on tablet */ | |
| table .col-email { display: none; } | |
| table .col-staleness { display: none; } | |
| } | |
| @media (max-width: 768px) { | |
| .page-header { flex-direction: column; align-items: flex-start; } | |
| .header-actions { width: 100%; justify-content: flex-start; } | |
| .toolbar { flex-direction: column; } | |
| .search-box { min-width: 100%; } | |
| .filter-chips { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; } | |
| .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } | |
| .stat-card { padding: 16px; } | |
| .stat-card .stat-value { font-size: 1.4rem; } | |
| thead th { padding: 10px 8px; font-size: 0.68rem; } | |
| tbody td { padding: 10px 8px; font-size: 0.8rem; max-width: 140px; } | |
| .td-name { max-width: 140px; } | |
| .td-pitch { max-width: 140px; } | |
| .btn { padding: 8px 14px; font-size: 0.82rem; } | |
| .btn-sm { padding: 5px 10px; } | |
| /* Hide more columns */ | |
| table .col-pitch { display: none; } | |
| table .col-source { display: none; } | |
| .modal { max-width: 95%; } | |
| .modal-body { padding: 16px; } | |
| .modal-header { padding: 16px; } | |
| .modal-footer { padding: 12px 16px; } | |
| .export-grid { grid-template-columns: 1fr; gap: 10px; } | |
| } | |
| @media (max-width: 480px) { | |
| .main-content { padding: 16px 10px; } | |
| .page-header { padding-top: 52px; margin-bottom: 16px; } | |
| .page-header h2 { font-size: 1.2rem; } | |
| .stats-grid { grid-template-columns: 1fr; gap: 8px; } | |
| .stat-card .stat-icon { width: 36px; height: 36px; font-size: 1rem; margin-bottom: 10px; } | |
| thead th { padding: 8px 6px; font-size: 0.65rem; } | |
| tbody td { padding: 8px 6px; font-size: 0.75rem; max-width: 100px; } | |
| .td-name { max-width: 110px; } | |
| .badge { font-size: 0.65rem; padding: 2px 6px; } | |
| .progress-card { padding: 28px 20px; } | |
| .generate-grid { gap: 12px; } | |
| /* Hide even more columns */ | |
| table .col-phone { display: none; } | |
| table .col-checkbox { display: none; } | |
| } | |
| /* ── Scrollbar ─────────────────────────────────────────────────────────── */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--bg-surface); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } | |
| /* ── Staleness indicator ────────────────────────────────────────────────── */ | |
| .stale-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .stale-badge.fresh { color: var(--score-low); } | |
| .stale-badge.stale { color: var(--score-medium); } | |
| .stale-badge.old { color: var(--score-high); } | |