/* Klaterior Customer Journey — UI baru, mandiri tanpa framework eksternal */
:root{--wf-bg:#f5f7fb;--wf-card:#fff;--wf-side:#15263f;--wf-text:#1c2c43;--wf-muted:#728198;--wf-border:#e5eaf2;--wf-accent:#3a69cc;--wf-accent-bg:#eef4ff;--wf-shadow:0 5px 24px rgba(27,45,78,.045);--wf-input:#fff;--wf-success:#16876e;--wf-red:#be4452}
:root[data-wf-theme="dark"]{--wf-bg:#101825;--wf-card:#1a2536;--wf-side:#0d1728;--wf-text:#ebf1fc;--wf-muted:#a0b0c6;--wf-border:#2e3b4f;--wf-accent:#89aefa;--wf-accent-bg:#243856;--wf-shadow:none;--wf-input:#151f30;--wf-success:#6dd8b6;--wf-red:#f2909f}
#wf-app,#wf-app *,#wf-modal-root,#wf-modal-root *{box-sizing:border-box}
#wf-app{font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.48;color:var(--wf-text);background:var(--wf-bg);min-height:100dvh}
#wf-app button,#wf-modal-root button,#wf-app input,#wf-app select,#wf-app textarea,#wf-modal-root input,#wf-modal-root select,#wf-modal-root textarea{font:inherit}
#wf-app button,#wf-modal-root button{cursor:pointer}#wf-app button:disabled,#wf-modal-root button:disabled{opacity:.5;cursor:not-allowed}
#wf-app h1,#wf-app h2,#wf-app h3,#wf-modal-root h2{color:var(--wf-text);line-height:1.23;margin:0;font-weight:750}
#wf-app h1{font-size:clamp(24px,2.1vw,32px);letter-spacing:-.9px}#wf-app h2,#wf-modal-root h2{font-size:18px}#wf-app h3{font-size:15px}
#wf-app p,#wf-modal-root p{margin:6px 0 0;color:var(--wf-muted)}
.wf-shell{display:flex;min-height:100dvh;width:100%;}.wf-sidebar{position:fixed;left:0;top:0;bottom:0;width:264px;background:var(--wf-side);color:#eaf2ff;display:flex;flex-direction:column;z-index:35;overflow-y:auto}.wf-main{margin-left:264px;min-width:0;flex:1;display:flex;flex-direction:column}
.wf-brand{min-height:91px;padding:24px 21px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #ffffff1b}.wf-brand-logo{width:41px;height:41px;border-radius:12px;object-fit:contain;background:#fff;padding:5px}.wf-brand b{font-size:17px;display:block;letter-spacing:-.2px}.wf-brand small{font-size:11px;color:#b4c4dd;display:block}.wf-hide-menu{margin-left:auto;border:0;background:none;color:#fff;font-size:24px;display:none}
.wf-nav{flex:1;padding:14px 10px 25px}.wf-section-title{font-size:10px;letter-spacing:1.7px;font-weight:750;color:#94a9c8;padding:20px 15px 10px}.wf-nav-item{width:100%;border:0;text-align:left;background:transparent;color:#c5d2e5;border-radius:10px;padding:10px 12px;min-height:44px;display:flex;align-items:center;gap:12px;transition:.15s ease}.wf-nav-item:hover{color:#fff;background:#ffffff15}.wf-nav-item.is-active{background:#4166a647;color:#fff}.wf-nav-symbol{font-size:21px;width:23px;text-align:center;line-height:1}.wf-stage-index{flex-shrink:0;width:27px;height:27px;border:1px solid var(--step-color);color:var(--step-color);background:#fff0;border-radius:9px;display:grid;place-items:center;font-weight:750;font-size:12px}.wf-nav-upcoming{font-size:12px;color:#8fa7c8}.wf-sidebar-foot{padding:15px;border-top:1px solid #ffffff1b}.wf-user-chip{display:flex;gap:10px;align-items:center;padding:5px 0 16px}.wf-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#5373ac;color:#fff;font-weight:800}.wf-user-chip div:nth-child(2){min-width:0}.wf-user-chip b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.wf-user-chip small{color:#a8bcd6;font-size:11px}.wf-logout{width:100%;border-color:#7685a3!important;color:#eaf2ff!important;background:transparent!important}
.wf-topbar{position:sticky;top:0;z-index:15;background:var(--wf-card);border-bottom:1px solid var(--wf-border);height:65px;display:flex;gap:14px;align-items:center;padding:0 29px;color:var(--wf-muted)}.wf-top-actions{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:12px}.wf-live-dot{height:8px;width:8px;background:#20ac86;border-radius:50%}.wf-icon{display:grid;place-items:center;border:1px solid var(--wf-border);background:var(--wf-card);border-radius:10px;color:var(--wf-text);min-width:36px;height:36px;font-size:19px}.wf-menu-button{background:transparent;border:0;color:var(--wf-text);font-size:21px;display:none}
.wf-content{padding:27px clamp(17px,2.5vw,38px) 45px;width:100%;max-width:1700px;margin:0 auto}.wf-page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 24px}.wf-page-head p{font-size:13px;margin-top:8px;max-width:850px}.wf-overline{color:var(--wf-accent);font-weight:800;font-size:10px;letter-spacing:2px;margin-bottom:8px}.wf-head-actions{display:flex;gap:8px;flex-shrink:0}.wf-primary,.wf-outline,.wf-danger{border:1px solid transparent;border-radius:10px;padding:10px 15px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap}.wf-primary{background:#336bd2;border-color:#336bd2;color:#fff!important}.wf-primary:hover{background:#2355b3}.wf-outline{background:var(--wf-card);border-color:var(--wf-border);color:var(--wf-text);box-shadow:var(--wf-shadow)}.wf-outline:hover{border-color:#7794cc}.wf-small{padding:7px 11px;font-size:12px}.wf-text-btn{background:transparent;border:0;color:var(--wf-accent);font-weight:700}.wf-danger{background:#c44754;color:#fff;border:0}.wf-danger-text{background:none;color:var(--wf-red);border:0;font-weight:700}.wf-muted{color:var(--wf-muted);font-size:13px}
.wf-panel{background:var(--wf-card);border:1px solid var(--wf-border);border-radius:16px;box-shadow:var(--wf-shadow);padding:21px;margin-bottom:18px;min-width:0}.wf-panel-head{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:20px}.wf-panel-head p{font-size:12px}.wf-panel h3{margin-bottom:15px}.wf-panel-head h3{margin:0}.wf-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:20px}.wf-stat{background:var(--wf-card);border:1px solid var(--wf-border);box-shadow:var(--wf-shadow);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:9px}.wf-stat span{font-weight:650;color:var(--wf-muted);font-size:13px}.wf-stat strong{font-size:35px;line-height:1;letter-spacing:-2px}.wf-stat small{font-size:11px;color:var(--wf-muted)}.wf-duo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px}.wf-funnel{display:flex;flex-direction:column;gap:7px}.wf-funnel-row{display:grid;grid-template-columns:10px minmax(100px,1fr) minmax(40px,95px) 29px;align-items:center;gap:11px;background:transparent;border:1px solid transparent;border-radius:10px;padding:10px;text-align:left;color:var(--wf-text)}.wf-funnel-row:hover{background:var(--wf-accent-bg)}.wf-funnel-row b{font-weight:650;font-size:12px}.wf-funnel-row strong{text-align:right}.wf-dot{width:9px;height:9px;border-radius:50%}.wf-progress{height:6px;border-radius:8px;background:var(--wf-border);overflow:hidden}.wf-progress:before{content:"";display:block;width:var(--fill);height:100%;border-radius:8px;background:var(--step-color)}.wf-latest-row{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:8px;background:transparent;border:0;border-bottom:1px solid var(--wf-border);padding:11px 0;color:var(--wf-text)}.wf-latest-row:last-child{border-bottom:0}.wf-latest-row b,.wf-mini-case b{display:block}.wf-latest-row small,.wf-mini-case small{display:block;font-size:11px;color:var(--wf-muted);margin-top:3px}.wf-helper{border:1px dashed #aebbd0;padding:14px 17px;border-radius:12px;margin-top:14px;font-size:13px;color:var(--wf-muted);background:var(--wf-accent-bg)}
.wf-filterbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:18px}.wf-filterbar>input{flex:2 1 210px}.wf-filterbar>select{flex:1 1 140px}.wf-input{width:100%;min-width:0;max-width:100%;border:1px solid var(--wf-border);border-radius:10px;background:var(--wf-input);color:var(--wf-text);padding:10px 12px;outline:none;min-height:41px}.wf-input:focus{border-color:var(--wf-accent);box-shadow:0 0 0 3px #597ecd19}.wf-input:disabled{background:var(--wf-bg);opacity:.85}.wf-input::placeholder{color:#96a5ba}.wf-filterbar label{font-size:12px;color:var(--wf-muted);min-width:190px}.wf-filterbar label select{margin-top:6px}
.wf-table-scroll{width:100%;overflow-x:auto}.wf-table{border-collapse:collapse;width:100%;font-size:13px;min-width:690px}.wf-table th{text-align:left;color:var(--wf-muted);background:var(--wf-bg);font-weight:750;font-size:11px;letter-spacing:.2px;padding:13px 12px}.wf-table td{border-bottom:1px solid var(--wf-border);padding:14px 12px;color:var(--wf-text);vertical-align:middle}.wf-table tr:last-child td{border-bottom:none}.wf-table td strong,.wf-table td small{display:block}.wf-table td small{font-size:11px;color:var(--wf-muted);margin-top:4px}.wf-table .wf-empty{text-align:center;padding:35px}.wf-badge{display:inline-flex;gap:3px;padding:5px 8px;border:1px solid var(--step-color,#889aac);color:var(--step-color,#889aac);border-radius:100px;background:var(--wf-card);font-size:10px;font-weight:750;white-space:nowrap}.wf-pill{padding:5px 9px;border-radius:6px;font-size:11px;font-weight:750;white-space:nowrap}.wf-pill.active{color:#078065;background:#e9f8f1}.wf-pill.closed{color:#b44858;background:#fff0f2}.wf-pill.pending{color:#975f13;background:#fff4e2}.wf-pagination{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px;font-size:12px;color:var(--wf-muted)}.wf-pagination>div{display:flex;align-items:center;gap:11px}.wf-pagination b{color:var(--wf-text)}
.wf-detail-layout{grid-template-columns:minmax(0,1.7fr) minmax(250px,.85fr);align-items:start}.wf-sidepanels{min-width:0}.wf-stepper{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:0 0 20px}.wf-step-tab{border:1px solid var(--wf-border);background:var(--wf-card);border-radius:12px;padding:12px 9px;display:flex;gap:8px;align-items:center;text-align:left;color:var(--wf-text);min-width:0}.wf-step-tab>span{height:27px;width:27px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--wf-accent-bg);color:var(--wf-accent);font-size:12px;font-weight:750}.wf-step-tab b,.wf-step-tab small{display:block;overflow:hidden;text-overflow:ellipsis}.wf-step-tab b{font-size:11px;line-height:1.3}.wf-step-tab small{font-size:9px;color:var(--wf-muted);margin-top:3px}.wf-step-tab.selected{outline:2px solid var(--wf-accent);outline-offset:-2px}.wf-step-tab.done>span{background:#d9f4e7;color:#128566}
.wf-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.wf-field label,#wf-modal-root label{display:block;font-size:12px;font-weight:700;margin-bottom:7px;color:var(--wf-text)}.wf-field small{font-size:11px;color:var(--wf-muted)}.wf-field .wf-input{font-size:13px}.wf-field textarea{resize:vertical;min-height:82px}.wf-full{grid-column:1/-1}.wf-required{color:var(--wf-red)}.wf-form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px;border-top:1px solid var(--wf-border);padding-top:18px}.wf-form-actions>.wf-danger-text{margin-left:auto}.wf-auto-check{border:1px dashed #70b89e;border-radius:11px;background:var(--wf-accent-bg);padding:13px;font-size:13px;color:var(--wf-text)}.wf-auto-check small{display:block;margin-top:6px}.wf-checkbox-label{display:flex!important;align-items:center;gap:12px;padding:13px;border-radius:10px;background:var(--wf-bg);cursor:pointer}.wf-checkbox-label input{width:18px;height:18px;accent-color:#316bbd}.wf-file-row{display:flex;justify-content:space-between;gap:12px;padding:7px 11px;border-radius:8px;background:var(--wf-bg);margin-bottom:6px;font-size:12px;align-items:center}.wf-file-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wf-file-row a{color:var(--wf-accent)}.wf-file-row small{margin-left:auto;white-space:nowrap}.wf-remove-file{background:transparent;border:0;color:var(--wf-red);font-size:20px}.wf-upload-field input[type=file]{margin-top:10px}.wf-upload-field>small{display:block;margin-top:5px}.wf-upload-progress{background:var(--wf-accent-bg);border-radius:10px;padding:9px;margin-top:9px;font-size:12px;color:var(--wf-accent)}.wf-revision-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wf-revision{display:flex;align-items:center;gap:7px}.wf-revision>span{font-size:11px;color:var(--wf-muted);width:15px}
.wf-output-list{display:flex;flex-direction:column;gap:10px}.wf-output-list>div{display:flex;gap:9px;align-items:start;font-size:12px;color:var(--wf-text)}.wf-output-list span{color:var(--wf-success);font-weight:800}.wf-doc-buttons{border-top:1px solid var(--wf-border);margin-top:18px;padding-top:12px;display:flex;flex-direction:column;gap:8px}.wf-doc-buttons a{font-size:12px}.wf-kv{display:grid;grid-template-columns:1fr auto;gap:12px;border-top:1px solid var(--wf-border);padding-top:15px;font-size:12px}.wf-kv span{color:var(--wf-muted)}.wf-kv b{text-align:right;max-width:165px;word-break:break-word}.wf-history{display:flex;flex-direction:column;gap:15px}.wf-history>div{border-left:2px solid var(--wf-border);padding-left:12px;position:relative;color:var(--wf-muted);font-size:12px}.wf-history b{color:var(--wf-text)}.wf-history small{display:block;margin-top:3px}.wf-history-dot{position:absolute;left:-5px;top:4px;height:8px;width:8px;border-radius:50%;background:var(--wf-accent)}
.wf-chart{padding:8px 0 14px}.wf-bar-line{display:grid;grid-template-columns:100px minmax(0,1fr) 32px;gap:14px;margin:11px 0;align-items:center;font-size:12px}.wf-bar-track{border-radius:6px;background:var(--wf-bg);height:15px;overflow:hidden}.wf-bar-track span{display:block;height:100%;background:linear-gradient(90deg,#4779d5,#58b7b0);border-radius:6px}.wf-bar-line b{text-align:right}.wf-rep-total{margin-left:auto}.wf-rep-total small{display:block;color:var(--wf-muted);font-size:11px}.wf-rep-total b{font-size:22px}.wf-upcoming-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.wf-upcoming-item{background:var(--wf-bg);border:1px dashed var(--wf-border);border-radius:12px;padding:16px}.wf-upcoming-item span{color:var(--wf-accent);font-weight:800}.wf-upcoming-item b{display:block;margin:9px 0 5px}.wf-upcoming-item small{color:var(--wf-muted)}
.wf-loading{display:flex;align-items:center;justify-content:center;min-height:270px;color:var(--wf-muted);gap:10px}.wf-spinner{display:inline-block;width:20px;height:20px;border:3px solid var(--wf-border);border-top-color:var(--wf-accent);border-radius:50%;animation:wf-spin .8s linear infinite}@keyframes wf-spin{to{transform:rotate(360deg)}}.wf-empty{text-align:center;color:var(--wf-muted);padding:28px}.wf-pad{padding:15px}.wf-alert{position:fixed;right:22px;top:75px;z-index:200;background:#e5f6f0;color:#116b54;padding:13px 18px;border-radius:12px;box-shadow:0 8px 30px #121f3721;max-width:min(480px,calc(100vw - 40px));font-size:13px;font-weight:650}.wf-alert.bad{background:#fde9e9;color:#aa263d}.wf-hero{border-radius:18px;padding:28px 34px;margin-bottom:20px;background:var(--wf-side);color:#fff}.wf-hero h1{color:#fff!important}.wf-hero p{color:#cad7eb!important}.wf-setup{max-width:670px;text-align:center;margin:0 auto}.wf-big-icon{font-size:50px;color:var(--wf-accent)}.wf-setup p{margin:12px auto 20px;max-width:500px}
.wf-overlay{position:fixed;inset:0;z-index:30;background:#0b1931aa}.wf-modal-overlay{position:fixed;z-index:100;inset:0;background:#0a1527a8;display:flex;align-items:center;justify-content:center;padding:18px}.wf-modal{width:min(510px,100%);max-height:92vh;overflow-y:auto;background:var(--wf-card);color:var(--wf-text);padding:25px;border:1px solid var(--wf-border);border-radius:17px;box-shadow:0 15px 60px #0005}.wf-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.wf-modal form{display:flex;flex-direction:column;gap:5px}.wf-modal .wf-input{margin-bottom:13px}.wf-modal .wf-form-actions{margin-top:5px}.wf-mini-case{display:block;text-align:left;width:100%;border:0;border-bottom:1px solid var(--wf-border);padding:8px;background:none;color:var(--wf-text)}
@media(max-width:1250px){.wf-stat-grid{grid-template-columns:repeat(2,1fr)}.wf-stepper{grid-template-columns:repeat(3,minmax(0,1fr))}.wf-duo{grid-template-columns:1fr}.wf-detail-layout{grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr)}}
@media(max-width:900px){.wf-sidebar{transform:translateX(-110%);transition:transform .2s ease;box-shadow:8px 0 30px #0002}.wf-sidebar.open{transform:translateX(0)}.wf-hide-menu,.wf-menu-button{display:block}.wf-main{margin-left:0}.wf-stepper{grid-template-columns:repeat(3,minmax(0,1fr))}.wf-detail-layout{grid-template-columns:1fr}.wf-topbar{padding:0 18px}}
@media(max-width:640px){.wf-content{padding:20px 12px 32px}.wf-topbar{height:60px;padding:0 12px}.wf-online-label{display:none}.wf-page-head{align-items:stretch;flex-direction:column}.wf-page-head h1{font-size:25px}.wf-head-actions>*{width:100%}.wf-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.wf-stat{padding:16px 12px}.wf-stat strong{font-size:30px}.wf-panel{padding:15px 12px;border-radius:13px}.wf-funnel-row{grid-template-columns:9px minmax(60px,1fr) 42px 20px;gap:6px;padding:10px 4px}.wf-funnel-row b{font-size:11px}.wf-stepper{display:flex;overflow-x:auto;gap:8px;padding:2px 2px 7px;scroll-snap-type:x mandatory}.wf-step-tab{min-width:145px;flex:0 0 145px;scroll-snap-align:start}.wf-fields{grid-template-columns:1fr}.wf-revision-grid{grid-template-columns:1fr}.wf-filterbar>*{flex:1 1 100%!important}.wf-pagination{flex-direction:column;align-items:stretch}.wf-pagination>div{justify-content:space-between}.wf-bar-line{grid-template-columns:75px 1fr 25px;gap:8px;font-size:11px}.wf-upcoming-grid{grid-template-columns:repeat(2,1fr)}.wf-panel-head{flex-wrap:wrap}.wf-panel-head .wf-badge{white-space:normal}.wf-form-actions{align-items:stretch}.wf-form-actions>*{flex:1 1 150px}.wf-form-actions>.wf-danger-text{margin-left:0}.wf-kv{grid-template-columns:1fr 1fr}}
.wf-action-inline{display:flex;gap:5px;flex-wrap:wrap}.wf-rule{border:0;border-top:1px solid var(--wf-border);margin:20px 0}.wf-temp-pass{font:700 24px ui-monospace,Menlo,monospace;letter-spacing:2px;padding:17px;border:1px dashed var(--wf-accent);border-radius:10px;margin-top:15px;user-select:all;text-align:center}

/* Sketsa tahap 3–4: hasil proses dan approval */
.kl-approval-summary{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:15px 17px;margin:12px 0 17px;border:1px solid var(--wf-border,#dce1ed);border-radius:12px;background:var(--wf-bg,#f6f7fb)}
.kl-approval-summary strong{font-size:clamp(21px,2.7vw,30px);font-variant-numeric:tabular-nums}
.kl-approval-summary small{font-size:12px;color:var(--wf-muted,#657284)}
.kl-stage-output{display:grid;grid-template-columns:minmax(100px,40%) minmax(0,1fr);gap:9px 12px;margin:8px 0 18px;font-size:12px}
.kl-stage-output b{font-weight:700}.kl-stage-output span{overflow-wrap:anywhere;white-space:pre-wrap;color:var(--wf-muted,#647183)}