@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap";
*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fafafa;--white:#fff;--text-primary:#1a1a1a;--text-secondary:#6b7280;--text-tertiary:#9ca3af;--border:#e5e7eb;--border-light:#f3f4f6;--accent:#2563eb;--accent-light:#eff6ff;--green:#10b981;--green-light:#ecfdf5;--red:#ef4444;--red-light:#fef2f2;--orange:#f59e0b;--orange-light:#fffbeb;--purple:#8b5cf6;--purple-light:#f5f3ff;--shadow-sm:0 1px 2px #0000000a;--shadow-md:0 4px 12px #0000000f;--shadow-lg:0 8px 24px #00000014;--radius:12px;--radius-lg:16px}body{background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5}.sidebar{background:var(--white);border-right:1px solid var(--border);z-index:100;flex-direction:column;width:260px;padding:28px 20px;display:flex;position:fixed;top:0;bottom:0;left:0}.logo{align-items:center;gap:12px;margin-bottom:36px;padding:0 4px;display:flex}.logo-img{object-fit:contain;border-radius:10px;width:36px;height:36px}.logo-text{color:var(--text-primary);letter-spacing:-.3px;font-size:16px;font-weight:600}.logo-sub{color:var(--text-tertiary);margin-top:1px;font-size:11px;font-weight:400}.nav-section{margin-bottom:28px}.nav-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-tertiary);margin-bottom:8px;padding:0 12px;font-size:10px;font-weight:600}.nav-item{cursor:pointer;color:var(--text-secondary);border-radius:8px;align-items:center;gap:10px;padding:10px 12px;font-size:13.5px;font-weight:450;transition:all .15s;display:flex}.nav-item:hover{background:var(--border-light);color:var(--text-primary)}.nav-item.active{background:var(--text-primary);color:#fff}.nav-item svg{flex-shrink:0;width:18px;height:18px}.nav-badge{background:var(--accent);color:#fff;border-radius:10px;margin-left:auto;padding:2px 7px;font-size:10px;font-weight:600}.nav-badge.green{background:var(--green)}.sidebar-footer{border-top:1px solid var(--border);margin-top:auto;padding:16px 12px}.status-indicator{color:var(--text-secondary);align-items:center;gap:8px;font-size:12px;display:flex}.status-dot{background:var(--green);border-radius:50%;width:8px;height:8px;animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.main{min-height:100vh;margin-left:260px;padding:32px 40px}.header{justify-content:space-between;align-items:flex-start;margin-bottom:32px;display:flex}.header-left h1{letter-spacing:-.5px;margin-bottom:4px;font-size:24px;font-weight:700}.header-left p{color:var(--text-secondary);font-size:13px}.header-right{align-items:center;gap:12px;display:flex}.date-filter{border:1px solid var(--border);color:var(--text-secondary);background:var(--white);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-size:13px;transition:all .15s;display:flex}.date-filter:hover{border-color:var(--text-tertiary)}.date-filter svg{width:16px;height:16px}.btn-primary{background:var(--text-primary);color:#fff;cursor:pointer;border:none;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .15s;display:flex}.btn-primary:hover{background:#333}.tabs{background:var(--white);border:1px solid var(--border);border-radius:10px;gap:4px;width:fit-content;margin-bottom:28px;padding:4px;display:flex}.tab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:8px 20px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s}.tab:hover{color:var(--text-primary)}.tab.active{background:var(--text-primary);color:#fff}.kpi-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;display:grid}.kpi-grid-3{grid-template-columns:repeat(3,1fr)}.kpi-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:all .2s}.kpi-card:hover{box-shadow:var(--shadow-md);border-color:#0000}.kpi-header{justify-content:space-between;align-items:flex-start;margin-bottom:12px;display:flex}.kpi-label{color:var(--text-secondary);font-size:12.5px;font-weight:500}.kpi-icon{border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.kpi-icon.blue{background:var(--accent-light);color:var(--accent)}.kpi-icon.green{background:var(--green-light);color:var(--green)}.kpi-icon.orange{background:var(--orange-light);color:var(--orange)}.kpi-icon.purple{background:var(--purple-light);color:var(--purple)}.kpi-icon svg{width:16px;height:16px}.kpi-value{letter-spacing:-1px;margin-bottom:6px;font-size:28px;font-weight:700}.kpi-change{align-items:center;gap:4px;font-size:12px;font-weight:500;display:flex}.kpi-change.up{color:var(--green)}.kpi-change.down{color:var(--red)}.kpi-change svg{width:14px;height:14px}.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:20px;padding:24px}.card-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.card-title{letter-spacing:-.2px;font-size:15px;font-weight:600}.card-subtitle{color:var(--text-tertiary);margin-top:2px;font-size:12px}.grid-2{grid-template-columns:1fr 1fr;gap:20px;display:grid}.grid-3{grid-template-columns:1fr 1fr 1fr;gap:20px;display:grid}.table-container{overflow-x:auto}table{border-collapse:collapse;width:100%}thead th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);border-bottom:1px solid var(--border);padding:0 16px 12px;font-size:11px;font-weight:600}tbody td{border-bottom:1px solid var(--border-light);vertical-align:middle;padding:14px 16px;font-size:13px}tbody tr:hover{background:var(--border-light)}tbody tr:last-child td{border-bottom:none}.caller-info{align-items:center;gap:10px;display:flex}.caller-avatar{background:var(--border-light);width:32px;height:32px;color:var(--text-secondary);border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:600;display:flex}.caller-name{font-weight:500}.caller-phone{color:var(--text-tertiary);font-size:11.5px}.badge{border-radius:6px;align-items:center;gap:4px;padding:4px 10px;font-size:11.5px;font-weight:500;display:inline-flex}.badge.inbound{background:var(--accent-light);color:var(--accent)}.badge.outbound{background:var(--purple-light);color:var(--purple)}.badge.completed{background:var(--green-light);color:var(--green)}.badge.missed{background:var(--red-light);color:var(--red)}.badge.booked{background:var(--green-light);color:var(--green)}.badge.pending{background:var(--orange-light);color:var(--orange)}.badge.no-show{background:var(--red-light);color:var(--red)}.badge.qualified{background:var(--accent-light);color:var(--accent)}.badge.not-qualified{background:var(--border-light);color:var(--text-tertiary)}.chart-area{height:240px;margin-top:8px;position:relative}.chart-bars{align-items:flex-end;gap:8px;height:200px;padding-top:20px;display:flex}.chart-bar-group{flex-direction:column;flex:1;align-items:center;gap:6px;display:flex}.chart-bar-pair{justify-content:center;align-items:flex-end;gap:3px;width:100%;height:180px;display:flex}.chart-bar{cursor:pointer;border-radius:4px 4px 0 0;width:16px;transition:all .3s;position:relative}.chart-bar.inbound{background:var(--text-primary)}.chart-bar.outbound{background:var(--border)}.chart-bar:hover{opacity:.8}.chart-label{color:var(--text-tertiary);font-size:11px;font-weight:500}.chart-legend{justify-content:flex-end;gap:20px;display:flex}.legend-item{color:var(--text-secondary);align-items:center;gap:6px;font-size:11.5px;display:flex}.legend-dot{border-radius:2px;width:8px;height:8px}.legend-dot.dark{background:var(--text-primary)}.legend-dot.light{background:var(--border)}.donut-container{justify-content:center;align-items:center;gap:32px;padding:12px 0;display:flex}.donut{width:140px;height:140px;position:relative}.donut svg{width:100%;height:100%;transform:rotate(-90deg)}.donut-center{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.donut-value{letter-spacing:-.5px;font-size:24px;font-weight:700}.donut-label{color:var(--text-tertiary);font-size:11px}.donut-legend{flex-direction:column;gap:10px;display:flex}.donut-legend-item{align-items:center;gap:8px;font-size:13px;display:flex}.donut-legend-dot{border-radius:3px;width:10px;height:10px}.donut-legend-value{text-align:right;min-width:30px;margin-left:auto;font-weight:600}.activity-list{flex-direction:column;gap:0;display:flex}.activity-item{border-bottom:1px solid var(--border-light);gap:12px;padding:12px 0;display:flex}.activity-item:last-child{border-bottom:none}.activity-dot-wrapper{flex-direction:column;align-items:center;padding-top:4px;display:flex}.activity-dot{border-radius:50%;width:8px;height:8px}.activity-dot.green{background:var(--green)}.activity-dot.blue{background:var(--accent)}.activity-dot.orange{background:var(--orange)}.activity-dot.red{background:var(--red)}.activity-content{flex:1}.activity-text{font-size:13px;font-weight:450}.activity-text strong{font-weight:600}.activity-time{color:var(--text-tertiary);margin-top:2px;font-size:11.5px}.metric-row{flex-direction:column;gap:12px;display:flex}.metric-item{border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;padding:12px 0;display:flex}.metric-item:last-child{border-bottom:none}.metric-label{color:var(--text-secondary);font-size:13px}.metric-value{font-size:15px;font-weight:600}.agent-cards{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;display:grid}.agent-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:16px;padding:20px;display:flex}.agent-top{justify-content:space-between;align-items:flex-start;display:flex}.agent-info{align-items:center;gap:12px;display:flex}.agent-avatar{border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:flex}.agent-avatar.inbound{background:var(--accent-light)}.agent-avatar.outbound{background:var(--purple-light)}.agent-name{font-size:14px;font-weight:600}.agent-type{color:var(--text-tertiary);font-size:12px}.agent-status{color:var(--green);align-items:center;gap:6px;font-size:12px;font-weight:500;display:flex}.agent-status-dot{background:var(--green);border-radius:50%;width:6px;height:6px;animation:2s infinite pulse}.agent-stats{grid-template-columns:1fr 1fr 1fr;gap:12px;display:grid}.agent-stat{text-align:center;background:var(--bg);border-radius:8px;padding:10px}.agent-stat-value{letter-spacing:-.5px;font-size:18px;font-weight:700}.agent-stat-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.3px;margin-top:2px;font-size:10.5px}.progress-container{margin-top:4px}.progress-header{justify-content:space-between;margin-bottom:6px;display:flex}.progress-label{color:var(--text-secondary);font-size:12px}.progress-value{font-size:12px;font-weight:600}.progress-bar{background:var(--border-light);border-radius:3px;height:6px;overflow:hidden}.progress-fill{border-radius:3px;height:100%;transition:width .5s}.progress-fill.green{background:var(--green)}.progress-fill.blue{background:var(--accent)}.sentiment-bars{flex-direction:column;gap:14px;padding:4px 0;display:flex}.sentiment-row{align-items:center;gap:12px;display:flex}.sentiment-label{width:80px;color:var(--text-secondary);font-size:13px}.sentiment-bar-bg{background:var(--border-light);border-radius:4px;flex:1;height:8px;overflow:hidden}.sentiment-bar-fill{border-radius:4px;height:100%}.sentiment-pct{text-align:right;width:40px;font-size:13px;font-weight:600}.section{display:none}.section.active{display:block}.loading-overlay{color:var(--text-tertiary);justify-content:center;align-items:center;gap:8px;padding:60px 0;font-size:14px;display:flex}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:var(--white);border-radius:12px;width:100%;max-width:560px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0003}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-close{color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;display:flex}.modal-close:hover{background:var(--border-light);color:var(--text-primary)}.modal-body{padding:20px 24px}.modal-row{gap:16px;margin-bottom:16px;display:flex}.modal-field{flex:1}.modal-field label,.modal-section label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);margin-bottom:4px;font-size:11px;font-weight:600;display:block}.modal-field span{color:var(--text-primary);font-size:13px}.modal-section{margin-bottom:16px}.modal-summary{color:var(--text-secondary);background:var(--border-light);border-radius:8px;margin-top:6px;padding:12px;font-size:13px;line-height:1.6}.date-picker-wrapper{align-items:center;display:inline-flex;position:relative}.date-picker-btn{border:1px solid var(--border);background:var(--white);cursor:pointer;color:var(--text-primary);border-radius:8px;align-items:center;gap:6px;padding:7px 14px;font-family:Space Grotesk,sans-serif;font-size:13px;font-weight:500;display:flex}.date-picker-btn:hover{border-color:var(--accent)}.date-picker-btn svg{width:14px;height:14px;color:var(--text-tertiary)}.date-picker-dropdown{background:var(--white);border:1px solid var(--border);z-index:100;border-radius:10px;min-width:220px;padding:8px;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 8px 24px #0000001f}.date-picker-dropdown button{text-align:left;width:100%;color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:8px 12px;font-family:Space Grotesk,sans-serif;font-size:13px;display:block}.date-picker-dropdown button:hover{background:var(--accent-light)}.date-picker-dropdown button.active{background:var(--accent);color:#fff}.date-picker-dropdown .date-range-inputs{border-top:1px solid var(--border);margin-top:4px;padding:8px 4px}.date-picker-dropdown .date-range-inputs label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);margin-top:8px;margin-bottom:4px;font-size:11px;font-weight:600;display:block}.date-picker-dropdown .date-range-inputs label:first-child{margin-top:0}.date-picker-dropdown .date-range-inputs input[type=date]{border:1px solid var(--border);width:100%;color:var(--text-primary);border-radius:6px;padding:6px 8px;font-family:Space Grotesk,sans-serif;font-size:12px}.date-picker-dropdown .apply-btn{margin-top:8px;font-weight:500;background:var(--accent)!important;color:#fff!important;text-align:center!important}.mobile-header{background:var(--white);border-bottom:1px solid var(--border);z-index:99;align-items:center;gap:12px;height:56px;padding:0 16px;display:none;position:fixed;top:0;left:0;right:0}.mobile-logo{align-items:center;gap:8px;display:flex}.mobile-logo .logo-img{width:28px;height:28px}.mobile-logo .logo-text{font-size:14px}.hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:4px;padding:4px;display:flex}.hamburger span{background:var(--text-primary);border-radius:1px;width:20px;height:2px;display:block}.sidebar-overlay{z-index:99;background:#0006;display:none;position:fixed;inset:0}@media (max-width:1024px){.sidebar{width:220px;padding:20px 14px}.main{margin-left:220px;padding:24px 20px}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:12px}.kpi-grid-3{grid-template-columns:repeat(3,1fr)}.agent-cards{grid-template-columns:1fr 1fr;gap:12px}.grid-2{grid-template-columns:1fr 1fr;gap:16px}.grid-3{grid-template-columns:1fr;gap:16px}.kpi-value{font-size:24px}.card{padding:18px}.header-left h1{font-size:20px}.chart-bar{width:12px}.donut-container{gap:20px}.donut{width:120px;height:120px}.donut-value{font-size:20px}}@media (max-width:767px){.mobile-header{display:flex}.sidebar-overlay{display:block}.sidebar{z-index:100;width:260px;transition:transform .25s;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main{margin-left:0;padding:72px 16px 24px}.header{flex-direction:column;gap:12px;margin-bottom:20px}.header-left h1{font-size:20px}.header-left p{font-size:12px}.header-right,.date-picker-wrapper{width:100%}.date-picker-btn{justify-content:center;width:100%}.date-picker-dropdown{left:0;right:0}.kpi-grid,.kpi-grid-3{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}.kpi-card{padding:14px}.kpi-value{font-size:22px}.kpi-label{font-size:11px}.kpi-icon{width:28px;height:28px}.kpi-icon svg{width:14px;height:14px}.kpi-change{font-size:11px}.agent-cards{grid-template-columns:1fr;gap:12px}.agent-stats{grid-template-columns:repeat(3,1fr);gap:8px}.agent-stat{padding:8px 4px}.agent-stat-value{font-size:16px}.agent-stat-label{font-size:9.5px}.grid-2,.grid-3{grid-template-columns:1fr;gap:14px}.card{border-radius:10px;margin-bottom:14px;padding:16px}.card-header{margin-bottom:14px}.chart-bars{gap:4px;height:150px}.chart-bar-pair{height:130px}.chart-bar{width:10px}.chart-label{font-size:9px}.chart-legend{gap:12px}.donut-container{flex-direction:column;gap:16px}.donut{width:120px;height:120px}.donut-value{font-size:20px}.tabs{flex-wrap:nowrap;width:100%;overflow-x:auto}.tab{white-space:nowrap;padding:7px 14px;font-size:12px}.table-container{margin:0 -16px}table{min-width:600px}thead th{padding:0 12px 10px;font-size:10px}tbody td{padding:10px 12px;font-size:12px}.caller-avatar{width:28px;height:28px;font-size:10px}.caller-name{font-size:12px}.caller-phone{font-size:10px}.badge{padding:3px 8px;font-size:10.5px}.activity-text{font-size:12px}.activity-time{font-size:10.5px}.sentiment-label{width:60px;font-size:12px}.sentiment-pct{width:35px;font-size:12px}.metric-label{font-size:12px}.metric-value{font-size:14px}.progress-label,.progress-value{font-size:11px}.modal-overlay{align-items:flex-end;padding:12px}.modal-content{border-radius:12px 12px 0 0;max-height:85vh}.modal-header,.modal-body{padding:16px}.modal-row{flex-wrap:wrap;gap:12px}.modal-field{min-width:calc(50% - 6px)}}@media (max-width:399px){.main{padding:64px 12px 20px}.kpi-grid{grid-template-columns:1fr 1fr;gap:8px}.kpi-card{padding:12px}.kpi-value{font-size:20px}.agent-stats{grid-template-columns:1fr 1fr 1fr}.card{padding:12px}.header-left h1{font-size:18px}.modal-field{min-width:100%}}