.login-root{display:flex;min-height:100vh;background:var(--surface-white)}.auth-helper{margin-top:var(--s-3);text-align:center;font-size:13px;color:var(--text-gray)}.auth-link{color:var(--green-500);font-weight:800;text-decoration:none;transition:opacity var(--fast) var(--ease)}.auth-link:hover{opacity:.8}.login-left{flex:1;position:relative;background:linear-gradient(135deg,var(--bg-primary),var(--bg-secondary));color:var(--text-white);overflow:hidden;display:flex;align-items:center;justify-content:center}.login-left-content{position:relative;z-index:1;padding:var(--s-6);max-width:520px;background:linear-gradient(180deg,var(--surface-glass-strong),var(--surface-glass-soft));backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-radius:var(--r-xl);border:1px solid rgba(47,208,127,.18);box-shadow:var(--shadow-glass);color:var(--text-white)}.login-left-content:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(47,208,127,.18),transparent 60%)}.badge{display:inline-block;padding:6px 14px;background:#2fd07f26;color:var(--green-500);border-radius:999px;font-size:12px;margin-bottom:var(--s-3)}.login-left h1{font-size:42px;line-height:1.2;margin:0}.login-left h1 span{color:var(--green-500)}.login-left p{margin-top:var(--s-3);opacity:.85;line-height:1.6}.login-left footer{margin-top:var(--s-5);opacity:.6;font-size:12px}.login-right{width:420px;display:flex;align-items:center;justify-content:center;background:var(--surface-white)}.login-box{width:100%;padding:60px}.login-box h2{margin:0;font-size:24px}.subtitle{color:var(--text-gray);margin:8px 0 30px;font-size:14px}.login-box input{width:100%;padding:12px;margin-bottom:15px;border:1px solid #dddddd;border-radius:var(--r-sm);font-size:14px}.login-box input:focus{outline:none;border-color:var(--green-500)}.login-box button{width:100%;padding:12px;background:var(--green-500);color:var(--text-white);border:none;border-radius:var(--r-sm);font-size:14px;cursor:pointer;transition:transform var(--fast) var(--ease)}.login-box button:hover{transform:translateY(-1px)}.login-box small{display:block;margin-top:20px;text-align:center;color:#999;font-size:12px}@media(max-width:900px){.login-root{flex-direction:column}.login-left{min-height:320px}.login-left-content{padding:var(--s-4)}.login-right{width:100%}}.login-box form{display:flex;flex-direction:column}.login-box input{transition:border-color var(--fast) var(--ease),background-color var(--fast) var(--ease)}.login-box input.error{border-color:#ef4444;background:#ef44440a}.login-box input.error:focus{border-color:#ef4444}.login-box .version{display:block;margin-top:20px;text-align:center;color:#999;font-size:12px}.login-box small{display:block;margin-top:-10px;margin-bottom:14px;font-size:12px;color:#ef4444;animation:fadeInError .15s var(--ease)}.password-strength{margin-top:-6px;margin-bottom:18px;font-size:12px;font-weight:600;letter-spacing:.3px}.password-strength.lemah{color:#ef4444}.password-strength.sedang{color:#f59e0b}.password-strength.kuat{color:var(--green-500)}.login-box button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.login-box button:active:not(:disabled){transform:translateY(0)}@keyframes fadeInError{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.password-toggle{position:absolute;right:12px;top:12px;cursor:pointer;color:#9ca3af;transition:color var(--fast) var(--ease)}.password-toggle:hover{color:var(--green-500)}.otp-input{width:100%;padding:12px;margin-bottom:12px;border:1px solid #dddddd;border-radius:var(--r-sm);font-size:18px;letter-spacing:6px;text-align:center;transition:border-color var(--fast) var(--ease)}.otp-input:focus{outline:none;border-color:var(--green-500)}.login-box .form-error{margin-top:-6px;margin-bottom:14px;font-size:12px;color:#ef4444}.otp-timer{margin-top:14px;text-align:center;font-size:13px;color:var(--text-gray)}.otp-resend{margin-top:14px;background:none;border:none;font-size:13px;font-weight:700;color:var(--green-500);cursor:pointer;text-align:center;width:100%}.otp-resend:hover{opacity:.85}.particles-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}:root{--sidebar-icon-width: 56px;--sidebar-submenu-width: 220px;--icon-size: 40px;--icon-radius: 10px;--icon-gap: 8px;--sidebar-bg-dark: #0f2e23;--sidebar-hover: #153d2f;--primary-emerald: #22c55e;--primary-emerald-soft: rgba(34,197,94,.15);--text-muted: #6ee7b7;--text-light: #d1fae5;--text-dark: #374151}.dashboard-layout{display:flex;height:100vh;overflow:hidden;background:#f4f6f8}.dashboard-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.dashboard-content{flex:1;padding:24px;overflow-y:auto}.sidebar-wrapper{display:flex;height:100vh;position:relative;z-index:10}.sidebar-icons{width:var(--sidebar-icon-width);background:var(--sidebar-bg-dark);display:flex;flex-direction:column;align-items:center;padding-top:var(--icon-gap);position:relative;overflow-y:auto;scrollbar-width:thin}.sidebar-icons::-webkit-scrollbar{width:4px}.sidebar-icons::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}.active-indicator{position:absolute;left:calc((var(--sidebar-icon-width) - var(--icon-size)) / 2);width:var(--icon-size);height:var(--icon-size);background:var(--primary-emerald);border-radius:var(--icon-radius);box-shadow:0 0 12px #22c55e59;z-index:0}.active-indicator.animate{transition:top .25s cubic-bezier(.4,0,.2,1)}.sidebar-icon{position:relative;z-index:1;width:var(--icon-size);height:var(--icon-size);margin-bottom:var(--icon-gap);border:none;background:transparent;cursor:pointer;border-radius:var(--icon-radius);display:flex;align-items:center;justify-content:center;transition:transform .15s ease}.sidebar-icon:hover{transform:scale(1.05)}.sidebar-submenu{width:var(--sidebar-submenu-width);background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;height:100vh}.submenu-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2px 0 24px;background:#f9fbfa;border-bottom:1px solid #e5e7eb;flex-shrink:0}.submenu-title{font-size:16px;font-weight:600;color:#065f46}.submenu-back{width:42px;height:42px;display:flex;align-items:center;justify-content:le;border:none;background:transparent;border-radius:8px;cursor:pointer;color:#6b7280;transition:background .2s ease,color .2s ease}.submenu-back:hover{background:var(--primary-emerald-soft);color:#15803d}.submenu-item{padding:12px 24px;cursor:pointer;color:#374151;font-size:14px;border-left:3px solid transparent;transition:all .2s ease}.submenu-item:hover{background:#f3f4f6}.submenu-item.active{background:var(--primary-emerald-soft);color:#065f46;font-weight:600;border-left:3px solid var(--primary-emerald)}.global-tooltip{position:fixed;transform:translateY(-50%);background:#0f2e23;color:#fff;padding:10px 14px;font-size:12px;border-radius:8px;border:1px solid rgba(34,197,94,.4);pointer-events:none;z-index:9999;white-space:pre-line;line-height:1.6;min-width:180px;box-shadow:0 8px 20px #00000040}.global-tooltip:before{content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #0f2e23}.sidebar-footer{margin-top:auto;padding:16px 0 20px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:default}.app-version{font-size:11px;color:#ffffff73;letter-spacing:.5px}.env-badge{font-size:9px;padding:3px 6px;border-radius:6px;font-weight:600;letter-spacing:.5px}.env-dev{background:#3b82f626;color:#60a5fa}.env-stg{background:#eab30826;color:#facc15}.env-prod{background:#22c55e26;color:#4ade80}@media(max-width:1279px){:root{--sidebar-submenu-width: 190px}}@media(max-width:1023px){.sidebar-submenu{display:none}}.dashboard-header{height:56px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0}.header-left{display:flex;align-items:center}.company-name{font-size:18px;font-weight:700;color:#111827}.header-right{display:flex;align-items:center;gap:18px}.branch-btn{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;transition:all .2s ease}.branch-btn:hover{background:#22c55e14;border-color:#22c55e66}.branch-text{display:flex;gap:4px;align-items:center}.branch-caption{font-size:12px;color:#6b7280}.branch-label{font-size:13px;font-weight:600;color:#111827}.dropdown-arrow{font-size:12px;color:#6b7280;transition:transform .2s ease}.branch-btn:hover .dropdown-arrow{transform:rotate(180deg)}.notification-wrapper{position:relative}.header-icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.header-icon-btn:hover{background:#f3f4f6}.notification-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;background:#ef4444;color:#fff;font-size:10px;font-weight:600;border-radius:999px;display:flex;align-items:center;justify-content:center}.notification-dropdown{position:absolute;top:44px;right:0;width:350px;max-height:440px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;z-index:10000}.notification-header{padding:12px 16px;font-size:14px;font-weight:600;color:#111827;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;background:#fff}.mark-all-btn{font-size:12px;font-weight:500;background:none;border:none;color:#16a34a;cursor:pointer}.mark-all-btn:hover{text-decoration:underline}.notification-list{overflow-y:auto;max-height:360px}.notification-list::-webkit-scrollbar{width:6px}.notification-list::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:6px}.notification-list::-webkit-scrollbar-thumb:hover{background:#d1d5db}.notification-item{padding:12px 16px;border-bottom:1px solid #f3f4f6;cursor:pointer;transition:background .15s ease;position:relative;background:#fff}.notification-item:last-child{border-bottom:none}.notification-item:hover{background:#f9fafb}.notification-item.unread{background:#ecfdf5}.notification-item.unread:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:#22c55e}.notification-title{font-size:13px;font-weight:600;color:#111827;margin-bottom:4px}.notification-message{font-size:12px;color:#6b7280;margin-bottom:6px;line-height:1.4}.notification-time{font-size:11px;color:#9ca3af}.notification-empty{padding:28px;text-align:center;font-size:13px;color:#9ca3af}.notification-brand{padding:10px 16px;border-top:1px solid #f1f5f9;font-size:11px;color:#9ca3af;text-align:center;background:#fff;letter-spacing:.3px}.profile-section{display:flex;align-items:center;gap:10px;cursor:pointer}.profile-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}.profile-info{display:flex;flex-direction:column;line-height:1.1}.profile-name{font-size:14px;font-weight:600;color:#111827}.profile-role{font-size:12px;color:#6b7280}.modal-overlay{position:fixed;inset:0;background:#0f172a73;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999}.modal-container{width:420px;max-height:85vh;background:#fff;border-radius:16px;display:flex;flex-direction:column;box-shadow:0 20px 50px #00000040;overflow:hidden}.modal-header{height:56px;padding:0 20px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between}.modal-title{font-size:16px;font-weight:600;color:#111827}.modal-close{border:none;background:transparent;font-size:18px;cursor:pointer;color:#6b7280}.modal-close:hover{color:#111827}.branch-search-wrapper{padding:16px 20px;border-bottom:1px solid #f1f5f9}.branch-search-input{width:100%;height:38px;border:1px solid #e5e7eb;border-radius:10px;padding:0 12px;font-size:14px}.branch-list{flex:1;overflow-y:auto;padding:10px 0}.branch-item{padding:10px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-radius:10px;margin:4px 12px;transition:all .2s ease}.branch-item:hover{background:#f3f4f6}.branch-item.active{background:#22c55e26;color:#15803d;font-weight:600}.branch-item-text{display:flex;gap:6px}.branch-code{font-size:12px;color:#6b7280}.branch-check{font-size:14px;color:#15803d}.branch-footer{padding:16px 20px;border-top:1px solid #e5e7eb}.add-branch-btn{width:100%;height:40px;border-radius:10px;border:1px dashed #22c55e;background:#22c55e0d;color:#15803d;font-weight:600;cursor:pointer;transition:all .2s ease}.add-branch-btn:hover{background:#22c55e1a}.profile-modal-content{padding:20px;display:flex;flex-direction:column;gap:16px}.profile-field{display:flex;flex-direction:column;gap:4px}.profile-field .label{font-size:12px;color:#6b7280;font-weight:500}.profile-field .value{font-size:14px;font-weight:600;color:#111827}.profile-modal-footer{padding-top:16px;margin-top:10px;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end;gap:12px}.btn-secondary{padding:8px 14px;border-radius:8px;border:1px solid #d1d5db;background:#fff;cursor:pointer;font-size:13px}.btn-secondary:hover{background:#f3f4f6}.btn-danger{padding:8px 14px;border-radius:8px;border:none;background:#ef4444;color:#fff;font-weight:600;cursor:pointer}.btn-danger:hover{background:#dc2626}:root{--green-500: #2FD07F;--bg-primary: #0F2D1F;--bg-secondary: #081B13;--surface-glass-strong: rgba(15, 45, 31, .55);--surface-glass-soft: rgba(15, 45, 31, .35);--surface-white: #ffffff;--text-white: #ffffff;--text-white-muted: rgba(255, 255, 255, .75);--text-gray: #6b7280;--s-1: 8px;--s-2: 16px;--s-3: 24px;--s-4: 32px;--s-5: 48px;--s-6: 64px;--r-sm: 6px;--r-md: 10px;--r-lg: 16px;--r-xl: 22px;--shadow-soft: 0 10px 30px rgba(0, 0, 0, .28);--shadow-glass: 0 12px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .04);--blur: 14px;--ease: cubic-bezier(.4, 0, .2, 1);--fast: .15s}*{box-sizing:border-box;font-family:Inter,system-ui,sans-serif}body{margin:0;background:var(--surface-white);color:#111827}.notification-container{position:fixed;top:var(--s-3);right:var(--s-3);z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}.notification-item{pointer-events:auto;min-width:260px;max-width:360px;padding:10px 14px;background:#fff;color:#111827;border-radius:12px;font-size:14px;line-height:1.45;box-shadow:0 6px 16px #0000001f;white-space:normal;word-break:break-word;overflow-wrap:anywhere;opacity:0;transform:translateY(-6px);animation:toast-in .15s ease forwards}.notification-item.removing{animation:toast-out .15s ease forwards}.notification-success{border-left:4px solid var(--green-500);color:#065f46}.notification-error{border-left:4px solid #ef4444;color:#7f1d1d}.notification-warning{border-left:4px solid #facc15;color:#78350f}.notification-info{border-left:4px solid #3b82f6;color:#1e3a8a}.notification-message{display:block}@keyframes toast-in{to{opacity:1;transform:translateY(0)}}@keyframes toast-out{to{opacity:0;transform:translateY(-4px)}}