:root{--bg-primary:#f0f2f5;--bg-secondary:#fff;--bg-card:#fff;--bg-input:#f8f9fa;--border:#d9dee4;--border-focus:#2563eb;--text-primary:#1e293b;--text-secondary:#475569;--text-muted:#94a3b8;--accent:#2563eb;--accent-hover:#1d4ed8;--accent-glow:#2563eb1a;--success:#16a34a;--danger:#dc2626;--warning:#d97706;--cyan:#0891b2;--purple:#7c3aed;--sidebar-width:260px}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;background:#f0f2f5;background:var(--bg-primary);color:#1e293b;color:var(--text-primary);font-family:Cambria,Georgia,serif;overflow-x:hidden}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:#e9ecef}::-webkit-scrollbar-thumb{background:#adb5bd;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#868e96}.app-layout{display:flex;min-height:100vh}.sidebar{background:#fff;background:var(--bg-secondary);border-right:1px solid #d9dee4;border-right:1px solid var(--border);bottom:0;box-shadow:2px 0 8px #0000000a;display:flex;flex-direction:column;left:0;overflow-y:auto;position:fixed;top:0;width:260px;width:var(--sidebar-width);z-index:100}.sidebar-header{border-bottom:1px solid #d9dee4;border-bottom:1px solid var(--border);gap:12px;padding:20px}.sidebar-header,.sidebar-logo{align-items:center;display:flex}.sidebar-logo{background:linear-gradient(135deg,#2563eb,#0891b2);background:linear-gradient(135deg,var(--accent),var(--cyan));border-radius:10px;color:#fff;height:36px;justify-content:center;width:36px}.sidebar-logo,.sidebar-title{font-size:16px;font-weight:700}.sidebar-title{color:#1e293b;color:var(--text-primary);line-height:1.2}.sidebar-subtitle{color:#94a3b8;color:var(--text-muted);font-size:10px;letter-spacing:1.5px;text-transform:uppercase}.sidebar-nav{flex:1 1;padding:12px 0}.nav-item{align-items:center;border-left:3px solid #0000;color:#475569;color:var(--text-secondary);cursor:pointer;display:flex;font-size:13px;font-weight:400;gap:10px;padding:10px 20px;text-decoration:none;transition:all .2s;-webkit-user-select:none;user-select:none}.nav-item:hover{color:#1e293b;color:var(--text-primary)}.nav-item.active,.nav-item:hover{background:#2563eb1a;background:var(--accent-glow)}.nav-item.active{border-left-color:#2563eb;border-left-color:var(--accent);color:#2563eb;color:var(--accent);font-weight:600}.nav-item .nav-icon{flex-shrink:0;font-size:16px;text-align:center;width:20px}.nav-item .nav-arrow{font-size:10px;margin-left:auto;transition:transform .2s}.nav-item .nav-arrow.open{transform:rotate(90deg)}.sub-nav{overflow:hidden;transition:max-height .3s ease}.sub-nav .nav-item{border-left:none;font-size:12px;padding-left:52px}.main-content{flex:1 1;margin-left:260px;margin-left:var(--sidebar-width);min-height:100vh}.top-bar{align-items:center;background:#fff;background:var(--bg-secondary);border-bottom:1px solid #d9dee4;border-bottom:1px solid var(--border);box-shadow:0 1px 4px #0000000a;display:flex;height:56px;justify-content:space-between;padding:0 24px;position:-webkit-sticky;position:sticky;top:0;z-index:50}.page-title{color:#1e293b;color:var(--text-primary);font-size:15px;font-weight:700}.live-call-badge{align-items:center;background:#dc262614;border:1px solid #dc262633;border-radius:20px;display:flex;gap:8px;padding:4px 14px}.live-call-dot{animation:pulse 1.5s infinite;background:#dc2626;border-radius:50%;box-shadow:0 0 6px #dc262680;height:8px;width:8px}.live-call-label{color:#475569;color:var(--text-secondary);font-size:12px;font-weight:600}.live-call-count{color:#dc2626;font-size:16px;font-weight:700;min-width:20px;text-align:center}.top-bar-right{align-items:center;display:flex;gap:16px}.top-bar-time{font-feature-settings:"tnum";color:#94a3b8;color:var(--text-muted);font-size:12px;font-variant-numeric:tabular-nums}.status-dot{animation:pulse 2s infinite;background:#16a34a;background:var(--success);border-radius:50%;box-shadow:0 0 6px #16a34a66;height:8px;width:8px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.page-container{padding:24px}.card{background:#fff;background:var(--bg-card);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 4px #0000000a;margin-bottom:20px;padding:20px}.card-header{border-bottom:1px solid #d9dee4;border-bottom:1px solid var(--border);justify-content:space-between;margin-bottom:16px;padding-bottom:12px}.card-header,.card-title{align-items:center;display:flex}.card-title{color:#1e293b;color:var(--text-primary);font-size:14px;font-weight:700;gap:8px}.card-title-icon{color:#2563eb;color:var(--accent);font-size:16px}.form-grid{grid-gap:14px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.form-grid-3{grid-template-columns:repeat(3,1fr)}.form-group{display:flex;flex-direction:column;gap:4px}.form-group.full-width{grid-column:1/-1}.form-label{color:#475569;color:var(--text-secondary);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.form-input,.form-select,.form-textarea{background:#f8f9fa;background:var(--bg-input);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:6px;color:#1e293b;color:var(--text-primary);font-family:Cambria,Georgia,serif;font-size:13px;outline:none;padding:8px 12px;transition:border-color .2s,box-shadow .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:#2563eb;border-color:var(--border-focus);box-shadow:0 0 0 3px #2563eb1a;box-shadow:0 0 0 3px var(--accent-glow)}.form-select{cursor:pointer}.form-select option{background:#fff;background:var(--bg-secondary);color:#1e293b;color:var(--text-primary)}.form-textarea{min-height:70px;resize:vertical}.form-checkbox{align-items:center;color:#475569;color:var(--text-secondary);cursor:pointer;display:flex;font-size:13px;gap:8px}.form-checkbox input[type=checkbox]{accent-color:#2563eb;accent-color:var(--accent);cursor:pointer;height:16px;width:16px}.btn{align-items:center;border:1px solid #0000;border-radius:6px;cursor:pointer;display:inline-flex;font-family:Cambria,Georgia,serif;font-size:12px;font-weight:600;gap:6px;padding:8px 16px;transition:all .2s}.btn-primary{background:#2563eb;background:var(--accent);color:#fff}.btn-primary:hover{background:#1d4ed8;background:var(--accent-hover)}.btn-danger{background:#0000;border-color:#dc2626;border-color:var(--danger);color:#dc2626;color:var(--danger)}.btn-danger:hover{background:#dc26260f}.btn-sm{border-radius:5px;font-size:11px;padding:4px 10px}.btn-group{gap:6px}.btn-group,.table-controls{display:flex;flex-wrap:wrap}.table-controls{align-items:center;gap:12px;justify-content:space-between;margin-bottom:12px}.table-search{background:#f8f9fa;background:var(--bg-input);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:6px;color:#1e293b;color:var(--text-primary);font-family:Cambria,Georgia,serif;font-size:12px;outline:none;padding:7px 12px;transition:border-color .2s;width:220px}.table-search:focus{border-color:#2563eb;border-color:var(--border-focus)}.table-show-entries{align-items:center;color:#475569;color:var(--text-secondary);display:flex;font-size:12px;gap:6px}.table-show-entries select{background:#f8f9fa;background:var(--bg-input);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:5px;color:#1e293b;color:var(--text-primary);font-family:Cambria,Georgia,serif;font-size:12px;outline:none;padding:4px 8px}.export-btns{display:flex;gap:4px}.export-btn{background:#f8f9fa;background:var(--bg-input);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:5px;color:#475569;color:var(--text-secondary);cursor:pointer;font-family:Cambria,Georgia,serif;font-size:11px;padding:5px 10px;transition:all .2s}.export-btn:hover{border-color:#2563eb;border-color:var(--accent);color:#2563eb;color:var(--accent)}.data-table{border-collapse:initial;border-spacing:0;font-size:12px;width:100%}.data-table thead th{background:#f1f5f9;border-bottom:2px solid #d9dee4;border-bottom:2px solid var(--border);color:#475569;color:var(--text-secondary);font-size:11px;font-weight:700;letter-spacing:.5px;padding:10px 12px;position:-webkit-sticky;position:sticky;text-align:left;text-transform:uppercase;top:0;white-space:nowrap}.data-table thead th:first-child{border-radius:6px 0 0 0}.data-table thead th:last-child{border-radius:0 6px 0 0}.data-table tbody tr{transition:background .15s}.data-table tbody tr:hover{background:#f8fafc}.data-table tbody tr:nth-child(2n){background:#fafbfc}.data-table tbody tr:nth-child(2n):hover{background:#f1f5f9}.data-table tbody td{border-bottom:1px solid #e9ecef;color:#1e293b;color:var(--text-primary);max-width:200px;overflow:hidden;padding:8px 12px;text-overflow:ellipsis;white-space:nowrap}.table-footer{align-items:center;color:#475569;color:var(--text-secondary);display:flex;font-size:12px;justify-content:space-between;margin-top:12px}.pagination{display:flex;gap:2px}.page-btn{background:#f8f9fa;background:var(--bg-input);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:4px;color:#475569;color:var(--text-secondary);cursor:pointer;font-family:Cambria,Georgia,serif;font-size:11px;padding:4px 10px;transition:all .15s}.page-btn:hover{color:#2563eb;color:var(--accent)}.page-btn.active,.page-btn:hover{border-color:#2563eb;border-color:var(--accent)}.page-btn.active{background:#2563eb;background:var(--accent);color:#fff}.page-btn:disabled{cursor:default;opacity:.4}.badge{align-items:center;border-radius:20px;display:inline-flex;font-size:10px;font-weight:700;letter-spacing:.3px;padding:2px 8px}.badge-active{background:#16a34a1a;color:#16a34a;color:var(--success)}.badge-inactive{background:#dc26261a;color:#dc2626;color:var(--danger)}.tbd-page{flex-direction:column;min-height:400px;text-align:center}.tbd-icon,.tbd-page{align-items:center;display:flex;justify-content:center}.tbd-icon{background:linear-gradient(135deg,#2563eb1a,#0891b214);background:linear-gradient(135deg,var(--accent-glow),#0891b214);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:20px;font-size:32px;height:80px;margin-bottom:20px;width:80px}.tbd-title{color:#1e293b;color:var(--text-primary);font-size:18px;font-weight:700;margin-bottom:8px}.tbd-text{color:#94a3b8;color:var(--text-muted);font-size:13px}.table-wrapper{overflow-x:auto}.action-btns{display:flex;gap:4px}.payout-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}.filter-row{align-items:flex-end;display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.filter-row .form-group{min-width:160px}.checkbox-group{display:flex;flex-wrap:wrap;gap:12px;padding:10px 0}.datepicker-wrap{display:inline-block;position:relative;width:100%}.datepicker-input-wrap{cursor:pointer;position:relative}.datepicker-input{cursor:pointer!important;padding-right:30px!important}.datepicker-icon{color:#94a3b8;color:var(--text-muted);font-size:10px;pointer-events:none;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.datepicker-dropdown{animation:dpFadeIn .15s ease;background:#fff;background:var(--bg-card);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #0000001f;left:0;min-width:280px;padding:12px;position:absolute;top:calc(100% + 4px);z-index:300}@keyframes dpFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.datepicker-header{gap:4px;justify-content:space-between;margin-bottom:10px}.datepicker-header,.dp-nav-btn{align-items:center;display:flex}.dp-nav-btn{background:none;border:1px solid #d9dee4;border:1px solid var(--border);border-radius:5px;color:#475569;color:var(--text-secondary);cursor:pointer;font-size:14px;font-weight:700;height:28px;justify-content:center;transition:all .15s;width:28px}.dp-nav-btn:hover{background:#2563eb1a;background:var(--accent-glow);border-color:#2563eb;border-color:var(--accent);color:#2563eb;color:var(--accent)}.dp-month-year{color:#1e293b;color:var(--text-primary);flex:1 1;font-size:13px;font-weight:700;text-align:center}.datepicker-days-header{grid-gap:2px;display:grid;gap:2px;grid-template-columns:repeat(7,1fr);margin-bottom:4px}.dp-day-name{color:#94a3b8;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.3px;padding:4px 0;text-align:center;text-transform:uppercase}.datepicker-grid{grid-gap:2px;display:grid;gap:2px;grid-template-columns:repeat(7,1fr)}.dp-day{border-radius:5px;color:#1e293b;color:var(--text-primary);cursor:pointer;font-size:12px;font-weight:500;padding:6px 2px;text-align:center;transition:all .12s}.dp-day:hover{background:#2563eb1a;background:var(--accent-glow);color:#2563eb;color:var(--accent)}.dp-day-other{cursor:default;opacity:.4}.dp-day-other,.dp-day-other:hover{color:#94a3b8;color:var(--text-muted)}.dp-day-other:hover{background:none}.dp-today{border:1px solid #2563eb;border:1px solid var(--accent);font-weight:700}.dp-selected{background:#2563eb!important;background:var(--accent)!important;color:#fff!important;font-weight:700}.datepicker-footer{border-top:1px solid #d9dee4;border-top:1px solid var(--border);display:flex;justify-content:space-between;margin-top:8px;padding-top:8px}.dp-footer-btn{background:none;border:1px solid #d9dee4;border:1px solid var(--border);border-radius:5px;color:#2563eb;color:var(--accent);cursor:pointer;font-family:Cambria,Georgia,serif;font-size:11px;font-weight:600;padding:4px 12px;transition:all .15s}.dp-footer-btn:hover{background:#2563eb1a;background:var(--accent-glow);border-color:#2563eb;border-color:var(--accent)}.dp-clear-btn{color:#94a3b8;color:var(--text-muted)}.dp-clear-btn:hover{background:#dc26260f;border-color:#dc2626;border-color:var(--danger);color:#dc2626;color:var(--danger)}.audio-mini{height:30px;width:200px}.table-totals{background:#f1f5f9;font-weight:700}.table-totals td{color:#2563eb!important;color:var(--accent)!important}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000004d;display:flex;inset:0;justify-content:center;position:fixed;z-index:200}.modal{background:#fff;background:var(--bg-card);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px #0000001f;max-height:80vh;max-width:90vw;min-width:500px;overflow-y:auto;padding:24px}.modal-title{color:#1e293b;color:var(--text-primary);font-size:16px;font-weight:700;margin-bottom:16px}.import-overlay{align-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0000008c;display:flex;inset:0;justify-content:center;position:fixed;z-index:9999}.import-overlay-box{background:#fff;background:var(--bg-card);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 48px #0003;min-width:400px;padding:40px 48px;text-align:center}.import-spinner{animation:spin .8s linear infinite;border:4px solid #d9dee4;border-top-color:#2563eb;border:4px solid var(--border);border-radius:50%;border-top-color:var(--accent);height:48px;margin:0 auto 20px;width:48px}@keyframes spin{to{transform:rotate(1turn)}}.import-overlay-title{color:#1e293b;color:var(--text-primary);font-size:18px;font-weight:700;margin-bottom:6px}.import-overlay-detail{color:#475569;color:var(--text-secondary);font-size:13px;margin-bottom:20px}.import-progress-track{background:#f8f9fa;background:var(--bg-input);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:5px;height:10px;overflow:hidden;width:100%}.import-progress-bar{background:linear-gradient(90deg,#2563eb,#0891b2);background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:5px;height:100%;position:relative;transition:width .3s ease}.import-progress-bar:after{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,#0000,#ffffff4d,#0000);content:"";inset:0;position:absolute}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.import-progress-text{font-feature-settings:"tnum";color:#2563eb;color:var(--accent);font-size:14px;font-variant-numeric:tabular-nums;font-weight:700;margin-top:10px}.import-overlay-warn{color:#94a3b8;color:var(--text-muted);font-size:11px;font-style:italic;margin-top:14px}#particles-canvas{height:100%;left:0;opacity:.15;pointer-events:none;position:fixed;top:0;width:100%;z-index:-1}.hamburger-btn{background:none;border:none;cursor:pointer;display:none;flex-direction:column;gap:4px;justify-content:center;margin-right:8px;padding:6px}.hamburger-btn span{background:#1e293b;background:var(--text-primary);border-radius:2px;display:block;height:2px;transition:transform .2s;width:20px}.sidebar-overlay{background:#0006;display:none;inset:0;position:fixed;z-index:99}.modal-grid-2{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr}.modal-grid-3{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr 1fr}@media (max-width:768px){.hamburger-btn{display:flex}.sidebar-overlay{display:block}.sidebar{transform:translateX(-100%);transition:transform .3s ease;z-index:200}.sidebar.sidebar-open{transform:translateX(0)}.main-content{margin-left:0}.top-bar{gap:8px;padding:0 12px}.page-title{flex:1 1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-bar-time{display:none}.live-call-badge{padding:3px 10px}.live-call-label{display:none}.live-call-count{font-size:13px}.card,.page-container{padding:12px}.card{margin-bottom:12px}.card-header{align-items:flex-start;flex-direction:column;gap:8px}.form-grid,.form-grid-3,.modal-grid-2,.modal-grid-3{grid-template-columns:1fr}.modal{max-height:85vh;max-width:95vw!important;min-width:0!important;min-width:auto!important;padding:16px;width:calc(100vw - 24px)}.modal-overlay{align-items:flex-start;padding:40px 12px 12px}.payout-grid{grid-template-columns:repeat(2,1fr)}.btn{font-size:13px;min-height:40px;padding:8px 14px}.btn-sm{font-size:12px;min-height:34px;padding:6px 10px}.table-controls{align-items:stretch;flex-direction:column}.table-search{width:100%}.export-btns{flex-wrap:wrap}.export-btn{flex:1 1;min-width:0;text-align:center}.table-show-entries{justify-content:space-between}.table-footer{align-items:flex-start;flex-direction:column;gap:8px}.pagination{flex-wrap:wrap;gap:4px}.page-btn{align-items:center;display:flex;justify-content:center;min-height:34px;min-width:34px}.filter-row{flex-direction:column}.filter-row .form-group{min-width:0;min-width:auto;width:100%}.checkbox-group{flex-direction:column}.action-btns{flex-wrap:wrap}.audio-mini{max-width:200px;width:100%}.import-overlay-box{min-width:0;min-width:auto;padding:24px 20px;width:calc(100vw - 32px)}.agent-login-card{max-width:400px;padding:32px 24px;width:calc(100vw - 32px)}.agent-stats-grid{grid-template-columns:1fr}}.agent-login-page{align-items:center;background:#f0f2f5;background:var(--bg-primary);display:flex;justify-content:center;min-height:100vh}.agent-login-card{background:#fff;background:var(--bg-card);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 32px #00000014;padding:40px;position:relative;text-align:center;width:400px;z-index:1}.agent-login-logo{align-items:center;background:linear-gradient(135deg,#2563eb,#0891b2);background:linear-gradient(135deg,var(--accent),var(--cyan));border-radius:16px;color:#fff;display:inline-flex;font-size:20px;font-weight:800;height:56px;justify-content:center;margin-bottom:16px;width:56px}.agent-login-title{color:#1e293b;color:var(--text-primary);font-size:22px;font-weight:700;margin-bottom:4px}.agent-login-subtitle{color:#94a3b8;color:var(--text-muted);font-size:13px;margin-bottom:24px}.agent-login-error{background:#dc262614;border:1px solid #dc262633;border-radius:8px;color:#dc2626;color:var(--danger);font-size:12px;font-weight:600;margin-bottom:16px;padding:8px 14px}.agent-login-field{margin-bottom:16px;text-align:left}.agent-login-field label{color:#475569;color:var(--text-secondary);display:block;font-size:11px;font-weight:600;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}.agent-login-field input{background:#f8f9fa;background:var(--bg-input);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:8px;color:#1e293b;color:var(--text-primary);font-family:Cambria,Georgia,serif;font-size:14px;outline:none;padding:10px 14px;transition:border-color .2s,box-shadow .2s;width:100%}.agent-login-field input:focus{border-color:#2563eb;border-color:var(--border-focus);box-shadow:0 0 0 3px #2563eb1a;box-shadow:0 0 0 3px var(--accent-glow)}.agent-login-btn{background:#2563eb;background:var(--accent);border:none;border-radius:8px;color:#fff;cursor:pointer;font-family:Cambria,Georgia,serif;font-size:14px;font-weight:700;margin-top:8px;padding:12px;transition:background .2s;width:100%}.agent-login-btn:hover{background:#1d4ed8;background:var(--accent-hover)}.agent-login-btn:disabled{cursor:default;opacity:.6}.agent-stats-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.agent-stat-card{background:#fff;background:var(--bg-card);border:1px solid #d9dee4;border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 4px #0000000a;padding:20px;text-align:center}.agent-stat-icon{align-items:center;border-radius:12px;display:inline-flex;font-size:20px;height:44px;justify-content:center;margin-bottom:12px;width:44px}.agent-stat-value{color:#1e293b;color:var(--text-primary);font-size:24px;font-weight:800;margin-bottom:4px}.agent-stat-label{color:#94a3b8;color:var(--text-muted);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}