:root{--primary:#0f766e;--primary-dark:#115e59;--primary-hover:#14b8a6;--primary-light:#e6f5f3;--primary-mid:#99f6e4;--secondary:#64748b;--accent:#8b5cf6;--success:#10b981;--success-light:#d1fae5;--warning:#f59e0b;--warning-light:#fef3c7;--danger:#ef4444;--danger-light:#fee2e2;--info:#0ea5e9;--info-light:#e0f2fe;--bg:#f8fafc;--bg-white:#fff;--bg-gray:#f1f5f9;--bg-gray-dark:#e2e8f0;--text-primary:#1e293b;--text-secondary:#475569;--text-muted:#94a3b8;--text-white:#fff;--border:#e2e8f0;--border-focus:#0f766e;--border-light:#f1f5f9;--sidebar-bg:#0b3b37;--sidebar-bg-2:#0f4c46;--sidebar-hover:#ffffff12;--sidebar-text:#b6cfcb;--sidebar-width:264px;--sidebar-collapsed:72px;--header-height:68px;--shadow-sm:0 1px 2px #0f172a0a, 0 1px 3px #0f172a0a;--shadow:0 4px 14px #0f172a0f;--shadow-md:0 8px 24px #0f172a14;--shadow-lg:0 16px 48px #0f172a24;--radius-sm:6px;--radius:10px;--radius-md:14px;--radius-lg:16px;--font:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--transition:all .2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:14px}body{font-family:var(--font);background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}a{color:var(--primary);text-decoration:none}a:hover{color:var(--primary-dark)}button{cursor:pointer;font-family:var(--font)}input,select,textarea{font-family:var(--font)}.app-container{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);z-index:200;height:100vh;color:var(--sidebar-text);flex-direction:column;transition:width .25s,transform .25s;display:flex;position:fixed;top:0;left:0;overflow:hidden}.sidebar.collapsed{width:var(--sidebar-collapsed)}.sidebar-logo{border-bottom:1px solid #ffffff14;flex-shrink:0;justify-content:space-between;align-items:center;padding:22px 20px 18px;display:flex}.sidebar.collapsed .sidebar-logo{justify-content:center;padding:18px 0 16px}.brand-logo-content{flex-direction:column;display:flex;overflow:hidden}.brand-logo-title{align-items:baseline;line-height:1;display:flex}.brand-logo-text{letter-spacing:-.4px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:26px;font-weight:800;color:#fff!important}.brand-logo-dot{margin-left:2px;font-size:30px;font-weight:900;line-height:0;color:#ef4444!important}.brand-logo-sub{opacity:.85;white-space:nowrap;letter-spacing:.2px;margin-top:5px;font-size:11px;font-weight:500;color:#fff!important}.brand-collapsed-logo{cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;justify-content:center;align-items:baseline;padding:6px 12px;transition:all .2s;display:flex}.brand-collapsed-logo:hover{background:#ffffff29}.brand-collapsed-t{font-size:22px;font-weight:900;color:#fff!important}.sidebar-nav{flex-direction:column;flex:1;gap:3px;padding:6px 12px 12px;display:flex;overflow:hidden auto}.sidebar-nav::-webkit-scrollbar{width:4px}.sidebar-nav::-webkit-scrollbar-track{background:0 0}.sidebar-nav::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.nav-item{position:relative}.nav-link,.nav-group-header{color:var(--sidebar-text);cursor:pointer;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:10px;align-items:center;gap:12px;width:100%;padding:10px 14px;font-size:13.5px;font-weight:500;text-decoration:none;transition:all .15s;display:flex}.sidebar.collapsed .nav-link,.sidebar.collapsed .nav-group-header{justify-content:center;padding:11px 0}.nav-link:hover,.nav-group-header:hover{background:var(--sidebar-hover);color:#fff}.nav-link.active{color:#fff;background:linear-gradient(90deg,#14b8a6 0%,#0f9488 100%);font-weight:600;box-shadow:0 6px 16px #14b8a647}.nav-link .nav-icon,.nav-group-header .nav-icon{flex-shrink:0;width:19px;height:19px}.nav-link .nav-label,.nav-group-header .nav-label{text-overflow:ellipsis;flex:1;overflow:hidden}.nav-group{flex-direction:column;display:flex}.nav-group-header.open{color:#fff;background:#ffffff0d}.nav-group-header.has-active{color:#fff;background:#14b8a61f}.nav-group-header.has-active .nav-icon{color:#5eead4}.nav-arrow{color:#ffffff73;margin-left:auto;transition:transform .2s}.nav-group-header.open .nav-arrow{color:#5eead4;transform:rotate(90deg)}.nav-children{border-left:2px solid #14b8a640;flex-direction:column;gap:2px;margin-left:23px;padding:4px 0 6px 12px;display:flex}.nav-child-header{text-transform:uppercase;color:#ffffff73;letter-spacing:.5px;padding:8px 12px 2px;font-size:10px;font-weight:700}.nav-child-link{color:var(--sidebar-text);white-space:nowrap;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:500;text-decoration:none;transition:all .15s;display:block}.nav-child-link:hover{color:#fff;background:var(--sidebar-hover)}.nav-child-link.active{font-weight:600;box-shadow:0 2px 8px #0000001a;color:#fff!important;background:linear-gradient(90deg,#14b8a659 0%,#0f94882e 100%)!important}.sidebar-promo{background:linear-gradient(135deg,#14b8a640,#ffffff0a);border:1px solid #ffffff1a;border-radius:14px;flex-shrink:0;align-items:center;gap:12px;margin:10px 14px 16px;padding:18px 16px;display:flex;position:relative;overflow:hidden}.sidebar-promo:after{content:"";background:#14b8a640;border-radius:50%;width:120px;height:120px;position:absolute;bottom:-40px;right:-30px}.sidebar-promo .promo-icon{color:#5eead4;flex-shrink:0}.sidebar-promo .promo-text{color:#fff;z-index:1;font-size:13px;font-weight:600;line-height:1.4;position:relative}.main-wrapper{margin-left:var(--sidebar-width);flex-direction:column;flex:1;min-height:100vh;transition:margin-left .25s;display:flex}.main-wrapper.collapsed{margin-left:var(--sidebar-collapsed)}.header{height:var(--header-height);background:var(--bg-white);border-bottom:1px solid var(--border);z-index:100;align-items:center;gap:12px;padding:0 20px;display:flex;position:sticky;top:0}.header-toggle{border-radius:var(--radius);color:var(--text-secondary);transition:var(--transition);background:0 0;border:none;align-items:center;padding:6px;display:flex}.header-toggle:hover{background:var(--bg-gray);color:var(--primary)}.header-spacer{flex:1}.header-actions{align-items:center;gap:4px;display:flex}.header-divider{background:var(--border);width:1px;height:28px;margin:0 4px}.user-menu{cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:20px;align-items:center;gap:8px;padding:4px 8px;display:flex}.user-menu:hover{background:var(--bg-gray)}.user-avatar{background:var(--primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:12px;font-weight:600;display:flex}.user-info{text-align:left}.user-name{color:var(--text-primary);font-size:13px;font-weight:600}.user-role{color:var(--text-muted);font-size:11px}.page-content{flex:1;padding:0}.page-header{background:var(--bg-white);border-bottom:1px solid var(--border);padding:16px 24px}.breadcrumb{color:var(--text-muted);align-items:center;gap:6px;margin-bottom:6px;font-size:12px;display:flex}.breadcrumb a,.breadcrumb span{color:var(--text-muted)}.breadcrumb .current{color:var(--text-secondary)}.breadcrumb .sep{color:var(--border)}.page-title-row{justify-content:space-between;align-items:center;gap:16px;display:flex}.page-title{color:var(--text-primary);font-size:18px;font-weight:700}.page-subtitle{color:var(--text-muted);margin-top:2px;font-size:12.5px}.page-inner{padding:20px 24px}.card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.card-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.card-title{color:var(--text-primary);font-size:14px;font-weight:600}.card-body{padding:18px}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.kpi-card{cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;gap:8px;padding:13px 15px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.kpi-card:after{content:"";background:var(--kpi-tint,transparent);opacity:.45;pointer-events:none;border-radius:50%;width:100px;height:100px;position:absolute;bottom:-35px;right:-30px}.kpi-card.blue{--kpi-tint:var(--primary-light)}.kpi-card.green{--kpi-tint:var(--success-light)}.kpi-card.orange{--kpi-tint:var(--warning-light)}.kpi-card.red{--kpi-tint:var(--danger-light)}.kpi-card.purple{--kpi-tint:#ede9fe}.kpi-card.sky{--kpi-tint:#ccfbf1}.kpi-card:hover{border-color:#14b8a673;transform:translateY(-2px);box-shadow:0 8px 20px #0f766e1f}.kpi-card:active{transform:translateY(0);box-shadow:0 2px 8px #00000014}.kpi-icon{border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.kpi-icon.blue{background:var(--primary-light);color:var(--primary)}.kpi-icon.green{background:var(--success-light);color:#059669}.kpi-icon.orange{color:#ea580c;background:#ffedd5}.kpi-icon.red{background:var(--danger-light);color:var(--danger)}.kpi-icon.purple{color:var(--accent);background:#ede9fe}.kpi-icon.sky{color:#0d9488;background:#ccfbf1}.kpi-info{z-index:1;position:relative}.kpi-label{color:var(--text-secondary);margin-bottom:2px;font-size:11.5px;font-weight:600}.kpi-value{color:var(--text-primary);font-size:22px;font-weight:800;line-height:1.1}.kpi-trend{color:var(--text-muted);align-items:center;gap:4px;margin-top:4px;font-size:11px;display:flex}.kpi-trend.up{color:var(--success)}.kpi-trend.down{color:var(--danger)}.kpi-trend b{font-weight:700}.kpi-trend span{color:var(--text-muted)}.toolbar{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;display:flex}.toolbar-search{flex:1;min-width:240px;max-width:380px;position:relative}.toolbar-search svg.search-icon,.toolbar-search .search-icon{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:12px;transform:translateY(-50%);width:16px!important;max-width:16px!important;height:16px!important;max-height:16px!important}.toolbar-search input{border:1px solid var(--border);width:100%;height:38px;color:var(--text-primary);transition:var(--transition);background:#fff;border-radius:10px;outline:none;padding:0 14px 0 38px;font-size:13.5px}.toolbar-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0f766e1f}.toolbar-spacer{flex:1}.tabs{border-bottom:1px solid var(--border);align-items:center;gap:6px;margin-bottom:18px;padding-bottom:0;display:flex;overflow-x:auto}.tab-btn{color:var(--text-secondary);cursor:pointer;white-space:nowrap;font-size:13px;font-weight:600;font-family:var(--font);background:0 0;border:none;border-bottom:2px solid #0000;border-radius:8px 8px 0 0;align-items:center;gap:6px;padding:9px 16px;transition:all .15s;display:inline-flex}.tab-btn:hover{color:var(--primary);background:#14b8a60d}.tab-btn.active{color:var(--primary);border-bottom:2px solid var(--primary);background:#14b8a614}.table-container{width:100%;overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%;font-size:13px}thead th{text-transform:none;letter-spacing:0;color:var(--text-secondary);border-bottom:1px solid var(--border);white-space:nowrap;background:#f8fafc;padding:12px 14px;font-size:12px;font-weight:700}tbody td{border-bottom:1px solid var(--border-light);color:var(--text-primary);vertical-align:middle;padding:12px 14px}tbody tr:hover{background:#f6fbfa}.table-actions{align-items:center;gap:6px;display:flex}.action-btn{border:1px solid var(--border);cursor:pointer;width:32px;height:32px;color:var(--text-secondary);background:#fff;border-radius:8px;justify-content:center;align-items:center;transition:all .15s;display:inline-flex}.action-btn:hover{color:var(--text-primary);background:#f1f5f9}.action-btn.view{color:var(--primary)}.action-btn.view:hover{background:var(--primary-light);color:var(--primary-dark);border-color:var(--primary-mid)}.action-btn.edit{color:#0d9488}.action-btn.edit:hover{color:#0f766e;background:#ccfbf1;border-color:#99f6e4}.action-btn.delete{color:var(--danger)}.action-btn.delete:hover{background:var(--danger-light);color:#b91c1c;border-color:#fecaca}.pagination{border-top:1px solid var(--border);border-radius:0 0 var(--radius-md) var(--radius-md);background:#fff;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;display:flex}.per-page-select{border:1px solid var(--border);height:32px;color:var(--text-secondary);background:#fff;border-radius:8px;outline:none;padding:0 8px;font-size:12.5px}.pagination-info{color:var(--text-muted);font-size:12.5px}.pagination-controls{align-items:center;gap:4px;display:flex}.page-btn{border:1px solid var(--border);min-width:30px;height:30px;color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:#fff;border-radius:8px;justify-content:center;align-items:center;padding:0 6px;font-size:12px;font-weight:600;display:inline-flex}.page-btn:hover:not(:disabled){color:var(--text-primary);background:#f1f5f9}.page-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.page-btn:disabled{opacity:.4;cursor:not-allowed}.btn{height:38px;font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:var(--transition);white-space:nowrap;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:0 16px;text-decoration:none;display:inline-flex}.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 12px #0f766e33}.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}.btn-secondary{background:var(--primary-light);color:var(--primary);border-color:#0000}.btn-secondary:hover{color:var(--primary-dark);background:#d5efeb}.btn-outline{border-color:var(--border);color:var(--text-primary);background:#fff}.btn-outline:hover{background:var(--bg-gray);border-color:var(--text-muted)}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-danger:hover{color:#fff;background:#dc2626}.btn-sm{border-radius:8px;height:32px;padding:0 12px;font-size:12px}.btn:disabled{opacity:.6;cursor:not-allowed}.badge{border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:11.5px;font-weight:600;display:inline-flex}.badge:before{content:"";background:currentColor;border-radius:50%;flex-shrink:0;width:6px;height:6px}.badge-active,.badge-approved,.badge-confirmed,.badge-joined,.badge-present{background:var(--success-light);color:#047857}.badge-pending,.badge-probation,.badge-screening{color:#b45309;background:#fef3c7}.badge-inactive,.badge-rejected,.badge-terminated,.badge-absent{background:var(--danger-light);color:#b91c1c}.badge-open,.badge-interview,.badge-selected{background:var(--primary-light);color:var(--primary)}.badge-leave{color:#0369a1;background:#e0f2fe}.badge-draft,.badge-closed{background:var(--bg-gray);color:var(--text-secondary)}.form-grid{grid-template-columns:1fr 1fr;gap:0 18px;display:grid}.form-group{margin-bottom:16px}.form-label{color:var(--text-secondary);margin-bottom:6px;font-size:12.5px;font-weight:600;display:block}.form-label .required{color:var(--danger);margin-left:3px}.form-control{border:1px solid var(--border);width:100%;height:38px;color:var(--text-primary);transition:var(--transition);font-size:13.5px;font-family:var(--font);background:#fff;border-radius:10px;outline:none;padding:0 12px}textarea.form-control{height:auto;padding:10px 12px}.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0f766e1f}.form-control.error{border-color:var(--danger)}.form-error{color:var(--danger);margin-top:4px;font-size:11.5px}.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1000;background:#0b3b3766;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{box-shadow:var(--shadow-lg);background:#fff;border-radius:18px;flex-direction:column;width:100%;max-width:560px;max-height:90vh;display:flex;overflow:hidden}.modal.modal-sm{max-width:420px}.modal.modal-lg{max-width:720px}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:18px 22px;display:flex}.modal-title{color:var(--text-primary);font-size:16px;font-weight:700}.modal-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px;font-size:18px}.modal-close:hover{color:var(--text-primary);background:var(--bg-gray)}.modal-body{flex:1;padding:22px;overflow-y:auto}.modal-footer{border-top:1px solid var(--border);background:#fbfcfd;justify-content:flex-end;gap:10px;padding:14px 22px;display:flex}.empty-state{text-align:center;padding:48px 24px}.empty-state h3{color:var(--text-primary);margin-bottom:6px;font-size:16px;font-weight:700}.empty-state p{color:var(--text-muted);font-size:13.5px}.loading-state{color:var(--text-muted);flex-direction:column;align-items:center;gap:12px;padding:40px;display:flex}.spinner{border:3px solid #0f766e26;border-top-color:var(--primary);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.info-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.info-item label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:11.5px;font-weight:600}.info-item p{color:var(--text-primary);margin-top:4px;font-size:14px;font-weight:600}.dash-greet{justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px 0;display:flex}.dash-greet h1{color:var(--text-primary);letter-spacing:-.3px;font-size:24px;font-weight:800}.dash-greet p{color:var(--text-secondary);margin-top:4px;font-size:13.5px}.dash-grid-2{grid-template-columns:1.55fr 1fr;gap:18px;margin-top:18px;display:grid}.emp-link{cursor:pointer;text-align:left;font-family:var(--font);color:inherit;background:0 0;border:none;align-items:center;gap:10px;padding:0;display:inline-flex}.emp-link-name{color:var(--primary);font-size:13.5px;font-weight:600;display:block}.emp-link:hover .emp-link-name{text-decoration:underline}.emp-link-sub{color:var(--text-muted);margin-top:1px;font-size:11.5px;display:block}.emp-avatar{color:#fff;background:linear-gradient(135deg,#14b8a6,#0f766e);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:12.5px;font-weight:700;display:inline-flex}.pill{white-space:nowrap;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600}.pill-today{color:#c2410c;background:#ffedd5}.pill-soon{background:var(--primary-light);color:var(--primary)}.link-more{color:var(--primary);cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;font-size:12.5px;font-weight:600;display:inline-flex}.link-more:hover{color:var(--primary-dark)}.text-muted{color:var(--text-muted)}.text-sm{font-size:12.5px}.text-xs{font-size:11.5px}.kpi-grid{margin-bottom:18px;display:grid}.kpi-card{box-shadow:var(--shadow-sm);display:flex}.dash-grid-3{grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:18px;display:grid}.charts-grid{grid-template-columns:1fr 1fr;gap:18px;display:grid}.chart-card{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background:#fff;border:1px solid #eef2f6;padding:16px 18px}.chart-card-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.chart-card-title{color:var(--text-primary);font-size:15px;font-weight:700}@media (width<=1280px){.dash-grid-3{grid-template-columns:1fr 1fr}}@media (width<=1024px){.dash-grid-3,.charts-grid{grid-template-columns:1fr}}.nav-group-header.open{background:0 0}.nav-group-header.has-active{background:0 0;font-weight:600}.nav-child-link{outline:none;border:none!important}.nav-child-link.active{font-weight:600;color:#fff!important;box-shadow:none!important;background:#14b8a638!important;border:none!important}.sidebar a,.sidebar button,.sidebar .nav-group-header{-webkit-tap-highlight-color:transparent;outline:none}.sidebar a:focus:not(:focus-visible),.sidebar button:focus:not(:focus-visible){box-shadow:none;outline:none}.sidebar a:focus-visible,.sidebar button:focus-visible,.sidebar .nav-group-header:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #5eead499}.sidebar-logout{flex-shrink:0;padding:0 12px 16px}.nav-link.logout-btn{font-family:var(--font);color:#fca5a5}.nav-link.logout-btn:hover{color:#fff;background:#ef444426}.user-chip{align-items:center;gap:10px;padding:4px 6px;display:flex}.user-chip .user-avatar{color:#fff;background:linear-gradient(135deg,#14b8a6,#0f766e);border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:13px;font-weight:700;display:flex}.user-chip .user-name{color:var(--text-primary);font-size:13.5px;font-weight:700}.user-chip .user-role{color:var(--text-muted);font-size:11.5px}.dropdown-menu{border:1px solid var(--border);min-width:200px;box-shadow:var(--shadow-md);z-index:300;background:#fff;border-radius:12px;padding:4px;position:absolute;top:calc(100% + 6px);right:0}.btn-success{background:var(--success);border-color:var(--success);color:#fff}.btn-success:hover{color:#fff;background:#059669}.btn-ghost{color:var(--text-secondary);background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--bg-gray)}.btn.btn-icon{border-radius:50%;flex-shrink:0;justify-content:center;width:38px;padding:0}.badge-warning,.badge-late{color:#b45309;background:#fef3c7}.badge-holiday,.badge-week-off{background:var(--bg-gray);color:var(--text-secondary)}.form-hint{color:var(--warning);margin-top:4px;font-size:11.5px}.form-section-title{color:var(--text-primary);border-bottom:1px solid var(--border-light);margin:6px 0 12px;padding-bottom:8px;font-size:13px;font-weight:700}.form-control:disabled{background:var(--bg-gray);color:var(--text-muted);cursor:not-allowed}@media (width<=700px){.form-grid{grid-template-columns:1fr}}.alert-info{background:var(--primary-light);color:var(--primary-dark);border:1px solid #d5efeb;border-radius:12px;align-items:flex-start;gap:10px;margin-bottom:16px;padding:12px 14px;font-size:13px;line-height:1.5;display:flex}.alert-info svg{flex-shrink:0;margin-top:2px}.alert-info a{font-weight:600;text-decoration:underline}.alert-warn{color:#92400e;background:#fffbeb;border-radius:10px;align-items:center;gap:10px;margin-bottom:10px;padding:10px 12px;font-size:13.5px;display:flex}.date-chip{border:1px solid var(--border);color:var(--text-secondary);white-space:nowrap;background:#fff;border-radius:10px;align-items:center;gap:8px;padding:9px 14px;font-size:13px;display:inline-flex}.date-chip svg{color:var(--primary)}.donut-wrap{grid-template-columns:200px 1fr;align-items:center;gap:20px;padding:8px 20px 20px;display:grid}.donut-center{height:200px;position:relative}.donut-label{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.donut-label strong{color:var(--text-primary);font-size:26px;font-weight:800;line-height:1}.donut-label span{color:var(--text-muted);margin-top:4px;font-size:12px}.legend-row{color:var(--text-primary);align-items:center;gap:10px;padding:6px 0;font-size:13px;display:flex}.legend-row i{border-radius:50%;flex-shrink:0;width:9px;height:9px}.legend-row b{color:var(--text-secondary);margin-left:auto;font-weight:600}.list-row{border-bottom:1px solid var(--border-light);align-items:center;gap:12px;padding:11px 0;display:flex}.list-row:last-child{border-bottom:none}.list-avatar{width:38px;height:38px;color:var(--primary);background:var(--primary-light);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex}.list-main{flex:1;min-width:0}.list-title{color:var(--text-primary);font-size:13.5px;font-weight:600}.list-sub{color:var(--text-muted);margin-top:2px;font-size:12px}.activity-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.quick-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.quick-btn{border:1px solid var(--border);color:var(--text-primary);cursor:pointer;text-align:left;transition:var(--transition);font-size:13px;font-weight:600;font-family:var(--font);background:#fff;border-radius:12px;align-items:center;gap:12px;padding:14px;display:flex}.quick-btn:hover{border-color:var(--primary-mid);box-shadow:var(--shadow-sm);background:#f6fbfa;transform:translateY(-1px)}.q-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.dash-banner{border-radius:var(--radius-md);background:linear-gradient(110deg,#e6f5f3 0%,#f0faf8 55%,#d8f0ec 100%);border:1px solid #d5efeb;align-items:center;gap:24px;margin-top:18px;padding:24px 28px;display:flex;position:relative;overflow:hidden}.banner-mark{color:#fff;background:linear-gradient(135deg,#14b8a6,#0f766e);border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;display:flex}.dash-banner h3{color:#0b3b37;font-size:22px;font-weight:800}.dash-banner p{color:var(--text-secondary);margin-top:2px;font-size:13.5px}.banner-tags{color:var(--text-secondary);gap:10px;margin-left:auto;font-size:13px;display:flex}.banner-tags span+span:before{content:"•";color:var(--primary);margin-right:10px}.master-stats{flex-wrap:wrap;gap:8px;display:flex}.master-stats span{color:var(--text-secondary);border:1px solid var(--border);white-space:nowrap;background:#fff;border-radius:999px;padding:5px 12px;font-size:12px}.master-stats b{color:var(--text-primary);margin-right:2px}.record-meta{border-top:1px dashed var(--border);color:var(--text-muted);flex-direction:column;gap:2px;margin-top:20px;padding-top:12px;font-size:11.5px;display:flex}.record-meta:empty{display:none}.usage-list{color:var(--text-primary);margin:0 0 12px 20px;font-size:13px;line-height:1.8}.section-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:18px 0 10px;font-size:11px;font-weight:700}.approval-tabs{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:18px;display:grid}.approval-tab{border:1px solid var(--border);cursor:pointer;text-align:left;font-family:var(--font);transition:var(--transition);background:#fff;border-radius:14px;align-items:center;gap:12px;padding:14px 16px;display:flex}.approval-tab .q-icon{background:var(--primary-light);width:40px;height:40px;color:var(--primary);border-radius:12px}.approval-tab b{color:var(--text-primary);font-size:14px;display:block}.approval-tab small{color:var(--text-muted);font-size:12px}.approval-tab:hover{border-color:var(--primary-mid)}.approval-tab.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:#fbfefd}.approval-count{background:var(--warning);color:#fff;border-radius:999px;justify-content:center;align-items:center;min-width:26px;height:26px;margin-left:auto;padding:0 8px;font-size:12px;font-weight:800;display:inline-flex}.emp-modal-head{align-items:flex-start;gap:16px;padding:22px 22px 14px;display:flex}.emp-modal-head h3{color:var(--text-primary);font-size:19px;font-weight:800}.emp-modal-head p{color:var(--text-secondary);margin-top:2px;font-size:13px}.emp-avatar.lg{width:60px;height:60px;font-size:20px}.emp-chips{flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;display:flex}.emp-chips>span:not(.badge){background:var(--primary-light);color:var(--primary);border-radius:999px;align-items:center;gap:5px;padding:3px 10px;font-size:12px;font-weight:600;display:inline-flex}.mini-stats{grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px;display:grid}.mini-stat{text-align:center;background:var(--bg-gray);border-radius:12px;padding:12px}.mini-stat b{font-size:22px;font-weight:800;display:block}.mini-stat span{color:var(--text-secondary);font-size:11.5px}.mini-stat.success b{color:var(--success)}.mini-stat.warning b{color:var(--warning)}.mini-stat.danger b{color:var(--danger)}.mini-stat.info b{color:var(--info)}.balance-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.balance-card{border:1px solid var(--border);background:#fff;border-radius:12px;flex-direction:column;gap:2px;padding:12px 14px;display:flex}.balance-card span{color:var(--text-secondary);font-size:12px;font-weight:600}.balance-card b{color:var(--primary);font-size:24px;font-weight:800}.balance-card small{color:var(--text-muted);font-size:11px}@media (width<=600px){.mini-stats{grid-template-columns:repeat(3,1fr)}}.att-toolbar{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;padding:8px 14px;display:flex}.date-stepper{align-items:center;gap:6px;display:flex}.date-stepper .date-chip{padding:4px 10px}.date-stepper input[type=date]{font-family:var(--font);color:var(--text-primary);background:0 0;border:none;outline:none;font-size:13px}.shift-tabs{gap:10px;margin-bottom:12px;padding-bottom:4px;display:flex;overflow-x:auto}.shift-tab{border:1px solid var(--border);cursor:pointer;min-width:170px;font-family:var(--font);text-align:left;transition:var(--transition);background:#fff;border-radius:12px;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 14px;display:flex}.shift-tab b{color:var(--text-primary);align-items:center;gap:5px;font-size:13px;display:inline-flex}.shift-tab span{color:var(--text-muted);font-size:11.5px}.shift-tab:hover{border-color:var(--primary-mid)}.shift-tab.active{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 1px var(--primary)}.shift-tab.active b{color:var(--primary)}.att-summary{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.att-sum{border:1px solid var(--border);background:#fff;border-radius:10px;align-items:baseline;gap:6px;padding:6px 12px;display:flex}.att-sum b{font-size:16px}.att-sum span{color:var(--text-secondary);font-size:12px}.att-sum.present b{color:var(--success)}.att-sum.late b,.att-sum.half-day b{color:var(--warning)}.att-sum.absent b{color:var(--danger)}.att-sum.leave b{color:var(--info)}.att-sum.awaiting-punch b,.att-sum.not-marked b{color:var(--text-muted)}.att-select{min-height:36px;font-weight:600}.att-select.st-present{color:#047857;background-color:#ecfdf5}.att-select.st-late,.att-select.st-half-day{color:#b45309;background-color:#fffbeb}.att-select.st-absent{color:#b91c1c;background-color:#fef2f2}.att-select.st-week-off,.att-select.st-holiday{color:var(--text-secondary);background-color:var(--bg-gray)}tr.row-dirty td{background:#fffdf5}td .form-control{min-height:36px}.punch-src{color:var(--text-muted);white-space:nowrap;align-items:center;gap:3px;margin-top:3px;font-size:11px;display:flex}.punch-src.manual{color:#b45309;font-weight:600}.form-control.time-punched,.form-control.time-punched:disabled{color:#047857;opacity:1;cursor:not-allowed;-webkit-text-fill-color:#047857;background:#ecfdf5;border-color:#a7f3d0;font-weight:700}.form-control.time-manual{color:#92400e;background:#fffbeb;border-color:#fcd34d;font-weight:600}.ot-chip{color:#6d28d9;white-space:nowrap;background:#ede9fe;border-radius:999px;align-items:center;padding:3px 10px;font-size:12px;font-weight:700;display:inline-flex}.register th,.register td{text-align:center;padding:8px 6px;font-size:12px}.register th small{color:var(--text-muted);font-weight:500}.register th.wkend{background:#f1f5f9}.register .sticky-col{text-align:left;z-index:1;background:#fff;min-width:180px;position:sticky;left:0}.register thead .sticky-col{z-index:2;background:#f8fafc}.reg-cell{font-weight:700}.reg-cell.c-p{color:#047857}.reg-cell.c-l,.reg-cell.c-hd{color:#b45309}.reg-cell.c-a{color:#b91c1c;background:#fef2f2}.reg-cell.c-lv{color:#0369a1;background:#f0f9ff}.reg-cell.c-wo,.reg-cell.c-h{color:var(--text-muted);background:#f8fafc}.reg-cell.none{color:#cbd5e1}.roster-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:18px;display:grid}.roster-card{border:1px solid var(--border);cursor:pointer;transition:var(--transition);background:#fff;border-radius:14px;padding:16px}.roster-card:hover{border-color:var(--primary-mid);box-shadow:var(--shadow-sm)}.roster-card.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:#fbfefd}.roster-card h4{align-items:center;gap:6px;font-size:15px;font-weight:700;display:flex}.roster-card .time{color:var(--primary);margin-top:4px;font-size:13px;font-weight:600}.roster-card .meta{color:var(--text-muted);margin-top:6px;font-size:12px;line-height:1.6}.roster-card .count{color:var(--text-primary);font-size:26px;font-weight:800}.check-list{border:1px solid var(--border);border-radius:12px;max-height:420px;overflow-y:auto}.check-row{border-bottom:1px solid var(--border-light);cursor:pointer;align-items:center;gap:12px;padding:10px 14px;display:flex}.check-row:last-child{border-bottom:none}.check-row:hover{background:#f6fbfa}.check-row input{width:17px;height:17px}.punch-card{flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:16px;padding:18px 20px;display:flex}.stepper{align-items:center;gap:8px;display:flex;overflow-x:auto}.step{flex:1;align-items:center;gap:8px;display:flex}.step-circle{border:2px solid var(--border);width:28px;height:28px;color:var(--text-muted);background:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.step.active .step-circle{border-color:var(--primary);background:var(--primary);color:#fff}.step.done .step-circle{border-color:var(--success);background:var(--success);color:#fff}.step-label{color:var(--text-muted);white-space:nowrap;font-size:12.5px;font-weight:600}.step.active .step-label{color:var(--primary)}.step.done .step-label{color:var(--success)}.step-connector{background:var(--border);flex:1;min-width:16px;height:2px}.step.done .step-connector{background:var(--success)}.profile-header{border-radius:var(--radius-lg) var(--radius-lg) 0 0;color:#fff;background:linear-gradient(135deg,#0f766e 0%,#0b3b37 100%);align-items:flex-end;gap:20px;padding:28px 24px;display:flex}.profile-avatar-lg{background:#fff3;border:3px solid #ffffff80;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:28px;font-weight:800;display:flex}.profile-basic h2{font-size:18px;font-weight:700}.profile-basic p{opacity:.85;margin-top:2px;font-size:13px}.profile-meta{opacity:.9;flex-wrap:wrap;gap:16px;margin-top:8px;font-size:12px;display:flex}.date-filter{border:1px solid var(--border);min-height:38px;color:var(--text-secondary);background:#fff;border-radius:10px;align-items:center;gap:6px;padding:0 6px 0 12px;display:inline-flex}.date-filter.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}.date-filter select,.date-filter input{font-family:var(--font);color:var(--text-primary);cursor:pointer;background:0 0;border:none;outline:none;padding:6px 2px;font-size:13px}.date-filter input[type=date]{width:128px}.date-filter-sep{color:var(--text-muted);font-size:12px}.date-filter-clear{width:24px;height:24px;color:inherit;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.date-filter-clear:hover{background:#0f766e1f}.modal.modal-xl{max-width:980px}.form-grid.form-grid-3{grid-template-columns:repeat(3,1fr)}@media (width<=900px){.form-grid.form-grid-3{grid-template-columns:1fr 1fr}}@media (width<=700px){.form-grid.form-grid-3{grid-template-columns:1fr}}.chip-list{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.chip{background:var(--primary-light);color:var(--primary);white-space:nowrap;border-radius:999px;align-items:center;gap:4px;padding:3px 6px 3px 10px;font-size:12px;font-weight:600;display:inline-flex}.chip:not(:has(button)){padding-right:10px}.chip button{color:inherit;cursor:pointer;background:0 0;border:none;border-radius:50%;padding:2px;display:inline-flex}.chip button:hover{background:#0f766e26}.chip.chip-muted{background:var(--bg-gray);color:var(--text-secondary)}.timeline{border-left:2px solid var(--border);margin-left:6px;padding-left:18px;position:relative}.timeline-item{color:var(--text-primary);padding:0 0 14px 6px;font-size:13px;position:relative}.timeline-item:last-child{padding-bottom:0}.timeline-dot{background:var(--primary);border-radius:50%;width:10px;height:10px;position:absolute;top:4px;left:-25px;box-shadow:0 0 0 3px #fff}.feedback-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;display:grid}.rating-input{align-items:center;gap:2px;height:38px;display:flex}.rating-input button{color:var(--bg-gray-dark);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:22px;line-height:1;transition:color .15s}.rating-input button.on{color:var(--warning)}.rating-input button:hover{color:#fbbf24}.rating-input span{margin-left:8px}.rating-input.error button:not(.on){color:#fca5a5}.offer-letter{color:var(--text-primary);padding:8px 6px;font-family:Georgia,Times New Roman,serif;font-size:14.5px;line-height:1.75}.offer-letter p{margin-bottom:12px}.region-switch{grid-template-columns:1fr 1fr;gap:10px;margin:2vh 0 1vh;display:grid}.region-opt{border:1px solid var(--border);cursor:pointer;font-family:var(--font);text-align:left;transition:var(--transition);background:#fff;border-radius:12px;align-items:center;gap:10px;padding:10px 12px;display:flex}.region-opt b{color:var(--text-primary);font-size:13.5px;display:block}.region-opt small{color:var(--text-muted);font-size:11px}.region-opt:hover{border-color:var(--primary-mid)}.region-opt.active{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 1px var(--primary)}.region-flag{flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex}.lang-switch{color:var(--text-secondary);align-items:center;gap:6px;margin-bottom:4px;font-size:12px;display:flex}.lang-switch span{margin-right:auto}.lang-switch button{border:1px solid var(--border);cursor:pointer;font-size:12px;font-family:var(--font);background:#fff;border-radius:999px;padding:4px 12px}.lang-switch button.active{background:var(--primary);color:#fff;border-color:var(--primary)}.region-chip{font-family:var(--font);background:var(--primary-light);color:var(--primary);white-space:nowrap;border:1px solid #d5efeb;border-radius:999px;align-items:center;gap:7px;padding:5px 12px;font-size:12.5px;font-weight:600;display:inline-flex}.region-chip .region-name{font-family:var(--font);color:var(--primary);font-weight:600}.region-chip button{color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;padding:0 2px;text-decoration:underline}.dept-picker{border:1px solid var(--border);background:var(--primary-light);height:40px;color:var(--primary);border-radius:10px;align-items:center;gap:8px;margin-left:12px;padding:0 6px 0 12px;display:inline-flex}.dept-picker select{font-family:var(--font);color:var(--primary-dark);cursor:pointer;background:0 0;border:none;outline:none;max-width:220px;padding-right:4px;font-size:14px;font-weight:600}