@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";
:root{--bg-primary:#000;--bg-secondary:#080808;--bg-surface:#ffffff0a;--bg-surface-hover:#ffffff12;--bg-surface-raised:#ffffff0f;--bg-glass:#ffffff08;--text-primary:#f0f0f5;--text-secondary:#9393a8;--text-muted:#5f5f78;--text-inverse:#07070d;--accent:#c00;--accent-hover:#e62020;--accent-muted:#cc000026;--accent-glow:#cc00004d;--color-emergency:#ef4444;--color-emergency-muted:#ef444426;--color-urgent:#f59e0b;--color-urgent-muted:#f59e0b26;--color-success:#22c55e;--color-success-muted:#22c55e26;--color-info:#3b82f6;--color-info-muted:#3b82f626;--border-subtle:#ffffff0f;--border-default:#ffffff1a;--border-accent:#cc00004d;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 20px #cc000026;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:999px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--transition-fast:.15s cubic-bezier(.4,0,.2,1);--transition-normal:.25s cubic-bezier(.4,0,.2,1);--transition-slow:.4s cubic-bezier(.4,0,.2,1);--header-height:72px;--max-width:1440px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6;overflow-x:hidden}a{color:var(--accent);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--accent-hover)}.app-container{flex-direction:column;min-height:100vh;display:flex}.header{height:var(--header-height);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);padding:0 var(--space-lg);z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.header-left{align-items:center;gap:var(--space-md);display:flex}.header-logo{letter-spacing:-.02em;color:var(--text-primary);align-items:center;gap:var(--space-sm);font-size:1.25rem;font-weight:800;display:flex}.header-logo .logo-accent{color:var(--accent)}.header-badge{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);background:var(--accent-muted);border-radius:var(--radius-full);border:1px solid #0ea5e933;padding:2px 8px;font-size:.65rem;font-weight:600}.header-right{align-items:center;gap:var(--space-md);display:flex}.header-time{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.8rem}.status-indicators{gap:var(--space-sm);display:flex}.status-dot{color:var(--text-muted);background:var(--bg-surface);border-radius:var(--radius-full);border:1px solid var(--border-subtle);align-items:center;gap:6px;padding:4px 10px;font-size:.7rem;display:flex}.status-dot .dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.status-dot .dot.connected{background:var(--color-success);box-shadow:0 0 6px var(--color-success);animation:2s ease-in-out infinite pulse-dot}.status-dot .dot.error{background:var(--color-emergency);box-shadow:0 0 6px var(--color-emergency)}.status-dot .dot.unknown{background:var(--text-muted)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}.kpi-bar{gap:var(--space-md);padding:var(--space-lg);max-width:var(--max-width);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));width:100%;margin:0 auto;display:grid}.kpi-card{background:var(--bg-surface);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-md)var(--space-lg);transition:all var(--transition-normal);position:relative;overflow:hidden}.kpi-card:hover{border-color:var(--border-accent);box-shadow:var(--shadow-glow);transform:translateY(-1px)}.kpi-card:before{content:"";background:var(--accent);opacity:0;height:2px;transition:opacity var(--transition-normal);position:absolute;top:0;left:0;right:0}.kpi-card:hover:before{opacity:1}.kpi-card--clickable{appearance:none;font-family:inherit;font-size:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}.kpi-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:var(--space-xs);font-size:.7rem;font-weight:500}.kpi-value{color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:1.75rem;font-weight:700;line-height:1.2}.kpi-value.emergency{color:var(--color-emergency)}.kpi-value.success{color:var(--color-success)}.kpi-subtext{color:var(--text-muted);margin-top:2px;font-size:.7rem}.main-content{max-width:var(--max-width);width:100%;padding:0 var(--space-lg)var(--space-lg);flex:1;margin:0 auto}.tab-nav{margin-bottom:var(--space-lg);background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-subtle);-webkit-overflow-scrolling:touch;gap:2px;padding:3px;display:flex;overflow-x:auto}.tab-btn{min-width:fit-content;padding:var(--space-sm)var(--space-md);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;gap:var(--space-sm);white-space:nowrap;background:0 0;border:none;flex:1;font-family:inherit;font-size:.8rem;font-weight:500;display:flex}.tab-btn:hover{color:var(--text-secondary);background:var(--bg-surface)}.tab-btn.active{color:var(--text-primary);background:var(--bg-surface-raised);box-shadow:var(--shadow-sm)}.tab-icon{font-size:1rem}.tab-count{background:var(--accent-muted);color:var(--accent);border-radius:var(--radius-full);text-align:center;min-width:18px;padding:1px 6px;font-size:.65rem;font-weight:600}.card{background:var(--bg-surface);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}.card-header{padding:var(--space-md)var(--space-lg);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.card-title{color:var(--text-primary);font-size:.9rem;font-weight:600}.card-stats{gap:var(--space-lg);display:flex}.card-stat{align-items:baseline;gap:var(--space-xs);color:var(--text-muted);font-size:.75rem;display:flex}.card-stat .stat-value{color:var(--text-primary);font-size:.85rem;font-weight:700}.data-table{border-collapse:separate;border-spacing:0;width:100%}.data-table thead{z-index:10;position:sticky;top:0}.data-table th{padding:var(--space-sm)var(--space-md);text-align:left;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);background:var(--bg-surface-raised);border-bottom:1px solid var(--border-subtle);white-space:nowrap;font-size:.65rem;font-weight:600}.data-table td{padding:var(--space-sm)var(--space-md);color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);vertical-align:middle;font-size:.8rem}.data-table tbody tr{transition:background var(--transition-fast)}.data-table tbody tr:hover{background:var(--bg-surface-hover)}.data-table tbody tr:last-child td{border-bottom:none}.badge{border-radius:var(--radius-full);white-space:nowrap;align-items:center;gap:4px;padding:2px 8px;font-size:.7rem;font-weight:600;display:inline-flex}.badge-booked{background:var(--color-success-muted);color:var(--color-success)}.badge-missed,.badge-failed{background:var(--color-emergency-muted);color:var(--color-emergency)}.badge-pending{background:var(--color-urgent-muted);color:var(--color-urgent)}.badge-voicemail{background:var(--color-info-muted);color:var(--color-info)}.badge-closed{color:var(--text-muted);background:#ffffff0f}.badge-review{background:var(--color-urgent-muted);color:var(--color-urgent);border:1px solid #f59e0b4d;animation:2s ease-in-out infinite pulse-review}@keyframes pulse-review{0%,to{border-color:#f59e0b4d}50%{border-color:#f59e0b99}}.badge-itb,.badge-invitation_to_bid{background:var(--color-urgent-muted);color:var(--color-urgent)}.badge-rfp,.badge-request_for_proposal{background:var(--color-info-muted);color:var(--color-info)}.badge-change_order{color:#a855f7;background:#a855f726}.badge-emergency{background:var(--color-emergency-muted);color:var(--color-emergency)}.badge-invoice_payment{background:var(--color-success-muted);color:var(--color-success)}.badge-general,.badge-spam{color:var(--text-muted);background:#ffffff0f}.feed-list{flex-direction:column;display:flex}.feed-item{align-items:flex-start;gap:var(--space-md);padding:var(--space-md)var(--space-lg);border-bottom:1px solid var(--border-subtle);transition:background var(--transition-fast);display:flex}.feed-item:hover{background:var(--bg-surface-hover)}.feed-item:last-child{border-bottom:none}.feed-icon{border-radius:var(--radius-sm);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;display:flex}.feed-icon.call{background:var(--accent-muted);color:var(--accent)}.feed-icon.web,.feed-icon.sms{background:var(--color-success-muted);color:var(--color-success)}.feed-icon.email{background:var(--color-info-muted);color:var(--color-info)}.feed-content{flex:1;min-width:0}.feed-title{color:var(--text-primary);align-items:center;gap:var(--space-sm);font-size:.85rem;font-weight:500;display:flex}.feed-subtitle{color:var(--text-muted);margin-top:2px;font-size:.75rem}.feed-time{color:var(--text-muted);white-space:nowrap;flex-shrink:0;font-size:.7rem}.feed-item.urgency-emergency{border-left:3px solid var(--color-emergency)}.feed-item.urgency-urgent{border-left:3px solid var(--color-urgent)}.filter-bar{gap:var(--space-sm);padding:var(--space-md)var(--space-lg);border-bottom:1px solid var(--border-subtle);display:flex;overflow-x:auto}.filter-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);background:0 0;padding:4px 12px;font-family:inherit;font-size:.7rem;font-weight:500}.filter-btn:hover{border-color:var(--border-default);color:var(--text-secondary)}.filter-btn.active{background:var(--accent-muted);color:var(--accent);border-color:var(--border-accent)}.empty-state{padding:var(--space-2xl)var(--space-lg);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state-icon{margin-bottom:var(--space-md);opacity:.3;font-size:2.5rem}.empty-state-title{color:var(--text-secondary);margin-bottom:var(--space-xs);font-size:.95rem;font-weight:600}.empty-state-text{color:var(--text-muted);max-width:400px;font-size:.8rem}.skeleton{background:linear-gradient(90deg,var(--bg-surface-hover)25%,var(--bg-surface-raised)50%,var(--bg-surface-hover)75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-text{width:100%;height:12px;margin-bottom:var(--space-sm)}.skeleton-text.short{width:60%}.skeleton-text.medium{width:80%}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.recording-link{border-radius:var(--radius-full);background:var(--accent-muted);color:var(--accent);transition:all var(--transition-fast);align-items:center;gap:4px;padding:2px 8px;font-size:.7rem;font-weight:500;display:inline-flex}.recording-link:hover{background:var(--accent-glow);color:var(--accent-hover)}@media (max-width:1024px){.kpi-bar{grid-template-columns:repeat(3,1fr)}.card-stats{display:none}}@media (max-width:768px){:root{--header-height:60px}.header{padding:0 var(--space-md)}.header-badge,.header-time{display:none}.status-indicators{gap:4px}.status-dot span{display:none}.kpi-bar{padding:var(--space-md);gap:var(--space-sm);grid-template-columns:repeat(2,1fr)}.kpi-card{padding:var(--space-sm)var(--space-md)}.kpi-value{font-size:1.35rem}.main-content{padding:0 var(--space-md)var(--space-md)}.tab-nav{border-radius:var(--radius-sm)}.tab-btn{padding:var(--space-sm)var(--space-sm);font-size:.75rem}.tab-btn span:not(.tab-icon):not(.tab-count){display:none}.data-table{font-size:.75rem}.data-table th,.data-table td{padding:var(--space-xs)var(--space-sm)}.hide-mobile{display:none}.feed-item{padding:var(--space-sm)var(--space-md)}}@media (max-width:480px){.kpi-bar{grid-template-columns:repeat(2,1fr)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.slide-panel-backdrop{-webkit-backdrop-filter:blur(4px);z-index:200;opacity:0;pointer-events:none;background:#0009;transition:opacity .25s;position:fixed;inset:0}.slide-panel-backdrop.open{opacity:1;pointer-events:all}.slide-panel{z-index:201;background:#111118;border-left:1px solid #ffffff14;flex-direction:column;width:480px;max-width:100vw;height:100%;transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;transform:translate(100%);box-shadow:-8px 0 32px #00000080}.slide-panel.open{transform:translate(0)}.slide-panel-header{padding:var(--space-lg);border-bottom:1px solid #ffffff0f;flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.slide-panel-title{color:var(--text-primary);font-size:1rem;font-weight:600}.slide-panel-close{color:var(--text-muted);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;padding:0 4px;font-size:1.5rem;line-height:1}.slide-panel-close:hover{color:var(--text-primary)}.slide-panel-content{padding:var(--space-lg);flex:1;overflow-y:auto}@media (max-width:520px){.slide-panel{width:100vw}}.kpi-modal-backdrop{-webkit-backdrop-filter:blur(4px);z-index:200;padding:var(--space-lg);background:#000000b3;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.kpi-modal{border-radius:var(--radius-lg);background:#0f0f18;border:1px solid #ffffff1a;flex-direction:column;width:100%;max-width:720px;max-height:80vh;animation:.2s cubic-bezier(.4,0,.2,1) scaleIn;display:flex;box-shadow:0 24px 64px #0009}@keyframes scaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.kpi-modal-header{padding:var(--space-lg);border-bottom:1px solid #ffffff0f;flex-shrink:0;justify-content:space-between;align-items:flex-start;display:flex}.kpi-modal-title{color:var(--text-primary);font-size:1.1rem;font-weight:700}.kpi-modal-subtitle{color:var(--text-muted);margin-top:2px;font-size:.75rem}.kpi-modal-content{padding:var(--space-lg);flex:1;overflow-y:auto}.email-detail-meta{color:var(--text-muted);margin-bottom:var(--space-lg);font-size:.8rem}.email-detail-subject{color:var(--text-primary);margin-bottom:var(--space-md);font-size:1.1rem;font-weight:700;line-height:1.4}.email-detail-badges{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);flex-wrap:wrap;display:flex}.email-detail-body{color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-lg);background:#ffffff05;border:1px solid #ffffff0d;max-height:400px;font-size:.85rem;line-height:1.7;overflow-y:auto}.email-detail-actions{gap:var(--space-sm);padding-top:var(--space-md);border-top:1px solid #ffffff0f;flex-wrap:wrap;display:flex}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:none;align-items:center;gap:6px;padding:7px 14px;font-family:inherit;font-size:.8rem;font-weight:500;display:inline-flex}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{color:var(--text-secondary);background:#ffffff0f;border:1px solid #ffffff14}.btn-secondary:hover{color:var(--text-primary);background:#ffffff1a}.btn-ghost{color:var(--text-muted);background:0 0;border:1px solid #ffffff0f}.btn-ghost:hover{color:var(--text-primary);border-color:#ffffff1f}.detail-section-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:var(--space-sm);margin-top:var(--space-lg);font-size:.7rem;font-weight:600}.detail-section-title:first-child{margin-top:0}.detail-list-row{align-items:center;gap:var(--space-sm);padding:10px var(--space-sm);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast);border-bottom:1px solid #ffffff08;display:flex}.detail-list-row:hover{background:#ffffff0a}.detail-list-row:last-child{border-bottom:none}.detail-row-primary{color:var(--text-primary);font-size:.85rem;font-weight:500}.detail-row-secondary{color:var(--text-secondary);margin-top:2px;font-size:.75rem}.detail-row-time{color:var(--text-muted);white-space:nowrap;font-size:.75rem}.detail-empty{text-align:center;color:var(--text-muted);padding:var(--space-xl)0;font-size:.85rem}.badge-invitation_to_bid{color:#f59e0b;background:#f59e0b26;border-color:#f59e0b4d}.badge-request_for_proposal{color:#3b82f6;background:#3b82f626;border-color:#3b82f64d}.badge-change_order{color:#a855f7;background:#a855f726;border-color:#a855f74d}.badge-invoice_payment{color:#22c55e;background:#22c55e26;border-color:#22c55e4d}.badge-emergency{color:#ef4444;background:#ef444426;border-color:#ef44444d}.badge-spam{color:#6b7280;background:#6b728026;border-color:#6b72804d}.badge-general{color:#94a3b8;background:#64748b26;border-color:#64748b4d}.badge-review{color:#f59e0b;background:#f59e0b26;border-color:#f59e0b4d}.days-pill{border-radius:var(--radius-full);padding:2px 8px;font-size:.7rem;font-weight:600}.days-pill.fresh{color:#22c55e;background:#22c55e26}.days-pill.aging{color:#f59e0b;background:#f59e0b26}.days-pill.stale{color:#ef4444;background:#ef444426}