:root{--primary-blue:#1976D2;--primary-blue-light:#42A5F5;--primary-blue-dark:#1565C0;--secondary-teal:#009688;--secondary-teal-light:#4DB6AC;--secondary-teal-dark:#00695C;--bg-primary:#F8F9FA;--bg-secondary:#FFFFFF;--bg-tertiary:#F5F5F5;--text-primary:#212121;--text-secondary:#757575;--text-disabled:#BDBDBD;--text-white:#FFFFFF;--accent-orange:#FF9800;--accent-orange-light:#FFB74D;--accent-orange-dark:#F57C00;--status-success:#4CAF50;--status-warning:#FF9800;--status-error:#F44336;--status-info:#2196F3;--border-light:#E0E0E0;--border-medium:#BDBDBD;--border-dark:#757575;--shadow-light:rgba(0,0,0,0.1);--shadow-medium:rgba(0,0,0,0.15);--shadow-dark:rgba(0,0,0,0.2)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{display:flex;height:100vh;overflow:hidden}.sidebar{width:280px;background:var(--bg-secondary);border-right:1px solid var(--border-light);position:fixed;top:0;left:0;overflow-y:auto;overflow-x:visible;padding:0;z-index:1000;box-shadow:0 4px 6px -1px var(--shadow-light),0 2px 4px -1px var(--shadow-light)}.main-content{margin-left:280px;flex:1;display:flex;flex-direction:column;min-height:100vh;background:var(--bg-primary)}.header{height:64px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border-light);box-shadow:0 1px 3px 0 var(--shadow-light);z-index:900}.header,.page-title{color:var(--text-primary)}.page-title{margin:0;font-size:1.25rem;font-weight:600}.header-right{gap:1rem}.header-actions,.header-right{display:flex;align-items:center}.header-actions{gap:.5rem}.header-icon-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;border-radius:.5rem;color:#404040;cursor:pointer;transition:all .2s ease-in-out}.header-icon-btn:hover{background:#f5f5f5;color:#0284c7}.header-right .avatar{cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#0284c7;color:white;font-weight:600;font-size:14px}.avatar-dropdown{position:absolute;top:40px;right:0;background:white;color:#333;border:1px solid #ddd;border-radius:6px;width:150px;box-shadow:0 2px 6px rgba(0,0,0,.15);z-index:1001}.dropdown-item{display:block;padding:8px 12px!important;font-size:14px;text-decoration:none;text-transform:capitalize!important;width:100%;display:flex!important;justify-content:flex-start!important;color:#333}.dropdown-item:hover{background:#f5f5f5}.dropdown-item.danger{color:red}.sidebar-header{text-align:center;padding:.75rem 1rem;border-bottom:1px solid var(--border-light);color:white;height:64px;justify-content:center}.sidebar-header img{max-width:160px;max-height:58px;height:auto;object-fit:contain}.menu-container{padding:1rem 0}.menu-item{display:flex;flex-direction:column}.menu-link{padding:1rem 1.5rem;color:var(--text-primary);font-size:.875rem;font-weight:500;transition:all .2s ease-in-out;border-left:3px solid transparent}.menu-link:hover{background:var(--bg-tertiary)}.menu-link.active,.menu-link:hover{color:var(--primary-blue);border-left-color:var(--primary-blue)}.menu-link.active{background:rgba(25,118,210,.1)}.menu-left{gap:.75rem}.menu-icon{width:20px;height:20px;filter:brightness(0) saturate(100%) invert(25%) sepia(0) saturate(0) hue-rotate(0deg) brightness(0) contrast(100%)}.submenu{display:flex;flex-direction:column;background:var(--bg-tertiary);border-left:none;margin-left:1.5rem;border-radius:0 0 .5rem .5rem}.submenu-link{padding:.5rem 1rem;font-size:.8125rem;color:var(--text-secondary);transition:all .2s ease-in-out;border-left:3px solid transparent;border-radius:.25rem;margin:.125rem .5rem}.submenu-link:hover{background:rgba(25,118,210,.1);color:var(--primary-blue)}.submenu-link.active{background:transparent;color:var(--text-secondary);font-weight:400;border-left-color:transparent;border-radius:.25rem}.submenu-text{margin-left:0}.menu-arrow{transition:transform .3s ease;color:#404040;width:16px;height:16px}.menu-arrow.active{transform:rotate(180deg)}.content-area{flex:1;padding:.5rem;overflow-y:auto;background:#fafafa}.hrms-card{background:var(--bg-secondary);border-radius:.75rem;box-shadow:0 1px 3px 0 var(--shadow-light);border:1px solid var(--border-light);overflow:hidden;margin-bottom:1.5rem}.hrms-card-header{padding:1.5rem;border-bottom:1px solid var(--border-light);background:var(--bg-tertiary)}.hrms-card-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0}.hrms-card-content{padding:1.5rem}.hrms-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;font-weight:500;font-size:.875rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:all .2s ease-in-out;min-height:2.5rem}.hrms-btn-fixed-height{height:40px}.hrms-btn-primary{background-color:var(--primary-blue);color:var(--text-white);border-color:var(--primary-blue)}.hrms-btn-primary:hover{background-color:var(--primary-blue-dark);border-color:var(--primary-blue-dark)}.hrms-btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-medium)}.hrms-btn-secondary:hover{background-color:var(--bg-tertiary);border-color:var(--border-dark)}.hrms-btn-success{background-color:var(--status-success);color:var(--text-white);border-color:var(--status-success)}.hrms-btn-success:hover{background-color:#388E3C;border-color:#388E3C}.hrms-btn-warning{background-color:var(--accent-orange);color:var(--text-white);border-color:var(--accent-orange)}.hrms-btn-warning:hover{background-color:var(--accent-orange-dark);border-color:var(--accent-orange-dark)}.hrms-btn-error{background-color:var(--status-error);color:var(--text-white);border-color:var(--status-error)}.hrms-btn-error:hover{background-color:#D32F2F;border-color:#D32F2F}.hrms-table{width:100%;border-collapse:collapse;background:white;border-radius:.75rem;overflow:hidden;box-shadow:0 1px 2px 0 rgb(0 0 0/.05)}.hrms-table th{background-color:#fafafa;font-weight:600;text-align:left;border-bottom:1px solid #e5e5e5}.hrms-table td,.hrms-table th{color:#404040;padding:.5rem;font-size:.875rem}.hrms-table td{border-bottom:1px solid #f5f5f5}.hrms-table tbody tr:hover{background-color:#fafafa}.hrms-table tbody tr:last-child td{border-bottom:none}.hrms-badge{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:.5rem;font-size:.75rem;font-weight:500;line-height:1}.hrms-badge-primary{background-color:rgba(25,118,210,.1);color:var(--primary-blue)}.hrms-badge-success{background-color:rgba(76,175,80,.1);color:var(--status-success)}.hrms-badge-warning{background-color:rgba(255,152,0,.1);color:var(--accent-orange)}.hrms-badge-error{background-color:rgba(244,67,54,.1);color:var(--status-error)}.hrms-badge-neutral{background-color:var(--bg-tertiary);color:var(--text-secondary)}.hrms-form-group{margin-bottom:1.5rem}.hrms-form-label{display:block;font-weight:500;color:#404040;margin-bottom:.5rem;font-size:.875rem}.hrms-form-input{width:100%;padding:.5rem 1rem;border:1px solid #d4d4d4;border-radius:.5rem;font-size:.875rem;transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out;background-color:white}.hrms-form-input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgb(14 165 233/.1)}.hrms-file-input{width:100%;padding:8px 12px;border:1px solid #c4c4c4;border-radius:4px;font-size:14px;background-color:white;transition:border-color .2s ease-in-out}.hrms-file-input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgb(14 165 233/.1)}.hrms-page-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-light);padding:2rem 0;margin-bottom:2rem;border-radius:.75rem;box-shadow:0 1px 3px 0 var(--shadow-light)}.hrms-page-title{font-size:2rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.hrms-page-subtitle{font-size:1rem;color:var(--text-secondary);margin-bottom:0}.submenu-flyout{position:absolute;left:100%;top:0;margin-left:6px;pointer-events:auto}.submenu-flyout-title{color:#9ca3af}.submenu-flyout-link{color:#374151}@media (max-width:768px){.sidebar{transform:translateX(-100%);transition:transform .3s ease-in-out}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0}.content-area{padding:1rem}.hrms-page-title{font-size:1.5rem}}.sidebar{width:240px;height:100vh;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;transition:width .3s ease;overflow:hidden}.sidebar-collapsed{width:110px}.sidebar-header{position:sticky;top:0;z-index:10;background:#fff;display:flex;align-items:center;padding:14px 16px;min-height:64px;border-bottom:1px solid #e5e7eb;gap:8px;flex-shrink:0}.sidebar-collapsed .sidebar-header,.sidebar-header{justify-content:space-between}.sidebar-header .logo-full{max-height:50px;width:auto;object-fit:contain;flex:1;min-width:0;display:block;transition:opacity .2s ease}.sidebar-collapsed .sidebar-header .logo-full{display:none}.sidebar-header .logo-icon{width:36px;height:36px;object-fit:contain;flex-shrink:0;display:none}.sidebar-collapsed .sidebar-header .logo-icon{display:block}.collapse-btn{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid #e5e7eb;background:#f9fafb;cursor:pointer;color:#6b7280;display:flex;align-items:center;justify-content:center}.collapse-btn:hover{background:#f3f4f6;color:#111827}.menu-container{flex:1;padding:8px 0;overflow-y:auto;overflow-x:visible;scrollbar-width:none;-ms-overflow-style:none}.menu-container::-webkit-scrollbar{display:none}.menu-item{position:relative}.menu-link{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;color:#374151;text-decoration:none;cursor:pointer;transition:.2s}.menu-link:hover{background:#f3f4f6}.menu-left{display:flex;align-items:center;gap:12px}.menu-left-collapsed{flex-direction:column;align-items:center;gap:4px;width:100%}.menu-icon{width:30px;min-width:30px;height:30px;font-size:22px;display:flex;align-items:center;justify-content:center}.menu-label{font-size:13px;font-weight:500;white-space:nowrap}.menu-label-collapsed{font-size:10px;text-align:center;user-select:none;pointer-events:none}.active{background:#e5e7eb;font-weight:600}.menu-arrow{transition:.3s}.rotate{transform:rotate(180deg)}.submenu{margin:0 12px 10px 58px;padding-left:0;position:relative}.submenu:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#cbd5e1}.submenu-link{position:relative;display:flex;align-items:center;padding:10px 12px 10px 28px;font-size:14px;text-decoration:none;color:#6b7280;transition:all .25s ease}.submenu-link:before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%);width:8px;height:8px;background:#d1d5db;border-radius:50%;z-index:1}.submenu-link:after{content:"";position:absolute;left:0;top:50%;width:16px;height:14px;border-left:2px solid #307ddb;border-bottom:2px solid #2e80e4;border-radius:0 0 0 8px}.submenu-link:hover{color:#111827;transform:translateX(3px)}.submenu-link.active{color:#374151;font-weight:600;background:#f0f4ff;border-radius:6px}.submenu-link.active:before{background:#307ddb;width:10px;height:10px;left:-5px}.submenu-link.active:after{border-left-color:#307ddb;border-bottom-color:#307ddb}.submenu-flyout{position:fixed;z-index:9999;min-width:180px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:6px 6px 20px rgba(0,0,0,.12);padding:6px 0 8px;animation:flyoutAnim .2s ease}@keyframes flyoutAnim{0%{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}.submenu-flyout-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6a9ef7;padding:6px 14px;border-bottom:1px solid #f3f4f6;margin-bottom:4px}.submenu-flyout-link{display:block;padding:9px 16px;font-size:13px;color:#282829;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}.submenu-flyout-link:hover{background:#f3f4f6;color:#111827}.submenu-flyout{display:none}