:root{--primary: #0EA5E9;--header-bg: #0369A1;--bg-main: #F0F9FF;--bg-card: #FFFFFF;--text-main: #0C4A6E;--text-muted: #64748B;--border-color: #E0F2FE;--success: #10B981;--warning: #F59E0B;--danger: #EF4444;--info: #E91E63;--sidebar-width: 250px;--header-height: 60px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px}*{margin:0;padding:0;box-sizing:border-box;font-family:Open Sans,Inter,-apple-system,sans-serif}body{background-color:var(--bg-main);color:var(--text-main);min-height:100vh}.app-container{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:linear-gradient(180deg,#0ea5e9,#0369a1);color:#fff;position:fixed;top:0;left:0;height:100vh;z-index:100;display:flex;flex-direction:column}.sidebar-logo{height:var(--header-height);display:flex;align-items:center;padding:0 24px;font-size:20px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);background:#0000000d}.sidebar-nav{flex:1;padding:20px 0;overflow-y:auto}.sidebar-item{display:flex;align-items:center;gap:12px;padding:14px 24px;color:#fffc;cursor:pointer;transition:all .2s;font-size:14px;font-weight:600}.sidebar-item:hover,.sidebar-item.active{background:#ffffff26;color:#fff;border-left:4px solid white}.sidebar-item:not(.active){border-left:4px solid transparent}.usage-stats{margin:20px;background:#fff;border-radius:var(--radius-md);padding:16px;color:var(--text-main)}.usage-stats h4{color:#fff}.usage-stats-header{padding:0 24px;margin-bottom:10px;font-size:14px;font-weight:600;color:#ffffffe6;display:flex;justify-content:space-between}.usage-box{background:#fff;margin:0 20px 20px;border-radius:var(--radius-md);padding:16px;color:var(--text-main)}.usage-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;font-weight:600;border-bottom:1px solid var(--bg-main)}.usage-row:last-child{border-bottom:none;padding-bottom:0}.usage-row span{color:var(--text-muted);display:flex;align-items:center;gap:8px}.support-item{margin:0 20px 20px;padding:12px 16px;background:#ffffff1a;border-radius:var(--radius-sm);display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:14px;color:#fff}.main-area{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column}.top-header{height:var(--header-height);background:#0ea5e9;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 0;color:#fff;position:sticky;top:0;z-index:90}.header-nav{display:flex;align-items:center;gap:20px;height:100%;margin-left:24px}.header-nav-item{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fffc;height:100%;padding:0 12px;cursor:pointer}.header-nav-item:hover,.header-nav-item.active{color:#fff;border-bottom:3px solid white}.user-profile{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;font-weight:600}.user-avatar{width:36px;height:36px;border-radius:50%;background:#cbd5e1;border:2px solid white}.content{padding:24px;flex:1;overflow-y:auto}.page-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.page-title h1{font-size:24px;font-weight:700;color:var(--text-main);margin-bottom:4px}.page-title p{color:var(--text-muted);font-size:14px}.page-title .date{font-size:14px;color:var(--text-muted);display:flex;align-items:center;gap:6px}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}.kpi-card{background:var(--bg-card);border-radius:var(--radius-md);padding:20px;display:flex;align-items:flex-start;gap:16px;box-shadow:0 2px 10px #00000005;border:1px solid var(--border-color);position:relative}.kpi-icon{width:48px;height:48px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:24px}.kpi-icon.blue{background:#e0f2fe;color:var(--primary)}.kpi-icon.green{background:#d1fae5;color:var(--success)}.kpi-icon.orange{background:#fef3c7;color:var(--warning)}.kpi-info h3{font-size:13px;color:var(--text-muted);font-weight:600;margin-bottom:4px}.kpi-info p{font-size:24px;font-weight:800;color:var(--text-main)}.kpi-info .sub-text{font-size:11px;font-weight:600;margin-top:4px;display:inline-block}.dashboard-grid{display:grid;grid-template-columns:2fr 2fr 1.5fr;gap:20px}.panel{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:0 2px 10px #00000005;border:1px solid var(--border-color);margin-bottom:20px}.panel-header{padding:16px 20px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.panel-header h2{font-size:16px;font-weight:700;color:var(--text-main)}.panel-header a{font-size:13px;color:var(--info);text-decoration:none;font-weight:600;display:flex;align-items:center;gap:4px}.panel-body{padding:20px}.activity-list{display:flex;flex-direction:column;gap:16px}.activity-item{display:flex;align-items:center;justify-content:space-between}.activity-info{display:flex;align-items:center;gap:12px}.activity-info img{width:36px;height:36px;border-radius:50%}.activity-info p{font-size:14px;color:var(--text-main);font-weight:600}.activity-info span{font-size:12px;color:var(--text-muted);display:block;font-weight:400}.time-ago{font-size:12px;color:var(--text-muted)}.task-list{display:flex;flex-direction:column;gap:16px}.task-item{display:flex;align-items:center;justify-content:space-between}.task-label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-main);font-weight:500}.task-label input{accent-color:var(--success);width:16px;height:16px}.task-due{font-size:12px;color:var(--text-muted)}.chart-container{display:flex;align-items:center;justify-content:center;height:200px}.chart-legend{display:flex;flex-direction:column;gap:12px}.legend-item{display:flex;align-items:center;justify-content:space-between;width:100px;font-size:13px;color:var(--text-muted);font-weight:600}.legend-dot{width:10px;height:10px;border-radius:50%;margin-right:8px;display:inline-block}.legend-percent{color:var(--text-main);font-weight:700}.table-panel{grid-column:span 2}.table-controls{display:flex;gap:12px;align-items:center}.filter-select{border:none;font-size:13px;color:var(--text-muted);background:transparent;outline:none;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px}.btn-primary{background:#0369a1;color:#fff;border:none;padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}table{width:100%;border-collapse:collapse}th{text-align:left;padding:12px 20px;font-size:12px;color:var(--text-muted);font-weight:700;border-bottom:1px solid var(--border-color);background:#f8fafc}td{padding:12px 20px;font-size:13px;border-bottom:1px solid var(--border-color);color:var(--text-main)}td.employee-cell{display:flex;align-items:center;gap:12px}td.employee-cell img{width:32px;height:32px;border-radius:50%}.emp-name{font-weight:600}.emp-role{font-size:11px;color:var(--text-muted)}.emp-id{color:var(--primary);font-weight:600;font-size:12px}.badge{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;color:#fff}.badge.green{background:var(--success)}.badge.red{background:var(--danger);text-transform:uppercase}.pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:10px}.page-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text-muted);border:1px solid transparent}.page-btn.active{background:var(--primary);color:#fff}.page-btn:not(.active):hover{border:1px solid var(--border-color)}@media(max-width:768px){.login-container{flex-direction:column!important}.login-left{display:none!important}.login-right{padding:16px!important;width:100vw!important}.login-right>div{padding:24px!important;border-radius:16px!important}}� �{}