*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:#f4f6f2;color:#1d2924}a{text-decoration:none;color:inherit}.sidebar{position:fixed;left:18px;top:18px;bottom:18px;width:238px;background:#10251d;color:#fff;border-radius:24px;padding:20px;display:flex;flex-direction:column;box-shadow:0 18px 45px rgba(16,37,29,.18)}.brand{display:flex;gap:12px;align-items:center;padding:6px}.brandmark{width:42px;height:42px;border-radius:14px;background:#d2a84a;color:#10251d;display:inline-flex;align-items:center;justify-content:center;font-weight:900}.brand small,.sideuser small{display:block;color:#a8b7b0;margin-top:3px}.sidebar nav{display:grid;gap:7px;margin-top:35px}.sidebar nav a{padding:11px 13px;border-radius:12px;color:#dce5e1}.sidebar nav a:hover{background:#19352a;color:white}.sideuser{margin-top:auto;border-top:1px solid #2a4037;padding-top:18px}.linkbtn{background:none;border:0;color:#d2a84a;padding:8px 0;cursor:pointer}.main{margin-left:274px;padding:22px 32px 60px;max-width:1600px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.top h1{margin:0;font-size:18px}.top p{margin:4px 0 0;color:#68766f}.pill{background:white;border:1px solid #e2e8e4;padding:10px 14px;border-radius:999px}.hero{background:linear-gradient(135deg,#17382b,#10251d);color:white;border-radius:26px;padding:30px;margin-bottom:18px}.hero h2{font-size:28px;margin:7px 0}.hero p{margin:0;color:#c7d3ce}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;color:#b88a28}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat{background:white;border:1px solid #e1e7e3;border-radius:18px;padding:20px}.stat span{display:block;color:#738078;font-size:12px}.stat strong{display:block;font-size:25px;margin-top:8px}.panel{background:white;border:1px solid #e1e7e3;border-radius:20px;padding:20px;margin-bottom:18px}.panel h3{margin-top:0}.panel-head,.pagehead,.final{display:flex;justify-content:space-between;gap:16px;align-items:center}.pagehead{margin:12px 0 20px}.pagehead h2{margin:5px 0;font-size:28px}.pagehead p,.panel-head p{margin:0;color:#748078}.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.btn.primary{background:#17382b;color:white}.btn.ghost{background:#f3f6f4;border:1px solid #dde5e0}.btn.sm{padding:8px 11px;font-size:12px}.wide{width:100%}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7a877f;border-bottom:1px solid #e6ebe8;padding:12px 10px}td{padding:14px 10px;border-bottom:1px solid #edf0ee;font-size:14px}.badge{display:inline-block;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:800}.badge.draft{background:#eef1ef}.badge.diajukan{background:#fff1c9;color:#765300}.badge.diterima{background:#dff3e7;color:#17603a}.badge.ditolak{background:#fde3e0;color:#8c2d24}.auth{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 15%,#e5eadc,transparent 35%),#10251d}.login-card{width:min(430px,92vw);background:white;border-radius:28px;padding:34px;box-shadow:0 35px 80px rgba(0,0,0,.28)}.login-brand{display:flex;gap:14px;align-items:center;margin-bottom:24px}.login-brand h2,.login-brand p{margin:0}.login-brand p{color:#718079;margin-top:4px}label{display:grid;gap:7px;font-size:13px;font-weight:700;margin-bottom:14px}input,textarea,select{width:100%;border:1px solid #dce4df;border-radius:11px;padding:11px 12px;background:white;font:inherit;color:inherit}input:focus,textarea:focus,select:focus{outline:2px solid #d9c083;border-color:#b88a28}.muted{color:#7b8881}.alert{padding:13px 15px;border-radius:13px;margin-bottom:16px}.alert.success{background:#e4f4e9;color:#185c38}.alert.danger{background:#fee7e4;color:#8c2d24}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.stepbar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}.stepbar span{background:#e9eeeb;padding:10px;border-radius:10px;text-align:center;font-size:12px;font-weight:700}.stepbar .active{background:#17382b;color:white}.stepbar .done{background:#dff3e7;color:#17603a}.stepbar .done:before{content:"✓ ";font-weight:900}.member{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #edf0ee}.member span{display:block;color:#748078;font-size:12px;margin-top:4px}.icon-danger{border:0;background:#fee8e6;color:#98342c;border-radius:9px;padding:7px 9px;cursor:pointer}.searchbox{background:#f7f9f7;border-radius:14px;padding:15px;margin-top:15px}.results{display:grid;gap:8px}.result{display:flex;justify-content:space-between;align-items:center;background:white;border:1px solid #e1e7e3;padding:10px;border-radius:11px}.result small{display:block;color:#748078}.docgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.doccard{border:1px dashed #cbd7d0;border-radius:15px;padding:16px}.doccard form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}.twocol{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);gap:18px}.sticky{position:sticky;top:20px;align-self:start}.prose{line-height:1.7;color:#46544c}.filelink{display:flex;flex-direction:column;padding:12px;border:1px solid #e1e7e3;border-radius:12px;margin-bottom:9px}.filelink span{font-size:12px;color:#748078;margin-top:4px}.filters{display:flex;gap:10px;align-items:end;margin-bottom:16px}.filters input,.filters select{max-width:220px}.template-form{border-bottom:1px solid #edf0ee;padding:12px 0}.check{display:flex;grid-template-columns:auto 1fr;align-items:center}.check input{width:auto}hr{border:0;border-top:1px solid #edf0ee;margin:18px 0}@media(max-width:980px){.sidebar{position:static;width:auto;margin:12px}.main{margin-left:0;padding:14px}.sidebar nav{grid-template-columns:repeat(2,1fr);margin-top:18px}.sideuser{margin-top:18px}.stats{grid-template-columns:repeat(2,1fr)}.twocol{grid-template-columns:1fr}.sticky{position:static}}@media(max-width:640px){.stats,.grid2,.docgrid,.stepbar{grid-template-columns:1fr}.top,.pagehead,.panel-head,.final{align-items:flex-start;flex-direction:column}.sidebar nav{grid-template-columns:1fr 1fr}.filters{flex-direction:column;align-items:stretch}.filters input,.filters select{max-width:none}}.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:#87928c;font-size:12px}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:#e5eae7;flex:1}.auth-note{display:block;text-align:center;margin-top:12px}.register-card{width:min(500px,92vw)}.register-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}.register-steps span{padding:9px 10px;border-radius:10px;background:#eef2ef;color:#7b8881;text-align:center;font-size:11px;font-weight:800}.register-steps span.active{background:#17382b;color:#fff}.auth-intro{padding:14px 15px;background:#f7f9f7;border:1px solid #e4e9e6;border-radius:14px;margin-bottom:16px}.auth-intro p{margin:5px 0 0;color:#738078;font-size:13px;line-height:1.5}.verified-box{display:flex;gap:13px;align-items:flex-start;background:#e8f4ec;border:1px solid #cee5d6;border-radius:16px;padding:15px;margin-bottom:18px}.verified-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#1e6a43;color:#fff;font-weight:900;flex:none}.verified-box small{display:block;color:#3c7755;font-size:10px;font-weight:900;letter-spacing:.08em}.verified-box strong{display:block;margin-top:3px}.verified-box p{margin:3px 0 0;color:#5c7164;font-size:12px}.password-hint{font-size:12px;color:#78857e;margin:-4px 0 14px;line-height:1.5}.inline-reset{text-align:center}.linkbtn.dark{color:#315344}

