/* Call Logs — date range filter popover. Uses the design tokens; see docs/DESIGN-SYSTEM.md. Rendered into , so these rules are intentionally global (the popover is not inside a container). */ .cldf-pop { position: absolute; z-index: 1200; width: 560px; background: var(--bg-primary, #FFFFFF); border: 1px solid var(--border-primary, #E4E7EC); border-radius: 12px; box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14); font: 400 13px/1.45 'Inter', -apple-system, sans-serif; color: var(--text-primary, #101828); overflow: hidden; } .cldf-body { display: flex; } .cldf-presets { display: flex; flex-direction: column; gap: 2px; width: 168px; padding: 12px; border-right: 1px solid var(--border-primary, #E4E7EC); background: var(--bg-secondary, #F9FAFB); } .cldf-preset { appearance: none; border: 0; background: transparent; text-align: left; padding: 8px 10px; border-radius: 8px; font: 500 13px/1.2 'Inter', sans-serif; color: var(--text-primary, #101828); cursor: pointer; } .cldf-preset:hover { background: var(--bg-primary-hover, #F2F4F7); } .cldf-preset.is-on { background: var(--bg-brand-secondary, #EFF8FF); color: var(--text-brand, #004CE6); } .cldf-cal { flex: 1; padding: 12px 14px; } .cldf-cal-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; padding: 2px 2px 10px; } .cldf-nav { appearance: none; border: 1px solid var(--border-primary, #E4E7EC); background: var(--bg-primary, #FFFFFF); border-radius: 8px; width: 26px; height: 26px; line-height: 1; cursor: pointer; color: var(--text-secondary, #667085); font-size: 15px; } .cldf-nav:hover { background: var(--bg-secondary, #F9FAFB); color: var(--text-primary, #101828); } .cldf-dow, .cldf-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cldf-dow span { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-disabled, #98A2B3); padding-bottom: 4px; } .cldf-day { appearance: none; border: 0; background: transparent; cursor: pointer; height: 32px; border-radius: 8px; font: 400 13px/1 'Inter', sans-serif; color: var(--text-primary, #101828); } .cldf-day:hover { background: var(--bg-primary-hover, #F2F4F7); } .cldf-day.is-empty { pointer-events: none; } .cldf-day.is-inrange { background: var(--bg-brand-secondary, #EFF8FF); border-radius: 0; } .cldf-day.is-start, .cldf-day.is-end { background: var(--bg-brand-primary, #004CE6); color: #FFFFFF; font-weight: 600; } .cldf-day.is-start { border-radius: 8px 0 0 8px; } .cldf-day.is-end { border-radius: 0 8px 8px 0; } .cldf-day.is-start.is-end { border-radius: 8px; } .cldf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border-primary, #E4E7EC); background: var(--bg-secondary, #F9FAFB); } .cldf-summary { color: var(--text-secondary, #667085); font-size: 12.5px; } .cldf-actions { display: inline-flex; gap: 8px; } .cldf-btn { appearance: none; cursor: pointer; border: 1px solid var(--border-secondary, #D0D5DD); background: var(--bg-primary, #FFFFFF); color: var(--text-primary, #344054); border-radius: 8px; padding: 7px 14px; font: 500 13px/1 'Inter', sans-serif; } .cldf-btn:hover { background: var(--bg-secondary, #F9FAFB); } .cldf-btn.is-primary { background: var(--bg-brand-primary, #004CE6); border-color: var(--bg-brand-primary, #004CE6); color: #FFFFFF; } .cldf-btn.is-primary:hover { background: var(--bg-brand-primary-hover, #003BB3); } .cldf-btn:disabled { opacity: .5; cursor: default; } /* the toolbar button reflects an active range */ #clDateBtn.is-active { border-color: var(--bg-brand-primary, #004CE6); color: var(--text-brand, #004CE6); }