@tailwind base;@tailwind components;@tailwind utilities;:root{--primary: #F97316;--primary-dark: #EA580C;--primary-light: #FB923C;--bg-body: #f5f5f5;--bg-sidebar: #ffffff;--bg-card: #ffffff;--bg-header: linear-gradient(135deg, #F97316 0%, #FB923C 100%);--text-dark: #1f2937;--text-medium: #4b5563;--text-light: #9ca3af;--text-white: #ffffff;--success: #22c55e;--warning: #f59e0b;--error: #ef4444;--info: #3b82f6;--chart-pink: #ec4899;--chart-blue: #06b6d4;--chart-yellow: #fbbf24;--chart-green: #22c55e;--border: #e5e7eb;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-body);color:var(--text-dark);min-height:100vh;-webkit-font-smoothing:antialiased}.app-header{background:var(--bg-header);height:60px;display:flex;align-items:center;padding:0 24px;position:fixed;top:0;left:0;right:0;z-index:100;box-shadow:var(--shadow-md)}.logo{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:22px}.logo-icon{width:40px;height:40px;background:#fff3;border-radius:10px;display:flex;align-items:center;justify-content:center}.header-right{margin-left:auto;display:flex;align-items:center;gap:16px}.tenant-badge{background:#fff3;padding:8px 16px;border-radius:8px;color:#fff;font-size:14px}.sidebar{background:var(--bg-sidebar);width:260px;height:calc(100vh - 60px);position:fixed;left:0;top:60px;border-right:1px solid var(--border);overflow-y:auto;padding:16px 0}.sidebar-section{padding:8px 16px}.sidebar-title{font-size:11px;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;padding:12px 16px 8px}.sidebar-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--text-medium);text-decoration:none;font-size:14px;font-weight:500;border-radius:8px;margin:2px 8px;transition:all .2s ease;cursor:pointer}.sidebar-item:hover{background:#f3f4f6;color:var(--text-dark)}.sidebar-item.active{color:var(--primary);background:#fff7ed}.sidebar-item.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--primary);border-radius:0 4px 4px 0}.sidebar-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sidebar-dropdown{margin-left:auto;color:var(--text-light)}.main-content{margin-left:260px;margin-top:60px;padding:24px;min-height:calc(100vh - 60px)}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.stat-card{background:var(--bg-card);border-radius:12px;padding:20px;box-shadow:var(--shadow-sm);border:1px solid var(--border);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--chart-green)}.stat-card.pink:before{background:var(--chart-pink)}.stat-card.blue:before{background:var(--chart-blue)}.stat-card.yellow:before{background:var(--chart-yellow)}.stat-card.green:before{background:var(--chart-green)}.stat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.stat-title{font-size:14px;font-weight:600;color:var(--text-dark)}.stat-value{font-size:28px;font-weight:700;color:var(--chart-green)}.stat-value.pink{color:var(--chart-pink)}.stat-value.blue{color:var(--chart-blue)}.stat-download{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:8px;cursor:pointer;transition:background .2s}.stat-download:hover{background:var(--primary);color:#fff}.gauge-container{width:160px;height:80px;margin:16px auto;position:relative}.gauge-bg{width:160px;height:80px;border-radius:80px 80px 0 0;background:#e5e7eb;position:relative;overflow:hidden}.gauge-fill{position:absolute;bottom:0;left:0;width:160px;height:80px;border-radius:80px 80px 0 0;background:linear-gradient(to right,var(--chart-pink),var(--chart-blue));transform-origin:center bottom;transform:rotate(-90deg);transition:transform .5s ease}.gauge-center{position:absolute;bottom:0;left:20px;width:120px;height:60px;background:#fff;border-radius:60px 60px 0 0}.gauge-legend{display:flex;justify-content:center;gap:20px;margin-top:12px}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-medium)}.legend-dot{width:10px;height:10px;border-radius:2px}.legend-dot.pink{background:var(--chart-pink)}.legend-dot.blue{background:var(--chart-blue)}.legend-dot.yellow{background:var(--chart-yellow)}.agent-table-container{background:var(--bg-card);border-radius:12px;padding:20px;box-shadow:var(--shadow-sm);border:1px solid var(--border);margin-top:24px}.table-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}.table-title{font-size:16px;font-weight:600;color:var(--text-dark);display:flex;align-items:center;gap:8px}.table-title:before{content:"";width:4px;height:20px;background:var(--chart-green);border-radius:2px}.data-table{width:100%;border-collapse:collapse}.data-table th{text-align:left;padding:12px 16px;font-size:13px;font-weight:600;color:var(--text-medium);background:#f9fafb;border-bottom:1px solid var(--border)}.data-table td{padding:12px 16px;font-size:14px;border-bottom:1px solid var(--border)}.data-table tr:hover{background:#f9fafb}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500}.status-badge.online{background:#dcfce7;color:var(--success)}.status-badge.offline{background:#f3f4f6;color:var(--text-light)}.status-badge.busy{background:#fef3c7;color:var(--warning)}.status-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;border:none}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:#fff;color:var(--text-dark);border:1px solid var(--border)}.btn-secondary:hover{background:#f9fafb}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--error);color:#fff}.softphone{position:fixed;right:24px;bottom:24px;width:320px;background:#1a1a2e;border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;z-index:1000}.softphone-header{background:linear-gradient(135deg,#ef4444,#f97316);padding:16px;color:#fff}.softphone-header .company{font-weight:600;font-size:14px}.softphone-header .status{display:flex;align-items:center;gap:8px;margin-top:4px}.softphone-header .status-indicator{width:10px;height:10px;background:#22c55e;border-radius:50%;animation:pulse 2s infinite}.softphone-body{padding:20px;color:#fff}.caller-info{display:flex;align-items:center;gap:12px;padding:16px;background:#ffffff1a;border-radius:12px;margin-bottom:20px}.caller-avatar{width:48px;height:48px;background:#4b5563;border-radius:50%;display:flex;align-items:center;justify-content:center}.caller-number{font-size:18px;font-weight:600}.caller-duration{font-size:13px;color:#9ca3af}.dial-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.dial-button{background:#ffffff1a;border:none;border-radius:10px;padding:14px;font-size:20px;color:#fff;cursor:pointer;transition:all .2s}.dial-button:hover{background:#fff3}.softphone-actions{display:flex;justify-content:center;gap:16px;padding:16px}.action-btn{width:48px;height:48px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.action-btn:hover{transform:scale(1.1)}.action-btn.mute,.action-btn.hold,.action-btn.transfer,.action-btn.keypad{background:#374151;color:#fff}.hangup-btn{width:100%;padding:14px;background:var(--error);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s}.hangup-btn:hover{background:#dc2626}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316,#fb923c,#fdba74);padding:20px}.login-card{background:#fff;border-radius:20px;padding:48px;width:100%;max-width:420px;box-shadow:0 25px 50px -12px #00000040}.login-logo{text-align:center;margin-bottom:32px}.login-logo h1{font-size:28px;font-weight:700;color:var(--primary);display:flex;align-items:center;justify-content:center;gap:12px}.login-logo .logo-circle{width:48px;height:48px;background:var(--bg-header);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.login-title{font-size:22px;font-weight:600;text-align:center;margin-bottom:8px;color:var(--text-dark)}.login-subtitle{text-align:center;color:var(--text-medium);margin-bottom:32px}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;font-weight:500;color:var(--text-dark);margin-bottom:8px}.form-input{width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:10px;font-size:15px;transition:all .2s}.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #f973161a}.form-input::placeholder{color:var(--text-light)}.login-btn{width:100%;padding:14px;background:var(--primary);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}.login-btn:hover{background:var(--primary-dark)}.login-footer{text-align:center;margin-top:24px;color:var(--text-medium);font-size:14px}.login-footer a{color:var(--primary);text-decoration:none;font-weight:500}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .3s ease-out}@media (max-width: 1024px){.sidebar{width:80px}.sidebar-item span{display:none}.main-content{margin-left:80px}}@media (max-width: 768px){.sidebar{display:none}.main-content{margin-left:0}.softphone{right:10px;bottom:10px;width:300px}}