/* navigation icons + active state */
.sidebar nav a{display:flex;align-items:center;gap:10px}.sidebar nav a.active{background:#d2a84a;color:#10251d;font-weight:800}.sidebar nav a.active .navicon{opacity:1}.navicon{width:18px;height:18px;flex:none;opacity:.85}.logout-btn{display:flex;align-items:center;gap:8px}.logout-btn .navicon{width:16px;height:16px}.btn-symbol{display:inline-flex;align-items:center;justify-content:center;margin-right:7px;font-weight:900}

/* file upload */
.upload-note{margin-top:-5px;margin-bottom:10px}.upload-form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(145px,1fr) auto;gap:10px;align-items:center}.upload-form-row small{display:block;color:#7b8881;margin-top:3px}.file-picker{display:flex!important;margin:0!important;min-width:0}.file-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.file-picker span{width:100%;min-height:39px;display:flex;align-items:center;padding:9px 11px;border:1px dashed #becbc4;background:#f7f9f7;border-radius:10px;color:#526159;font-size:12px;font-weight:700;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-picker:hover span{border-color:#b88a28;background:#fffaf0}.document-upload-row{display:flex;gap:8px;align-items:center}.document-upload-row .file-picker{flex:1}.upload-progress{margin-top:10px}.upload-progress-track{height:7px;background:#e7ece9;border-radius:999px;overflow:hidden}.upload-progress-track span{display:block;width:0;height:100%;background:#1f6d48;border-radius:inherit;transition:width .15s linear}.upload-progress-meta{display:flex;justify-content:space-between;gap:12px;margin-top:6px}.upload-progress-meta small{color:#65736b;line-height:1.35}.upload-progress-meta strong{font-size:11px;color:#1f6d48}.ajax-upload-form.upload-error .upload-progress-track span{background:#b63c31}.ajax-upload-form.upload-error .upload-progress-meta strong,.ajax-upload-form.upload-error .upload-status{color:#9a332a}.ajax-upload-form.upload-success .upload-progress-track span{background:#1e754b}.upload-spinner{width:13px;height:13px;margin-right:7px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:uploadSpin .65s linear infinite}@keyframes uploadSpin{to{transform:rotate(360deg)}}button:disabled{opacity:.65;cursor:not-allowed}
@media(max-width:720px){.upload-form-row{grid-template-columns:1fr}.document-upload-row{align-items:stretch;flex-direction:column}.document-upload-row .btn{width:100%}}

.btn.danger{background:#a9342b;color:#fff}.page-actions{display:flex;gap:10px;align-items:center}.page-actions form{margin:0}.upload-form-row{grid-template-columns:minmax(0,1fr) minmax(180px,1fr)}@media(max-width:720px){.page-actions{width:100%;justify-content:space-between;flex-wrap:wrap}}

.table-actions{display:flex;gap:7px;align-items:center}.table-actions form{margin:0}

.brandmark-logo{overflow:hidden;background:#fff;padding:4px}.brandmark-logo img{width:100%;height:100%;object-fit:contain;display:block}.branding-panel{margin-bottom:18px}.logo-preview{width:72px;height:72px;border:1px solid #e1e7e3;background:#f7f9f7;border-radius:18px;display:grid;place-items:center;overflow:hidden;flex:none}.logo-preview img{width:100%;height:100%;object-fit:contain;padding:6px}.logo-preview .brandmark{width:48px;height:48px}.logo-upload-form{margin-top:18px;padding-top:16px;border-top:1px solid #edf0ee}

/* Safe application-logo display */
.sidebar .brandmark-logo{
    width:46px;
    height:46px;
    min-width:46px;
    max-width:46px;
    min-height:46px;
    max-height:46px;
    padding:4px;
    overflow:hidden;
    border-radius:12px;
    background:#fff;
    flex:0 0 46px;
}
.sidebar .brandmark-logo img{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
}

/* Login: logo centered above application name */
.login-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:10px;
    margin-bottom:24px;
}
.login-brand .brandmark-logo{
    width:110px;
    height:110px;
    min-width:110px;
    min-height:110px;
    max-width:110px;
    max-height:110px;
    padding:6px;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    flex:none;
}
.login-brand .brandmark-logo img{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
}
.login-brand h2,
.login-brand p{
    text-align:center;
}

/* Admin setting preview cannot expand the layout */
.branding-panel .logo-preview{
    width:180px;
    height:180px;
    max-width:180px;
    max-height:180px;
    margin-left:auto;
    overflow:hidden;
    flex:0 0 180px;
}
.branding-panel .logo-preview img{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
    padding:10px;
    display:block;
}
@media(max-width:640px){
    .branding-panel .logo-preview{
        width:130px;
        height:130px;
        max-width:130px;
        max-height:130px;
        flex-basis:130px;
    }
    .login-brand .brandmark-logo{
        width:92px;
        height:92px;
        min-width:92px;
        min-height:92px;
        max-width:92px;
        max-height:92px;
    }
}

.pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;margin-top:8px;border-top:1px solid #edf0ee;flex-wrap:wrap}.pagination-info{font-size:12px;color:#748078}.pagination-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.page-btn{min-width:34px;height:34px;padding:0 10px;border:1px solid #dce4df;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#fff;font-size:12px;font-weight:800;color:#385047}.page-btn:hover{border-color:#b88a28;background:#fbf8ef}.page-btn.active{background:#17382b;border-color:#17382b;color:#fff}.page-dots{color:#89958f;padding:0 2px}@media(max-width:640px){.pagination{align-items:flex-start;flex-direction:column}.pagination-links{width:100%}.page-btn{flex:0 0 auto}}

.app-footer{margin-top:28px;padding:18px 4px 4px;text-align:center;color:#7b8881;font-size:12px}.app-footer a{color:#315344;font-weight:700}.app-footer a:hover{text-decoration:underline}.footer-sep{margin:0 6px}

.stats{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.stat-rejected{border-color:#f0d0cc}.stat-rejected span,.stat-rejected strong{color:#8c2d24}

/* Dashboard stats: 5 card ringkas dalam satu baris desktop */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:18px}
.stat{min-width:0;padding:14px 16px;border-radius:16px}
.stat span{font-size:11px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat strong{font-size:21px;line-height:1.15;margin-top:6px;white-space:nowrap}
@media(max-width:1100px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:12px}.stat strong{font-size:18px}.stat span{white-space:normal}}
/* =========================
   SMTP TEST CARD
========================= */

.smtp-test-form{
    margin-top: 18px;
    max-width: 760px;
}

.smtp-test-row{
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.smtp-test-field{
    flex: 1;
    min-width: 0;
}

.smtp-test-field label{
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #24352f;
}

.smtp-test-field input{
    width: 100%;
    height: 46px;
    padding: 0 15px;
    border: 1px solid #d9e1dc;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    outline: none;
    transition: .2s ease;
}

.smtp-test-field input:focus{
    border-color: #174c3b;
    box-shadow: 0 0 0 3px rgba(23,76,59,.08);
}

.smtp-test-submit{
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: #143f32;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: .2s ease;
}

.smtp-test-submit:hover{
    transform: translateY(-1px);
    background: #0f3328;
}

@media (max-width: 700px){
    .smtp-test-form{
        max-width: 100%;
    }

    .smtp-test-row{
        display: block;
    }

    .smtp-test-submit{
        width: 100%;
        margin-top: 12px;
    }
}