:root{--primary-orange:#ff6b35;--dark-orange:#e55a2b;--light-orange:#ff8c69;--white:#fff;--black:#1a1a1a;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--gradient-primary:linear-gradient(135deg,var(--primary-orange) 0%,var(--dark-orange) 100%);--gradient-light:linear-gradient(135deg,var(--light-orange) 0%,var(--primary-orange) 100%);--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f9fafb;background-color:var(--gray-50);color:#1a1a1a;color:var(--black);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{margin:0 auto;max-width:1200px;padding:0 1rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-4>*+*{margin-left:1rem}.space-y-2>*+*{margin-top:.5rem}.space-y-4>*+*{margin-top:1rem}.space-y-6>*+*{margin-top:1.5rem}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-8{padding-bottom:2rem;padding-top:2rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem}.text-lg,.text-xl{line-height:1.75rem}.text-xl{font-size:1.25rem}.font-semibold{font-weight:600}.font-medium{font-weight:500}.text-white{color:#fff;color:var(--white)}.text-black{color:#1a1a1a;color:var(--black)}.text-gray-500{color:#6b7280;color:var(--gray-500)}.text-gray-600{color:#4b5563;color:var(--gray-600)}.text-gray-800{color:#1f2937;color:var(--gray-800)}.text-gray-900{color:#111827;color:var(--gray-900)}.bg-white{background-color:#fff;background-color:var(--white)}.bg-orange{background-color:#ff6b35;background-color:var(--primary-orange)}.bg-dark-orange{background-color:#e55a2b;background-color:var(--dark-orange)}.bg-light-orange{background-color:#ff8c69;background-color:var(--light-orange)}.bg-gray-50{background-color:#f9fafb;background-color:var(--gray-50)}.bg-gray-100{background-color:#f3f4f6;background-color:var(--gray-100)}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.shadow{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl)}.border{border-color:#e5e7eb;border-color:var(--gray-200);border-width:1px}.border-orange{border-color:#ff6b35;border-color:var(--primary-orange)}.border-gray-200{border-color:#e5e7eb;border-color:var(--gray-200)}.border-gray-300{border-color:#d1d5db;border-color:var(--gray-300)}.cursor-pointer{cursor:pointer}.hover\:bg-orange:hover{background-color:#e55a2b;background-color:var(--dark-orange)}.hover\:bg-gray-700:hover{background-color:#374151;background-color:var(--gray-700)}.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md)}.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-shadow{transition-duration:.15s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn{align-items:center;border:none;border-radius:.5rem;cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:500;justify-content:center;line-height:1.25rem;padding:.5rem 1rem;text-decoration:none;transition:all .2s}.btn-primary{background:linear-gradient(135deg,#ff6b35,#e55a2b);background:var(--gradient-primary);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);color:#fff;color:var(--white)}.btn-primary:hover{background:linear-gradient(135deg,#ff8c69,#ff6b35);background:var(--gradient-light);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary{background-color:#4b5563;background-color:var(--gray-600);color:#fff;color:var(--white)}.btn-secondary:hover{background-color:#374151;background-color:var(--gray-700)}.btn-outline{background-color:initial;border:1px solid #ff6b35;border:1px solid var(--primary-orange);color:#ff6b35;color:var(--primary-orange)}.btn-outline:hover{background-color:#ff6b35;background-color:var(--primary-orange);color:#fff;color:var(--white)}.card{background-color:#fff;background-color:var(--white);border:1px solid #e5e7eb;border:1px solid var(--gray-200);border-radius:.75rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md);padding:1.5rem}.card:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg);transform:translateY(-2px);transition:all .3s ease}.input{background-color:#fff;background-color:var(--white);border:1px solid #d1d5db;border:1px solid var(--gray-300);border-radius:.5rem;color:#1a1a1a;color:var(--black);font-size:.875rem;line-height:1.25rem;padding:.75rem 1rem;transition:border-color .2s,box-shadow .2s;width:100%}.input:focus{border-color:#ff6b35;border-color:var(--primary-orange);box-shadow:0 0 0 3px #ff6b351a;outline:none}.modal-overlay{align-items:center;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:50}.modal-content{background-color:#fff;background-color:var(--white);border-radius:.75rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;margin:1rem;max-height:80vh;max-width:32rem;width:100%}.spinner{animation:spin 1s linear infinite;border:2px solid #e5e7eb;border-top:2px solid #ff6b35;border:2px solid var(--gray-200);border-radius:50%;border-top-color:var(--primary-orange);height:2rem;width:2rem}.badge{align-items:center;border-radius:9999px;display:inline-flex;font-size:.75rem;font-weight:500;line-height:1rem;padding:.25rem .75rem}.badge-success{background-color:#d1fae5;color:#065f46}.badge-warning{background-color:#fef3c7;color:#92400e}.badge-error{background-color:#fee2e2;color:#991b1b}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.modern-header{background:linear-gradient(135deg,#000,#1a1a1a);border-bottom:1px solid #ffffff1a;box-shadow:0 4px 20px #0000004d;position:-webkit-sticky;position:sticky;top:0;width:100%;z-index:1000}.header-container{height:4rem;justify-content:space-between;padding:0 2rem;width:100%}.header-container,.header-left{align-items:center;display:flex}.header-left{gap:2rem}.logo-section{align-items:center;display:flex;gap:.75rem}.logo-icon{color:#ff6b35;font-size:1.5rem;font-weight:700}.logo-text{color:#fff;font-size:1.25rem;font-weight:700;margin:0}.header-title h2{color:#fff;font-size:1.5rem;font-weight:600;margin:0}.webrtc-status-badge{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:9999px;display:flex;gap:.5rem;margin-right:2rem;padding:.5rem 1rem;transition:all .3s ease}.webrtc-status-badge:hover{background:#ffffff26;transform:translateY(-1px)}.webrtc-status-badge .status-indicator{animation:pulse 2s infinite;font-size:.875rem}.webrtc-status-badge .status-indicator.connected{color:#10b981}.webrtc-status-badge .status-indicator.disconnected{color:#ef4444}.webrtc-status-badge .status-text{color:#fff;font-size:.875rem;font-weight:500}.header-right{gap:1rem}.header-icon-btn,.header-right{align-items:center;display:flex}.header-icon-btn{background:#ffffff1a;border:none;border-radius:.5rem;color:#fff;cursor:pointer;justify-content:center;padding:.5rem;position:relative;transition:all .2s}.header-icon-btn:hover{background:#fff3;transform:translateY(-1px)}.notification-btn{position:relative}.notification-badge{align-items:center;background:#ef4444;border-radius:50%;color:#fff;display:flex;font-size:.75rem;font-weight:600;height:1.25rem;justify-content:center;position:absolute;right:-.25rem;top:-.25rem;width:1.25rem}.flag{font-size:1.25rem}.user-profile{align-items:center;display:flex;gap:.75rem}.user-avatar{border:2px solid #ffffff4d;height:2.5rem;width:2.5rem}.kpi-section{background:linear-gradient(135deg,#f8fafc,#e2e8f0);padding:2rem;width:100%}.kpi-cards{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0 auto;max-width:1200px}.kpi-card{background:#fff;border:1px solid #0000000d;border-radius:1rem;box-shadow:0 4px 20px #00000014;overflow:hidden;padding:1.5rem;position:relative;transition:all .3s ease}.kpi-card:hover{box-shadow:0 8px 30px #0000001f;transform:translateY(-4px)}.kpi-card:before{background:linear-gradient(135deg,#8b5cf6,#a855f7);content:"";height:4px;left:0;position:absolute;right:0;top:0}.calls-card:before{background:linear-gradient(135deg,#ff6b35,#ff8c42)}.customers-card:before{background:linear-gradient(135deg,#000,#333)}.duration-card:before{background:linear-gradient(135deg,#ff6b35,#ff8c42)}.kpi-icon{align-items:center;background:linear-gradient(135deg,#8b5cf6,#a855f7);border-radius:.75rem;color:#fff;display:flex;height:3rem;justify-content:center;margin-bottom:1rem;width:3rem}.calls-card .kpi-icon{background:linear-gradient(135deg,#ff6b35,#ff8c42)}.customers-card .kpi-icon{background:linear-gradient(135deg,#000,#333)}.duration-card .kpi-icon{background:linear-gradient(135deg,#ff6b35,#ff8c42)}.kpi-content{display:flex;flex-direction:column;gap:.5rem}.kpi-title{color:#64748b;font-size:.875rem;font-weight:500;letter-spacing:.05em;margin:0;text-transform:uppercase}.kpi-value{color:#1e293b;font-size:2rem;font-weight:700;line-height:1;margin:0}.kpi-change{align-items:center;display:flex;font-size:.875rem;font-weight:600;gap:.25rem;margin:0}.kpi-change.positive{color:#22c55e}.kpi-change.negative{color:#ef4444}.kpi-change:before{border-left:4px solid #0000;border-right:4px solid #0000;content:"";height:0;width:0}.kpi-change.positive:before{border-bottom:6px solid #22c55e}.kpi-change.negative:before{border-top:6px solid #ef4444}.modern-dashboard{background:linear-gradient(135deg,#f8fafc,#e2e8f0);min-height:calc(100vh - 80px);padding:2rem;width:100%}.dashboard-container{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:1fr 1fr;height:100%;margin:0 auto;max-width:1400px}.dashboard-section{background:#fff;border:1px solid #0000000d;border-radius:1.5rem;box-shadow:0 4px 20px #00000014;display:flex;flex-direction:column;height:-webkit-fit-content;height:fit-content;overflow:hidden}.section-header{background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-bottom:1px solid #e5e7eb;padding:1.5rem 2rem}.section-title{align-items:center;display:flex;justify-content:space-between}.section-title h2{color:#1e293b;font-size:1.5rem;font-weight:700;margin:0}.section-badge{align-items:center;background:linear-gradient(135deg,#ff6b35,#ff8c42);border-radius:9999px;color:#fff;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;padding:.5rem 1rem}.badge-count{font-size:1rem;font-weight:700}.badge-text{font-size:.75rem;opacity:.9}.section-content{flex:1 1;overflow-y:auto;padding:1.5rem 2rem}.call-history-section,.customers-section{min-height:600px}@media (max-width:1024px){.dashboard-container{grid-template-columns:1fr}}.section-header{color:var(--gray-900);font-size:1.125rem;font-weight:600;margin-bottom:1rem}.user-list{display:flex;flex-direction:column;gap:.5rem}.user-item{background-color:var(--white);border:1px solid var(--gray-200);border-radius:.75rem;cursor:pointer;padding:1rem;transition:all .2s}.user-item:hover{border-color:var(--primary-orange);box-shadow:var(--shadow-md);transform:translateY(-1px)}.user-info h3{color:var(--gray-900);font-size:1rem;font-weight:600;margin-bottom:.25rem}.user-info p{color:var(--gray-600);font-size:.875rem;margin-bottom:.125rem}.user-status{background-color:#d1fae5;color:#065f46;display:inline-flex}.call-controls{background-color:var(--white);border:1px solid var(--gray-200);border-radius:.75rem;box-shadow:var(--shadow-lg);padding:1.5rem}.call-header{margin-bottom:1.5rem;text-align:center}.call-header h3{color:var(--gray-900);font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.call-info{color:var(--gray-600);font-size:.875rem}.call-info p{margin-bottom:.25rem}.call-info strong{color:var(--gray-900)}.call-status{background-color:#eff6ff;border:1px solid #bfdbfe;border-radius:.5rem;margin-bottom:1rem;padding:.75rem}.call-status p{color:#1e40af;font-size:.875rem;margin:0}.call-buttons{flex-wrap:wrap;justify-content:center}.call-btn{border-radius:.5rem;font-size:.875rem;font-weight:500;padding:.75rem 1.5rem}.call-btn:disabled{cursor:not-allowed;opacity:.5}.call-btn-start{background:var(--gradient-primary);box-shadow:var(--shadow-sm);color:var(--white)}.call-btn-start:hover:not(:disabled){background:var(--gradient-light);box-shadow:var(--shadow-md);transform:translateY(-1px)}.call-btn-mute{background-color:#f59e0b;color:var(--white)}.call-btn-mute:hover{background-color:#d97706}.call-btn-unmute{background-color:#f59e0b;color:var(--white)}.call-btn-unmute:hover{background-color:#d97706}.call-btn-end{background-color:#dc2626;color:var(--white)}.call-btn-end:hover{background-color:#b91c1c}.call-info-details{background-color:var(--gray-50);border-radius:.5rem;margin-top:1rem;padding:.75rem}.call-info-details p{color:var(--gray-600);font-size:.875rem;margin-bottom:.25rem}.call-info-details strong{color:var(--gray-900)}.selected-user{background-color:var(--white);border:1px solid var(--gray-200);border-radius:.75rem;box-shadow:var(--shadow-lg);padding:1.5rem}.selected-user h3{color:var(--gray-900);font-size:1.125rem;font-weight:600;margin-bottom:1rem}.selected-user .user-details{display:flex;flex-direction:column;gap:.5rem}.selected-user .user-details p{color:var(--gray-600);font-size:.875rem}.selected-user .user-details strong{color:var(--gray-900)}.search-modal{align-items:stretch;background-color:#00000080;bottom:0;display:flex;justify-content:stretch;left:0;position:fixed;right:0;top:0;z-index:50}.search-modal-content{background-color:var(--white);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;height:100vh;margin:0;width:100%}.search-header{align-items:center;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;padding:2rem}.search-header h2{color:var(--gray-900);font-size:1.25rem;font-weight:600}.search-close{color:var(--gray-400);cursor:pointer;font-size:1.5rem;transition:color .2s}.search-close:hover{color:var(--gray-600)}.search-input-container{border-bottom:1px solid var(--gray-200);padding:2rem;position:relative}.search-input{background-color:var(--white);border:1px solid var(--gray-300);border-radius:.5rem;color:var(--black);font-size:.875rem;padding:.75rem 1rem;transition:border-color .2s,box-shadow .2s;width:100%}.search-input:focus{border-color:var(--primary-orange);box-shadow:0 0 0 3px #ff6b351a;outline:none}.search-icon{color:var(--gray-400);height:1.25rem;position:absolute;right:1.75rem;top:50%;transform:translateY(-50%);width:1.25rem}.search-results{flex:1 1;overflow-y:auto;padding:2rem}.search-footer{background-color:var(--gray-50);border-top:1px solid var(--gray-200);padding:2rem}.search-footer button{background-color:var(--gray-600);border:none;border-radius:.5rem;color:var(--white);cursor:pointer;font-weight:500;padding:.5rem 1rem;transition:background-color .2s;width:100%}.search-footer button:hover{background-color:var(--gray-700)}.call-history{background:#fff;border:1px solid #0000000d;border-radius:1rem;box-shadow:0 4px 20px #00000014;display:flex;flex-direction:column;height:100%;overflow:hidden}.call-history-header{align-items:center;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;padding:1.5rem}.call-history-header h3{color:#1e293b;font-size:1.25rem;font-weight:700;margin:0}.call-count{background:linear-gradient(135deg,#ff6b35,#ff8c42);border-radius:9999px;color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .75rem}.call-history-content{flex:1 1;overflow-y:auto;padding:1rem}.loading-state{padding:3rem 1rem;text-align:center}.loading-spinner{border:3px solid #e5e7eb}.empty-state{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:3rem 1rem}.empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.empty-state p{color:#64748b;margin:.5rem 0}.call-list{gap:.75rem}.call-item,.call-list{display:flex;flex-direction:column}.call-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.75rem;gap:1rem;padding:1.5rem;position:relative;transition:all .2s ease}.call-item:hover{background:#f1f5f9;border-color:#ff6b35;box-shadow:0 4px 12px #ff6b351a;transform:translateY(-1px)}.call-item-header{align-items:center;display:flex;gap:1rem;justify-content:space-between}.call-user-info{display:flex;flex:1 1;flex-direction:column;gap:.25rem}.call-duration-info{align-items:center;display:flex}.call-item-content{display:flex;flex-direction:column;gap:.75rem}.call-time-info{display:flex;flex-direction:column;gap:.5rem}.time-item{align-items:center;display:flex;justify-content:space-between;padding:.25rem 0}.time-label{color:#64748b;font-size:.875rem;font-weight:500}.time-value{color:#1e293b;font-size:.875rem;font-weight:600}.call-item-footer{margin-top:.5rem}.call-avatar,.call-item-footer{display:flex;justify-content:center}.call-avatar{align-items:center;background:linear-gradient(135deg,#ff6b35,#ff8c42);border-radius:50%;color:#fff;flex-shrink:0;font-size:.875rem;font-weight:700;height:2.5rem;width:2.5rem}.call-info{flex:1 1;gap:.25rem}.call-info,.call-user{display:flex;flex-direction:column}.call-user{gap:.125rem}.call-name{color:#1e293b;font-size:.875rem;font-weight:600}.call-phone{color:#64748b;font-size:.75rem}.call-details{align-items:center;display:flex;gap:.5rem}.call-status{border-radius:9999px;padding:.125rem .5rem}.call-duration,.call-status{font-size:.75rem;font-weight:500}.call-duration{color:#64748b;text-align:center}.call-duration-failed{color:#ef4444!important;font-weight:600}.call-status-badge{align-items:center;background:#fef2f2;border:1px solid #fecaca;border-radius:.375rem;color:#dc2626;display:flex;font-size:.75rem;font-weight:500;gap:.25rem;padding:.25rem .5rem;position:absolute;right:.75rem;top:.75rem}.call-status-icon{color:#dc2626;height:.875rem;width:.875rem}.call-time{color:#94a3b8}.call-action,.call-again-btn{align-items:center;display:flex}.call-again-btn{background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:.875rem;height:2rem;justify-content:center;transition:all .2s ease;width:2rem}.call-again-btn:hover{box-shadow:0 4px 12px #22c55e4d;transform:scale(1.1)}.detail-icon{color:#64748b;height:1rem;margin-right:.5rem;width:1rem}.call-icon{height:1.25rem;margin-right:.5rem;width:1.25rem}.empty-state{color:var(--gray-500);padding:2rem;text-align:center}.loading-container{height:16rem}.loading-container,.loading-state{align-items:center;display:flex;justify-content:center}.loading-state{color:#64748b;flex-direction:column;padding:2rem}.loading-spinner{animation:spin 1s linear infinite;border:2px solid #e2e8f0;border-radius:50%;border-top-color:#ff6b35;height:2rem;margin-bottom:1rem;width:2rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.empty-subtitle{color:#94a3b8;font-size:.875rem;margin-top:.5rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}.phone-modal-overlay{align-items:center;background-color:#000c;bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:1000}.phone-modal{background:linear-gradient(145deg,#2d3748,#1a202c);border-radius:1rem;box-shadow:0 25px 50px -12px #00000080;color:#fff;max-height:90vh;max-width:800px;overflow-y:auto;position:relative;width:100%}.phone-modal-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:1.5rem}.phone-modal-title{gap:.75rem}.phone-icon,.phone-modal-title{align-items:center;display:flex}.phone-icon{border-radius:50%;height:2.5rem;justify-content:center;width:2.5rem}.phone-icon,.phone-modal-title h2{background:linear-gradient(135deg,#ff6b35,#ff8c42);font-size:1.5rem}.phone-modal-title h2{-webkit-text-fill-color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:700;margin:0}.sip-id{color:#ff6b35;font-size:.875rem;margin:0}.phone-modal-controls{display:flex;gap:.5rem}.control-btn{background:#ffffff1a;border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-size:1rem;padding:.5rem;transition:background-color .2s}.control-btn:hover{background:#fff3}.phone-status{padding:1rem 1.5rem;text-align:center}.status-indicator{align-items:center;border-radius:9999px;display:inline-flex;font-size:.875rem;font-weight:500;gap:.5rem;margin-bottom:.5rem;padding:.5rem 1rem}.status-indicator.connected{background:#22c55e33;border:1px solid #22c55e4d;color:#22c55e}.status-indicator.disconnected{background:#ef444433;border:1px solid #ef44444d;color:#ef4444}.call-status-text{color:#a3a3a3;font-size:.875rem;margin-top:.5rem}.http-warning{background:#f59e0b1a;border:1px solid #f59e0b4d;border-radius:.5rem;color:#f59e0b;font-size:.75rem;margin-top:.5rem;padding:.5rem;text-align:center}.phone-content{gap:2rem;padding:0 1.5rem 1.5rem}.phone-content,.phone-left-column,.phone-right-column{display:flex;flex-direction:column}.phone-right-column{justify-content:center}.selected-user-card{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:1rem;display:flex;gap:1.5rem;padding:1.5rem;width:100%}.selected-user-avatar-large{align-items:center;background:linear-gradient(135deg,#ff6b35,#ff8c42);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:1.75rem;font-weight:700;height:5rem;justify-content:center;width:5rem}.selected-user-info-large{color:#fff;flex:1 1}.selected-user-name-large{color:#fff;font-size:1.5rem;font-weight:700;margin:0 0 .5rem}.selected-user-phone-large{color:#ff6b35;font-size:1.25rem;font-weight:600;margin:0}.phone-number-display{background:#ffffff1a;border:1px solid #fff3;border-radius:1rem;padding:1.5rem;text-align:center}.phone-number-label{color:#ffffffb3;display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.phone-number-value{color:#fff;font-size:1.5rem;font-weight:700;word-break:break-all}.selected-user-info{align-items:center;background:#ff6b351a;border:1px solid #ff6b354d;border-radius:.75rem;display:flex;gap:.75rem;margin-top:.75rem;padding:.75rem}.selected-user-avatar{align-items:center;background:linear-gradient(135deg,#ff6b35,#ff8c42);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:.875rem;font-weight:700;height:2.5rem;justify-content:center;width:2.5rem}.selected-user-details{flex:1 1}.selected-user-name{color:#fff;font-size:.875rem;font-weight:600;margin-bottom:.25rem}.selected-user-phone{color:#fffc;font-size:.75rem}.phone-number-input{background:#ffffff1a;border:1px solid #fff3;border-radius:.75rem;color:#fff;font-size:1.125rem;padding:1rem;text-align:center;transition:all .2s;width:100%}.phone-number-input:focus{border-color:#ff6b35;box-shadow:0 0 0 3px #ff6b351a;outline:none}.phone-number-input::placeholder{color:#a3a3a3}.phone-keypad{padding:0 1.5rem 1.5rem}.keypad-row{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(3,1fr);margin-bottom:.75rem}.keypad-btn{background:#ffffff1a;border:1px solid #fff3;border-radius:.75rem;color:#fff;cursor:pointer;font-size:1.25rem;font-weight:600;line-height:1.2;padding:1rem;transition:all .2s}.keypad-btn:hover:not(:disabled){background:#fff3;transform:translateY(-1px)}.keypad-btn:disabled{cursor:not-allowed;opacity:.5}.phone-call-controls{padding:0 1.5rem 1.5rem}.call-btn{border:none;border-radius:.75rem;cursor:pointer;font-size:1.125rem;font-weight:600;letter-spacing:.05em;padding:1rem;text-transform:uppercase;transition:all .2s;width:100%}.call-btn-start{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 4px 12px #22c55e4d;color:#fff}.call-btn-start:hover:not(:disabled){background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 6px 16px #22c55e66;transform:translateY(-2px)}.call-btn-start:disabled{cursor:not-allowed;opacity:.5}.call-active-controls{display:flex;flex-direction:column;gap:1rem}.call-info{background:#ffffff1a;border-radius:.75rem;padding:1rem;text-align:center}.call-duration{color:#22c55e;font-size:1.5rem;font-weight:700;margin-bottom:.25rem}.call-number{color:#fff;font-size:1.125rem}.call-buttons{display:flex;gap:1rem}.call-buttons .call-btn{flex:1 1;font-size:1.5rem;padding:1rem}.call-btn-mute,.call-btn-unmute{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.call-btn-end{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.phone-modal-close{align-items:center;background:#ffffff1a;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1rem;height:2rem;justify-content:center;position:absolute;right:1rem;top:1rem;transition:background-color .2s;width:2rem}.phone-modal-close:hover{background:#fff3}.modern-user-list{background-color:var(--white);border:1px solid var(--gray-200);border-radius:1rem;box-shadow:var(--shadow-lg);padding:1.5rem;width:100%}.user-list-header{align-items:center;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem}.user-count-badge{background:linear-gradient(135deg,#ff6b35,#ff8c42);border-radius:9999px;color:#fff;font-size:.875rem;font-weight:600;padding:.5rem 1rem}.user-cards-grid{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.user-card{background:#0000;border:none;border-radius:0;border-radius:8px;border-top:2px solid #ff6b35;margin-bottom:.5rem;overflow:hidden;padding:1rem;position:relative;transition:all .3s ease;width:100%}.user-card:first-child{border-top:none}.user-search-container{margin-bottom:1.5rem;padding:0 .5rem}.search-input-wrapper{align-items:center;background:#fff;border:2px solid #ff6b35;border-radius:12px;box-shadow:0 2px 4px #ff6b351a;display:flex;padding:.75rem 1rem;position:relative;transition:all .3s ease}.search-input-wrapper:focus-within{border-color:#ff8c42;box-shadow:0 4px 8px #ff6b3533}.search-icon{color:#ff6b35;flex-shrink:0;height:20px;margin-right:.75rem;width:20px}.search-input{background:#0000;border:none;color:#1a1a1a;flex:1 1;font-size:.95rem;font-weight:500;outline:none}.search-input::placeholder{color:#999;font-weight:400}.clear-search-btn{background:none;border:none;border-radius:4px;color:#ff6b35;cursor:pointer;flex-shrink:0;margin-left:.5rem;padding:.25rem;transition:all .2s ease}.clear-search-btn:hover{background:#ff6b351a;color:#cc4a1f}.clear-search-btn svg{height:16px;width:16px}.search-results-info{margin-bottom:1rem;padding:0 .5rem}.search-results-text{color:#ff6b35;font-size:.9rem;font-weight:600;margin:0;padding:.5rem 0}.filter-container{display:flex;flex-wrap:wrap;gap:2rem;margin-bottom:1.5rem;padding:0 .5rem}.filter-group{align-items:center;display:flex;gap:.75rem}.filter-label{color:#374151;font-size:.9rem;font-weight:600;white-space:nowrap}.filter-buttons{display:flex;gap:.5rem}.filter-btn{background:#fff;border:2px solid #e5e7eb;border-radius:8px;color:#6b7280;cursor:pointer;font-size:.85rem;font-weight:500;padding:.5rem 1rem;transition:all .2s ease;white-space:nowrap}.filter-btn:hover{background:#ff6b350d;border-color:#ff6b35;color:#ff6b35}.filter-btn.active{background:#ff6b35;border-color:#ff6b35;color:#fff;font-weight:600}.filter-btn.active:hover{background:#ff8c42;border-color:#ff8c42}.user-card:before{display:none}.user-card:hover{border-color:#0000;box-shadow:none;transform:none}.user-card-header{gap:1rem;margin-bottom:1rem;width:100%}.user-avatar,.user-card-header{align-items:center;display:flex}.user-avatar{background:linear-gradient(135deg,#ff6b35,#ff8c42);border-radius:50%;color:#fff;flex-shrink:0;font-size:1.125rem;font-weight:700;height:3rem;justify-content:center;width:3rem}.user-info{flex:1 1}.user-name{color:var(--gray-900);font-size:1.125rem;font-weight:600;margin:0 0 .25rem}.user-phone{color:var(--gray-600);font-size:.875rem;margin:0}.user-phone,.user-status{align-items:center;display:flex;gap:.5rem}.user-status{background:#22c55e1a;border-radius:9999px;color:#16a34a;font-size:.75rem;font-weight:500;padding:.25rem .75rem}.status-dot{animation:pulse 2s infinite;border-radius:50%;height:.5rem;width:.5rem}.status-dot.active{background:#22c55e}.status-dot.inactive{animation:none;background:#ef4444}.status-text{font-size:.75rem;font-weight:500}.user-status .status-text.active{color:#16a34a}.user-status .status-text.inactive{color:#ef4444}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.user-card-body{margin-bottom:1.5rem}.user-details{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr;width:100%}.detail-item{background:#8b5cf60d;border:1px solid #8b5cf61a;border-radius:.5rem;display:flex;flex-direction:column;gap:.25rem;padding:.75rem}.detail-item:last-child{border-bottom:none}.detail-label{color:var(--gray-600);font-size:.875rem;font-weight:500}.detail-value{color:var(--gray-900);font-size:.875rem;font-weight:600;text-align:left;word-break:break-word}.user-card-actions{display:flex;gap:.5rem;justify-content:center}.call-button{align-items:center;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:.75rem;box-shadow:0 4px 12px #22c55e4d;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;padding:.75rem 2rem;transition:all .3s ease}.call-button:hover{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 6px 16px #22c55e66;transform:translateY(-2px)}.call-icon{font-size:1rem}.call-text{font-weight:600}.modern-call-again-btn{align-items:center;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:.75rem;box-shadow:0 4px 12px #22c55e4d;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;justify-content:center;padding:.75rem 1.5rem;transition:all .3s ease;width:100%}.modern-call-again-btn:hover{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 6px 16px #22c55e66;transform:translateY(-2px)}.modern-call-again-btn .call-icon{height:1.25rem;width:1.25rem}.modern-call-again-btn .call-text{font-weight:600}.history-button{align-items:center;background:linear-gradient(135deg,#6b7280,#9ca3af);border:none;border-radius:.75rem;box-shadow:0 4px 12px #6b72804d;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;padding:.75rem 2rem;transition:all .3s ease}.history-button:hover{background:linear-gradient(135deg,#9ca3af,#6b7280);box-shadow:0 6px 16px #6b728066;transform:translateY(-2px)}.history-icon{font-size:1rem}.history-text{font-weight:600}.pagination-container{align-items:center;border-top:1px solid var(--gray-200);display:flex;justify-content:space-between;padding-top:1.5rem}.pagination-info{color:var(--gray-600);font-size:.875rem;margin:0}.pagination-buttons{display:flex;gap:.75rem}.pagination-btn{background:var(--white);border:1px solid var(--gray-300);border-radius:.5rem;color:var(--gray-700);cursor:pointer;font-size:.875rem;font-weight:500;padding:.5rem 1rem;transition:all .2s}.pagination-btn:hover:not(:disabled){background:var(--gray-50);border-color:var(--gray-400)}.pagination-btn:disabled{cursor:not-allowed;opacity:.5}@media (max-width:768px){.header-container{padding:0 1rem}.header-left{gap:1rem}.header-title{display:none}.header-right{gap:.5rem}.webrtc-status-badge{margin-right:1rem;padding:.375rem .75rem}.webrtc-status-badge .status-text{font-size:.75rem}.kpi-section{padding:1rem}.kpi-cards{gap:1rem;grid-template-columns:1fr}.main-content{padding:1rem .5rem}.grid-layout{gap:1rem}.call-buttons{flex-direction:column}.call-btn{width:100%}.phone-modal{border-radius:0;margin:0;max-height:100vh;max-width:100%}.phone-modal-overlay{padding:0}.phone-content{gap:1rem}.selected-user-card{flex-direction:column;gap:1rem;text-align:center}.user-details{grid-template-columns:1fr}.user-card{padding:1rem}.pagination-container{align-items:stretch;flex-direction:column;gap:1rem}.pagination-buttons{justify-content:center}}.call-quality{background:#f3f4f6;border-radius:.375rem;margin-left:.5rem;padding:.25rem .5rem}.call-quality,.call-time{color:#6b7280;font-size:.75rem}.call-time{margin-top:.25rem}.call-time div{margin-bottom:.125rem}.call-notes{background:#f9fafb;border-left:3px solid #3b82f6;border-radius:.375rem;margin-top:.5rem;padding:.5rem}.notes-label{color:#374151;display:block;font-size:.75rem;font-weight:600;margin-bottom:.25rem}.notes-text{color:#6b7280;font-size:.75rem;line-height:1.4}
/*# sourceMappingURL=main.8d08b94b.css.map*/