.app-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 4px #0000001a}.header-left{display:flex;align-items:center;gap:2rem}.app-title{margin:0;font-size:1.5rem;font-weight:600}.active-call-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#fff3;border-radius:20px;font-size:.9rem}.pulse-dot{width:8px;height:8px;background:#4ade80;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #4ade80b3}70%{box-shadow:0 0 0 10px #4ade8000}to{box-shadow:0 0 #4ade8000}}.header-right{display:flex;align-items:center}.user-info{display:flex;align-items:center;gap:1rem}.user-name{font-weight:500}.user-email{opacity:.9;font-size:.9rem}.logout-btn{padding:.5rem 1rem;background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:4px;cursor:pointer;transition:background .2s}.logout-btn:hover{background:#ffffff4d}.hamburger-btn{background:none;border:none;cursor:pointer;padding:.5rem;margin-right:1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:44px;min-height:44px;border-radius:4px;transition:background .2s}.hamburger-btn:hover{background:#fff3}.hamburger-btn:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.hamburger-line{display:block;width:24px;height:3px;background:#fff;border-radius:2px;transition:all .3s ease}@media (max-width: 768px){.app-header{padding:1rem}.header-left{gap:1rem}.app-title{font-size:1.3rem}.user-info{gap:.5rem}.user-email{display:none}}@media (max-width: 480px){.app-title{font-size:1.1rem}.active-call-indicator{padding:.25rem .75rem;font-size:.8rem}}.app-sidebar{width:250px;height:100%;background:#f8f9fa;border-right:1px solid #e9ecef;display:flex;flex-direction:column}.sidebar-nav{flex:1;padding:1rem 0}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;color:#495057;text-decoration:none;transition:all .2s;position:relative}.nav-item:hover:not(.disabled){background:#e9ecef;color:#212529}.nav-item.active{background:linear-gradient(90deg,#667eea,#764ba2);color:#fff}.nav-item.disabled{opacity:.5;cursor:not-allowed}.nav-icon{font-size:1.2rem;width:24px;text-align:center}.nav-label{flex:1;font-size:.95rem;font-weight:500}.nav-badge{padding:.25rem .5rem;background:#4ade80;color:#fff;border-radius:12px;font-size:.75rem;font-weight:600}.nav-badge.disabled{background:#6c757d}.nav-badge.recent{background:linear-gradient(135deg,#667eea,#764ba2)}.sidebar-footer{padding:1rem;border-top:1px solid #e9ecef}.quick-stats h4{margin:0 0 .75rem;font-size:.875rem;color:#6c757d;text-transform:uppercase;letter-spacing:.5px}.stat-item{display:flex;justify-content:space-between;padding:.5rem 0;font-size:.9rem}.stat-value{font-weight:600;color:#45b615}@media (max-width: 768px){.app-sidebar{display:none}}.mobile-nav-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:998;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mobile-nav-drawer{position:fixed;top:0;left:0;height:100vh;width:300px;max-width:85vw;background:#f8f9fa;border-right:1px solid #e9ecef;z-index:999;display:flex;flex-direction:column;animation:slideInLeft .3s ease-out;box-shadow:2px 0 8px #00000026}.mobile-nav-drawer.closed{display:none}.mobile-nav-drawer.open{display:flex}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}.mobile-nav-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e9ecef;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.mobile-nav-header h3{margin:0;font-size:1.2rem;font-weight:600}.mobile-nav-close{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:4px;transition:background .2s;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.mobile-nav-close:hover{background:#fff3}.mobile-nav-items{flex:1;padding:1rem 0;overflow-y:auto}.mobile-nav-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;color:#495057;text-decoration:none;transition:all .2s;position:relative;min-height:60px;border-bottom:1px solid #f0f0f0}.mobile-nav-item:hover:not(.disabled){background:#e9ecef;color:#212529}.mobile-nav-item.active{background:linear-gradient(90deg,#667eea,#764ba2);color:#fff}.mobile-nav-item.disabled{opacity:.5;cursor:not-allowed}.mobile-nav-icon{font-size:1.5rem;width:32px;text-align:center;flex-shrink:0}.mobile-nav-label{flex:1;font-size:1.1rem;font-weight:500}.mobile-nav-badge{padding:.25rem .75rem;background:#4ade80;color:#fff;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}.mobile-nav-badge.disabled{background:#6c757d}.mobile-nav-badge.recent{background:linear-gradient(135deg,#667eea,#764ba2)}@media (max-width: 480px){.mobile-nav-drawer{width:100vw;max-width:100vw}.mobile-nav-item{padding:1.25rem 1.5rem}.mobile-nav-icon{font-size:1.75rem}.mobile-nav-label{font-size:1.2rem}}.mobile-nav-close:focus,.mobile-nav-item:focus{outline:2px solid #667eea;outline-offset:2px}.mobile-nav-close,.mobile-nav-item{min-height:44px}.app-layout{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden}.app-main{flex:1;padding:2rem;overflow-y:auto;background:#fff}@media (max-width: 768px){.app-main{padding:1rem}}@media (max-width: 480px){.app-main{padding:.75rem}}.dashboard{max-width:1200px;margin:0 auto}.dashboard-header{margin-bottom:2rem}.dashboard-header h2{margin:0 0 .5rem;color:#212529}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.dashboard-card{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px #0000001a}.dashboard-card h3{margin:0 0 1rem;font-size:1.1rem;color:#495057}.active-call-info{display:flex;flex-direction:column;gap:1.5rem}.status-indicator{display:flex;align-items:center;gap:.75rem;font-weight:600;font-size:1.1rem}.status-dot{width:14px;height:14px;border-radius:50%;background:#dc3545;animation:pulse 2s infinite;flex-shrink:0}.status-dot.ready{background:#28a745;animation:none}.call-details{padding:1.25rem;background:#f8f9fa;border-radius:8px;border-left:4px solid #667eea}.call-details p{margin:.75rem 0;font-size:.95rem;line-height:1.4}.call-details p:first-child{margin-top:0}.call-details p:last-child{margin-bottom:0}.no-active-call{text-align:center;padding:2rem 0;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.no-active-call p{margin:0;color:#6c757d;font-size:1rem}.stats-card{grid-column:span 2}.stats-card h3{font-size:1.3rem;margin-bottom:1.5rem;color:#495057;text-align:center}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;text-align:center}.stat{display:flex;flex-direction:column;padding:2rem 1.5rem;background:#fff;border-radius:12px;border:2px solid #e9ecef;box-shadow:0 4px 20px #00000014;transition:border-color .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}.stat:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2)}.stat:hover{border-color:#667eea;box-shadow:0 6px 25px #667eea26}.stat-value{font-size:3rem;font-weight:800;color:#45b615;margin-bottom:.5rem;line-height:1}.stat-label{font-size:1rem;color:#495057;margin-top:0;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.recent-calls-list{display:flex;flex-direction:column;gap:.75rem}.recent-call-item{padding:.75rem;background:#f8f9fa;border-radius:4px;border-left:3px solid #667eea;transition:background-color .2s ease,transform .1s ease,box-shadow .2s ease}.recent-call-item.clickable{cursor:pointer}.recent-call-item.clickable:hover{background-color:#e9ecef;transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.call-info{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.9rem}.call-time{color:#495057}.call-duration{color:#6c757d;font-weight:500}.call-meta{display:flex;gap:.5rem;flex-wrap:wrap}.tag{padding:.25rem .5rem;background:#fff;border:1px solid #dee2e6;border-radius:12px;font-size:.75rem;color:#495057}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 8px #667eea66}.btn-link{background:none;color:#667eea;padding:.5rem 0;font-size:.9rem}.btn-link:hover{color:#764ba2}.loading{text-align:center;padding:2rem;color:#6c757d}@media (max-width: 768px){.dashboard-grid{grid-template-columns:1fr;gap:1rem}.stats-card{grid-column:span 1}.stats-grid{grid-template-columns:1fr;gap:1rem}.stat{padding:1.5rem 1rem}.stat-value{font-size:2.5rem}}.start-call-page{max-width:1000px;margin:0 auto}.page-header{margin-bottom:2rem}.page-header h2{margin:0 0 .5rem;color:#212529}.start-call-container{display:grid;grid-template-columns:2fr 1fr;gap:2rem}.start-call-form{width:100%}.form-card{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 4px #0000001a}.form-card h3{margin:0 0 .5rem;color:#495057}.form-description{color:#6c757d;margin:0 0 2rem}.form-group{margin-bottom:1.5rem}.form-group input{width:100%;padding:.75rem;border:1px solid #dee2e6;border-radius:4px;font-size:1rem;transition:border-color .2s,box-shadow .2s}.form-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group input.error{border-color:#dc3545}.form-group input.error:focus{border-color:#dc3545;box-shadow:0 0 0 3px #dc35451a}.error-message{display:block;color:#dc3545;font-size:.875rem;margin-top:.25rem}.form-info{background:#f8f9fa;border-radius:4px;padding:1rem;margin:2rem 0}.info-item{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;font-size:.9rem;color:#495057}.info-item:last-child{margin-bottom:0}.info-icon{font-size:1rem}.error-banner{display:flex;align-items:center;gap:.75rem;background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;border-radius:4px;padding:.75rem;margin-bottom:1.5rem}.error-icon{font-size:1.1rem}.form-actions{display:flex;gap:1rem;justify-content:stretch;margin-top:2rem}.form-actions .btn{flex:1;justify-content:center}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.start-call-sidebar{display:flex;flex-direction:column;gap:1.5rem}.sidebar-card h4{margin:0 0 1rem;color:#495057;font-size:1rem}.tips-list,.help-list{margin:0;padding-left:1.25rem}.tips-list li,.help-list li{margin-bottom:.5rem;font-size:.9rem;color:#6c757d;line-height:1.4}.tips-list li:last-child,.help-list li:last-child{margin-bottom:0}.sidebar-card p{font-size:.9rem;color:#6c757d;margin:0 0 .75rem}@media (max-width: 768px){.start-call-container{grid-template-columns:1fr;gap:1.5rem}.form-actions{flex-direction:column}.btn{justify-content:center}}.searchable-select-container{position:relative;width:100%}.searchable-select-label{display:block;margin-bottom:.5rem;font-weight:500;color:#495057}.searchable-select{position:relative;width:100%}.searchable-select-input{width:100%;padding:.75rem 2.5rem .75rem .75rem;border:1px solid #dee2e6;border-radius:4px;font-size:1rem;transition:border-color .2s,box-shadow .2s;background:#fff}.searchable-select-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.searchable-select-input:disabled{background-color:#f8f9fa;color:#6c757d;cursor:not-allowed}.searchable-select.disabled .searchable-select-input{background-color:#f8f9fa;color:#6c757d;cursor:not-allowed}.searchable-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#6c757d}.arrow{transition:transform .2s;font-size:.8rem}.arrow.up{transform:rotate(180deg)}.searchable-select-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #dee2e6;border-top:none;border-radius:0 0 4px 4px;max-height:200px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000001a}.searchable-select.open .searchable-select-input{border-radius:4px 4px 0 0;border-bottom-color:#667eea}.searchable-select-option{padding:.75rem;cursor:pointer;transition:background-color .2s;border-bottom:1px solid #f8f9fa}.searchable-select-option:last-child{border-bottom:none}.searchable-select-option:hover{background-color:#f8f9fa}.searchable-select-option.selected{background-color:#e3f2fd;color:#1976d2;font-weight:500}.searchable-select-option.selected:hover{background-color:#bbdefb}.searchable-select-option.highlighted{background-color:#f0f8ff;border-left:3px solid #667eea}.searchable-select-option.predicted{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;position:relative}.searchable-select-option.predicted:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190)}.searchable-select-option.match-exact{border-left:3px solid #28a745}.searchable-select-option.match-prefix{border-left:3px solid #007bff}.searchable-select-option.match-contains{border-left:3px solid #ffc107}.searchable-select-option.match-fuzzy{border-left:3px solid #6c757d}.searchable-select-option.predicted{border-left:none}.match-highlight{background:#fff3cd;padding:0 2px;border-radius:2px;font-weight:600}.prediction-indicator{float:right;opacity:.8;font-size:.9em;margin-left:8px}.searchable-select-option.predicted .prediction-indicator{color:#ffffffe6}.searchable-select-no-options{padding:.75rem;color:#6c757d;font-style:italic;text-align:center}.searchable-select-option{transition:all .15s ease}.searchable-select-dropdown{animation:slideDown .15s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.searchable-select-container{z-index:1}.searchable-select.open{z-index:1001}.searchable-select-input:focus+.searchable-select-arrow .arrow{color:#667eea}.searchable-select-option[aria-selected=true]{background-color:#f0f8ff}.searchable-select-option.highlighted.selected{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-left-color:#1976d2}.searchable-select-option.predicted.selected{background:linear-gradient(135deg,#5a6fd8,#6a4190)}.active-call-page{max-width:1200px;margin:0 auto}.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;padding:1.5rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.call-status{display:flex;flex-direction:column;gap:.75rem}.status-indicator{display:flex;align-items:center;gap:.5rem;font-weight:500}.status-dot{width:12px;height:12px;border-radius:50%;background:#dc3545;animation:pulse 2s infinite}.status-dot.active{background:#28a745}.status-dot.completed{background:#dc3545;animation:none}@keyframes pulse{0%{box-shadow:0 0 #28a745b3}70%{box-shadow:0 0 0 10px #28a74500}to{box-shadow:0 0 #28a74500}}.call-timer{display:flex;align-items:center;gap:.5rem;font-size:1.1rem}.timer-label{color:#6c757d}.timer-value{font-weight:600;color:#28a745;font-size:1.2rem}.call-info h2{margin:0 0 .25rem;color:#212529}.call-info p{margin:0;color:#6c757d}.page-header.call-active{background:#d4edda;border:1px solid #c3e6cb}.page-header.call-active .call-info h2{color:#155724;font-weight:600}.page-header.call-active .call-info p{color:#155724;font-weight:500}.page-header.call-ended{background:#f8d7da;border:1px solid #f5c6cb}.page-header.call-ended .call-info h2{color:#721c24;font-weight:600}.page-header.call-ended .call-info p{color:#721c24;font-weight:500}.active-call-container{display:grid;grid-template-columns:2fr 1fr;gap:2rem}.form-section:last-child{margin-bottom:0}.form-section h3{margin:0 0 1rem;color:#495057;font-size:1.1rem;border-bottom:2px solid #e9ecef;padding-bottom:.5rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#495057}.form-group select,.form-group input,.comments-textarea{width:100%;padding:.75rem;border:1px solid #dee2e6;border-radius:4px;font-size:1rem;transition:border-color .2s,box-shadow .2s}.form-group select:focus,.form-group input:focus,.comments-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-actions{margin-top:2rem;display:flex;justify-content:flex-end;align-items:center;gap:1rem}.error-message{color:#dc3545;font-size:.9rem}.btn-danger{background:#dc3545;color:#fff}.btn-danger:hover:not(:disabled){background:#c82333;transform:translateY(-2px);box-shadow:0 4px 8px #dc354566}.sidebar-card{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px #0000001a}.sidebar-card h4{margin:0 0 1rem;color:#495057}.call-status-card .call-status-header{display:flex;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid #e9ecef}.call-status-card .status-indicator{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:1.1rem}.call-status-card .status-text{color:#28a745}.call-status-card .status-text.completed{color:#dc3545}.call-status-card .call-timer-display{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem;padding:1rem;background:#f8f9fa;border-radius:6px;font-size:1.1rem}.call-status-card .timer-label{color:#6c757d;font-weight:500}.call-status-card .timer-value{font-weight:700;color:#28a745;font-size:2rem}.call-status-card .timer-value.ended{color:#6c757d}.call-status-card .call-details{margin-top:1rem}.call-status-card .summary-item{display:flex;justify-content:space-between;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid #f8f9fa}.summary-item:last-child{margin-bottom:0;border-bottom:none}.summary-item span:last-child{color:#495057}.end-call-section p{color:#6c757d;font-size:.9rem;margin:0 0 1rem}.end-call-confirm{border:1px solid #f5c6cb;background:#f8d7da;border-radius:4px;padding:1rem}.end-call-confirm p{color:#721c24;margin:0 0 .5rem}.end-call-confirm p:last-of-type{margin-bottom:1rem}.confirm-actions{display:flex;gap:.75rem}.confirm-actions .btn{flex:1;justify-content:center;padding:.5rem 1rem;font-size:.9rem}.loading,.no-active-call{text-align:center;padding:2rem;color:#6c757d}@media (max-width: 768px){.page-header{flex-direction:column;gap:1rem}.active-call-container,.form-row{grid-template-columns:1fr}.confirm-actions{flex-direction:column}}.call-history-page{max-width:1000px;margin:0 auto}.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem}.header-actions{display:flex;gap:1rem}.btn-secondary.active{background:#667eea;color:#fff;border-color:#667eea}.filters-panel{background:#fff;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 2px 4px #0000001a}.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}.filter-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#495057}.filter-group input,.filter-group select{width:100%;padding:.5rem;border:1px solid #dee2e6;border-radius:4px;font-size:.9rem}.filter-group input:focus,.filter-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 2px #667eea1a}.filters-actions{display:flex;justify-content:flex-end}.calls-container{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.calls-toolbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid #e9ecef}.results-info{color:#6c757d;font-size:.9rem}.toolbar-controls{display:flex;gap:1rem}.page-size-select,.sort-select{padding:.5rem;border:1px solid #dee2e6;border-radius:4px;font-size:.9rem}.loading-state,.empty-state,.error-state{text-align:center;padding:3rem 1.5rem;color:#6c757d}.loading-state .spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}.empty-state h3,.error-state h3{margin:0 0 1rem;color:#495057}.empty-state p,.error-state p{margin:0 0 1.5rem}.calls-header{display:grid;grid-template-columns:80px 80px 130px 60px 100px 1fr;gap:.75rem;align-items:center;padding:.75rem 1.5rem;background:#f8f9fa;border-bottom:2px solid #dee2e6;font-weight:600;font-size:.85rem;color:#495057}.header-type{grid-column:1;text-align:center}.header-date{grid-column:2}.header-duration{grid-column:3}.header-agent{grid-column:4;text-align:center}.header-status{grid-column:5;text-align:center}.header-comments{grid-column:6}.calls-list{padding:0}.call-item{padding:.75rem 1.5rem;border-bottom:1px solid #e9ecef;transition:background-color .2s;display:grid;grid-template-columns:80px 80px 130px 60px 100px 1fr;gap:.75rem;align-items:center;min-height:60px}.call-item:hover{background-color:#f8f9fa}.call-item.clickable{cursor:pointer}.call-item.clickable:hover{background-color:#e9ecef;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.call-item:last-child{border-bottom:none}.call-type{grid-column:1;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#6c757d}.call-date{grid-column:2;display:flex;flex-direction:column;gap:.1rem}.date-text{font-weight:600;color:#495057;font-size:.85rem}.time-text{font-size:.75rem;color:#6c757d}.call-duration{grid-column:3;display:flex;align-items:center;gap:.25rem;font-size:.85rem}.call-agent{grid-column:4;display:flex;align-items:center;justify-content:center}.agent-indicator{font-size:.8rem;color:#495057;font-weight:500}.call-status{grid-column:5;display:flex;align-items:center;justify-content:center}.call-comments{grid-column:6;background:#f8f9fa;padding:.25rem .5rem;border-radius:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;position:relative;transition:background-color .2s ease;min-height:1.5rem}.status-badge{padding:.2rem .6rem;border-radius:12px;font-size:.7rem;font-weight:600;text-transform:uppercase;white-space:nowrap}.status-badge.completed{background:#d4edda;color:#155724}.status-badge.in-progress{background:#fff3cd;color:#856404}.status-badge.unknown{background:#f8f9fa;color:#6c757d}.detail-label{color:#6c757d;font-weight:500;font-size:.8rem}.detail-value{color:#495057;font-size:.85rem;font-weight:500}.call-item:hover .call-comments{background:inherit}.comment-tooltip{position:fixed;padding:.5rem .75rem;background:#212529;color:#fff;border-radius:4px;font-size:.875rem;white-space:normal;max-width:300px;min-width:150px;z-index:9999;box-shadow:0 4px 6px #0003;pointer-events:none}.comments-label{display:block;color:#6c757d;font-weight:500;margin-bottom:.25rem;font-size:.9rem}.comments-text{color:#495057;font-size:.9rem;line-height:1.4}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;padding:1.5rem;border-top:1px solid #e9ecef}.pagination-btn{padding:.5rem 1rem;background:#f8f9fa;color:#495057;border:1px solid #dee2e6;border-radius:4px;cursor:pointer;transition:all .2s}.pagination-btn:hover:not(:disabled){background:#e9ecef}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-info{color:#6c757d;font-size:.9rem}@media (min-width: 1024px){.calls-header,.call-item{grid-template-columns:90px 100px 150px 70px 110px 1fr;gap:1rem}.date-text{font-size:.9rem}.time-text{font-size:.8rem}.call-duration{font-size:.9rem}}@media (max-width: 768px){.page-header{flex-direction:column;gap:1rem}.header-actions{width:100%;justify-content:space-between}.calls-toolbar{flex-direction:column;gap:1rem;align-items:stretch}.toolbar-controls{justify-content:space-between}.calls-header{display:none}.calls-list{padding:0 1rem}.call-item{display:block;background:#fff;border:1px solid #e9ecef;border-radius:8px;margin-bottom:1rem;padding:1rem;box-shadow:0 2px 4px #0000001a;border-bottom:1px solid #e9ecef}.call-item:hover{box-shadow:0 4px 8px #00000026;transform:translateY(-1px)}.call-type,.call-date,.call-duration,.call-agent,.call-status,.call-comments{display:block;margin-bottom:.75rem}.call-type{font-weight:600;color:#495057;font-size:1rem}.call-date{display:flex;justify-content:space-between;align-items:baseline}.date-text{font-weight:600;color:#495057;font-size:.95rem}.time-text{color:#6c757d;font-size:.85rem}.call-duration{display:flex;justify-content:space-between;align-items:center}.call-agent,.call-status{text-align:left;justify-content:flex-start}.call-comments{background:#f8f9fa;padding:.75rem;border-radius:6px;border-left:3px solid #667eea;white-space:normal;overflow:visible;text-overflow:initial;margin-bottom:0}.call-meta{justify-content:flex-start;gap:1rem}.pagination{flex-direction:column;gap:.75rem}}.edit-call-page{max-width:1200px;margin:0 auto;padding:0 1rem}.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #e9ecef}.header-content h2{margin:0 0 .5rem;color:#212529}.subtitle{color:#6c757d;margin:0}.call-info{display:flex;gap:2rem;font-size:.9rem;color:#495057}.info-item{display:flex;align-items:center;padding:.5rem 1rem;background:#f8f9fa;border-radius:4px;border:1px solid #dee2e6}.edit-call-container{display:grid;grid-template-columns:1fr 300px;gap:2rem;align-items:start}.call-form{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 4px #0000001a}.form-section{margin-bottom:2rem}.form-section:last-of-type{margin-bottom:0}.form-section h3{margin:0 0 1rem;color:#495057;font-size:1.1rem;border-bottom:1px solid #e9ecef;padding-bottom:.5rem}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.form-group{display:flex;flex-direction:column}.form-group label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-group input,.form-group select,.form-group textarea{padding:.75rem;border:1px solid #dee2e6;border-radius:4px;font-size:1rem;transition:border-color .2s,box-shadow .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 2px #667eea1a}.form-group input.error,.form-group select.error,.form-group textarea.error{border-color:#dc3545;box-shadow:0 0 0 2px #dc35451a}.form-group .error-message{color:#dc3545;font-size:.875rem;margin-top:.25rem;display:block}.toggle-group{display:inline-flex;background:#f8f9fa;border-radius:6px;padding:3px;gap:2px;width:160px}.toggle-option{position:relative;cursor:pointer;flex:1}.toggle-option input[type=radio]{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.toggle-label{display:block;padding:.4rem 1.2rem;text-align:center;border-radius:4px;transition:all .2s ease;background:transparent;color:#6c757d;font-weight:500;font-size:.875rem;white-space:nowrap}.toggle-option input[type=radio]:checked+.toggle-label{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 4px #667eea4d}.toggle-option:hover .toggle-label{color:#495057}.toggle-option input[type=radio]:checked:hover+.toggle-label{color:#fff}.form-group select:disabled{background-color:#f8f9fa;color:#6c757d;cursor:not-allowed}.comments-textarea{resize:vertical;min-height:100px}.form-actions{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #e9ecef}.action-buttons{display:flex;gap:1rem;justify-content:flex-end}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #667eea66}.btn-secondary{background:#f8f9fa;color:#495057;border:1px solid #dee2e6}.btn-secondary:hover:not(:disabled){background:#e9ecef}.error-message{color:#dc3545;background:#f8d7da;border:1px solid #f5c6cb;border-radius:4px;padding:.75rem;margin-bottom:1rem}.call-sidebar{display:flex;flex-direction:column;gap:1.5rem}.sidebar-card{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px #0000001a;border:1px solid #e9ecef}.sidebar-card h4{margin:0 0 1rem;color:#495057;font-size:1rem;border-bottom:1px solid #e9ecef;padding-bottom:.5rem}.summary-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #f8f9fa;font-size:.9rem}.summary-item:last-child{border-bottom:none}.summary-item span:first-child{color:#6c757d;font-weight:500}.summary-item span:last-child{color:#495057;text-align:right}.loading,.error-state{text-align:center;padding:3rem 1.5rem;color:#6c757d}.error-state h3{margin:0 0 1rem;color:#495057}.error-state p{margin:0 0 1.5rem}@media (max-width: 768px){.edit-call-container{grid-template-columns:1fr;gap:1.5rem}.page-header{flex-direction:column;gap:1rem}.call-info{flex-direction:column;gap:.5rem}.form-row{grid-template-columns:1fr}.action-buttons{flex-direction:column}}.reports-container{padding:24px;max-width:1400px;margin:0 auto}.reports-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.reports-header h1{color:var(--color-text-primary);font-size:2rem;font-weight:600;margin:0}.reports-actions{display:flex;gap:12px}.filters-card{margin-bottom:24px}.filters-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}.filters-header h3{color:var(--color-text-primary);font-size:1.25rem;font-weight:600;margin:0}.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.filter-section{grid-column:1 / -1}.filter-section h4{color:var(--color-text-primary);font-size:1rem;font-weight:600;margin:0 0 12px}.period-toggle{display:flex;border-radius:6px;border:2px solid #d1d5db;overflow:hidden;margin-bottom:16px;width:fit-content}.toggle-btn{padding:8px 20px;border:none;background:#fff;color:#374151;cursor:pointer;transition:all .2s ease;font-size:.875rem;font-weight:500}.toggle-btn:first-child{border-right:2px solid #d1d5db}.toggle-btn:hover:not(.active){background:#f3f4f6}.toggle-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600}.date-range-inputs{display:flex;gap:12px;max-width:400px}.filter-section label,.date-range-inputs label{display:block;color:var(--color-text-secondary);font-size:.875rem;font-weight:500;margin-bottom:4px}.filter-group{display:flex;flex-direction:column}.filter-group label{color:var(--color-text-secondary);font-size:.875rem;font-weight:500;margin-bottom:4px}.loading-container{display:flex;justify-content:center;align-items:center;padding:60px}.error-card{text-align:center;padding:40px}.error-message h3{color:var(--color-error);margin-bottom:8px}.error-message p{color:var(--color-text-secondary);margin-bottom:20px}.summary-card{margin-bottom:24px}.summary-card h3{color:var(--color-text-primary);font-size:1.25rem;font-weight:600;margin-bottom:20px}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.summary-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px;background:var(--color-background-alt);border-radius:8px;border:1px solid var(--color-border)}.summary-label{color:var(--color-text-secondary);font-size:.875rem;font-weight:500;margin-bottom:8px}.summary-value{color:var(--color-text-primary);font-size:2rem;font-weight:700}.breakdown-section{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.breakdown-card h4{color:var(--color-text-primary);font-size:1.125rem;font-weight:600;margin-bottom:16px}.breakdown-list{display:flex;flex-direction:column;gap:12px}.breakdown-item{display:flex;align-items:center;gap:12px}.breakdown-label{color:var(--color-text-primary);font-size:.875rem;font-weight:500;min-width:120px}.breakdown-value{color:var(--color-text-secondary);font-size:.875rem;font-weight:600;min-width:30px}.breakdown-bar{flex:1;height:8px;background:var(--color-border);border-radius:4px;overflow:hidden;position:relative}.breakdown-fill{height:100%;background:var(--color-primary);border-radius:4px;transition:width .3s ease}.table-card{margin-bottom:24px}.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.table-header h3{color:var(--color-text-primary);font-size:1.25rem;font-weight:600;margin:0}.table-container{overflow-x:auto;border-radius:8px;border:1px solid var(--color-border)}.calls-table{width:100%;border-collapse:collapse;background:#fff}.calls-table th{background:var(--color-background-alt);color:var(--color-text-secondary);font-size:.875rem;font-weight:600;text-align:left;padding:12px 16px;border-bottom:1px solid var(--color-border);white-space:nowrap}.calls-table td{padding:12px 16px;border-bottom:1px solid var(--color-border-light);color:var(--color-text-primary);font-size:.875rem;vertical-align:top}.calls-table tr:hover{background:var(--color-hover-light)}.calls-table tr:last-child td{border-bottom:none}.date-time{display:flex;flex-direction:column;gap:2px}.time{color:var(--color-text-secondary);font-size:.75rem}.call-type{padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:600;white-space:nowrap}.call-type.inbound{background:#22c55e1a;color:#22c55e}.call-type.outbound{background:#3b82f61a;color:#3b82f6}.comments-cell{max-width:200px}.comments-cell span{display:block;word-wrap:break-word}.no-data{text-align:center;padding:40px;color:var(--color-text-secondary)}.no-data p:first-child{font-size:1.125rem;font-weight:500;margin-bottom:8px}.no-data p:last-child{font-size:.875rem}.welcome-card{text-align:center;padding:60px 40px}.welcome-card h3{color:var(--color-text-primary);font-size:1.5rem;font-weight:600;margin-bottom:12px}.welcome-card p{color:var(--color-text-secondary);font-size:1rem;max-width:400px;margin:0 auto}@media (max-width: 1024px){.breakdown-section{grid-template-columns:1fr}.filters-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media (max-width: 768px){.reports-container{padding:16px}.reports-header{flex-direction:column;align-items:flex-start;gap:16px}.reports-actions{width:100%;justify-content:flex-end}.summary-grid{grid-template-columns:repeat(2,1fr)}.filters-grid,.date-range-inputs{grid-template-columns:1fr}.table-container{font-size:.75rem}.calls-table th,.calls-table td{padding:8px 12px}.filters-header{flex-direction:column;align-items:flex-start;gap:12px}}@media (max-width: 480px){.summary-grid{grid-template-columns:1fr}.reports-actions{flex-direction:column;width:100%}.period-toggle{width:100%}.toggle-btn{flex:1;text-align:center}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f5f5}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2}button{font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.text-center{text-align:center}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}.p-1{padding:.5rem}.p-2{padding:1rem}.p-3{padding:1.5rem}.p-4{padding:2rem}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{box-sizing:border-box}body{margin:0;padding:0;min-height:100vh;background:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}#root{min-height:100vh}.card{background:#fff;border-radius:8px;border:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;padding:24px}.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px;color:#64748b}.spinner{width:32px;height:32px;border:3px solid #e2e8f0;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}