: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)}.mobile-menu-trigger{display:none;align-items:center;justify-content:center;background:#ffffff26;border:1px solid rgba(255,255,255,.25);color:#fff;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;margin-right:10px;transition:all .2s}.mobile-menu-trigger:hover,.mobile-menu-trigger:active{background:#ffffff4d}.mobile-header-brand{display:none;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-close-btn{display:none;background:#ffffff26;border:none;color:#fff;cursor:pointer;padding:6px;border-radius:6px;align-items:center;justify-content:center;transition:background-color .2s}.mobile-close-btn:hover{background:#ffffff4d}.sidebar-backdrop{position:fixed;inset:0;background:#0f172aa6;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:999;animation:fadeIn .2s ease-out}.desktop-only-btn{display:flex}.header-sync-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;background-color:#ffffff26;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.header-sync-btn:hover{background-color:#ffffff40}.header-bell-btn{position:relative;cursor:pointer;padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;transition:all .2s;outline:none}.bell-badge{position:absolute;top:-4px;right:-4px;background-color:#ef4444;color:#fff;font-size:10px;font-weight:800;border-radius:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #0EA5E9;box-shadow:0 2px 4px #0003}.lock-btn{align-items:center;cursor:pointer;background-color:#f59e0b33;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;margin-left:12px;color:#fcd34d;transition:background-color .2s}.lock-btn:hover{background-color:#f59e0b66}.logout-btn{align-items:center;cursor:pointer;background-color:#fff3;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;margin-left:8px;transition:background-color .2s}.logout-btn:hover{background-color:#ef4444cc}.mobile-user-popover{position:absolute;top:48px;right:0;width:220px;background-color:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0003,0 8px 10px -6px #0000001a;border:1px solid #CBD5E1;z-index:2001;overflow:hidden;animation:fadeIn .15s ease-out}.user-popover-item{width:100%;padding:10px 16px;font-size:13px;font-weight:700;border:none;background:none;cursor:pointer;display:flex;align-items:center;gap:8px;text-align:left;transition:background-color .15s}.user-popover-item:hover{background-color:#f1f5f9}.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:8px;border-radius:var(--radius-sm)}.table-responsive table{min-width:680px}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media(max-width:1024px){:root{--header-height: 58px}.mobile-menu-trigger,.mobile-header-brand,.mobile-close-btn{display:flex!important}.header-nav{display:none!important}.sidebar{position:fixed!important;top:0!important;left:0!important;width:280px!important;max-width:85vw!important;height:100vh!important;z-index:1000!important;transform:translate(-100%)!important;transition:transform .28s cubic-bezier(.4,0,.2,1)!important;box-shadow:6px 0 30px #00000059!important}.sidebar.open{transform:translate(0)!important}.main-area{margin-left:0!important;width:100%!important;min-width:0!important}.top-header{padding:0 16px!important}.content{padding:16px!important}.kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:16px!important}.dashboard-grid{grid-template-columns:1fr!important;gap:16px!important}.table-panel{grid-column:span 1!important}}@media(max-width:768px){.top-header{padding:0 12px!important;height:56px!important}.content{padding:12px 10px!important}.page-title{flex-direction:column!important;gap:8px!important;margin-bottom:16px!important}.page-title h1{font-size:20px!important}.page-title .date{font-size:12px!important}.desktop-only-btn,.user-role-label{display:none!important}.header-actions{gap:8px!important}.kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}.kpi-card{padding:14px 12px!important;gap:10px!important}.kpi-icon{width:38px!important;height:38px!important;font-size:18px!important}.kpi-info p{font-size:20px!important}.modal-container,[style*="width: 1200px"],[style*="width: 600px"],[style*="width: 700px"],[style*="width: 800px"],[style*="width: 900px"],[style*="width: 540px"],[style*="width: 500px"],[style*="width: 450px"],[style*="width: 400px"],[style*="width: 550px"]{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100vh - 24px)!important;margin:12px auto!important;padding:16px!important;border-radius:14px!important}[style*="position: fixed"][style*="right: 24px"][style*="width: 420px"]{right:10px!important;top:60px!important;width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important}.responsive-stack{flex-direction:column!important;width:100%!important}.responsive-stack>div[style*="width: 380px"],.responsive-stack>div[style*="width: 320px"],.responsive-stack>div[style*="width: 280px"]{width:100%!important;max-width:100%!important}.support-grid,.payroll-layout{grid-template-columns:1fr!important}.settings-layout{flex-direction:column!important}.settings-tabs-sidebar{width:100%!important;max-width:100%!important;overflow-x:auto!important;padding:8px!important}.settings-tabs-sidebar>div{flex-direction:row!important;overflow-x:auto!important;white-space:nowrap!important}.settings-tabs-sidebar button{width:auto!important;flex-shrink:0!important;padding:8px 14px!important;font-size:13px!important;border-left:none!important;border-bottom:3px solid transparent!important}.settings-tabs-sidebar button[style*="borderLeft: '3px solid"]{border-bottom:3px solid #3B82F6!important;border-left:none!important}.responsive-grid-1{grid-template-columns:1fr!important;gap:12px!important}[style*="height: calc(100vh - 140px)"]{height:auto!important;min-height:calc(100vh - 100px)!important}}@media(max-width:480px){.sync-btn-text{display:none!important}.header-sync-btn{padding:6px 8px!important}.kpi-grid{grid-template-columns:1fr!important;gap:10px!important}.pagination{justify-content:center!important;flex-wrap:wrap!important}}@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}}