/* Anjum Extraction CRM v2 — Stylesheet */ /* ── Fonts via Google Fonts CDN ── */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ══════════════════════════════════════════════════════ BRAND PALETTE — Anjum Extraction · v2 Workspace Rail Cream sidebar / paper canvas / olive primary Gold reserved for orders+revenue, terracotta for urgency ══════════════════════════════════════════════════════ */ /* ── Core surfaces ── */ --bg: #fbfaf6; /* paper canvas */ --card: #ffffff; /* Sidebar — dark olive rail (Variant B) */ --sidebar-bg: #1c2412; --sidebar-text: #e9ead8; --sidebar-text-muted: #8a9670; --sidebar-hov: #2a3219; --sidebar-active: #2f3a22; --sidebar-border: #2a3219; --sidebar-stripe: #c4d399; /* ── Primary: Olive Green ── */ --primary: #3d4e24; --primary-light: #526b2e; --primary-dark: #1c2412; /* ── Accent gold — reserved for orders + revenue ── */ --accent: #8a5010; --accent-light: #faf0e4; --accent-line: #e0c090; /* ── Text hierarchy ── */ --text: #1c1c14; --text-muted: #3c3c30; --text-light: #6e6e5e; --text-xlight: #a8a895; /* ── Borders — quieter than v1 ── */ --border: #ece8de; --border-light: #f3efe6; /* ── Danger: Terracotta — urgency ONLY (overdue, pay-pending, errors) ── */ --danger: #8b3a1e; --danger-light: #f7ede8; --danger-line: #e2bba8; /* ── Success: Olive ── */ --success: #3d4e24; --success-light: #eef0e3; --success-line: #c4d399; /* ── Info: Muted slate ── */ --info: #2a5f82; --info-light: #eef3f7; --info-line: #c0d5e2; /* ── Warning: same family as accent gold (was identical anyway) ── */ --warning: #8a5010; --warning-light: #faf0e4; --warning-line: #e0c090; /* ── Purple: Muted aubergine ── */ --purple: #5a3a8a; --purple-light: #f0edf8; --purple-line: #d4caea; /* ── Shadows — tighter, less smoky ── */ --shadow-sm: 0 1px 0 rgba(28,36,18,0.04); --shadow: 0 1px 3px rgba(28,36,18,0.06); --shadow-lg: 0 10px 24px -10px rgba(28,36,18,0.18), 0 3px 6px -3px rgba(28,36,18,0.08); --shadow-card: 0 1px 2px rgba(28,36,18,0.04); --shadow-console: 0 1px 0 rgba(28,36,18,0.04); --shadow-ring: 0 0 0 1px rgba(28,36,18,0.07), 0 10px 28px -12px rgba(28,36,18,0.18); --shadow-modal: 0 0 0 1px rgba(28,36,18,0.07), 0 24px 48px -16px rgba(28,36,18,0.22); --shadow-hover: 0 2px 6px rgba(28,36,18,0.08), 0 1px 2px rgba(28,36,18,0.04); /* ── Radii ── */ --radius: 8px; --radius-sm: 6px; --radius-lg: 10px; /* ── Surface layers ── */ --surface-0: #fbfaf6; /* main canvas (was #e8e2d8) */ --surface-1: #f4f0e8; /* sidebar rail */ --surface-2: #ffffff; /* topbar */ --surface-3: #ffffff; /* cards / inputs */ --surface-4: #ffffff; /* popovers / modals */ --surface-hov: #f3efe6; --surface-act: #ebe6d8; --brand-soft: #eef0e3; /* faint olive tint for nav-active */ /* ── Hairlines ── */ --hairline: rgba(28,36,18,0.06); --hairline-strong: rgba(28,36,18,0.10); --border-card: rgba(28,36,18,0.08); /* ── Spacing rhythm ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* ── Interaction tokens ── */ --t-instant: 80ms ease-out; --t-snap: 120ms ease-out; --t-smooth: 160ms ease-out; /* ── Focus ring — olive-tinted ── */ --focus-ring: 0 0 0 2px rgba(61,78,36,0.22); /* ── Selected state ── */ --selected-stripe: #3d4e24; --selected-bg: #eef0e3; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter Tight', system-ui, -apple-system, sans-serif; background: var(--surface-0); color: var(--text); font-size: 13px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Global font override — enforces Inter Tight across all elements */ *, *::before, *::after { font-family: 'Inter Tight', system-ui, -apple-system, sans-serif; } .mono, .badge-cid, code { font-family: 'JetBrains Mono', monospace !important; } button { cursor: pointer; } a { text-decoration: none; color: inherit; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(45,52,40,0.14); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(45,52,40,0.24); background-clip: padding-box; border: 2px solid transparent; } /* ── Header — flat enterprise, not gradient ── */ .header { background: var(--card); border-bottom: 1px solid var(--border); color: var(--text); padding: 0 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); min-height: 52px; } .header-brand { display: flex; flex-direction: column; line-height: 1.2; padding: 8px 0; } .header-brand .brand-name { font-size: 14px; font-weight: 700; letter-spacing: -0.3px; color: var(--primary); } .header-brand .brand-sub { font-size: 10px; font-weight: 500; color: var(--text-xlight); letter-spacing: 0.3px; margin-top: 1px; } .header-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; } .header-actions { display: flex; gap: 8px; align-items: center; } /* ── Nav Tabs — flat underline enterprise style ── */ .nav-tab { padding: 5px 12px; border-radius: var(--radius-sm); border: none; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: 'Inter Tight', system-ui, sans-serif; color: var(--text-light); background: transparent; transition: background var(--t-instant), color var(--t-instant); } .nav-tab.active { background: var(--brand-soft); color: var(--primary); font-weight: 600; } .nav-tab:hover:not(.active) { background: var(--surface-hov); color: var(--text-muted); } /* ── Buttons ── */ .btn { padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: 'Inter Tight', system-ui, sans-serif; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; line-height: 1.4; } .btn-primary { background: var(--primary); color: white; border-color: var(--primary); font-weight: 600; } .btn-primary:hover { background: var(--primary-dark); } .btn-secondary { background: var(--card); color: var(--text-muted); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-hov); } .btn-accent { background: var(--accent); color: white; } .btn-accent:hover { background: #b08050; } .btn-danger { background: var(--danger-light); color: var(--danger); border-color: var(--danger-line); } .btn-danger:hover { background: #fbebe7; } .btn-white { background: var(--card); color: var(--text-muted); border: 1px solid var(--border); } .btn-white:hover { background: var(--surface-hov); color: var(--text); } .btn-sm { padding: 4px 10px; font-size: 11.5px; } .btn-new { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; } .btn-new:hover { background: var(--primary-dark); } /* ── Content ── */ #content { flex: 1; padding: 24px 20px 20px; max-width: 1240px; margin: 0 auto; width: 100%; } /* ── Cards ── */ .card { background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 18px; box-shadow: var(--shadow-sm); } .stat-card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); padding: 15px; cursor: pointer; text-align: center; box-shadow: var(--shadow-sm); /* transition + hover: defined in interactive states block */ } /* ── Lead Cards ── */ .lead-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; cursor: pointer; margin-bottom: 8px; box-shadow: var(--shadow-card); will-change: border-color; contain: layout style; /* transition: defined in interactive states block */ } .lead-card:hover { border-color: var(--primary); } .lead-card.selected { border-color: var(--primary); background: var(--success-light); } .lead-card.overdue { border-color: var(--danger-line); background: var(--danger-light); } /* ── Badges — soft semantic with borders (terracotta + olive palette) ── */ .badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; vertical-align: middle; line-height: 1.5; } /* Source badges */ .source-Email { background: var(--info-light); color: var(--info); border-color: var(--info-line); } .source-WhatsApp { background: var(--success-light); color: var(--primary); border-color: var(--success-line); } .source-Phone { background: var(--surface-hov); color: var(--text-muted); border-color: var(--border); } .source-Indiamart { background: var(--warning-light); color: var(--warning); border-color: var(--warning-line); } .source-TradeIndia{ background: #fef3e2; color: #7a3e08; border-color: #e8c898; } .source-Website { background: var(--purple-light); color: var(--purple); border-color: var(--purple-line); } .source-Walk-in { background: #fdf0f5; color: #7a2050; border-color: #e8b8cc; } .source-Other { background: var(--surface-hov); color: var(--text-light); border-color: var(--border); } .source-Reference { background: var(--warning-light); color: var(--warning); border-color: var(--warning-line); } .source-Exhibition{ background: #fef0ff; color: #6a2070; border-color: #d8a8e4; } /* Stage badges — olive-based progression */ .stage-Enquiry { background: var(--info-light); color: var(--info); border-color: var(--info-line); } .stage-PriceSent { background: var(--warning-light); color: var(--warning); border-color: var(--warning-line); } .stage-SampleSent { background: var(--purple-light); color: var(--purple); border-color: var(--purple-line); } .stage-SampleDelivered { background: #ede8f5; color: #4a2d72; border-color: #c8bce0; } .stage-OrderReceived { background: #f0f4e4; color: #2a3618; border-color: #b8c88a; font-weight: 700; } .stage-Dispatched { background: #e4eccc; color: #243018; border-color: #a0b868; font-weight: 700; } .stage-OrderDelivered { background: var(--success-light); color: var(--primary); border-color: var(--success-line); font-weight: 700; } .stage-Closed { background: var(--surface-hov); color: var(--text-light); border-color: var(--border); } /* Priority badges — terracotta for high */ .priority-High { background: var(--danger-light); color: var(--danger); border-color: var(--danger-line); font-weight: 700; } .priority-Medium { background: var(--warning-light); color: var(--warning); border-color: var(--warning-line); } .priority-Low { background: var(--surface-hov); color: var(--text-light); border-color: var(--border); } /* Follow-up urgency badges — terracotta for overdue */ .badge.fu-badge-overdue { background: var(--danger-light); color: var(--danger); border-color: var(--danger-line); font-weight: 700; } .badge.fu-badge-today { background: var(--warning-light); color: var(--warning); border-color: var(--warning-line); font-weight: 700; } .badge.fu-badge-upcoming { background: var(--info-light); color: var(--info); border-color: var(--info-line); font-weight: 600; } .lead-card.no-response-card { background: #f9fafb; border-color: #e5e7eb; opacity: 0.75; } .lead-card.no-response-card:hover { opacity: 1; } .txt-primary { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.35; letter-spacing: -0.1px; } .txt-secondary { font-size: 12.5px; font-weight: 500; color: var(--text-muted); line-height: 1.4; } .txt-tertiary { font-size: 11px; font-weight: 400; color: var(--text-light); line-height: 1.4; } .txt-muted { color: var(--text-light); } /* Number alignment — for any / containing numeric data */ .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; text-align: right; font-weight: 700; letter-spacing: -0.1px; } /* Action button affordance — buttons with title= get a subtle hover cue */ button[title]:hover, a[title]:hover { filter: brightness(0.95); } /* Empty-state utility — use on any container */ .empty-state { text-align: center; padding: 48px 20px; color: var(--text-light); font-size: 14px; } .empty-state-icon { font-size: 40px; opacity: 0.6; margin-bottom: 10px; } .empty-state-title { font-size: 15px; color: var(--text-muted); margin-bottom: 4px; } .empty-state-hint { font-size: 12px; color: var(--text-light); } /* Consistent card spacing — applied only to cards that already exist */ .lead-card + .lead-card { margin-top: 0; } /* margin-bottom on parent handles gap */ /* Truncation helpers — prevent horizontal overflow on mobile */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Mobile overflow safety — prevents accidental horizontal scroll on long words */ @media (max-width: 640px) { .lead-card { word-break: break-word; overflow-wrap: anywhere; } .lead-card .badge { max-width: 100%; } body { overflow-x: hidden; } } /* Null-safe display — any element with data-empty="true" shows em-dash */ [data-empty="true"]::before { content: "—"; color: var(--text-light); } .badge-cid { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; background: var(--primary); color: white; padding: 2px 8px; border-radius: 12px; } .badge-source-detail { font-size: 11px; color: var(--text-muted); font-style: italic; } /* ── Stage Bar ── */ .stage-bar { display: flex; gap: 3px; margin-top: 8px; } .stage-bar-step { flex: 1; height: 4px; border-radius: 3px; background: var(--border-light); transition: background 0.15s; } /* ── Quick Stage Buttons ── */ .quick-stage { padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-light); font-size: 11px; font-weight: 600; cursor: pointer; font-family: 'Inter Tight', system-ui, sans-serif; } /* ── Avatar ── */ .avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } /* ── Forms ── */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .form-field { margin-bottom: 0; } .form-field label { display: block; font-size: 10px; font-weight: 600; color: var(--text-light); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px; } .inp { width: 100%; padding: 7px 11px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; font-family: 'Inter Tight', system-ui, sans-serif; outline: none; height: 34px; /* transition + focus: defined in interactive states block */ } textarea.inp { resize: vertical; height: auto; } select.inp { cursor: pointer; } .section-label { font-size: 10px; font-weight: 700; color: var(--primary); letter-spacing: 0.6px; text-transform: uppercase; margin: 16px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--border); } .product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 4px; } .product-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; background: var(--success-light); border: 1px solid #a7d9a8; font-size: 12px; font-weight: 600; color: var(--primary); } .product-tag .tag-type { font-size: 10px; color: var(--primary); background: #d4eece; padding: 1px 6px; border-radius: 10px; } .product-tag .tag-qty { font-size: 10px; color: #0369a1; background: #e0f2fe; padding: 1px 6px; border-radius: 10px; } .product-tag .tag-remove { cursor: pointer; color: #a7d9a8; font-size: 15px; line-height: 1; transition: color 0.1s; } .product-tag .tag-remove:hover { color: var(--danger); } .pc-list { display: flex; flex-direction: column; gap: 12px; } .pc-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: linear-gradient(135deg, #fafaf8, #f8f6f3); position: relative; transition: border-color 0.12s; } .pc-card.pc-filled { border-color: #a7d9a8; } .pc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 6px; } .pc-num { font-size: 11px; font-weight: 600; color: var(--primary); background: rgba(45,106,79,0.08); padding: 2px 9px; border-radius: 12px; flex-shrink: 0; } .pc-title { font-size: 13px; font-weight: 600; color: var(--primary-dark); flex: 1; text-align: center; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-remove { width: 26px; height: 26px; border: none; background: var(--danger-light); color: var(--danger); border-radius: 50%; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.1s; } .pc-remove:hover { background: var(--danger); color: white; } .pc-search-wrap { position: relative; margin-bottom: 10px; } .pc-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border: 1px solid var(--primary); border-radius: var(--radius); max-height: 200px; overflow-y: auto; z-index: 200; box-shadow: var(--shadow-lg); margin-top: 2px; display: none; } .pc-dropdown .pc-opt { padding: 9px 13px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border-light); transition: background 0.1s; } .pc-dropdown .pc-opt:last-child { border-bottom: none; } .pc-dropdown .pc-opt:hover { background: var(--success-light); color: var(--primary); } .pc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; } .pc-fields .pc-f { display: flex; flex-direction: column; gap: 3px; } .pc-fields .pc-f label { font-size: 10px; font-weight: 600; color: var(--text-light); letter-spacing: 0.4px; text-transform: uppercase; } .pc-fields .pc-f .inp { font-size: 13px; padding: 7px 10px; } .pc-add-btn { width: 100%; padding: 10px; border: 1.5px dashed var(--border); border-radius: var(--radius); background: transparent; color: var(--text-muted); font-family: 'Inter Tight', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color 0.1s, color 0.1s, background 0.1s; margin-top: 8px; } .pc-add-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(45,93,63,0.03); } @media (max-width: 480px) { .pc-fields { grid-template-columns: 1fr; } } .product-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border: 1px solid var(--primary); border-radius: var(--radius); max-height: 210px; overflow-y: auto; z-index: 50; box-shadow: var(--shadow-lg); margin-top: 2px; } .product-option { padding: 9px 13px; cursor: pointer; font-size: 13px; transition: background 0.1s; border-bottom: 1px solid var(--border-light); } .product-option:last-child { border-bottom: none; } .product-option:hover { background: var(--success-light); color: var(--primary); } .product-option.no-result { color: var(--text-light); cursor: default; } .product-option.no-result:hover { background: transparent; } /* ── Landline ── */ .landline-row { display: flex; gap: 8px; } .landline-row .area-code { width: 80px; flex-shrink: 0; } /* ── Detail Panel ── */ .detail-panel { background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 18px; width: 390px; position: fixed; right: 20px; top: 56px; max-height: calc(100vh - 66px); overflow-y: auto; box-shadow: var(--shadow-lg); z-index: 30; } /* Spacer div when detail panel is open */ .detail-spacer { width: 406px; flex-shrink: 0; } /* ── Modal ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(20,18,14,0.42); backdrop-filter: blur(2px); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 18px; overflow-y: auto; } .modal { background: var(--surface-4); border-radius: var(--radius-lg); padding: 24px; width: 100%; max-width: 640px; margin: auto; box-shadow: var(--shadow-modal); animation: modalIn 0.15s ease; position: relative; } .modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--primary); border-radius: var(--radius-lg) var(--radius-lg) 0 0; opacity: 0.7; } @keyframes modalIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--text); letter-spacing: -0.2px; } /* ── Filters ── */ /* M1: per-row sticky removed — unified sticky lives on .leads-ops wrapper instead */ .filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; padding: 8px 0; } .filters .inp { width: auto; flex: 1; min-width: 120px; } .filters select.inp { min-width: 110px; flex: 0 1 auto; } /* ── Filters: clean v8.1 ── */ .filters-clean { gap: 8px; align-items: center; flex-wrap: nowrap; overflow-x: auto; } .filters-clean .inp-search { flex: 1 1 240px; min-width: 200px; } .filters-clean .inp-compact { flex: 0 0 auto; min-width: 130px; max-width: 160px; font-size: 12.5px; } .filters-clean .btn { flex-shrink: 0; } .dot-indicator { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); margin-left: 4px; vertical-align: middle; } /* v4.2: when 'More' filter button contains the dot indicator (extra filters active), tint it */ .filters-clean .btn:has(.dot-indicator) { background: var(--success-light); border-color: var(--success-line); color: var(--primary); } /* ── Filter chips (active filters display) ── */ .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px 0; align-items: center; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--success-light); color: var(--primary); border: 1px solid var(--success-line); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.12s; user-select: none; white-space: nowrap; } .chip:hover { background: var(--success-line); } .chip-x { font-size: 14px; line-height: 1; opacity: 0.6; margin-left: 2px; } .chip:hover .chip-x { opacity: 1; } .chip-clear { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); padding: 4px 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; } .chip-clear:hover { background: var(--bg); color: var(--danger); border-color: var(--danger-line); } /* ── Filter popover ── */ .filter-popover { background: var(--surface-4); border: 1px solid var(--hairline-strong); border-radius: var(--radius); box-shadow: var(--shadow-ring); padding: 14px 16px; margin-bottom: 14px; max-width: 420px; } .popover-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; } .popover-row:last-of-type { margin-bottom: 6px; } .popover-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .popover-row .inp { width: 100%; min-width: unset; } /* ── M1: Sticky operational stack ── */ .leads-ops { position: sticky; top: 52px; /* matches new .header min-height */ z-index: 90; background: var(--surface-2); padding: 10px 14px 4px 14px; margin: -8px -8px 16px -8px; border: 1px solid var(--border-card); border-radius: var(--radius); box-shadow: var(--shadow-console); } .leads-ops .filter-popover { position: relative; z-index: 95; } .leads-ops .inp { background: var(--bg); border-color: var(--border-card); } .leads-ops .inp:focus { background: #ffffff; } /* ── M2: Layout-stable reserved slots for chip row and bulk-bar (kills jump-on-appearance) ── */ #filter-chips-wrap { min-height: 32px; } #filter-chips-wrap:empty { min-height: 0; } #bulk-bar { transition: padding-top .12s ease-out, padding-bottom .12s ease-out; } /* ── M7: Tab count pill (quieter scanning of counts inside tab labels) ── */ .tab-count { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; background: var(--border); color: var(--text-light); border-radius: 999px; vertical-align: middle; font-variant-numeric: tabular-nums; transition: background 0.12s, color 0.12s; } /* v1n-4.1: active tab gets filled count pill for cleaner state read */ /* v1n-4.2: inactive = transparent bg in inline style; active = hex color bg. Selector flips accordingly. */ #tabs-wrap button:not([style*="background:transparent"]) .tab-count { background: rgba(255,255,255,0.25); color: #ffffff; font-weight: 700; letter-spacing: -0.1px; } /* Inactive count pill: sharper edge than v4.1 */ #tabs-wrap button[style*="background:transparent"] .tab-count { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); font-weight: 700; letter-spacing: -0.1px; } /* ── M8: Header utility cluster (visual grouping around sync/user/settings/direct-order) ── */ .header-utility { display: flex; align-items: center; gap: 8px; } /* ── v1n-4.1: Tabs visual refinement (CSS-only, no HTML changes) ── */ /* Soften the inline 3px border-bottom on #tabs-wrap and the bottom edge of inactive tabs. Active tab keeps its inline border-bottom color, so its indicator still wins visually. */ #tabs-wrap { border-bottom-color: var(--hairline-strong) !important; border-bottom-width: 1px !important; } /* Slightly soften inactive tab emoji + tighten letter spacing for scanability */ #tabs-wrap button[style*="background:transparent"] { opacity: 0.72; } #tabs-wrap button[style*="background:transparent"]:hover { opacity: 1; background: rgba(45,52,40,0.04) !important; } /* ── v1n-4.1: Eyebrow utility (used in any zone header that wants subliminal labelling) ── */ .eyebrow { font-size: 10px; font-weight: 700; color: var(--text-light); letter-spacing: 0.6px; text-transform: uppercase; } /* ── M1 mobile fallback: collapse sticky stack on narrow screens — avoids eating phone viewport ── */ @media (max-width: 700px) { .leads-ops { position: static; top: auto; z-index: auto; margin-left: 0; margin-right: 0; } } /* ── Mobile filter overrides ── */ @media (max-width: 640px) { .filters-clean { flex-wrap: wrap; overflow-x: visible; } .filters-clean .inp-search { flex: 1 1 100%; min-width: unset; } .filters-clean .inp-compact { flex: 1 1 calc(50% - 4px); max-width: unset; min-width: unset; } .filter-popover { max-width: unset; } .chip { font-size: 11.5px; } } /* ── Follow-up Overdue/Today card indicators ── */ .fu-overdue { background: var(--danger-light); border: 1px solid var(--danger-line) !important; } .fu-today { background: var(--warning-light); border: 1px solid var(--accent-light) !important; } /* ── Alerts ── */ .alert-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg); border-radius: var(--radius-sm); margin-top: 5px; cursor: pointer; transition: background 0.1s; } .alert-item:hover { background: var(--success-light); } /* ── Setup Banner ── */ .setup-banner { background: linear-gradient(135deg, var(--warning-light), #fef3c7); border: 1px solid #fbbf24; border-radius: var(--radius-lg); padding: 18px; margin-bottom: 18px; display: flex; align-items: flex-start; gap: 12px; } .setup-banner .icon { font-size: 22px; } .setup-banner h3 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .setup-banner p { font-size: 13px; color: var(--text-muted); } /* ── Status ── */ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; } .status-dot.online { background: #22c55e; } .status-dot.offline { background: var(--danger); } /* ── Toast ── */ .toast { position: fixed; bottom: 24px; right: 24px; padding: 10px 22px; border-radius: var(--radius); font-size: 14px; font-weight: 500; z-index: 300; transform: translateY(100px); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: var(--shadow-lg); } .toast.show { transform: translateY(0); opacity: 1; cursor: pointer; } .toast.success { background: var(--primary-dark); color: white; } .toast.error { background: var(--danger); color: white; } .toast.warning { background: var(--warning); color: white; } .spin { display: inline-block; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Phase 3: Global Loader ── */ #globalLoader { position: fixed; top: 10px; right: 14px; z-index: 9999; display: none; align-items: center; gap: 6px; background: rgba(27,67,50,0.92); color: white; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.18); pointer-events: none; letter-spacing: 0.2px; } #globalLoader.active { display: flex; } #globalLoader .loader-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: loaderPulse 0.9s ease-in-out infinite; } @keyframes loaderPulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } /* ── Phase 3: Empty State Hint ── */ .empty-state-hint-text { font-size: 12px; color: var(--text-light); margin-top: 4px; font-style: italic; } .qs-actions { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; } .qs-btn { padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text-muted); font-size: 10.5px; font-weight: 600; cursor: pointer; font-family: 'Inter Tight', system-ui, sans-serif; white-space: nowrap; } .qs-btn.qs-active { border-color: var(--primary); background: var(--primary); color: white; pointer-events: none; } /* fuPulse disabled — eliminated per-frame box-shadow repaint */ .lead-card.fu-pulse-overdue { /* animation removed for scroll performance */ } .lead-card.fu-today-glow { border-left: 3px solid var(--warning); } .lead-card.fu-overdue-glow { border-left: 3px solid var(--danger); } /* --- micro-flash disabled — removed compositing overhead --- */ .micro-flash { display: none; } .repeat-order-btn { padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--info-line); background: var(--info-light); color: var(--info); font-size: 10.5px; font-weight: 600; cursor: pointer; font-family: 'Inter Tight', system-ui, sans-serif; transition: background 0.1s, border-color 0.1s; } .repeat-order-btn:hover { background: #dbeafe; border-color: #7ab4cc; } /* ── Print ── */ @media print { .header, .filters, .btn, .no-print { display: none !important; } #content { max-width: 100%; padding: 0; } .card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; } body { background: white; } } /* ── Responsive ── */ /* Tablet: detail panel narrower so lead list gets enough space */ @media (max-width: 1100px) and (min-width: 701px) { .detail-panel { width: 320px; padding: 16px; } .detail-spacer { width: 336px; } } @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } .form-grid-3 { grid-template-columns: 1fr; } .detail-panel { position: fixed; inset: 0; width: 100%; max-height: 100vh; border-radius: 0; z-index: 50; top: 0; right: 0; } .detail-spacer { display: none; } #leads-layout { flex-direction: column; } .hide-mobile { display: none !important; } .header { padding: 0 12px; } } .show-mobile-only { display: none; } @media (max-width: 700px) { .show-mobile-only { display: block; } } /* ── Lead card: layout, contain, perf ── */ .lead-card { padding: 13px 15px 11px; margin-bottom: 7px; border-radius: 10px; contain: layout style; } .lead-card.selected { background: #f2faf5; border-color: var(--primary); } .lead-card.overdue { border-color: var(--danger-line); background: var(--danger-light); } .lead-card.no-response-card { opacity: 0.78; } .lead-card.no-response-card:hover { opacity: 1; } .lead-card.fu-overdue-glow { border-left-width: 4px; } .lead-card.fu-today-glow { border-left-width: 4px; } /* ── Priority cards (final values) ── */ .lead-card.priority-card-High { background: var(--danger-light); border-color: #fbb6b6; } .lead-card.priority-card-Medium { background: #fffcf0; border-color: #fce490; } .lead-card.priority-card-Low { background: #f4fdf6; border-color: #c0f0cc; } .lead-card.priority-card-Closed { background: #f6f7f8; border-color: #d5d8dc; } .lead-card.priority-card-High:hover { border-color: var(--danger); } .lead-card.priority-card-Medium:hover { border-color: var(--warning); } .lead-card.priority-card-Low:hover { border-color: var(--primary); } .lead-card.priority-card-Closed:hover { border-color: #9ca3af; } .lead-card.duplicate-card { background: var(--danger-light); border-color: var(--danger-line); border-left: 3px solid var(--danger); opacity: 0.93; } .lead-card.duplicate-card:hover { border-color: var(--danger); opacity: 1; } /* ── Lead card action buttons — max 2 visible per card ── */ .lead-card .btn.btn-sm { opacity: 0.82; font-size: 10.5px; padding: 3px 8px; height: 24px; border-radius: 5px; } .lead-card .btn.btn-sm:hover { opacity: 1; } /* card-action-secondary: visible but subtle */ .lead-card .card-action-secondary { opacity: 0.75; } .lead-card .card-action-secondary:hover { opacity: 1; } /* ── Lead card checkbox ── */ .lead-card input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; } /* ── Badges: consolidated hierarchy tiers ── */ .badge { padding: 1px 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02px; border-radius: var(--radius-sm); } .badge.stage-Enquiry, .badge.stage-PriceSent, .badge.stage-SampleSent, .badge.stage-SampleDelivered, .badge.stage-OrderReceived, .badge.stage-Dispatched, .badge.stage-OrderDelivered, .badge.stage-Closed { font-size: 11px; font-weight: 700; padding: 2px 8px; } .badge.source-Email, .badge.source-WhatsApp, .badge.source-Phone, .badge.source-Indiamart, .badge.source-TradeIndia, .badge.source-Website, .badge.source-Walk-in, .badge.source-Other { font-size: 10px; font-weight: 500; padding: 1px 6px; opacity: 0.9; } .badge.priority-High, .badge.priority-Medium, .badge.priority-Low { font-size: 9.5px; font-weight: 600; padding: 1px 6px; opacity: 0.75; } .badge.fu-badge-overdue { font-size: 10.5px; font-weight: 700; padding: 2px 7px; } .badge.fu-badge-today { font-size: 10.5px; font-weight: 700; padding: 2px 7px; } .badge.fu-badge-upcoming { font-size: 10.5px; font-weight: 600; padding: 2px 7px; } /* ── CID badge ── */ .badge-cid { font-size: 9.5px; padding: 2px 7px; border-radius: 10px; vertical-align: middle; } /* ── Quick-stage + repeat buttons ── */ .qs-actions { margin-top: 7px; gap: 5px; padding-top: 6px; border-top: 1px solid var(--border-light); } .qs-btn { padding: 3px 9px; font-size: 10.5px; font-weight: 600; border-radius: 14px; height: 22px; display: inline-flex; align-items: center; } .repeat-order-btn { padding: 3px 9px; font-size: 10.5px; font-weight: 600; height: 22px; display: inline-flex; align-items: center; border-radius: 14px; } /* Hide 3rd+ quick-stage buttons — keep max 2 visible per card. Actions remain in detail panel. */ .qs-actions .qs-btn:nth-child(n+3) { display: none; } /* ── Avatar ── */ .avatar { font-size: 13px; letter-spacing: -0.3px; } /* ── Stage bar ── */ .stage-bar { margin-top: 6px; gap: 2px; } .stage-bar-step { height: 3px; } /* ── Filters ── */ .filters { gap: 6px; padding: 7px 0; margin-bottom: 10px; } .filters .inp { font-size: 12.5px; padding: 7px 10px; border-radius: var(--radius-sm); height: 33px; } /* ── Form inputs ── */ .inp { padding: 7px 11px; font-size: 12.5px; height: 34px; border-radius: var(--radius-sm); } textarea.inp { height: auto; } .form-field label { font-size: 10.5px; margin-bottom: 4px; color: var(--text-xlight); letter-spacing: 0.3px; font-weight: 600; } .section-label { margin: 16px 0 10px; font-size: 10px; letter-spacing: 0.5px; color: var(--primary); } /* ── Card + modal ── */ .card { padding: 16px 18px; border-radius: 12px; } .modal-title { font-size: 16px; margin-bottom: 16px; } .modal-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0,0,0,0.45); } /* ── Tab bar ── */ .lead-tab-btn { font-size: 12px; font-weight: 600; font-family: 'Inter Tight', system-ui, sans-serif; } /* ── Scroll + rendering perf ── */ #leads-list { will-change: scroll-position; overscroll-behavior: contain; } /* detail-panel: will-change removed — panel is static; layer promotion wasted GPU memory */ .detail-panel { transform: translateZ(0); } /* promote once cheaply for subpixel text */ /* ── Mobile ── */ @media (max-width: 640px) { .lead-card { padding: 11px 12px 9px; } .filters .inp { font-size: 12px; } .qs-actions { gap: 4px; } } /* ── Lead card inner layout ── */ .lead-card > div:first-child { display: flex; align-items: flex-start; gap: 12px; } .lead-card > div:first-child > div:last-child { flex: 1; min-width: 0; } .lead-card > div:first-child > div:last-child > div:first-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.3; } .lead-card > div:first-child > div:last-child > div:nth-child(2) { font-size: 13px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lead-card > div:first-child > div:last-child > div:nth-child(3) { font-size: 12px; color: var(--text-light); margin-top: 2px; } .lead-card > div:first-child > div:last-child > div:nth-child(4) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .lead-card > div:first-child > div:last-child > div:nth-child(5) { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .lead-card small, .lead-card .note-text { font-size: 11px; color: var(--text-light); line-height: 1.4; } /* Clamp product/note preview to 1 line on card for scannability */ .lead-card .card-prod-preview { font-size: 11.5px; color: var(--text-light); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .lead-card .btn.btn-sm { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; } .badge { line-height: 1.4; vertical-align: middle; white-space: nowrap; } .badge-cid { line-height: 1.4; vertical-align: middle; white-space: nowrap; } .badge-source-detail { font-size: 11px; color: var(--text-muted); font-style: italic; line-height: 1.4; } .qs-btn { line-height: 1; flex-shrink: 0; } .repeat-order-btn { line-height: 1; flex-shrink: 0; } .qs-actions { display: flex; align-items: center; flex-wrap: wrap; } .alert-item { display: flex; align-items: center; gap: 8px; } .stage-bar { display: flex; gap: 2px; } .form-field label { line-height: 1.4; display: block; } .txt-secondary { font-size: 13px; font-weight: 500; color: var(--text-muted); line-height: 1.4; } .txt-tertiary { font-size: 11px; color: var(--text-light); line-height: 1.4; } .stat-card .stat-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; } .stat-card .stat-label { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 2px; } .nav-tab { /* transition: defined in interactive states block */ } .btn { /* transition: defined in interactive states block */ } @media (max-width: 640px) { .badge { max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .lead-card > div:first-child { gap: 8px; } .lead-card > div:first-child > div:last-child > div:nth-child(2) { white-space: normal; } } /* ── User chip in header — flat header context ── */ .user-chip { display: flex; align-items: center; gap: 6px; background: var(--surface-hov); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 8px 3px 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .user-chip .chip-avatar { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; background: var(--primary); color: white; } .user-chip select option { background: var(--card); color: var(--text); } .user-chip select { color: var(--text-muted); font-size: 12px; font-weight: 600; font-family: 'Inter Tight', system-ui, sans-serif; } /* ═══════════════════════════════════════════════════════════════ INTERACTIVE STATES — v1n-5.5 Philosophy: restraint. One signal per state. Never two. Hover = surface lift (shadow) only. No color flood. Selected = left accent stripe + micro-tint. Not full bg swap. Focus = crisp 2px ring at real opacity. Not a glow. Press = 1px physical sink. No color change. Timing = 80–120ms ease-out. Instant feel, not animation. ═══════════════════════════════════════════════════════════════ */ /* ── GLOBAL: performance-safe transition base ── Only transition properties that don't cause layout. box-shadow, opacity, transform, border-color, background-color are safe. */ .lead-card, .stat-card, .alert-item, .btn, .qs-btn, .quick-stage, .repeat-order-btn, .inp, .chip, .pc-opt, .product-option, .nav-tab { transition: border-color var(--t-instant), background-color var(--t-instant), box-shadow var(--t-instant), opacity var(--t-instant), transform var(--t-instant); } /* ────────────────────────────────────────────── LEAD CARD ────────────────────────────────────────────── */ /* Base: shadow already defined. Transition added above. */ .lead-card { will-change: transform, box-shadow, border-color; } /* Hover: shadow lifts, border tints to primary at 40% — not full colour */ .lead-card:hover { border-color: rgba(45,106,79,0.40); box-shadow: var(--shadow-hover); transform: translateY(-1px); } /* Active/press: sink back down */ .lead-card:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(32,28,20,0.06); transition-duration: 50ms; } /* Selected: left accent stripe is the primary signal. Background tint is secondary — very faint, not a full colour. */ .lead-card.selected { border-color: var(--selected-stripe); border-left-width: 3px; background: var(--selected-bg); box-shadow: 0 1px 3px rgba(45,106,79,0.10); transform: translateY(0); /* selected cards don't float */ } /* Selected + hover: hold selection visually, allow shadow */ .lead-card.selected:hover { border-color: var(--selected-stripe); box-shadow: 0 2px 8px rgba(45,106,79,0.12); transform: translateY(-1px); } /* Priority cards: preserve colour, add hover lift */ .lead-card.priority-card-High:hover, .lead-card.priority-card-Medium:hover, .lead-card.priority-card-Low:hover, .lead-card.priority-card-Closed:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); } /* Overdue/today: no translateY — these already carry urgency, don't bounce them */ .lead-card.fu-overdue-glow:hover, .lead-card.fu-today-glow:hover { transform: none; box-shadow: var(--shadow-hover); } /* ────────────────────────────────────────────── BUTTONS — primary, secondary, white ────────────────────────────────────────────── */ /* All buttons: consistent press sink */ .btn:active { transform: translateY(1px); box-shadow: none !important; transition-duration: 50ms; } /* Primary: hover darkens + micro shadow */ .btn-primary { box-shadow: 0 1px 2px rgba(27,67,50,0.18), inset 0 1px 0 rgba(255,255,255,0.08); } .btn-primary:hover { background: var(--primary-dark); box-shadow: 0 2px 6px rgba(27,67,50,0.22), inset 0 1px 0 rgba(255,255,255,0.08); } /* Secondary: hover = L2 background + border darkens slightly */ .btn-secondary:hover { background: var(--bg); border-color: rgba(45,42,35,0.22); } /* White (header): hover lifts opacity */ .btn-white:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.45); } /* Danger: hover deepens */ .btn-danger:hover { background: var(--danger-light); border-color: var(--danger); } /* New lead button in header: shadow emphasises CTA */ .btn-new { box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.3); } .btn-new:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.16), 0 0 0 1px rgba(255,255,255,0.4); } /* ────────────────────────────────────────────── INPUT FIELDS ────────────────────────────────────────────── */ /* Hover: border darkens to show affordance without focus ring */ .inp:hover:not(:focus) { border-color: rgba(45,42,35,0.22); } /* Focus: crisp 2px ring at real opacity — no glow spread */ .inp:focus { border-color: var(--primary); box-shadow: var(--focus-ring); background: #ffffff; outline: none; } /* Select inputs: cursor pointer already set, add focus ring */ select.inp:focus { box-shadow: var(--focus-ring); } /* ────────────────────────────────────────────── QUICK-STAGE BUTTONS (detail panel) ────────────────────────────────────────────── */ .quick-stage:hover { border-color: var(--primary); color: var(--primary); background: rgba(45,106,79,0.07); /* tint not flood */ } .quick-stage:active { transform: translateY(1px); transition-duration: 50ms; } /* Active stage: filled, no further hover needed */ .quick-stage[style*="border-color"]:hover { filter: brightness(0.94); } /* ────────────────────────────────────────────── QS-BTNS (quick-stage in card footer) ────────────────────────────────────────────── */ .qs-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(45,106,79,0.07); } .qs-btn:active { transform: translateY(1px); transition-duration: 50ms; } /* Filled active state: instant, no bounce */ .qs-btn.qs-active { transition: background var(--t-snap), border-color var(--t-snap), color var(--t-snap); } /* ────────────────────────────────────────────── STAT CARDS (dashboard) ────────────────────────────────────────────── */ .stat-card:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-1px); } .stat-card:active { transform: translateY(0); transition-duration: 50ms; } /* ────────────────────────────────────────────── ALERT ITEMS (follow-up list in dashboard) ────────────────────────────────────────────── */ .alert-item { border-radius: var(--radius-sm); transition: background-color var(--t-instant); } /* Overdue context: hover tints the danger palette, not green */ div[style*="background:var(--danger-light)"] .alert-item:hover { background: rgba(220,38,38,0.07) !important; } div[style*="background:var(--warning-light)"] .alert-item:hover { background: rgba(217,119,6,0.07) !important; } /* ────────────────────────────────────────────── NAV TABS (legacy header treatment — overridden by the sidebar rules at the bottom of this file) ────────────────────────────────────────────── */ .nav-tab { position: relative; } /* legacy white-transparent active style replaced by sidebar rules */ /* ────────────────────────────────────────────── LEAD VIEW TABS (All / Active / Orders…) These use inline styles via JS — we target via the tabs-wrap context with attribute selectors. ────────────────────────────────────────────── */ #tabs-wrap button { transition: background-color var(--t-snap), color var(--t-snap), opacity var(--t-snap); } /* Inactive tab hover: surface reveal, never the fill colour */ #tabs-wrap button[style*="background:transparent"]:hover { background: rgba(45,42,35,0.06) !important; opacity: 1 !important; color: var(--text-muted) !important; } /* Active tab: bottom underline stripe via box-shadow (no layout shift) */ #tabs-wrap button:not([style*="background:transparent"]) { box-shadow: inset 0 -2px 0 rgba(255,255,255,0.4); } /* ────────────────────────────────────────────── FILTER CHIPS ────────────────────────────────────────────── */ .chip { transition: background-color var(--t-instant), border-color var(--t-instant), box-shadow var(--t-instant); } .chip:hover { background: var(--brand-soft); border-color: var(--success-line); box-shadow: 0 1px 3px rgba(45,106,79,0.10); } .chip:active { transform: scale(0.98); transition-duration: 50ms; } /* ────────────────────────────────────────────── DROPDOWN OPTIONS (pc-dropdown, product-dropdown) ────────────────────────────────────────────── */ .pc-dropdown .pc-opt, .product-option { transition: background-color var(--t-instant), color var(--t-instant); } .pc-dropdown .pc-opt:hover { background: rgba(45,106,79,0.07); color: var(--primary); } .product-option:hover { background: rgba(45,106,79,0.07); color: var(--primary); } /* ────────────────────────────────────────────── REPEAT ORDER BUTTON ────────────────────────────────────────────── */ .repeat-order-btn:hover { background: #dbeafe; border-color: #60a5fa; } .repeat-order-btn:active { transform: translateY(1px); transition-duration: 50ms; } /* ────────────────────────────────────────────── PC-CARD (product card in modal) ────────────────────────────────────────────── */ .pc-card { transition: border-color var(--t-instant), box-shadow var(--t-instant); } .pc-card:focus-within { border-color: rgba(45,106,79,0.30); box-shadow: 0 0 0 3px rgba(45,106,79,0.06); } /* ────────────────────────────────────────────── FORM FIELDS: label lifts on field focus ────────────────────────────────────────────── */ .form-field:focus-within label { color: var(--primary); transition: color var(--t-snap); } /* ────────────────────────────────────────────── DETAIL PANEL CARD HOVER (action-bearing cards) ────────────────────────────────────────────── */ .detail-panel .card { transition: border-color var(--t-instant), box-shadow var(--t-instant); } /* ────────────────────────────────────────────── FOCUS-VISIBLE: keyboard navigation ring Only shows on keyboard, not mouse click. ────────────────────────────────────────────── */ .btn:focus-visible, .qs-btn:focus-visible, .quick-stage:focus-visible, .nav-tab:focus-visible, .lead-card:focus-visible, .stat-card:focus-visible, .chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ────────────────────────────────────────────── REDUCED MOTION: respect OS preference ────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .lead-card, .btn, .qs-btn, .stat-card, .chip, .inp { transition: none !important; transform: none !important; } } /* ══════════════════════════════════════════════════════════════ PIPELINE COGNITION LAYER — v1 Philosophy: scan speed over decoration. Every rule here must serve operational awareness, not visual polish. One signal per urgency tier. Left-edge is the scanline. ══════════════════════════════════════════════════════════════ */ /* ── 1. LEFT-EDGE URGENCY TREATMENT ── The left edge is the fastest scan path in a dense list. 3px solid strip = instant urgency classification. No background flood needed — edge alone carries the signal. */ /* Overdue: full danger red — needs immediate action */ .lead-card.fu-overdue-glow { border-left: 3px solid var(--danger) !important; border-left-width: 3px !important; } /* Today: amber — scheduled attention today */ .lead-card.fu-today-glow { border-left: 3px solid var(--warning) !important; border-left-width: 3px !important; } /* High priority: primary green accent — hot lead */ .lead-card.priority-card-High { border-left: 3px solid var(--danger); } /* Medium priority: muted amber left edge */ .lead-card.priority-card-Medium { border-left: 3px solid var(--warning); } /* Selected: already has 3px green — keep it dominant */ .lead-card.selected { border-left: 3px solid var(--selected-stripe) !important; border-left-width: 3px !important; } /* Overdue card: tighter left border clarity (overdue > priority) */ .lead-card.fu-overdue-glow.priority-card-High, .lead-card.fu-overdue-glow.priority-card-Medium { border-left: 3px solid var(--danger) !important; } /* ── 2. TAB RAIL — QUIET OPERATIONAL AUTHORITY ── Active tab: strong floor anchor (3px bottom line in tab color). Not louder in size — more decisive in signal. Inactive tabs recede further so active tab dominates. */ /* Active tab: bottom anchor line via box-shadow (no layout shift). Inset bottom shadow creates a 3px floor indicator. */ #tabs-wrap button:not([style*="background:transparent"]) { box-shadow: inset 0 -3px 0 rgba(255,255,255,0.55), /* bottom anchor: stronger */ 0 1px 3px rgba(45,52,40,0.08); /* micro lift: separates from content below */ } /* Active tab: sharper count pill — white text, legible */ #tabs-wrap button:not([style*="background:transparent"]) .tab-count { background: rgba(255,255,255,0.28); color: #fff; font-weight: 800; letter-spacing: -0.2px; } /* Inactive tabs: recede more decisively */ #tabs-wrap button[style*="background:transparent"] { opacity: 0.58; } #tabs-wrap button[style*="background:transparent"]:hover { opacity: 0.92 !important; } /* Inactive count pill: muted border, legible but quiet */ #tabs-wrap button[style*="background:transparent"] .tab-count { background: transparent; color: var(--text-light); border: 1px solid var(--border); font-weight: 600; } /* Tab bottom border: stronger base line — gives the rail a "floor" */ #tabs-wrap { border-bottom: 2px solid var(--hairline-strong) !important; } /* ── 3. HOVER STATE — SUBTLE ALIVE SIGNAL ── Cards should feel responsive without bouncing. Left-edge brightens on hover = directional feedback. */ /* Standard card hover: shadow lift is enough */ .lead-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); } /* Overdue hover: hold position, only shadow changes (already alarming enough) */ .lead-card.fu-overdue-glow:hover { transform: none; box-shadow: 0 2px 10px rgba(239,68,68,0.12), 0 1px 3px rgba(239,68,68,0.06); } /* Today hover: same — hold position */ .lead-card.fu-today-glow:hover { transform: none; box-shadow: 0 2px 10px rgba(217,119,6,0.10), 0 1px 3px rgba(217,119,6,0.05); } /* ── 4. QUICK-STAGE NEXT-ACTION WEIGHT ── The first/primary quick-stage button is the logical next action. It should carry slightly more visual weight than secondary buttons. Not colorful — just decisive. */ /* First qs-btn in a card = primary next action */ .qs-actions .qs-btn:first-child { border-color: rgba(45,106,79,0.35); color: var(--primary-dark); font-weight: 700; } .qs-actions .qs-btn:first-child:hover { background: rgba(45,106,79,0.10); border-color: var(--primary); color: var(--primary); } /* ── 5. SELECTED CARD — DEEPER AUTHORITY ── Selection should feel decisive, not just tinted. */ .lead-card.selected { background: #eef8f2; border-color: var(--selected-stripe); box-shadow: 0 1px 4px rgba(45,106,79,0.13), inset 0 0 0 0 transparent; } .lead-card.selected:hover { box-shadow: 0 2px 8px rgba(45,106,79,0.14); } /* ════════════════════════════════════════════════════════════ v2 · WORKSPACE RAIL LAYOUT Cream sidebar + paper main + thin topbar. Coexists with all v1 rules — overrides where needed. ════════════════════════════════════════════════════════════ */ html, body { height: 100%; } body { background: var(--surface-0); } /* App shell wraps everything below #globalLoader. grid puts a 220px sidebar on the left and main on the right. */ .app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: var(--surface-0); } /* ──── Sidebar ──── */ .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; padding: 14px 12px 12px; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 50; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; border-bottom: 1px solid var(--sidebar-border); margin-bottom: 6px; } .sidebar-brand .mark { width: 32px; height: 32px; border-radius: 8px; background: #e9ead8; color: #1c2412; font-family: 'Instrument Serif', 'Georgia', serif; font-size: 19px; font-style: italic; font-weight: 600; display: grid; place-items: center; flex-shrink: 0; line-height: 1; } .sidebar-brand .tx { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--sidebar-text); line-height: 1.2; letter-spacing: -0.1px; } .sidebar-brand .tx { font-family: 'Inter Tight', system-ui, sans-serif; } .sidebar-brand .tx span { display: block; font-size: 9.5px; font-weight: 500; color: var(--sidebar-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; } .sidebar-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sidebar-text-muted); padding: 12px 10px 6px; } /* Sidebar nav-tab override — full-width pills with icons. The JS sets className = "nav-tab"+(active?" active":""), so we scope our rules to .sidebar so existing semantics still apply. */ .sidebar .nav-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--sidebar-text); background: transparent; border: none; cursor: pointer; text-align: left; font-family: 'Inter Tight', system-ui, sans-serif; transition: background var(--t-instant); } .sidebar .nav-tab:hover:not(.active) { background: var(--sidebar-hov); } .sidebar .nav-tab.active { background: var(--sidebar-active); color: var(--sidebar-text); font-weight: 600; /* nullify legacy inset shadow */ box-shadow: none; } .sidebar .nav-tab.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sidebar-stripe); } .sidebar .nav-tab { padding-left: 14px; } .sidebar-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--sidebar-text-muted); background: transparent; border: none; cursor: pointer; text-align: left; font-family: 'Inter Tight', system-ui, sans-serif; } .sidebar-link:hover { background: var(--sidebar-hov); color: var(--sidebar-text); } .sidebar-spacer { flex: 1; } .sidebar-foot { border-top: 1px solid var(--sidebar-border); padding-top: 10px; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; } .sidebar-status { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--sidebar-text-muted); padding: 4px 10px; font-weight: 500; } .sidebar-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #d97a52; box-shadow: 0 0 0 2px rgba(217,122,82,0.25); } .sidebar-status.online .dot { background: #9bc16a; box-shadow: 0 0 0 2px rgba(155,193,106,0.22); } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: transparent; } .sidebar-user:hover { background: var(--sidebar-hov); } .sidebar-user .av { width: 28px; height: 28px; border-radius: 50%; background: #c4d399; color: #1c2412; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; } .sidebar-user select { background: transparent; border: none; color: var(--sidebar-text); font-size: 12.5px; font-weight: 600; font-family: 'Inter Tight', system-ui, sans-serif; outline: none; cursor: pointer; padding: 0; flex: 1; min-width: 0; } /* dark select option list still gets the OS default; force the option color to be readable in the dropdown */ .sidebar-user select option { color: #1c2412; background: #fff; } /* ──── Main area ──── */ .main-area { background: var(--surface-0); display: flex; flex-direction: column; min-width: 0; /* allow children to shrink */ } .topbar { background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; padding: 0 22px; min-height: 52px; position: sticky; top: 0; z-index: 40; box-shadow: var(--shadow-sm); } .topbar-crumb { font-size: 13px; color: var(--text-light); font-weight: 500; } .topbar-crumb b { color: var(--text); font-weight: 600; } .topbar-search { flex: 1; max-width: 380px; position: relative; } .topbar-search input { width: 100%; background: var(--surface-hov); border: 1px solid transparent; border-radius: 7px; padding: 7px 12px 7px 32px; font-size: 13px; color: var(--text); font-family: 'Inter Tight', system-ui, sans-serif; outline: none; height: 34px; transition: border-color var(--t-snap), background var(--t-snap); } .topbar-search input:focus { background: var(--card); border-color: var(--primary); box-shadow: var(--focus-ring); } .topbar-search::before { content: '⌕'; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-xlight); font-size: 15px; pointer-events: none; } .topbar-spacer { flex: 1; } .topbar .btn { height: 34px; } /* Main content area inside main-area */ .main-area #content { flex: 1; padding: 22px 26px 28px; max-width: none; margin: 0; width: 100%; } /* ──── Re-paint the v1 stat cards to fit paper canvas ──── */ .stat-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; text-align: left; /* was center */ background: var(--card); box-shadow: none; } .stat-card:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); } /* ──── Card paint refresh ──── */ .card { border-radius: 10px; border-color: var(--border); box-shadow: none; } /* ──── Header (legacy) — hidden in v2 layout We keep the .header rules above intact in case any modal references them; the markup is restructured so the legacy header isn't rendered. */ body > .header { display: none; } /* Mobile scrim — always position:fixed so it never consumes a grid column; visibility is toggled by .show */ .sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(28,36,18,0.32); z-index: 49; } .sidebar-scrim.show { display: block; } /* ──── Mobile shell ──── */ @media (max-width: 880px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 232px; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .topbar-menu-btn { display: inline-flex !important; } } .topbar-menu-btn { display: none; } /* ──── Sidebar icon style ──── */ .sidebar .ic { width: 18px; height: 18px; display: inline-grid; place-items: center; flex-shrink: 0; opacity: 0.7; } .sidebar .ic svg { width: 16px; height: 16px; display: block; } .sidebar .nav-tab:hover .ic, .sidebar-link:hover .ic { opacity: 0.95; } .sidebar .nav-tab.active .ic { opacity: 1; color: var(--sidebar-stripe); } /* ════════════════════════════════════════════════════════════ v2 · DASHBOARD POLISH OVERRIDES Push the Workspace Rail aesthetic into the JS-rendered stat cards, section headers and tables, without touching JS. ════════════════════════════════════════════════════════════ */ /* Hide the legacy emoji that JS-templates inject into headers. We replace them visually with thin uppercase typography. */ .main-area #content { font-feature-settings: "ss01", "cv11"; } /* Stat cards: editorial number scale, uppercase label, left-aligned */ .stat-card { text-align: left !important; padding: 16px 18px !important; background: var(--card) !important; border-color: var(--border) !important; box-shadow: none !important; position: relative; } .stat-card > div:first-child { font-family: 'Instrument Serif', 'Georgia', serif !important; font-size: 40px !important; font-weight: 400 !important; letter-spacing: -0.02em !important; line-height: 1 !important; margin-bottom: 8px !important; color: var(--text) !important; } .stat-card > div:last-child { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--text-light) !important; margin-top: 0 !important; } /* Order / Payment-pending tinted variants — restrained */ .stat-card[style*="#fef9f0"] { background: var(--card) !important; } .stat-card[style*="#fef9f0"] > div:first-child { color: var(--accent) !important; } .stat-card[style*="#fef9f0"] > div:last-child { color: var(--accent) !important; } .stat-card[style*="#fffbeb"] { background: var(--danger-light) !important; border-color: var(--danger-line) !important; } .stat-card[style*="#fffbeb"] > div:first-child { color: var(--danger) !important; } .stat-card[style*="#fffbeb"] > div:last-child { color: var(--danger) !important; } /* Card section headers — strip emoji visually, restyle */ .main-area .card > div[style*="font-weight:700"]:first-child, .main-area .card > div[style*="font-weight: 700"]:first-child { font-size: 13px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; color: var(--text) !important; } /* Inline tiny tag inside the same header */ .main-area .card > div:first-child > span[style*="font-weight:500"] { font-weight: 500 !important; color: var(--text-xlight) !important; } /* Setup banner — strip the heavy colorful look */ .setup-banner { background: var(--danger-light) !important; border: 1px solid var(--danger-line) !important; border-radius: 10px !important; padding: 14px 18px !important; } .setup-banner .icon { font-size: 18px !important; } .setup-banner h3 { font-size: 13px !important; font-weight: 600 !important; color: var(--danger) !important; letter-spacing: 0 !important; } .setup-banner p { font-size: 12.5px !important; color: var(--text-muted) !important; } /* Dashboard search bar — use the topbar-search visual */ #dashboard-search { background: var(--card) !important; border-color: var(--border) !important; border-radius: 8px !important; font-family: 'Inter Tight', system-ui, sans-serif !important; font-size: 13.5px !important; color: var(--text) !important; height: 40px !important; padding-left: 38px !important; } #dashboard-search:focus { border-color: var(--primary) !important; box-shadow: var(--focus-ring) !important; } /* Dashboard search icon, drawn from the wrapper */ #view-dashboard > div:has(> #dashboard-search) { position: relative; } #view-dashboard > div:has(> #dashboard-search)::before { content: ''; position: absolute; left: 14px; top: 12px; width: 16px; height: 16px; background: no-repeat center/contain url("data:image/svg+xml;utf8,"); pointer-events: none; z-index: 1; } /* Staff workload rows (rendered by JS) — tighten + serif number */ .main-area .card > div[onclick*="filterByStaff"] { padding: 10px 12px !important; border-color: var(--border-light) !important; } .main-area .card > div[onclick*="filterByStaff"] > div[style*="font-size:26px"] { font-family: 'Instrument Serif', 'Georgia', serif !important; font-size: 26px !important; font-weight: 400 !important; color: var(--text) !important; letter-spacing: -0.01em !important; } .main-area .card > div[onclick*="filterByStaff"] > div[style*="flex:1"] > div[style*="font-size:14px"] { font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; } .main-area .card > div[onclick*="filterByStaff"] > div[style*="flex:1"] > div[style*="font-size:12px"] { font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: var(--text-xlight) !important; } /* Pipeline stage stat cards (rendered by JS) — neutralize tint */ .main-area .card > div > .stat-card[style*="background:#"] { background: var(--card) !important; border-color: var(--border) !important; } /* ── Leads-view tabs (All / Active / Orders / Pay Pending / Closed) ── The JS template builds these with inline styles via tabStyle(). We override the legacy box-shadow/opacity rules and add the dot mark. */ #tabs-wrap { border-bottom: 1px solid var(--border) !important; gap: 4px !important; } #tabs-wrap button { opacity: 1 !important; box-shadow: none !important; } #tabs-wrap button[style*="background:transparent"]:hover { background: var(--surface-hov) !important; color: var(--text) !important; opacity: 1 !important; } /* Tab dot — small colored circle before the label */ .tab-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 2px; flex-shrink: 0; } /* Tab count — neutral, monospaced */ .tab-count { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--surface-hov) !important; color: var(--text-light) !important; font-size: 10.5px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; border: none !important; } #tabs-wrap button:not([style*="background:transparent"]) .tab-count { background: var(--brand-soft) !important; color: var(--text) !important; } /* ── Lead cards (rendered by JS) — flatten + table-row feel ── Reduce padding, drop shadow, hover indicates row interaction. */ .main-area .lead-card { border-radius: 8px !important; box-shadow: none !important; padding: 12px 16px !important; margin-bottom: 6px !important; border-color: var(--border) !important; transition: background var(--t-snap), border-color var(--t-snap); } .main-area .lead-card:hover { background: var(--surface-hov) !important; border-color: var(--border) !important; } .main-area .lead-card.selected { background: var(--success-light) !important; border-color: var(--primary) !important; } .main-area .lead-card.overdue { background: var(--danger-light) !important; border-color: var(--danger-line) !important; } /* ──────────────────────────────────────────────────────────── v2 · LEADS TABLE LAYOUT The lead-card (now class .leadrow) is a CSS Grid row with 8 columns. The header row above uses the same grid. ──────────────────────────────────────────────────────────── */ .leadrow-head, .main-area .lead-card.leadrow { display: grid; grid-template-columns: 28px /* checkbox */ minmax(180px,1.8fr) /* lead */ 130px /* contact */ 130px /* stage */ 110px /* owner */ 150px /* next follow-up */ 80px /* priority */ 130px; /* actions */ column-gap: 14px; align-items: center; } /* Column header strip — uppercase letterspaced labels */ .leadrow-head { padding: 10px 16px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-xlight); } /* Row visuals */ .main-area .lead-card.leadrow { border: 1px solid transparent !important; border-bottom: 1px solid var(--border-light) !important; border-radius: 0 !important; padding: 12px 16px !important; margin-bottom: 0 !important; background: transparent; cursor: pointer; } .main-area .lead-card.leadrow:hover { background: var(--surface-hov) !important; } .main-area .lead-card.leadrow.selected { background: var(--success-light) !important; border-color: var(--success-line) !important; border-bottom-color: var(--success-line) !important; } .main-area .lead-card.leadrow.overdue { background: var(--danger-light) !important; } .main-area .lead-card.leadrow.overdue:hover { background: #f3e3da !important; } /* Row cells */ .lr-check { cursor: pointer; } .lr-lead { min-width: 0; } .lr-lead .lr-name { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; line-height: 1.25; min-width: 0; } .lr-lead .lr-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .lr-lead .lr-sub { font-size: 11.5px; color: var(--text-light); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lr-lead .badge-cid { font-size: 9.5px; padding: 1px 6px; border-radius: 4px; background: var(--surface-hov); color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; } /* Small inline status flags inside the lead name row */ .lr-flag { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 700; flex-shrink: 0; } .lr-flag-dup { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger-line); } .lr-flag-paid { background: var(--success-light); color: var(--primary); border: 1px solid var(--success-line); } .lr-flag-partial { background: var(--warning-light); color: var(--warning); border: 1px solid var(--warning-line); } .lr-flag-overdue { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger-line); } .lr-contact { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lr-stage .badge { font-size: 11px; } .lr-owner { display: flex; align-items: center; gap: 7px; min-width: 0; } .lr-owner-nm { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lr-followup .lr-fu-main { font-size: 12px; color: var(--text); line-height: 1.25; } .lr-followup .lr-fu-last { font-size: 10.5px; color: var(--text-xlight); margin-top: 1px; } .lr-followup .lr-fu-empty { color: var(--text-xlight); } .lr-followup.is-over .lr-fu-main { color: var(--danger); font-weight: 600; } .lr-followup.is-today .lr-fu-main { color: var(--warning); font-weight: 600; } .lr-prio .badge { font-size: 11px; } /* Action icons */ .lr-actions { display: flex; gap: 2px; justify-content: flex-end; } .lr-iconbtn { width: 28px; height: 28px; border: none; background: transparent; border-radius: 6px; color: var(--text-light); display: grid; place-items: center; cursor: pointer; transition: background var(--t-instant), color var(--t-instant); } .lr-iconbtn:hover { background: var(--card); color: var(--text); box-shadow: 0 0 0 1px var(--border); } .lr-iconbtn-danger:hover { color: var(--danger); box-shadow: 0 0 0 1px var(--danger-line); } /* Optional secondary row (only when products exist) */ .lr-products { grid-column: 2 / -2; font-size: 11.5px; color: var(--text-light); padding-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Quick-stage action row spans full width below the main row */ .lr-substage { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--border-light); } .lr-substage .qs-btn { font-size: 11px; padding: 4px 10px; border-radius: 5px; cursor: pointer; background: var(--card); color: var(--text-muted); border: 1px solid var(--border); font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500; } .lr-substage .qs-btn:hover { background: var(--surface-hov); color: var(--text); border-color: var(--text-light); } .lr-substage .qs-success { background: var(--success-light); color: var(--primary); border-color: var(--success-line); font-weight: 600; } .lr-substage .qs-warn { background: var(--danger-light); color: var(--danger); border-color: var(--danger-line); font-weight: 600; } .lr-delivered { font-size: 10.5px; color: var(--text-xlight); align-self: center; } .lr-delivered.is-warning { color: var(--warning); font-weight: 600; } /* Responsive: collapse to card layout on narrow viewports */ @media (max-width: 1100px) { .leadrow-head { display: none; } .main-area .lead-card.leadrow { grid-template-columns: 28px 38px 1fr auto; grid-template-areas: "check avatar lead prio" "check avatar contact stage" "check avatar followup actions"; row-gap: 4px; } .lr-check { grid-area: check; } .lr-lead { grid-area: lead; } .lr-contact{ grid-area: contact; } .lr-stage { grid-area: stage; text-align: right; } .lr-owner { display: none; } .lr-followup { grid-area: followup; } .lr-prio { grid-area: prio; justify-self: end; } .lr-actions{ grid-area: actions; justify-self: end; } .lr-products { grid-column: 3 / -1; } } /* Topbar buttons — flatter */ .topbar .btn { box-shadow: none; } /* Print/legacy headers inside the dashboard's lead cards keep their badges, but darken the stage badge contrast slightly. */ .badge { box-shadow: none; }