@import "https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--slate:#22364a;--slate-deep:#16283a;--slate-soft:#33506b;--ink:#14212e;--c-orange:#e07b39;--c-yellow:#efc044;--c-green:#4a9d5f;--c-sky:#8fc7e8;--c-red:#cf3a3f;--c-blue:#2b7fc4;--accent:var(--c-yellow);--accent-ink:#7a5410;--ok:var(--c-green);--ok-bg:#e8f4eb;--warn:var(--c-orange);--warn-bg:#fbede3;--danger:var(--c-red);--danger-bg:#fae8e9;--info:var(--c-blue);--info-bg:#e6f0f9;--paper:#f7f8fa;--card:#fff;--n-50:#f7f8fa;--n-100:#eef1f5;--n-200:#dfe4eb;--n-300:#c6ceda;--n-400:#93a0b2;--n-500:#6b7a8d;--n-600:#4e5d70;--n-700:#374757;--n-800:#24313f;--navy:var(--slate);--navy-dark:var(--slate-deep);--navy-light:var(--slate-soft);--gold:var(--c-yellow);--gold-light:#fdf4dc;--white:#fff;--green:var(--ok);--green-light:var(--ok-bg);--red:var(--danger);--red-light:var(--danger-bg);--orange:var(--warn);--orange-light:var(--warn-bg);--purple:#6b4e9e;--purple-light:#eee8f7;--gray-50:var(--n-50);--gray-100:var(--n-100);--gray-200:var(--n-200);--gray-300:var(--n-300);--gray-400:var(--n-400);--gray-500:var(--n-500);--gray-600:var(--n-600);--gray-700:var(--n-700);--gray-800:var(--n-800);--gray-900:var(--ink);--sidebar-w:244px;--header-h:60px;--r:10px;--r-sm:7px;--r-lg:16px;--shadow-xs:0 1px 2px #14212e0d;--shadow:0 1px 2px #14212e0d, 0 6px 18px -6px #14212e1a;--shadow-lg:0 12px 40px -8px #14212e38;--ring:0 0 0 3px #efc04452}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:14px}body{background:var(--paper);color:var(--n-800);-webkit-font-smoothing:antialiased;letter-spacing:-.006em;font-family:Inter,system-ui,sans-serif}h1,h2,h3,h4{letter-spacing:-.022em;color:var(--ink);font-family:Archivo,sans-serif}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--n-300);border:2px solid var(--paper);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--n-400)}.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--n-400);font-family:Inter,sans-serif;font-size:.643rem;font-weight:500}.section-label{text-transform:uppercase;letter-spacing:.17em;color:var(--n-500);align-items:center;gap:12px;margin-bottom:14px;font-family:Inter,sans-serif;font-size:.679rem;font-weight:600;display:flex}.section-label:after{content:"";background:var(--n-200);flex:1;height:1px}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.flex-wrap{flex-wrap:wrap}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.w-full{width:100%}.h-full{height:100%}.relative{position:relative}.absolute{position:absolute}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text-center{text-align:center}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.text-sm{font-size:.857rem}.text-xs{font-size:.786rem}.text-lg{font-size:1.143rem}.text-xl{font-size:1.286rem}.text-2xl{font-size:1.571rem}.text-3xl{font-size:2rem}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.p-2{padding:8px}.p-4{padding:16px}.p-6{padding:24px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.rounded{border-radius:var(--r-sm)}.rounded-lg{border-radius:var(--r)}.rounded-full{border-radius:9999px}.border{border:1px solid var(--n-200)}.shadow{box-shadow:var(--shadow)}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.grid{display:grid}.hidden{display:none}.card{background:var(--card);border-radius:var(--r);border:1px solid var(--n-200);box-shadow:var(--shadow-xs)}.badge{letter-spacing:.01em;white-space:nowrap;border-radius:6px;align-items:center;gap:5px;padding:3px 9px;font-size:.714rem;font-weight:600;display:inline-flex}.badge-green{background:var(--ok-bg);color:#2c6b3d}.badge-red{background:var(--danger-bg);color:#96282c}.badge-orange{background:var(--warn-bg);color:#944e1c}.badge-blue{background:var(--info-bg);color:#1b5c93}.badge-purple{background:var(--purple-light);color:var(--purple)}.badge-gold{color:var(--accent-ink);background:#fdf4dc}.btn{border-radius:var(--r-sm);letter-spacing:-.005em;cursor:pointer;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:7px;padding:8px 16px;font-family:Inter,sans-serif;font-size:.857rem;font-weight:600;transition:background .14s,border-color .14s,box-shadow .14s,transform 80ms;display:inline-flex}.btn:active:not(:disabled){transform:translateY(.5px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:focus-visible{box-shadow:var(--ring);outline:none}.btn-primary{background:var(--slate);color:#fff}.btn-primary:hover:not(:disabled){background:var(--slate-deep)}.btn-gold{background:var(--accent);color:var(--ink)}.btn-gold:hover:not(:disabled){background:#e5b22f}.btn-ghost{background:var(--card);color:var(--n-600);border-color:var(--n-200)}.btn-ghost:hover:not(:disabled){background:var(--n-50);border-color:var(--n-300);color:var(--n-800)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:#b33236}.btn-sm{padding:5px 11px;font-size:.786rem}.btn-lg{padding:12px 22px;font-size:.95rem}.input-group{flex-direction:column;gap:6px;display:flex}.input-label{color:var(--n-500);text-transform:uppercase;letter-spacing:.13em;font-size:.679rem;font-weight:600}.input{border:1px solid var(--n-300);border-radius:var(--r-sm);color:var(--n-800);background:var(--card);outline:none;width:100%;padding:9px 12px;font-family:Inter,sans-serif;font-size:.893rem;transition:border-color .14s,box-shadow .14s}.input:hover:not(:disabled){border-color:var(--n-400)}.input:focus{border-color:var(--accent);box-shadow:var(--ring)}.input:disabled{background:var(--n-50);color:var(--n-500);cursor:not-allowed}.input::placeholder{color:var(--n-400)}select.input{cursor:pointer}.table-wrap{border-radius:var(--r);border:1px solid var(--n-200);background:var(--card);overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.857rem}thead tr{background:var(--slate)}thead th{color:#dce4ec;text-align:left;white-space:nowrap;text-transform:uppercase;letter-spacing:.13em;padding:10px 14px;font-size:.679rem;font-weight:600}tbody tr{border-bottom:1px solid var(--n-100);transition:background .1s}tbody tr:hover{background:var(--n-50)}tbody tr:last-child{border-bottom:none}tbody td{color:var(--n-700);vertical-align:middle;padding:10px 14px}.form-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.form-grid-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.col-span-2{grid-column:span 2}.col-span-3{grid-column:span 3}.modal-overlay{z-index:999;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#14212e73;justify-content:center;align-items:center;padding:16px;animation:.16s fade;display:flex;position:fixed;inset:0}@keyframes fade{0%{opacity:0}to{opacity:1}}.modal{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;max-width:700px;max-height:90vh;animation:.2s cubic-bezier(.2,.8,.3,1) pop;overflow-y:auto}@keyframes pop{0%{opacity:0;transform:scale(.97)translateY(6px)}to{opacity:1;transform:none}}.modal-header{border-bottom:1px solid var(--n-100);background:var(--card);z-index:1;border-radius:var(--r-lg) var(--r-lg) 0 0;justify-content:space-between;align-items:center;padding:18px 22px;display:flex;position:sticky;top:0}.modal-body{padding:22px}.modal-footer{border-top:1px solid var(--n-100);background:var(--card);justify-content:flex-end;gap:10px;padding:14px 22px;display:flex;position:sticky;bottom:0}.sidebar{width:var(--sidebar-w);background:var(--slate-deep);z-index:100;flex-direction:column;transition:transform .24s cubic-bezier(.2,.8,.3,1);display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar:after{content:"";background:linear-gradient(180deg, var(--c-orange) 0%, var(--c-yellow) 20%, var(--c-green) 40%, var(--c-sky) 60%, var(--c-red) 80%, var(--c-blue) 100%);opacity:.55;width:2px;position:absolute;top:0;bottom:0;right:0}.sidebar-logo{border-bottom:1px solid #ffffff12;padding:18px 16px 16px}.brand-strip{background:#fff;border-radius:8px;justify-content:center;align-items:center;min-height:46px;padding:9px 11px;display:flex}.brand-strip img{object-fit:contain;width:100%;height:auto;max-height:34px;display:block}.brand-fallback{align-items:center;gap:9px;display:flex}.brand-fallback .mark{background:var(--accent);width:32px;height:32px;color:var(--ink);border-radius:7px;justify-content:center;align-items:center;font-family:Archivo,sans-serif;font-size:16px;font-weight:900;display:flex}.brand-fallback h2{color:#fff;font-size:.95rem;font-weight:800;line-height:1.15}.sidebar-sub{text-align:center;letter-spacing:.26em;text-transform:uppercase;color:#ffffff6b;margin-top:9px;font-size:.607rem;font-weight:500}.sidebar-nav{flex:1;padding:10px;overflow-y:auto}.nav-section-label{color:#ffffff52;text-transform:uppercase;letter-spacing:.2em;padding:14px 10px 5px;font-size:.607rem;font-weight:600}.nav-item{cursor:pointer;color:#ffffff9e;border-radius:7px;align-items:center;gap:11px;margin-bottom:1px;padding:8px 11px;font-size:.857rem;font-weight:500;text-decoration:none;transition:background .13s,color .13s;display:flex;position:relative}.nav-item:hover{color:#fff;background:#ffffff0f}.nav-item.active{color:#fff;background:#ffffff1a;font-weight:600}.nav-item.active:before{content:"";background:var(--accent);border-radius:0 3px 3px 0;width:3px;position:absolute;top:6px;bottom:6px;left:-10px}.nav-icon{text-align:center;opacity:.9;flex-shrink:0;width:17px}.nav-badge{background:var(--danger);color:#fff;border-radius:99px;margin-left:auto;padding:1px 6px;font-size:.607rem;font-weight:700}.sidebar-footer{border-top:1px solid #ffffff12;padding:12px}.user-chip{cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:9px 10px;transition:background .13s;display:flex}.user-chip:hover{background:#ffffff12}.user-avatar{background:var(--accent);width:33px;height:33px;color:var(--ink);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-family:Archivo,sans-serif;font-size:.821rem;font-weight:800;display:flex;overflow:hidden}.user-avatar img{object-fit:cover;width:100%;height:100%}.user-info{flex:1;min-width:0}.user-info .name{color:#fff;font-size:.857rem;font-weight:600}.user-info .role{color:#ffffff73;text-transform:capitalize;font-size:.679rem}.main-wrap{margin-left:var(--sidebar-w);flex-direction:column;min-height:100vh;display:flex}.topbar{height:var(--header-h);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--n-200);z-index:99;background:#ffffffe0;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:sticky;top:0}.page-content{flex:1;width:100%;max-width:1500px;padding:26px 24px 40px}.page-header{margin-bottom:22px}.page-header h1{letter-spacing:-.028em;font-size:1.5rem;font-weight:800}.page-header p{color:var(--n-500);margin-top:3px;font-size:.857rem}.stats-grid{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;display:grid}.stat-card{background:var(--card);border-radius:var(--r);border:1px solid var(--n-200);box-shadow:var(--shadow-xs);align-items:center;gap:14px;padding:16px 18px;display:flex;position:relative;overflow:hidden}.stat-card:before{content:"";background:var(--n-300);width:3px;position:absolute;top:0;bottom:0;left:0}.stat-card:first-child:before{background:var(--c-blue)}.stat-card:nth-child(2):before{background:var(--c-green)}.stat-card:nth-child(3):before{background:var(--c-yellow)}.stat-card:nth-child(4):before{background:var(--c-orange)}.stat-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:19px;display:flex}.stat-info .label{color:var(--n-500);text-transform:uppercase;letter-spacing:.13em;font-size:.679rem;font-weight:600}.stat-info .value{color:var(--ink);letter-spacing:-.03em;margin-top:3px;font-family:Archivo,sans-serif;font-size:1.65rem;font-weight:800;line-height:1.1}.stat-info .change{color:var(--n-400);margin-top:2px;font-size:.75rem}.upload-zone{border:1.5px dashed var(--n-300);border-radius:var(--r);text-align:center;cursor:pointer;background:var(--n-50);padding:30px;transition:all .15s}.upload-zone:hover{border-color:var(--accent);background:#fdf9ee}.upload-zone .icon{margin-bottom:6px;font-size:28px}.upload-zone p{color:var(--n-600);font-size:.857rem}.upload-zone .hint{color:var(--n-400);margin-top:3px;font-size:.786rem}.search-box{background:var(--n-100);border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;padding:7px 13px;transition:all .14s;display:flex}.search-box:focus-within{background:var(--card);border-color:var(--accent);box-shadow:var(--ring)}.search-box input{color:var(--n-800);background:0 0;border:none;outline:none;width:230px;font-family:Inter,sans-serif;font-size:.857rem}.search-box input::placeholder{color:var(--n-400)}.progress-bar{background:var(--n-200);border-radius:99px;height:6px;overflow:hidden}.progress-fill{border-radius:99px;height:100%;transition:width .35s cubic-bezier(.2,.8,.3,1)}.alert{border-radius:var(--r-sm);border:1px solid;border-left-width:3px;align-items:flex-start;gap:10px;padding:11px 15px;font-size:.857rem;line-height:1.5;display:flex}.alert-info{background:var(--info-bg);border-color:#bbd7ee;border-left-color:var(--info);color:#194e7a}.alert-warn{background:var(--warn-bg);border-color:#f1d2b8;border-left-color:var(--warn);color:#84461a}.alert-danger{background:var(--danger-bg);border-color:#f0c4c6;border-left-color:var(--danger);color:#8c2529}.alert-success{background:var(--ok-bg);border-color:#bfe0c8;border-left-color:var(--ok);color:#266035}.steps{align-items:center;margin-bottom:26px;display:flex}.step{flex:1;align-items:center;display:flex}.step-circle{border:1.5px solid var(--n-300);width:30px;height:30px;color:var(--n-400);background:var(--card);border-radius:99px;flex-shrink:0;justify-content:center;align-items:center;font-family:Archivo,sans-serif;font-size:.821rem;font-weight:700;transition:all .2s;display:flex}.step.done .step-circle{background:var(--ok);border-color:var(--ok);color:#fff}.step.active .step-circle{background:var(--slate);border-color:var(--slate);color:#fff;box-shadow:0 0 0 4px #22364a1a}.step-line{background:var(--n-200);flex:1;height:1.5px}.step.done .step-line{background:var(--ok)}.step-label{color:var(--n-500);text-align:center;margin-top:5px;font-size:.714rem;font-weight:500}.tag{border-radius:6px;align-items:center;gap:4px;padding:3px 9px;font-size:.714rem;font-weight:600;display:inline-flex}.tag-branch-chd{background:var(--info-bg);color:#1b5c93}.tag-branch-tnd{color:var(--accent-ink);background:#fdf4dc}.tag-branch-pun{background:var(--ok-bg);color:#2c6b3d}.tag-branch-sgn{background:var(--warn-bg);color:#944e1c}.tag-branch-tha{background:var(--danger-bg);color:#96282c}.login-page{background:radial-gradient(1100px 600px at 50% -10%, #2e4a63 0%, var(--slate-deep) 55%, #0e1d2b 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex;position:relative;overflow:hidden}.login-page:before{content:"";background:linear-gradient(90deg, var(--c-orange) 0%, var(--c-yellow) 20%, var(--c-green) 40%, var(--c-sky) 60%, var(--c-red) 80%, var(--c-blue) 100%);height:4px;position:absolute;top:0;left:0;right:0}.login-card{background:var(--card);text-align:center;border-radius:18px;width:100%;max-width:404px;padding:38px 34px 30px;position:relative;box-shadow:0 30px 70px -18px #00000080}.login-logo{margin-bottom:22px}.login-logo-wide{justify-content:center;align-items:center;max-width:240px;margin:0 auto 16px;display:flex}.login-logo-wide img{object-fit:contain;width:100%;height:auto;max-height:64px;display:block}.login-logo-box{background:var(--accent);width:64px;height:64px;color:var(--ink);border-radius:15px;justify-content:center;align-items:center;margin:0 auto 14px;font-family:Archivo,sans-serif;font-size:27px;font-weight:900;display:flex}.login-logo h1{color:var(--ink);letter-spacing:-.028em;font-size:1.35rem;font-weight:800}.login-logo p{color:var(--n-400);text-transform:uppercase;letter-spacing:.24em;margin-top:7px;font-size:.643rem;font-weight:500}.google-btn{border:1.5px solid var(--n-200);background:var(--card);width:100%;color:var(--n-700);cursor:pointer;border-radius:9px;justify-content:center;align-items:center;gap:11px;margin-top:22px;padding:12px;font-family:Inter,sans-serif;font-size:.929rem;font-weight:600;transition:all .14s;display:flex}.google-btn:hover{border-color:var(--accent);background:#fdf9ee}.emp-card{background:var(--card);border-radius:var(--r);border:1px solid var(--n-200);cursor:pointer;box-shadow:var(--shadow-xs);padding:18px;transition:all .16s}.emp-card:hover{border-color:var(--n-300);box-shadow:var(--shadow);transform:translateY(-2px)}.emp-avatar-lg{color:#fff;border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:11px;font-family:Archivo,sans-serif;font-size:1.14rem;font-weight:800;display:flex}.emp-card .emp-name{color:var(--ink);margin-bottom:2px;font-size:.929rem;font-weight:700}.emp-card .emp-code{color:var(--n-500);font-family:JetBrains Mono,monospace;font-size:.714rem;font-weight:600}.emp-card .emp-meta{color:var(--n-500);margin-top:8px;font-size:.786rem}.doc-pill{border-radius:6px;align-items:center;gap:4px;padding:3px 8px;font-size:.714rem;font-weight:600;display:inline-flex}.doc-pill.received{background:var(--ok-bg);color:#2c6b3d}.doc-pill.pending{color:var(--accent-ink);background:#fdf4dc}.doc-pill.missing{background:var(--danger-bg);color:#96282c}.chart-card{background:var(--card);border-radius:var(--r);border:1px solid var(--n-200);box-shadow:var(--shadow-xs);padding:18px}.chart-title{color:var(--n-500);text-transform:uppercase;letter-spacing:.15em;margin-bottom:16px;font-size:.679rem;font-weight:600}.skeleton{background:linear-gradient(90deg,var(--n-200) 25%,var(--n-100) 50%,var(--n-200) 75%);background-size:200%;border-radius:6px;animation:1.4s infinite sk}@keyframes sk{0%{background-position:200%}to{background-position:-200%}}.toast-container{z-index:9999;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:22px;right:22px}.toast{background:var(--slate-deep);color:#fff;box-shadow:var(--shadow-lg);border-left:3px solid;border-radius:9px;align-items:center;gap:11px;min-width:270px;padding:12px 16px;animation:.22s cubic-bezier(.2,.8,.3,1) tin;display:flex}@keyframes tin{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:none}}.toast-success{border-color:var(--ok)}.toast-error{border-color:var(--danger)}.toast-info{border-color:var(--c-sky)}.toast-warn{border-color:var(--warn)}[style*=monospace],.mono{letter-spacing:-.02em;font-family:JetBrains Mono,monospace!important}@media (width<=1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}.form-grid-3{grid-template-columns:1fr 1fr}}@media (width<=768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-wrap{margin-left:0}.stats-grid,.form-grid,.form-grid-3{grid-template-columns:1fr}.form-grid .col-span-2,.form-grid .col-span-3{grid-column:span 1}.page-content{padding:18px 14px 32px}.topbar{padding:0 14px}.search-box input{width:130px}.mobile-menu-btn{display:block!important}}@media print{.sidebar,.topbar{display:none}.main-wrap{margin-left:0}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}