:root{--bg-primary:#f4f5f7;--bg-secondary:#fff;--bg-card:#fff;--bg-hover:#eef0f5;--border:#e2e4ec;--border-light:#cdd0de;--gold:#0d9488;--gold-dim:#0d94881a;--navy:#1e2540;--navy-light:#2e3a5e;--text-primary:#1a1f36;--text-secondary:#6b7280;--text-muted:#9da5bb;--success:#16a34a;--success-bright:#22c55e;--warning:#d97706;--danger:#dc2626;--info:#2563eb;--success-dim:#16a34a1a;--warning-dim:#d977061a;--danger-dim:#dc26261a;--info-dim:#2563eb1a;--purple:#8b5cf6;--purple-dim:#8b5cf61a;--sidebar-w:260px;--header-h:52px;--radius:10px;--radius-sm:6px;--shadow:0 1px 3px #1e25400d;--shadow-md:0 2px 8px #1e254012;--font:"Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-size:13px;font-weight:400;line-height:1.5;overflow-x:hidden}h1,h2,h3,h4,h5,h6{color:var(--navy);font-weight:800;line-height:1.2}.fw-400{font-weight:400}.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}.text-gold{color:var(--gold)!important}.text-success{color:var(--success)!important}.text-danger{color:var(--danger)!important}.text-muted{color:var(--text-muted)!important}.text-secondary{color:var(--text-secondary)}.app-layout{height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-w);background:var(--navy);z-index:1000;border-right:none;flex-direction:column;flex-shrink:0;transition:transform .3s;display:flex;overflow-y:auto}.main-content{background:var(--bg-primary);flex-direction:column;flex:1;width:100%;display:flex;overflow:hidden}.page-body{flex:1;padding:16px;overflow-y:auto}.sidebar-logo{border-bottom:1px solid #ffffff14;padding:18px 16px 14px}.sidebar-logo .logo-icon{background:var(--gold);border-radius:9px;justify-content:center;align-items:center;width:36px;height:36px;margin-bottom:10px;display:flex}.sidebar-logo h1{color:#fff;font-size:14px;font-weight:700;line-height:1.4}.sidebar-logo p{color:#fff6;margin-top:3px;font-size:10px}.sidebar-nav{flex:1;padding:12px 8px}.nav-section-label{letter-spacing:1px;color:#0d9488d9;text-transform:uppercase;padding:16px 14px 6px;font-size:12px;font-weight:700}.nav-item{border-radius:var(--radius-sm);cursor:pointer;color:#fff9;text-align:left;background:0 0;border:none;align-items:center;gap:12px;width:100%;margin-bottom:2px;padding:8px 14px;font-size:13px;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.nav-item:hover{color:#fff;background:#ffffff0f}.nav-item.active{color:var(--gold);background:#0d948826}.nav-item.active:before{content:"";background:var(--gold);border-radius:0 4px 4px 0;width:3.5px;position:absolute;top:10px;bottom:10px;left:0}.nav-item .nav-icon{opacity:.7;flex-shrink:0;justify-content:center;align-items:center;width:20px;transition:all .2s;display:flex}.nav-item span:not(.nav-icon):not(.sidebar-badge){white-space:nowrap;flex:1}.nav-item.active .nav-icon{opacity:1;transform:scale(1.1)}.nav-item:hover .nav-icon{opacity:1}.header{height:var(--header-h);background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 20px;display:flex}.header-title{color:var(--text-primary);letter-spacing:-.3px;font-size:18px;font-weight:800}.header-sub{color:var(--text-muted);margin-top:-2px;font-size:11.5px}.header-right{align-items:center;gap:10px;display:flex}.header-time{color:var(--text-secondary);background:var(--bg-primary);border:1px solid var(--border);border-radius:20px;padding:4px 9px;font-size:11px;display:none}@media (width>=1025px){.header-time{display:block}}.menu-toggle{color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px;display:none}.sidebar-close{color:#fff6;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px;display:none}.sidebar-close:hover{color:#fff}.sidebar-overlay{z-index:900;background:#0006;position:fixed;inset:0}.grid-6{grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px;display:grid}.grid-5{grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;display:grid}.grid-2{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px;display:grid}@media (width<=1200px){.grid-6,.grid-5{grid-template-columns:repeat(3,1fr)}}@media (width<=992px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.grid-6,.grid-5{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}@media (width<=480px){.grid-6,.grid-5,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.card-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:11px;font-weight:700;display:flex}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:14px;height:102px;min-height:102px;padding:16px 14px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}@media (width<=768px){.stat-card{gap:10px;height:auto;min-height:90px;padding:12px}.stat-icon{width:34px;height:34px;font-size:15px}.stat-icon svg{width:17px;height:17px}}.stat-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 10px 20px #1e254014}.stat-icon{background:var(--bg-primary);width:42px;height:42px;color:var(--navy);border:1px solid var(--border);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;transition:all .3s;display:flex}.stat-card:hover .stat-icon{background:var(--navy);border-color:var(--navy);transform:scale(1.05);color:#fff!important}.stat-icon svg{stroke-width:2px;width:22px;height:22px}.stat-info{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;word-break:break-word;margin-bottom:2px;font-size:10px;font-weight:700;line-height:1.3}.stat-value{color:var(--navy);white-space:nowrap;font-size:13px;font-weight:800;line-height:1.2;overflow:visible}.stat-card.premium{background:var(--bg-card)}.stat-card.premium .stat-icon{background:var(--gold-dim);border-color:#0000;color:var(--gold)!important}.stat-card.premium:hover .stat-icon{background:var(--gold);color:#fff!important}.stat-card.premium:hover{border-color:var(--gold)}.stat-card.success{background:var(--bg-card)}.stat-card.success .stat-icon{background:var(--success-dim);border-color:#0000;color:var(--success)!important}.stat-card.success:hover .stat-icon{background:var(--success);color:#fff!important}.stat-card.success:hover{border-color:var(--success)}.stat-card.info{background:var(--bg-card)}.stat-card.info .stat-icon{background:var(--info-dim);border-color:#0000;color:var(--info)!important}.stat-card.info:hover .stat-icon{background:var(--info);color:#fff!important}.stat-card.info:hover{border-color:var(--info)}.stat-card.warning{background:var(--bg-card)}.stat-card.warning .stat-icon{background:var(--warning-dim);border-color:#0000;color:var(--warning)!important}.stat-card.warning:hover .stat-icon{background:var(--warning);color:#fff!important}.stat-card.warning:hover{border-color:var(--warning)}.stat-card.danger{background:var(--bg-card)}.stat-card.danger .stat-icon{background:var(--danger-dim);border-color:#0000;color:var(--danger)!important}.stat-card.danger:hover .stat-icon{background:var(--danger);color:#fff!important}.stat-card.danger:hover{border-color:var(--danger)}.stat-card.purple{background:var(--bg-card)}.stat-card.purple .stat-icon{background:var(--purple-dim);border-color:#0000;color:var(--purple)!important}.stat-card.purple:hover .stat-icon{background:var(--purple);color:#fff!important}.stat-card.purple:hover{border-color:var(--purple)}.progress-success{background:var(--success)}.progress-info{background:var(--info)}.progress-warning{background:var(--warning)}.progress-danger{background:var(--danger)}.progress-purple{background:var(--purple)}.progress-premium{background:var(--gold)}.text-info{color:var(--info)!important}.text-warning{color:var(--warning)!important}.text-purple{color:var(--purple)!important}.text-premium{color:var(--gold)!important}.stat-change{align-items:center;gap:4px;margin-top:4px;font-size:9px;font-weight:700;display:flex}.card-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:10px;font-weight:700}.card-value{color:var(--navy);font-size:16px;font-weight:800;line-height:1.2}.stat-change.up{color:var(--success)}.stat-change.down{color:var(--danger)}.badge{border-radius:20px;align-items:center;padding:2px 8px;font-size:10.5px;font-weight:600;display:inline-flex}.badge-success{background:var(--success-dim);color:var(--success)}.badge-warning{background:var(--warning-dim);color:var(--warning)}.badge-danger{background:var(--danger-dim);color:var(--danger)}.badge-info{background:var(--info-dim);color:var(--info)}.badge-outline{border:1px solid var(--border);color:var(--text-muted);background:0 0}.badge-gold{background:var(--gold-dim);color:var(--gold)}.badge-muted{background:var(--bg-hover);color:var(--text-muted)}.badge-success-solid{background:var(--success);color:#fff}.badge-danger-solid{background:var(--danger);color:#fff}.badge-info-solid{background:var(--info);color:#fff}.badge-warning-solid,.badge-gold-solid{background:var(--gold);color:#fff}.sidebar-badge{text-align:center;border-radius:10px;min-width:16px;padding:1px 6px;font-size:8.5px;font-weight:800;line-height:1.4}.sidebar-badge.badge-success{background:var(--success);color:#fff}.sidebar-badge.badge-bright-green{background:var(--success-bright);color:#fff}.sidebar-badge.badge-danger{background:var(--danger);color:#fff}.sidebar-badge.badge-info{background:var(--info);color:#fff}.sidebar-badge.badge-warning{background:var(--warning);color:#fff}.badge-bright-green{color:var(--success-bright);background:#22c55e26}.tab-nav{background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:4px;max-width:100%;margin-bottom:16px;padding:4px;display:inline-flex;overflow-x:auto}.tab-item{cursor:pointer;color:var(--text-muted);border-radius:var(--radius-sm);white-space:nowrap;background:0 0;border:none;align-items:center;gap:8px;padding:8px 16px;font-size:12.5px;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.tab-item:hover:not(.active){color:var(--text-primary);background:#1e25400a}.tab-item.active{color:#fff;background:var(--gold);box-shadow:0 4px 10px var(--gold-dim)}.tab-item span{font-size:inherit}.progress-bar{background:var(--bg-hover);border-radius:99px;height:5px;overflow:hidden}.progress-fill{border-radius:99px;height:100%;transition:width .4s}.progress-gold{background:var(--gold)}.progress-green{background:var(--success)}.progress-blue{background:var(--info)}.progress-red{background:var(--danger)}.table-wrap{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-secondary);overflow-x:auto}table{border-collapse:separate;border-spacing:0;table-layout:auto;width:100%;font-size:12px}thead th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;border-bottom:2px solid var(--border);white-space:nowrap;background:var(--bg-secondary);height:40px;padding:10px 16px;font-size:10px;font-weight:700}tbody td{border-bottom:1px solid var(--border);vertical-align:middle;white-space:normal;word-break:break-word;height:40px;color:var(--text-primary);padding:10px 16px;font-size:12px;font-weight:500}tbody tr:hover{background:var(--bg-hover)}tbody tr.row-selected{background:var(--gold-dim)}tbody tr.row-selected:hover{background:#0d948826}tbody tr:last-child td{border-bottom:none}.compact-table,.compact-log{border-collapse:collapse;width:100%}.compact-table thead th,.compact-log thead th{color:var(--navy)!important;border-bottom:1.5px solid var(--border)!important;text-transform:uppercase!important;letter-spacing:.8px!important;text-align:left!important;white-space:nowrap!important;background:#f1f5f9!important;height:auto!important;padding:6px 12px!important;font-size:9.5px!important;font-weight:700!important}.compact-table tbody td,.compact-log tbody td{border-bottom:1px solid var(--border)!important;vertical-align:middle!important;height:30px!important;color:var(--text-primary)!important;padding:4px 12px!important;font-size:10.5px!important;font-weight:500!important}.compact-table tbody tr:hover,.compact-log tbody tr:hover{background:#f8fafc!important}.compact-table-total td,.compact-log-total td{border-top:1.5px solid var(--navy)!important;border-bottom:1.5px solid var(--navy)!important;background:#f8fafc!important;height:32px!important;padding:6px 12px!important;font-size:11px!important;font-weight:800!important}.unit-cost-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:20px;display:grid}.unit-cost-card{border:1px solid var(--border);background:#fff;border-radius:12px;flex-direction:column;gap:12px;padding:16px;transition:all .2s;display:flex}.unit-cost-card:hover{border-color:var(--gold);box-shadow:var(--shadow-md)}.ucc-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding-bottom:10px;display:flex}.ucc-title{color:var(--navy);font-size:14px;font-weight:800}.ucc-body{flex-direction:column;gap:8px;display:flex}.ucc-row{justify-content:space-between;font-size:11px;display:flex}.ucc-label{color:var(--text-muted)}.ucc-value{color:var(--text-primary);font-weight:700}.ucc-total{border-top:1px dashed var(--border);justify-content:space-between;align-items:center;margin-top:4px;padding-top:8px;display:flex}.ucc-total-label{color:var(--text-muted);text-transform:uppercase;font-size:10px;font-weight:800}.ucc-total-value{color:var(--gold);font-size:16px;font-weight:800}.form-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;display:grid}.form-group{margin-bottom:10px}.form-label{color:var(--text-secondary);margin-bottom:4px;font-size:11px;font-weight:600;display:block}.form-control{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;height:32px;color:var(--text-primary);font-size:12px;font-family:var(--font);box-sizing:border-box;outline:none;padding:0 10px;transition:border-color .15s,box-shadow .15s}textarea.form-control{height:auto;padding:10px;line-height:1.5}.form-control:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}.form-control option{background:var(--bg-secondary)}.btn{border-radius:var(--radius-sm);cursor:pointer;height:34px;font-size:12px;font-weight:700;font-family:var(--font);white-space:nowrap;border:none;justify-content:center;align-items:center;gap:6px;padding:0 16px;transition:all .15s;display:inline-flex}.btn-sm{height:28px;padding:0 10px;font-size:11px}.btn-gold{background:var(--gold);color:#fff}.btn-gold:hover{box-shadow:0 4px 12px var(--gold-dim);background:#9c720a;transform:translateY(-1px)}.btn-outline{border:1px solid var(--border);color:var(--text-secondary);background:#fff}.btn-outline:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}.btn-danger{background:var(--danger-dim);color:var(--danger)}.btn-danger:hover{background:var(--danger);color:#fff}.icon-btn{border:1px solid var(--border);background:var(--bg-card);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.icon-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}.btn-lg{border-radius:10px;height:48px;padding:0 28px;font-size:15px}.btn-outline-white{color:#fff;background:0 0;border:2px solid #fff6}.btn-outline-white:hover{background:#ffffff1a;border-color:#fff}.btn-blue{background:var(--info);color:#fff}.btn-blue:hover{background:#1d4ed8}.btn-green{background:var(--success);color:#fff}.btn-green:hover{background:#15803d}.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#15803d}.btn-red{background:var(--danger);color:#fff}.btn-red:hover{background:#b91c1c}.btn-purple{background:var(--purple);color:#fff}.btn-purple:hover{background:#7c3aed}.btn-icon{border:1px solid var(--border);background:var(--bg-card);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:all .2s;display:inline-flex}.btn-icon:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}.btn-icon-success:hover{border-color:var(--success);color:var(--success);background:var(--success-dim)}.btn-icon-danger:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-dim)}.modal-overlay{z-index:100;background:#1e254040;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-box{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 18px;display:flex}.modal-header h3{color:var(--text-primary);font-size:14px;font-weight:700}.modal-body{padding:18px}.modal-footer{border-top:1px solid var(--border);background:var(--bg-primary);border-radius:0 0 12px 12px;justify-content:flex-end;gap:8px;padding:12px 18px;display:flex}.btn-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px;line-height:1;transition:color .15s}.btn-close:hover{color:var(--text-primary)}.toolbar,.toolbar-premium{background:var(--navy);color:#fff;box-shadow:var(--shadow-md);border-radius:12px;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:12px;height:56px;min-height:56px;margin-top:12px;margin-bottom:20px;padding:0 20px;display:flex;overflow:hidden}.toolbar .btn,.toolbar .btn-gold,.toolbar .btn-outline,.toolbar .form-control,.toolbar .search-input{justify-content:center;align-items:center;font-size:11px;display:flex;height:34px!important}.toolbar .btn-sm{padding:0 12px;height:34px!important}.toolbar .search-input{padding:0 10px 0 32px}.toolbar .btn-outline{color:#fff;background:0 0;border:1px solid #ffffff4d}.toolbar .btn-outline:hover{color:#fff;background:#ffffff1a;border-color:#fff}.toolbar .search-input{color:var(--navy);background:#fff;border:1px solid #0000001a}.toolbar .search-icon{color:var(--text-muted)}.toolbar .form-control{color:#fff;background:#ffffff1a;border:none}.toolbar .form-control option{background:var(--navy);color:#fff}.tp-left{align-items:center;gap:14px;height:100%;display:flex}.tp-title{letter-spacing:.5px;text-transform:uppercase;color:#fff;white-space:nowrap;font-size:13px;font-weight:800}.tp-badge{box-sizing:border-box;color:#fff;letter-spacing:.5px;background:#ffffff26;border-radius:8px;justify-content:center;align-items:center;height:34px;padding:0 14px;font-size:11px;font-weight:800;display:flex}.tp-right{align-items:center;gap:10px;height:100%;display:flex}.tp-actions{background:#ffffff0d;border-radius:8px;align-items:center;gap:8px;height:34px;padding:0 8px;display:flex}.tp-actions input,.tp-actions .form-control{box-shadow:none!important;color:#fff!important;background:0 0!important;border:none!important;outline:none!important;height:28px!important}.tp-actions input::-webkit-calendar-picker-indicator{filter:invert();cursor:pointer;opacity:.7;transition:opacity .2s}.tp-actions input::-webkit-calendar-picker-indicator:hover{opacity:1}.toolbar-subtabs{box-sizing:border-box;background:#ffffff0d;border-radius:8px;align-items:center;height:34px;padding:2px;display:flex}.toolbar-subtabs .btn{justify-content:center;align-items:center;display:flex;border:none!important;border-radius:6px!important;height:30px!important;padding:0 12px!important;font-size:10px!important}.toolbar-select-actions{box-sizing:border-box;background:#ffffff0d;border-radius:8px;align-items:center;gap:8px;height:34px;padding:0 8px;display:flex}.toolbar-select-actions select{cursor:pointer;min-width:130px;background:var(--navy)!important;color:#fff!important;border:1px solid #fff3!important;border-radius:6px!important;outline:none!important;height:26px!important;padding:0 8px!important;font-size:11px!important}.toolbar-select-actions .btn{justify-content:center!important;align-items:center!important;height:26px!important;padding:0 8px!important;font-size:10px!important;display:flex!important}.tp-label{opacity:.6;text-transform:uppercase;font-size:10px;font-weight:700}.search-input{border:1px solid var(--border);border-radius:var(--radius-sm);min-width:160px;max-width:280px;height:32px;color:var(--navy);font-size:12px;font-family:var(--font);background:#fff;outline:none;flex:1;padding:0 10px 0 32px;transition:border-color .15s,box-shadow .15s}.search-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}.search-wrap{position:relative}.search-icon{color:var(--text-muted);position:absolute;top:50%;left:10px;transform:translateY(-50%)}.recharts-tooltip-wrapper{outline:none}.recharts-cartesian-grid-horizontal line,.recharts-cartesian-grid-vertical line{stroke:var(--border)}.milestone-steps{align-items:center;gap:0;width:100%;display:flex}.ms-step{flex-direction:column;flex:1;align-items:center;display:flex;position:relative}.ms-step:not(:last-child):after{content:"";background:var(--border);z-index:0;width:100%;height:2px;position:absolute;top:9px;left:50%}.ms-step.done:not(:last-child):after{background:var(--info)}.ms-dot{z-index:1;border:1px solid var(--border);background:var(--bg-secondary);width:18px;height:18px;color:var(--text-muted);border-radius:50%;justify-content:center;align-items:center;font-size:8px;font-weight:700;transition:all .2s;display:flex;position:relative}.ms-dot.done{background:var(--info);border-color:var(--info);color:#fff}.ms-dot.current{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 0 0 3px var(--gold-dim)}.ms-label{color:var(--text-muted);text-align:center;white-space:nowrap;margin-top:4px;font-size:9px;transition:color .2s}.ms-step:hover .ms-dot{border-color:var(--gold);transform:scale(1.2)}.ms-step:hover .ms-label{color:var(--text-primary)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:99px}@media (width<=1200px){.grid-6{grid-template-columns:repeat(3,1fr)}.grid-5,.grid-4{grid-template-columns:repeat(2,1fr)}}@media (width<=1024px){.grid-6,.grid-5,.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}.hide-tablet{display:none!important}}@media (width<=768px){.sidebar{position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.menu-toggle,.sidebar-close{justify-content:center;align-items:center;display:flex}.grid-6,.grid-5,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.header-sub{display:none}.header-title{font-size:13px}table{table-layout:auto}thead th,tbody td{min-height:40px;white-space:nowrap!important;height:auto!important;padding:10px 12px!important}.table-wrap{box-sizing:border-box;-webkit-overflow-scrolling:touch;width:calc(100% + 32px);margin:0 -16px;padding:0 16px;overflow-x:auto}.hide-mobile{display:none!important}.show-mobile{display:block!important}}@media (width>=769px){.show-mobile{display:none!important}}@media (width<=480px){.page-body{padding:12px}.toolbar{flex-direction:column;align-items:stretch}.toolbar>*{width:100%!important;max-width:none!important}.form-row{grid-template-columns:1fr}}.landing-grid-3{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.landing-grid-4{grid-template-columns:repeat(4,1fr);gap:24px;display:grid}@media (width<=992px){.landing-grid-3,.landing-grid-4{grid-template-columns:repeat(2,1fr)}}@media (width<=576px){.landing-grid-3,.landing-grid-4{grid-template-columns:1fr}}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.justify-between{justify-content:space-between}.toast-container{z-index:9999;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:fixed;top:20px;right:20px}.toast{pointer-events:auto;border-left:4px solid var(--gold);background:#fff;border-radius:8px;align-items:flex-start;gap:12px;min-width:280px;max-width:380px;padding:12px 16px;transition:all .3s;animation:.3s cubic-bezier(.68,-.55,.265,1.55) toast-in;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.toast-out{opacity:0;transform:translate(20px)}@keyframes toast-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toast-icon{flex-shrink:0;margin-top:2px}.toast-success{border-left-color:var(--success);background:#f0fdf4;border:1px solid #dcfce7}.toast-success .toast-title{color:#166534}.toast-error{border-left-color:var(--danger);background:#fef2f2;border:1px solid #fee2e2}.toast-error .toast-title{color:#991b1b}.toast-warning{border-left-color:var(--warning);background:#fffbeb;border:1px solid #fef3c7}.toast-warning .toast-title{color:#92400e}.toast-info{border-left-color:var(--info);background:#eff6ff;border:1px solid #dbeafe}.toast-info .toast-title{color:#1e40af}.toast-content{flex:1}.toast-title{color:var(--text-primary);font-size:13px;font-weight:700}.toast-msg{color:var(--text-secondary);margin-top:2px;font-size:11px}.toast-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:2px}.login-screen{align-items:stretch;min-height:100vh;display:flex}.login-brand{background:var(--navy);flex-direction:column;flex-shrink:0;justify-content:space-between;width:480px;padding:48px 40px;display:flex}.login-brand-logo{align-items:center;gap:12px;display:flex}.login-brand-logo .logo-box{background:var(--gold);color:#fff;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:18px;display:flex}.login-brand-logo .brand-name{color:#fff;font-size:13px;font-weight:800;line-height:1.3}.login-brand-logo .brand-sub{color:#fff6;margin-top:2px;font-size:10px}.login-brand-middle{flex-direction:column;flex:1;justify-content:center;padding:48px 0;display:flex}.login-brand-headline{color:#fff;margin-bottom:14px;font-size:26px;font-weight:800;line-height:1.3}.login-brand-headline span{color:var(--gold)}.login-brand-desc{color:#ffffff73;font-size:12px;line-height:1.8}.login-brand-stats{gap:28px;margin-top:36px;display:flex}.login-stat-num{color:var(--gold);font-size:20px;font-weight:800}.login-stat-label{color:#fff6;margin-top:2px;font-size:10px}.login-brand-footer{color:#fff3;font-size:10px}.login-form-panel{background:var(--bg-primary);flex:1;justify-content:center;align-items:center;padding:40px 24px;display:flex}.login-card{width:100%;max-width:360px;animation:.4s ease-out slide-up}@keyframes slide-up{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.login-form-title{color:var(--navy);margin-bottom:6px;font-size:20px;font-weight:800}.login-form-subtitle{color:var(--text-muted);margin-bottom:28px;font-size:12px}.login-form .form-group{margin-bottom:16px}.login-form .form-label{text-transform:uppercase;letter-spacing:.8px;color:var(--navy);margin-bottom:6px;font-size:10px;font-weight:700}.login-error{background:var(--danger-dim);color:var(--danger);border-radius:var(--radius-sm);border:1px solid #dc262633;align-items:center;gap:8px;margin-bottom:16px;padding:10px 14px;font-size:11px;display:flex}.input-with-icon{position:relative}.input-icon{color:var(--text-muted);pointer-events:none;align-items:center;font-size:13px;display:flex;position:absolute;top:50%;left:11px;transform:translateY(-50%)}.login-form .form-control{height:42px;padding-left:36px}.login-form .form-control:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}.btn-block{width:100%;height:42px;font-size:13px;font-weight:700}.login-hint{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);margin-top:18px;padding:10px 14px;font-size:11px;line-height:1.7}.login-hint strong{color:var(--navy)}@media (width<=768px){.login-screen{flex-direction:column}.login-brand{width:100%;padding:28px 20px}.login-brand-middle{padding:20px 0}.login-brand-headline{font-size:18px}.login-brand-stats{display:none}.login-form-panel{padding:32px 20px}}.user-profile-wrap{position:relative}.user-profile{cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:4px 8px;transition:background .2s;display:flex}.user-profile:hover{background:var(--bg-primary)}.user-info{text-align:right}.user-name{color:var(--text-primary);font-size:12px;font-weight:700}.user-role{color:var(--gold);font-size:10px;font-weight:600}.user-avatar{background:var(--gold);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:800;display:flex}.user-dropdown{z-index:1000;width:200px;animation:.2s ease-out fade-in-up;position:absolute;top:calc(100% + 10px);right:0;overflow:hidden;padding:0!important}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{border-bottom:1px solid var(--border);padding:14px}.dropdown-header strong{font-size:13px;display:block}.dropdown-header p{color:var(--text-muted);margin-top:2px;font-size:10px}.dropdown-item{text-align:left;width:100%;color:var(--danger);cursor:pointer;background:0 0;border:none;align-items:center;gap:10px;padding:12px 14px;font-size:12px;transition:background .2s;display:flex}.dropdown-item:hover{background:#fff1f2}.notif-badge{background:var(--danger);color:#fff;border:2px solid var(--bg-card);border-radius:50%;justify-content:center;align-items:center;width:15px;height:15px;font-size:9px;font-weight:800;display:flex;position:absolute;top:-2px;right:-2px}.notif-item{border-bottom:1px solid var(--border);cursor:pointer;gap:12px;padding:12px 14px;transition:background .2s;display:flex}.notif-item:hover{background:var(--bg-hover)}.notif-item:last-child{border-bottom:none}.notif-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:4px}.bg-danger{background:var(--danger)}.bg-warning{background:var(--gold)}.bg-info{background:var(--info)}.bg-success{background:var(--success)}.sidebar-badge{color:#fff;border-radius:10px;padding:2px 6px;font-size:10px;font-weight:800;box-shadow:0 2px 4px #0003}.sidebar-badge.badge-danger{background:var(--danger);animation:2s infinite sidebar-pulse-danger}.sidebar-badge.badge-warning{background:var(--warning)}.sidebar-badge.badge-info{background:var(--info)}.sidebar-badge.badge-success{background:var(--success)}@keyframes sidebar-pulse-danger{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.sync-header-btn:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px);border-color:var(--gold)!important;background:#fff!important}.sync-header-btn:active{transform:scale(.98)}.sync-header-btn.syncing{cursor:wait}.sync-header-btn.syncing span{opacity:.7}.sync-header-btn.syncing svg{animation:1s linear infinite spin}.sync-text{display:inline-block}@media (width<=768px){.btn-sync-floating{padding:10px;bottom:16px;right:16px}.sync-text{display:none}}@keyframes bell-ringing{0%{transform:rotate(0)}10%{transform:rotate(15deg)}20%{transform:rotate(-15deg)}30%{transform:rotate(10deg)}40%{transform:rotate(-10deg)}50%{transform:rotate(0)}to{transform:rotate(0)}}.notif-ringing svg{transform-origin:top;animation:2s infinite bell-ringing}.detail-item-box{background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:2px;padding:10px 14px;transition:all .2s;display:flex}.detail-item-box:hover{border-color:var(--gold);box-shadow:var(--shadow-md);transform:translateY(-2px)}.detail-item-box span{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:9px;font-weight:700}.detail-item-box strong{color:var(--text-primary);font-size:12px;font-weight:700}@media (width<=1024px){:root{--sidebar-w:240px}.page-body{padding:12px}.grid-6,.grid-5{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}.toolbar{gap:8px;padding:10px 14px}.tp-left{flex:1;gap:8px;min-width:0}.tp-title{font-size:11px}.search-input{flex:1;min-width:120px}}@media (width<=1200px){.toolbar .btn,.toolbar-premium .btn{gap:0;min-width:34px;padding:0 9px;font-size:0!important}.toolbar .btn svg,.toolbar-premium .btn svg{flex-shrink:0;width:16px;height:16px}.search-input{min-width:100px}.tp-title{font-size:11px}}@media (width<=768px){.sidebar{z-index:2000;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%);box-shadow:20px 0 50px #00000026}.sidebar.open{transform:translate(0)}.sidebar-overlay{z-index:1999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#1e254066;display:block;position:fixed;inset:0}.main-content{width:100%!important;margin-left:0!important}.header{padding:0 12px}.menu-toggle{display:block}.header-title{font-size:15px}.header-right{gap:6px}.sidebar-close{display:block}.toolbar{flex-direction:column;align-items:stretch;gap:10px;height:auto;padding:12px}.toolbar .btn,.toolbar-premium .btn{min-width:unset;gap:6px;padding:0 14px;font-size:12px!important}.tp-left,.tp-right{justify-content:space-between;width:100%}.tp-actions{flex-wrap:wrap;justify-content:center;width:100%}.search-wrap{flex:1;width:100%}.search-input{width:100%;max-width:none}.stat-card{gap:10px;min-height:75px;padding:12px}.stat-icon{width:36px;height:36px;font-size:16px}.stat-value{font-size:18px}.grid-3,.grid-2{grid-template-columns:1fr}.modal-box{max-width:95vw;margin:0 10px}.table-wrap{-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:8px;overflow-x:auto}table{min-width:700px}.recharts-responsive-container{min-height:200px}}@media (height<=600px) and (orientation:landscape){.modal-box{max-height:85vh}.sidebar-nav{overflow-y:auto}}.page-body{overflow-x:hidden}.tab-nav{-webkit-overflow-scrolling:touch;scrollbar-width:none}.tab-nav::-webkit-scrollbar{display:none}@media (width<=768px){.sitemap-container{-webkit-overflow-scrolling:touch;overflow-x:auto}.sitemap-grid{min-width:800px}}.payroll-header-banner{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);border-radius:12px;align-items:center;gap:20px;margin-bottom:20px;padding:18px 24px;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 4px 20px -2px #1e25400a}.payroll-header-banner:hover{transform:translateY(-1px);box-shadow:0 6px 24px -2px #1e25400f}.payroll-header-icon{background:linear-gradient(135deg, var(--gold-dim) 0%, #0d948808 100%);color:var(--gold);border:1px solid #0d948826;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;display:flex;box-shadow:inset 0 1px 2px #fff3}.payroll-overview-grid{background:var(--bg-secondary);border:1px solid var(--border);box-shadow:var(--shadow-md);border-radius:12px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-bottom:20px;padding:24px;display:grid}.payroll-left-gradient-card{background:linear-gradient(135deg, var(--navy) 0%, #2e3a5e 100%);color:#fff;border-radius:12px;flex-direction:column;justify-content:space-between;min-height:250px;padding:26px;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 30px #1e25401f}.payroll-left-gradient-card:after{content:"";pointer-events:none;background:#ffffff08;border-radius:50%;width:140px;height:140px;position:absolute;top:-30px;right:-30px}.payroll-right-breakdown-container{flex-direction:column;justify-content:center;gap:12px;display:flex}.payroll-breakdown-title{color:var(--navy);text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px;font-size:13.5px;font-weight:800}.payroll-breakdown-card{background:var(--bg-primary);border:1px solid var(--border);border-radius:10px;justify-content:space-between;align-items:center;padding:12px 18px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.payroll-breakdown-card:hover{box-shadow:var(--shadow);border-color:var(--border-light);transform:translate(4px)}.payroll-breakdown-card.success-variant{background:#16a34a08;border-color:#16a34a1a}.payroll-breakdown-card.success-variant:hover{background:#16a34a0d;border-color:#16a34a33}.payroll-breakdown-card.danger-variant{background:#dc262608;border-color:#dc26261a}.payroll-breakdown-card.danger-variant:hover{background:#dc26260d;border-color:#dc262633}.payroll-breakdown-card.info-variant{background:#2563eb08;border-color:#2563eb1a}.payroll-breakdown-card.info-variant:hover{background:#2563eb0d;border-color:#2563eb33}.netto-badge{background:var(--success-dim);color:var(--success);border:1px solid #16a34a26;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:800;display:inline-block}@media print{body,html{color:#000!important;background:#fff!important;margin:0!important;padding:0!important;font-size:12pt!important}.sidebar,.sidebar-container,aside,.header,.header-container,.toolbar,.tab-nav,.pagination,.no-print,button,.btn,.btn-gold,.btn-outline,.btn-icon,.search-wrap,input,select,textarea{display:none!important}.app-layout{margin:0!important;padding:0!important;display:block!important}.main-content,main,.content-wrap{width:100%!important;max-width:100%!important;box-shadow:none!important;background:0 0!important;margin:0!important;padding:0!important}.card{box-shadow:none!important;background:0 0!important;border:none!important;margin-bottom:20px!important;padding:0!important}table,.compact-table{border-collapse:collapse!important;width:100%!important}th,td{color:#000!important;border:1px solid #cbd5e1!important;padding:6px 10px!important;font-size:10pt!important}thead{display:table-header-group!important}tr{page-break-inside:avoid!important}}.permission-item-label:hover{background:var(--bg-hover)!important;border-color:#2563eb33!important}