/* Ngerental — kerangka tampilan (menu samping) */
body.hasShell{background:#F4F6FA}
.sideNav{position:fixed;left:0;top:0;bottom:0;width:256px;background:#fff;border-right:1px solid #E8ECF3;display:flex;flex-direction:column;z-index:60;padding:14px 12px 10px;box-sizing:border-box;font-family:Rubik,sans-serif}
.snTop img{height:22px;display:block;margin:6px 10px 14px}
.snCo{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#F4F6FA;border-radius:12px;padding:3px;margin-bottom:10px}
.snCo button{border:0;background:none;border-radius:9px;padding:7px 6px;font:600 12px Rubik,sans-serif;color:#3D4F73;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.snCo button span{font-weight:600}.snCo button[aria-pressed=true]{background:#fff;color:#0669F7;box-shadow:0 1px 3px rgba(16,33,63,.12)}
.snSearch{display:flex;gap:8px;align-items:center;background:#F4F6FA;border-radius:12px;padding:0 12px;color:#8A97B0;margin-bottom:10px}
.snSearch input{border:0!important;background:transparent!important;height:40px;flex:1;min-width:0;font:400 14px Rubik,sans-serif;color:#10213F;outline:0;padding:0!important}
.snNav{flex:1;overflow:auto;display:flex;flex-direction:column;gap:2px}
.snItem,.snGroup{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;color:#3D4F73;font:500 14.5px Rubik,sans-serif;text-decoration:none;border:0;background:none;width:100%;box-sizing:border-box;cursor:pointer;text-align:left}
.snItem svg,.snGroup svg{color:#0669F7;flex:none}
.snItem:hover,.snGroup:hover{background:#F4F6FA}
.snItem.on{background:#EAF1FE;color:#0669F7;font-weight:600}
.snGroup span{flex:1}.snGroup svg:last-child{color:#8A97B0;transition:transform .15s}
.snGroup[aria-expanded=true]{color:#0669F7;font-weight:600;background:#F2F6FE}.snGroup[aria-expanded=true] svg:last-child{transform:rotate(180deg)}
.snGroup[aria-expanded=false]+.snSub{display:none}
.snSub{display:flex;flex-direction:column;gap:2px;padding:2px 0 4px}.snSub .snItem{padding-left:26px;font-size:14px}
.snItem[hidden]{display:none}
.snSep{height:1px;background:#EEF1F6;margin:6px 8px}
.snUser{display:flex;gap:10px;align-items:center;border-top:1px solid #EEF1F6;padding:12px 6px 2px}
.snUser>div{min-width:0;flex:1}.snUser b{display:block;font-size:14px;color:#10213F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.snUser small{display:block;font-size:11.5px;color:#8A97B0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snAv{width:40px;height:40px;border-radius:12px;background:#0669F7;color:#fff;font-weight:800;display:grid;place-items:center;flex:none}
.snOut{border:0;background:none;color:#E5484D;cursor:pointer;padding:6px;border-radius:8px}.snOut:hover{background:#FDECEC}
.snScrim{display:none}
.snHam{display:none}

/* judul halaman */
.pgHead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:2px 0 4px}
.crumb{font-size:14px;color:#8A97B0;display:flex;gap:8px;align-items:center;margin-bottom:8px}.crumb a{color:#8A97B0;text-decoration:none}.crumb a:hover{color:#0669F7}.crumb i{font-style:normal}.crumb b{color:#10213F;font-weight:600}
.pgTitle{font-size:30px;font-weight:800;color:#10213F;margin:0;letter-spacing:-.3px;line-height:1.1}
.pgAct{display:flex;gap:8px;flex-wrap:wrap}.pgAct .btn{min-height:42px;border-radius:10px;padding:0 18px;font-size:14px}

/* kartu & kontrol lebih bersih */
body.hasShell .panel{border-radius:16px;border:1px solid #EDF0F5;box-shadow:0 1px 2px rgba(16,33,63,.04);background:#fff}
body.hasShell .seg{background:#fff;border:1.5px solid #E3E8F0;border-radius:10px;padding:0;overflow:hidden;gap:0}
body.hasShell .seg button{border-radius:0;border-right:1px solid #E3E8F0;padding:9px 14px;color:#10213F;font-weight:500;box-shadow:none!important;background:#fff}
body.hasShell .seg button:last-child{border-right:0}
body.hasShell .seg button[aria-pressed=true]{color:#0669F7;background:#F2F6FE;font-weight:600;box-shadow:inset 0 0 0 1.5px #0669F7!important;border-radius:9px}
body.hasShell .dt thead th,body.hasShell .dt th{background:#F7F9FC;color:#10213F;font-weight:700;padding:10px 8px}
body.hasShell .dt td{padding:9px 8px}

@media (min-width:1000px){
  body.hasShell{padding-left:256px}
  body.hasShell header.top,body.hasShell .topnav{display:none}
  body.hasShell .bnav{display:none!important}
  body.hasShell .brTabs{display:none}
  body.hasShell main{max-width:1240px;margin:0 auto;padding:26px 30px 40px!important}
}
@media (max-width:999px){
  .sideNav{transform:translateX(-105%);transition:transform .2s ease;box-shadow:8px 0 30px rgba(16,33,63,.18);width:280px}
  body.snOpen .sideNav{transform:none}
  body.snOpen .snScrim{display:block;position:fixed;inset:0;background:rgba(16,33,63,.38);z-index:55}
  .snHam{display:grid;place-items:center;border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:10px;width:38px;height:38px;cursor:pointer;flex:none}
  .crumb,.pgAct{display:none}
  .pgTitle{font-size:21px}
  .pgHead{margin:0}
}

body.hasShell .brTabs{display:none}
.coChip{display:none}
@media (max-width:999px){
  .coChip{display:inline-flex;margin-top:6px;border:1.5px solid #DAEAFF;background:#fff;border-radius:999px;padding:5px 12px;font:600 12.5px Rubik,sans-serif;color:#0669F7;cursor:pointer;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.hasShell header.top .btn{display:none}
  body.hasShell header.top h1{display:none}
}
@media (min-width:1000px){
  /* judul & tombol sudah ada di kepala halaman */
  body.hasShell #hK,body.hasShell #hA,body.hasShell #kPull,body.hasShell #kXls,body.hasShell #aPull{display:none}
}
body.hasShell input[type=search],body.hasShell input[type=tel]{border:1.5px solid var(--line,#E3E8F0);border-radius:10px;padding:10px 12px;font:500 14px Rubik,sans-serif;color:#10213F;background:#fff;box-sizing:border-box;outline:0}
body.hasShell input[type=search]:focus,body.hasShell input[type=tel]:focus{border-color:#0669F7}
body.hasShell .snSearch input[type=search]{border:0;padding:0}

.snSync{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.snSync button{border:0;border-radius:12px;background:#0669F7;color:#fff;font:700 14px Rubik,sans-serif;padding:11px 12px;cursor:pointer;text-align:left}.snSync button:disabled{opacity:.7}
.snSync small{font-size:11px;color:#8A97B0;padding:0 4px;line-height:1.3}

.pgHead{position:relative}
.hdUser{position:relative;margin-left:auto;align-self:center}
.hdBtn{display:flex;align-items:center;gap:8px;border:1.5px solid #DAEAFF;background:#fff;border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;font:600 13px Rubik,sans-serif;color:#3D4F73;min-height:42px;max-width:260px}
.hdBtn .snAv{width:32px;height:32px;font-size:14px}
.hdTx{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.15}
.hdTx b{font-size:13.5px;color:#10213F;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdTx small{font-size:11px;color:#8A97B0;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdPop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:min(340px,92vw);background:#fff;border:1.5px solid #DAEAFF;border-radius:16px;box-shadow:0 18px 40px rgba(16,33,63,.18);padding:12px}
.hdPop .me{margin:0}
.hdLbl{margin:0 0 6px;font-size:12px;font-weight:700;color:#7A88A6}
.hdOut{margin-top:10px;width:100%;border:1.5px solid #F3C9C4;background:#FDF0EE;color:#B3261E;border-radius:10px;min-height:40px;font:700 14px Rubik,sans-serif;cursor:pointer}
@media (max-width:999px){.hdTx small{display:none}.hdBtn{padding-right:10px}.hdTx b{max-width:110px}}
.hdPop .me .meIc,.hdPop .me small{display:none}
.hdPop .me{display:flex;gap:8px;align-items:center;background:none;padding:0}
.hdPop .me input{flex:1;min-width:0}