@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap";
:root{--font-sans:"Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-base:#0d0f0c;--bg-surface:#161813c7;--bg-surface-hover:#1f221be0;--bg-card:#191c17ad;--bg-popover:#171a14;--border-color:#ffffff14;--border-color-hover:#ffffff29;--glass-blur:blur(12px);--glass-shadow:0 8px 32px 0 #0000005e;--primary:#d6a84f;--primary-hover:#b98a32;--primary-glow:#d6a84f29;--secondary:#4f9f75;--secondary-glow:#4f9f7526;--accent:#b84d6a;--success:#10b981;--success-bg:#10b9811a;--warning:#f59e0b;--warning-bg:#f59e0b1a;--danger:#ef4444;--danger-bg:#ef44441a;--info:#06b6d4;--info-bg:#06b6d41a;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--text-link:#e2bf72}*{box-sizing:border-box;font-family:var(--font-sans);margin:0;padding:0;transition:background-color .2s,border-color .2s,box-shadow .2s}html,body{background-color:var(--bg-base);width:100%;min-height:100vh;color:var(--text-primary);scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseGlow{0%,to{opacity:.6}50%{opacity:1}}.animate-fade-in{animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeIn}.glass-panel{background:var(--bg-surface);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);box-shadow:var(--glass-shadow);border-radius:16px}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);border-radius:12px;padding:20px}.glass-card:hover{border-color:var(--border-color-hover);transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s;transform:translateY(-2px);box-shadow:0 12px 24px -10px #00000080}input,select,textarea{border:1px solid var(--border-color);color:var(--text-primary);background:#0f111ccc;border-radius:8px;outline:none;padding:10px 14px;font-size:.95rem}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}button{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:.95rem;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex}button.btn-primary{background:linear-gradient(135deg, var(--primary) 0%, #4f9f75 100%);color:#11140f;box-shadow:0 4px 14px #d6a84f47}button.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #d6a84f5c}button.btn-primary:active{transform:translateY(0)}button.btn-secondary{border:1px solid var(--border-color);color:var(--text-primary);background:#ffffff0f}button.btn-secondary:hover{border-color:var(--border-color-hover);background:#ffffff1f}button.btn-danger{background:linear-gradient(135deg, var(--accent) 0%, #ef4444 100%);color:#fff;box-shadow:0 4px 14px #f43f5e66}button.btn-danger:hover{transform:translateY(-1px);box-shadow:0 6px 20px #f43f5e80}button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}.table-container{border:1px solid var(--border-color);background:var(--bg-card);border-radius:12px;overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%}th{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border-color);background:#0f111ce6;padding:14px 18px;font-size:.85rem;font-weight:600}td{border-bottom:1px solid var(--border-color);color:var(--text-primary);padding:16px 18px;font-size:.95rem}tr:last-child td{border-bottom:none}tr:hover td{background:#ffffff05}.ops-table-container{border-radius:10px}.ops-table-container th,.ops-table-container td{vertical-align:top;padding:12px 14px}.ops-table-container th{font-size:.78rem}.ops-table-container td{font-size:.88rem}.badge{text-transform:capitalize;border-radius:9999px;align-items:center;padding:4px 8px;font-size:.75rem;font-weight:600;display:inline-flex}.print-hidden{display:initial}.print-only{display:none!important}@media print{:root{--bg-base:#fff;--bg-surface:#fff;--bg-card:#fff;--text-primary:#111;--text-secondary:#333;--text-muted:#555;--border-color:#0000001f}html,body{color:#111!important;background:#fff!important;overflow:visible!important}*{box-shadow:none!important;text-shadow:none!important;transition:none!important}.print-hidden{display:none!important}.print-only{display:block!important}.guide-page{color:#111!important;background:#fff!important;padding:0!important}.guide-page .glass-panel,.guide-page .glass-card{box-shadow:none!important;-webkit-backdrop-filter:none!important;background:#fff!important;border:1px solid #0000001f!important}.guide-page a{color:#111!important;text-decoration:none!important}.guide-page details,.guide-page details>*{display:block!important}.guide-page summary{list-style:none}.guide-page summary::-webkit-details-marker{display:none}}.badge.badge-success{background:var(--success-bg);color:var(--success)}.badge.badge-warning{background:var(--warning-bg);color:var(--warning)}.badge.badge-danger{background:var(--danger-bg);color:var(--danger)}.badge.badge-info{background:var(--info-bg);color:var(--info)}h1{letter-spacing:-.02em;background:linear-gradient(135deg,#fff 0%,#e2bf72 55%,#9ed2b3 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2.2rem;font-weight:800}h2{letter-spacing:-.015em;font-size:1.6rem;font-weight:700}h3{font-size:1.2rem;font-weight:600}p{color:var(--text-secondary);line-height:1.6}.btn-logout{border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px;display:inline-flex;color:#ef4444!important;background:#ef444414!important;border:1px solid #ef444426!important}.btn-logout:hover{transform:translateY(-1px);background:#ef44442e!important}.mobile-log-list{display:none}@media (max-width:900px){html,body{overflow-x:hidden}.login-page{justify-content:flex-start!important;align-items:flex-start!important;width:100%!important;min-height:100dvh!important;padding:14px!important;overflow-y:auto!important}.login-card{gap:18px!important;max-width:none!important;margin:0 auto!important;padding:22px!important}.portal-shell{flex-direction:column!important;width:100%!important;min-height:100dvh!important;overflow-x:hidden!important}.portal-sidebar{z-index:20;position:sticky;top:0;border-right:0!important;border-bottom:1px solid var(--border-color)!important;gap:10px!important;width:100%!important;min-width:0!important;max-height:none!important;padding:10px 12px!important}.portal-sidebar nav{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-direction:row!important;flex:initial!important;gap:8px!important;width:100%!important;padding-bottom:2px!important;display:flex!important;overflow-x:auto!important}.portal-sidebar nav::-webkit-scrollbar{display:none}.portal-sidebar nav button,.portal-sidebar .btn-logout{min-height:44px;white-space:nowrap!important;flex:none!important;width:auto!important;min-width:136px!important;padding:10px 12px!important;font-size:.78rem!important}.portal-sidebar .btn-logout{width:100%!important;min-width:0!important}.desktop-logout{display:none!important}.mobile-account-logout{color:#fecaca!important;background:#ef444414!important;border:1px solid #ef444440!important;border-radius:12px!important;justify-content:center!important;align-items:center!important;width:38px!important;height:38px!important;min-height:38px!important;margin-left:auto!important;padding:0!important;display:inline-flex!important}.portal-sidebar.employee-sidebar .desktop-sidebar-nav,.portal-sidebar.employee-sidebar .desktop-logout{display:none!important}.portal-sidebar.employee-sidebar>div:first-child,.portal-sidebar.employee-sidebar>div:nth-child(2){display:flex!important}.employee-main{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}.toast-stack{left:14px!important;right:14px!important;bottom:calc(88px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important}.mobile-bottom-nav{z-index:40;padding:8px 10px calc(8px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0c0e17f0;border:0;border-top:1px solid #ffffff14;border-radius:0;gap:4px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -16px 40px #00000047}.mobile-bottom-nav button,.mobile-bottom-nav a{appearance:none;color:#94a3b8;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:0;border-radius:14px;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:6px;min-height:56px;padding:8px 4px;font-size:.68rem;font-weight:700;line-height:1.1;text-decoration:none;display:flex}.mobile-bottom-nav button.is-active,.mobile-bottom-nav a.is-active{color:#f8fafc;background:#6366f129}.mobile-bottom-nav button span,.mobile-bottom-nav a span{text-align:center;display:block}.portal-main{gap:18px!important;width:100%!important;min-width:0!important;padding:16px!important;overflow:visible!important}.portal-main header{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}.portal-main h2{font-size:1.35rem!important;line-height:1.2!important}.portal-main>*,.portal-main .animate-fade-in,.portal-main .glass-panel,.portal-main .glass-card{min-width:0!important;max-width:100%!important}.portal-main .glass-panel,.portal-main .glass-card{border-radius:10px!important;padding:16px!important}.portal-main>div,.portal-main section,.portal-main .animate-fade-in,.portal-main [style*=grid-template-columns]{grid-template-columns:1fr!important;gap:16px!important;display:grid!important}.portal-main [style*="display: flex"]{min-width:0!important}.portal-main [style*="justify-content: space-between"]{flex-wrap:wrap!important;gap:12px!important}.portal-main [style*="align-items: flex-end"]{flex-direction:column!important;align-items:stretch!important}.portal-main [style*="width: 70px"]{width:100%!important;max-width:120px!important}.portal-main .table-container{-webkit-overflow-scrolling:touch;width:100%!important;max-width:100%!important;overflow-x:auto!important}.desktop-log-table{display:none!important}.mobile-log-list{flex-direction:column;gap:10px;display:flex}.portal-main table{min-width:720px;font-size:.86rem}.portal-main th,.portal-main td{vertical-align:top;padding:10px 12px!important}.portal-main input,.portal-main select,.portal-main textarea,.portal-main button{max-width:100%!important;font-size:16px!important}.portal-main textarea{min-height:112px}.portal-main [style*="position: fixed"]:not(.app-modal-backdrop){align-items:flex-start!important;padding:12px!important;overflow-y:auto!important}.portal-main [style*="max-width: 680px"]:not(.app-modal-card){max-width:100%!important;margin:0!important;padding:18px!important}}@media (max-width:520px){.portal-sidebar nav{display:flex!important}.portal-sidebar nav button{min-width:126px!important}.portal-sidebar>div:first-child,.portal-sidebar>div:nth-child(2){display:none!important}.portal-main table{min-width:640px}.portal-main{padding:12px!important}.employee-main{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}.portal-main .glass-panel,.portal-main .glass-card{padding:14px!important}.portal-main h3{font-size:1rem!important}.login-card{padding:18px!important}.login-card h1{font-size:2rem!important}.login-card button{min-height:46px}}@media (min-width:901px){.mobile-account-logout,.mobile-bottom-nav{display:none!important}}@media print{@page{size:A4;margin:20mm 14mm 14mm}body.print-payslip-mode .portal-sidebar,body.print-payslip-mode .portal-bottom-nav,body.print-payslip-mode .content-header,body.print-payslip-mode .payslip-print-surface>button,body.print-payslip-mode .payslip-print-surface~*{display:none!important}body.print-payslip-mode .admin-payslip-print-host{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;width:auto!important;height:auto!important;padding:0!important;display:block!important;position:static!important}body.print-payslip-mode .admin-payslip-print-host>.payslip-print-surface{border:0!important;width:auto!important;max-width:none!important;max-height:none!important;padding:0!important;overflow:visible!important}*{color:#111!important;box-shadow:none!important;text-shadow:none!important;background:#fff!important}.payslip-print-content{border:1px solid #cfcfcf!important;flex-direction:column!important;gap:12px!important;width:176mm!important;max-width:100%!important;margin:0 auto!important;padding:16mm!important;display:flex!important}.print-hidden{display:none!important}.payslip-print-content h3{margin:0!important;font-size:20pt!important}.payslip-print-content p{margin:3px 0 0!important}.payslip-print-content header{text-align:center!important;border-bottom:2px solid #111!important;padding-bottom:10px!important}.payslip-print-content header>div:first-child{width:100%!important}.payslip-print-content [style*=grid-template-columns]{grid-template-columns:repeat(3,1fr)!important}.payslip-print-content .performance-note-text{background:0 0!important;border-left-color:#111!important}.payslip-print-content img{max-width:260px!important;height:auto!important}}