:root{--navy:#062f65;--navy2:#08437f;--blue:#176be8;--bg:#f7f9fc;--text:#102342;--muted:#748198;--line:#e4eaf2;--surface:#fff;--green:#25a75a;--orange:#ff9028;--purple:#6737c8;--red:#e6525d}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}button,input,select{font:inherit}button,a{cursor:pointer}.hidden{display:none!important}.muted{color:var(--muted)}.center{text-align:center}.small{font-size:11px}.between{display:flex;justify-content:space-between;align-items:center}.full{width:100%}.primary{border:0;background:linear-gradient(90deg,#1749cc,#267bf4);color:#fff;border-radius:8px;padding:12px 16px;font-weight:700}.login-screen{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-left{display:grid;place-items:center;padding:40px;background:linear-gradient(135deg,#1546c6,#2479f4)}.login-card{width:min(430px,100%);background:#fff;padding:38px;border-radius:18px;box-shadow:0 24px 60px rgba(6,31,75,.2)}.brand{display:flex;align-items:center;gap:9px;font-weight:700}.login-brand{justify-content:center;font-size:21px;margin-bottom:34px}.brandmark{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#16b7e9,#2759e7)}.login-card h1{text-align:center;font-size:24px;margin:0 0 7px}.login-card label{display:block;font-size:10px;font-weight:700;margin:16px 0 6px}.login-card input{width:100%;height:44px;border:1px solid #dce3ee;border-radius:8px;padding:0 12px;outline:none}.password{display:flex;border:1px solid #dce3ee;border-radius:8px}.password input{border:0}.password button{border:0;background:transparent}.check{font-weight:400!important;margin:14px 0!important;display:flex!important;gap:6px}.check input{width:auto;height:auto}.login-card a{color:#176be8}.login-right{position:relative;display:grid;place-content:center;text-align:center;padding:50px;color:#fff;background:linear-gradient(135deg,#17386c,#2e6da3)}.login-right p{max-width:560px;line-height:1.7;font-size:13px}.slide-count{position:absolute;top:25px;left:25px;background:#17345f;padding:7px 12px;border-radius:20px;font-size:11px}.hero-icon{margin:0 auto 20px;width:55px;height:55px;border-radius:12px;background:#fff;color:#176be8;display:grid;place-items:center;font-size:26px}.dots{position:absolute;bottom:25px;left:0;right:0}.modal{position:fixed;inset:0;background:rgba(4,18,43,.55);display:grid;place-items:center;z-index:100}.modal-card{position:relative;width:min(430px,90vw);background:#fff;border-radius:16px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:24px}.otp-card h2{text-align:center}.small-icon{width:48px;height:48px}.otp-inputs{display:flex;gap:8px;justify-content:center;margin:25px 0}.otp-inputs input{width:45px;height:50px;text-align:center;font-size:20px;border:1px solid #d9e1ec;border-radius:9px}.app{min-height:100vh;display:grid;grid-template-columns:270px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--navy),#052958);color:#fff;padding:17px 13px;overflow:auto}.sidebar .brand{font-size:16px;padding:0 4px 20px}.sidebar .brandmark{flex:0 0 38px}.sidebar .brand button{margin-left:auto;border:0;background:none;color:#fff}.caption{font-size:9px;opacity:.5;padding:8px}.nav-item,.nav-parent{border:0;background:transparent;color:#fff;width:100%;padding:10px;border-radius:7px;text-align:left;display:flex;gap:9px;align-items:center;font-size:13px}.nav-item:hover,.nav-parent:hover,.nav-item.active{background:rgba(27,112,232,.72)}.nav-parent .arrow{margin-left:auto}.submenu{padding:2px 0 6px 27px}.submenu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#dce8f8;padding:7px;border-radius:6px;font-size:11px}.submenu button:hover{background:rgba(255,255,255,.08)}.side-profile{margin-top:25px;padding:10px;background:rgba(255,255,255,.08);border-radius:9px;display:flex;align-items:center;gap:8px}.avatar{width:36px;height:36px;border-radius:50%;background:#dfe5ee;color:#687487;display:grid;place-items:center;font-size:11px;font-weight:700}.side-profile-text{flex:1;font-size:11px}.side-profile small{display:block;opacity:.65;margin-top:3px;font-size:8px}.workspace{min-width:0;position:relative}.workspace header{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 28px;position:sticky;top:0;z-index:20}.toplinks{display:flex;gap:24px;font-size:12px;font-weight:600}.toplinks a:hover{color:var(--blue)}.head-actions{display:flex;align-items:center;gap:11px}.head-actions select{height:36px;border:1px solid #dbe2ec;border-radius:8px;padding:0 8px}.bell{position:relative;border:0;background:transparent;font-size:20px}.bell i{position:absolute;top:-6px;right:-5px;background:#f04438;color:#fff;border-radius:10px;padding:1px 4px;font-size:8px;font-style:normal}.profile-btn{border:0;background:transparent;display:flex;align-items:center;gap:7px;font-size:10px}.profile-btn span{text-align:left}.profile-btn b{display:block;font-size:11px}.floating-panel{position:fixed;right:24px;top:62px;width:310px;background:#fff;border:1px solid var(--line);box-shadow:0 15px 45px rgba(20,50,90,.15);border-radius:12px;padding:15px;z-index:50}.floating-panel h3{margin:0 0 12px}.notice{padding:10px 0;border-top:1px solid var(--line);font-size:11px}.notice small{display:block;color:var(--muted);margin-top:4px}.profile-panel{width:220px}.profile-panel small{display:block;color:var(--muted);margin:4px 0}.profile-panel button{display:block;width:100%;border:0;background:none;text-align:left;padding:8px}.workspace main{padding:27px 30px 45px;min-height:calc(100vh - 110px)}.title h1{margin:0;font-size:24px}.title p{margin:7px 0 24px;color:var(--muted);font-size:12px}.toolbar{display:flex;justify-content:space-between;gap:10px;margin:16px 0}.search{height:38px;min-width:260px;border:1px solid var(--line);border-radius:8px;padding:0 11px}.btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 12px;font-size:11px}.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}.cards{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:16px}.hub-card,.panel,.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px}.hub-card{min-height:205px;display:flex;flex-direction:column}.round-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:20px;margin-bottom:13px}.i1{background:#0789dc}.i2{background:var(--purple)}.i3{background:var(--green)}.i4{background:var(--orange)}.i5{background:var(--red)}.hub-card h3{font-size:13px;margin:0 0 8px}.hub-card p{font-size:10px;line-height:1.55;color:var(--muted);flex:1}.open{border:0;background:#edf4ff;color:#1462dc;border-radius:7px;padding:9px;text-align:left;font-size:10px;font-weight:600}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat small{color:var(--muted)}.stat b{display:block;font-size:23px;margin-top:7px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel h3{margin:0 0 14px;font-size:14px}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse;font-size:11px}th,td{padding:12px;border-bottom:1px solid #edf0f4;text-align:left}th{background:#f5f7fa;color:#617087;font-size:10px}.badge{display:inline-block;border-radius:20px;padding:4px 8px;background:#e9f8ef;color:#21844a;font-size:9px}.badge.warn{background:#fff4e6;color:#bd6b12}.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:16px}.tabs button{border:0;background:none;padding:10px 13px;font-size:11px}.tabs button.active{color:var(--blue);border-bottom:2px solid var(--blue);font-weight:700}.tree{font-size:11px;line-height:2}.tree div{padding-left:15px}.trustee-grid{display:grid;grid-template-columns:260px 1fr;gap:16px}.group-list button{width:100%;border:0;background:none;text-align:left;padding:10px;border-radius:7px}.group-list button.active{background:#edf4ff;color:#145fda}.check-row{display:flex;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid var(--line);font-size:11px}.switch{width:36px;height:20px;border-radius:20px;background:#d8dee8;position:relative}.switch.on{background:var(--blue)}.switch:after{content:"";position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:3px;left:3px}.switch.on:after{left:19px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field label{display:block;font-size:10px;font-weight:600;margin-bottom:5px}.field input,.field select{width:100%;height:38px;border:1px solid var(--line);border-radius:7px;padding:0 9px}.placeholder{padding:40px;text-align:center}.placeholder .round-icon{margin:0 auto 15px}footer{border-top:1px solid var(--line);padding:16px 30px;color:#8995a6;font-size:9px;display:flex;justify-content:space-between}.collapsed{grid-template-columns:78px 1fr}.collapsed .sidebar .brand span:not(.brandmark),.collapsed .caption,.collapsed .nav-item span.label,.collapsed .nav-parent span.label,.collapsed .nav-parent .arrow,.collapsed .submenu,.collapsed .side-profile-text,.collapsed .side-profile>span{display:none}.collapsed .sidebar .brand{justify-content:center}.collapsed .sidebar .brand button{position:absolute;top:65px}.collapsed .nav-item,.collapsed .nav-parent{justify-content:center}.collapsed .side-profile{justify-content:center}@media(max-width:1050px){.cards,.stats{grid-template-columns:repeat(2,1fr)}.toplinks{gap:10px}.toplinks a{font-size:10px}}@media(max-width:760px){.login-screen{grid-template-columns:1fr}.login-right{display:none}.app{grid-template-columns:1fr}.sidebar{display:none}.cards,.stats,.grid2,.trustee-grid,.form-grid{grid-template-columns:1fr}.toplinks a:not(:first-child){display:none}}
/* Brand image used by the main navigation */
.sidebar .brand-logo{height:62px;background:linear-gradient(180deg,#062f65,#052958);border-radius:10px;padding:4px 7px;gap:0;margin-bottom:12px;position:relative;overflow:visible;border:1px solid rgba(255,255,255,.08)}.sidebar .brand-logo img{width:100%;height:100%;object-fit:contain;display:block}.sidebar .brand-logo button{position:absolute;right:7px;top:7px;width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.12)!important;color:#fff;border:1px solid rgba(255,255,255,.14);z-index:3;line-height:1}.collapsed .sidebar .brand-logo{height:48px;padding:4px}.collapsed .sidebar .brand-logo img{object-fit:cover;object-position:left center;width:47px}.collapsed .sidebar .brand-logo button{top:10px;right:5px;width:28px;height:28px;background:rgba(6,47,101,.96)!important;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.22)}

/* =========================================================
   V1.3.2 NAVIGATION REFINEMENT
   - Previous compact sidebar width restored
   - New Batik Application Pro logo
   - Collapse control remains accessible
   - User Group selector typography reduced
   ========================================================= */
.app{grid-template-columns:250px 1fr}
.sidebar{padding:15px 12px}
.sidebar .brand-logo{
  height:58px;
  background:#061b36;
  border-radius:9px;
  padding:3px 5px;
  margin-bottom:11px;
  position:relative;
  overflow:visible;
  border:1px solid rgba(255,255,255,.08);
}
.sidebar .brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.sidebar .brand-logo button{
  position:absolute;
  right:5px;
  top:5px;
  width:27px;
  height:27px;
  border-radius:7px;
  background:rgba(255,255,255,.12)!important;
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  z-index:3;
  line-height:1;
}
.sidebar .brand-logo button:hover{
  background:rgba(255,255,255,.20)!important;
}
.collapsed{grid-template-columns:78px 1fr}
.collapsed .sidebar .brand-logo{
  height:48px;
  padding:3px;
}
.collapsed .sidebar .brand-logo img{
  object-fit:cover;
  object-position:left center;
  width:47px;
}
.collapsed .sidebar .brand-logo button{
  top:10px;
  right:4px;
  width:28px;
  height:28px;
  background:rgba(6,47,101,.96)!important;
  color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.group-list h3{font-size:12px}
.group-list button{
  font-size:10px;
  line-height:1.25;
  padding:8px 9px;
}
.group-list button.active{font-size:10px}
@media(max-width:760px){
  .app{grid-template-columns:1fr}
}

/* Form PDI */
.pdi-page{max-width:1440px;margin:0 auto}.pdi-panel{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:22px;margin:18px 0;box-shadow:0 2px 8px #0f172a08}.pdi-step{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}.pdi-step>span{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:#eaf0fb;color:#163d70;display:grid;place-items:center;font-weight:700}.pdi-step h2,.pdi-preview-toolbar h2{font-size:17px;margin:0 0 5px;color:#172b4d}.pdi-step p,.pdi-preview-toolbar p{font-size:12px;color:#64748b;margin:0}.pdi-employee-select{display:flex;align-items:end;gap:12px;max-width:780px}.pdi-employee-select label{display:block;font-size:12px;font-weight:600;color:#334155}.pdi-employee-select select{flex:1;min-width:0;height:38px;border:1px solid #cbd5e1;border-radius:6px;padding:0 10px;background:#fff;font-size:12px}.pdi-options-block{margin-top:26px;padding-top:22px;border-top:1px solid #e2e8f0}.pdi-option-toolbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;font-size:12px;color:#475569}.pdi-option-toolbar label{display:flex;gap:8px;align-items:center;font-weight:600}.pdi-option-toolbar input,.pdi-check-item input{accent-color:#173f70}.pdi-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pdi-check-item{display:flex;align-items:flex-start;gap:10px;border:1px solid #e2e8f0;border-radius:8px;padding:12px;cursor:pointer;min-height:70px}.pdi-check-item>input{margin-top:3px}.pdi-check-item span{display:grid;gap:4px}.pdi-check-item b{font-size:12px;color:#26364b}.pdi-check-item small{font-size:10px;line-height:1.4;color:#718096}.pdi-actions{display:flex;justify-content:flex-end;margin-top:16px}.pdi-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.pdi-doc-head{display:flex;justify-content:space-between;gap:20px;padding:22px 0;border-bottom:2px solid #183e70}.pdi-doc-label{font-size:10px;font-weight:700;letter-spacing:1.4px;color:#1b477d}.pdi-doc-head h1{font-size:24px;margin:7px 0;color:#172b4d}.pdi-doc-head p,.pdi-doc-date{font-size:11px;color:#64748b}.pdi-doc-section{margin-top:22px;break-inside:avoid}.pdi-doc-section h2{font-size:14px;color:#183e70;border-bottom:1px solid #dbe3ed;padding-bottom:8px}.pdi-doc-section table{width:100%;border-collapse:collapse;font-size:11px}.pdi-doc-section th,.pdi-doc-section td{padding:8px 10px;text-align:left;border-bottom:1px solid #edf0f4}.pdi-doc-section th{width:28%;color:#475569;font-weight:600;background:#f8fafc}.pdi-doc-section td{color:#1e293b}.pdi-doc-section table tr{break-inside:avoid}
@media(max-width:900px){.pdi-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pdi-employee-select{flex-wrap:wrap}.pdi-employee-select select{flex-basis:100%}}
@media(max-width:600px){.pdi-check-grid{grid-template-columns:1fr}.pdi-preview-toolbar,.pdi-doc-head{align-items:flex-start;flex-direction:column}.pdi-employee-select{align-items:stretch;flex-direction:column}}
@media print{body *{visibility:hidden!important}.pdi-panel#pdiPreviewPanel,.pdi-panel#pdiPreviewPanel *,.pdi-document,.pdi-document *{visibility:visible!important}.pdi-preview-toolbar,.employee-breadcrumb,.org-hero,.pdi-panel:first-of-type{display:none!important}.pdi-panel#pdiPreviewPanel{display:block!important;position:absolute;left:0;top:0;width:100%;border:0;box-shadow:none;padding:0;margin:0}.pdi-document{width:100%;color:#111}.pdi-doc-section h2{color:#111;border-color:#888}.pdi-doc-section th{background:#f3f3f3!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}@page{size:A4;margin:15mm}}

/* PDI V1.7.128: keep the dummy photo only at the upper-right of Employee Information. */
.pdi-employee-info-layout{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:18px;align-items:start}
.pdi-employee-info-photo{width:100px;height:120px;object-fit:cover;border:1px solid #dbe3ed;border-radius:6px;background:#f8fafc;justify-self:end;grid-column:2;grid-row:1}
.pdi-employee-info-layout>div{grid-column:1;grid-row:1;min-width:0}
.pdi-history-table-wrap{width:100%;overflow-x:auto;margin-top:8px}
.pdi-history-table{width:100%;border-collapse:collapse;font-size:10px;min-width:640px}
.pdi-history-table th,.pdi-history-table td{border:1px solid #d7dee8;padding:7px 8px;text-align:left;vertical-align:top}
.pdi-history-table th{background:#eef2f7;font-weight:700;white-space:nowrap}
.pdi-history-table td{background:#fff}
@media print{.pdi-employee-info-photo{width:92px;height:110px}.pdi-history-table{font-size:9px}.pdi-history-table tr{break-inside:avoid}}

 
/* PDI V1.7.129: stable photo placement and stronger document hierarchy */
.pdi-doc-head{align-items:flex-end;justify-content:space-between;gap:24px;padding:24px 0 18px;border-bottom:3px solid #183e70}
.pdi-doc-title-block{min-width:0}
.pdi-doc-label{font-size:11px;font-weight:800;letter-spacing:1.8px;color:#1b477d;margin-bottom:5px}
.pdi-doc-head h1{font-size:28px;line-height:1.2;font-weight:800;letter-spacing:.2px;margin:0;color:#172b4d}
.pdi-doc-head p{font-size:12px;font-weight:500;margin:7px 0 0;color:#64748b}
.pdi-doc-date{font-size:11px;white-space:nowrap;padding-bottom:2px}
.pdi-doc-section{margin-top:24px;break-inside:auto}
.pdi-doc-section h2{font-size:16px;line-height:1.3;font-weight:800;color:#183e70;border-bottom:2px solid #dbe3ed;padding:0 0 9px;margin:0 0 12px}
.pdi-employee-info-layout{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:20px;align-items:start;position:relative}
.pdi-employee-info-fields{min-width:0}
.pdi-employee-info-photo{display:block;width:108px;height:132px;object-fit:cover;object-position:center top;border:1px solid #cbd5e1;border-radius:4px;background:#f8fafc;justify-self:end;grid-column:2;grid-row:1;position:static;float:none;margin:0;max-width:100%;box-sizing:border-box}
.pdi-employee-info-layout>div{grid-column:1;grid-row:1;min-width:0}
.pdi-photo-note{font-size:11px;color:#64748b;font-style:italic;margin:0}
.pdi-history-table-wrap{width:100%;overflow-x:auto;margin-top:8px}
.pdi-history-table{width:100%;border-collapse:collapse;font-size:10px;min-width:640px}
.pdi-history-table th,.pdi-history-table td{border:1px solid #d7dee8;padding:7px 8px;text-align:left;vertical-align:top}
.pdi-history-table th{background:#eef2f7;font-weight:700;white-space:nowrap}
.pdi-history-table td{background:#fff}
@media(max-width:600px){.pdi-employee-info-layout{grid-template-columns:minmax(0,1fr) 88px;gap:10px}.pdi-employee-info-photo{width:84px;height:108px}.pdi-doc-head h1{font-size:22px}.pdi-doc-date{white-space:normal}}
@media print{.pdi-doc-head h1{font-size:24px}.pdi-doc-section h2{font-size:14px}.pdi-employee-info-photo{width:92px;height:112px;position:static}.pdi-history-table{font-size:9px}.pdi-history-table tr{break-inside:avoid}}