/* PAMUNGKAS low-viewport safety layer. Desktop tables remain tables; compact viewports become readable row cards. */
.table-scroll,.scroll,.office-table{max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
.responsive-table td,.responsive-table th{overflow-wrap:anywhere;word-break:normal}

@media (max-width:760px), (max-height:620px) and (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  main,.wrap,.office-content,.panel,.manager-card,.service-panel{min-width:0;max-width:100%}
  img,svg,video,canvas{max-width:100%;height:auto}
  pre,code{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
  input,select,textarea,button,.btn{max-width:100%}

  .table-scroll,.scroll,.office-table{overflow:visible!important}
  table.responsive-table{display:block!important;width:100%!important;min-width:0!important;border-collapse:separate!important;border-spacing:0!important}
  table.responsive-table thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
  table.responsive-table tbody{display:grid!important;width:100%!important;gap:10px!important}
  table.responsive-table tr{display:grid!important;width:100%!important;min-width:0!important;padding:7px 10px!important;border:1px solid var(--line,rgba(183,223,204,.15))!important;border-radius:14px!important;background:var(--card,var(--surface,rgba(15,31,25,.82)))!important;box-shadow:none!important}
  table.responsive-table td{display:grid!important;grid-template-columns:minmax(84px,32%) minmax(0,1fr)!important;gap:8px 10px!important;align-items:start!important;width:100%!important;min-width:0!important;max-width:100%!important;padding:8px 2px!important;border:0!important;border-bottom:1px solid var(--line,rgba(183,223,204,.15))!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere!important}
  table.responsive-table td:last-child{border-bottom:0!important}
  table.responsive-table td::before{content:attr(data-label);display:block;color:var(--muted,#91a79d);font-size:9px;font-weight:800;letter-spacing:.08em;line-height:1.35;text-transform:uppercase}
  table.responsive-table td[data-mobile-action="1"]{grid-template-columns:1fr!important;padding-top:10px!important}
  table.responsive-table td[data-mobile-action="1"]::before{margin-bottom:1px}
  table.responsive-table td[data-mobile-action="1"]>.btn,
  table.responsive-table td[data-mobile-action="1"]>button,
  table.responsive-table td[data-mobile-action="1"]>form,
  table.responsive-table td[data-mobile-action="1"] .btn,
  table.responsive-table td[data-mobile-action="1"] form button{width:100%!important;max-width:none!important}
  table.responsive-table tr[data-responsive-empty="1"]{padding:0!important}
  table.responsive-table td[data-responsive-span="1"]{display:block!important;padding:16px!important;text-align:center!important;border:0!important;color:var(--muted,#91a79d)}
  table.responsive-table td[data-responsive-span="1"]::before{display:none!important}
  table.responsive-table form{min-width:0;max-width:100%}
  table.responsive-table input,table.responsive-table select,table.responsive-table textarea{width:100%!important;min-width:0!important}

  .office-nav{scroll-snap-type:x proximity;overscroll-behavior-inline:contain;scrollbar-width:none}
  .office-nav::-webkit-scrollbar{display:none}
  .office-nav a{scroll-snap-align:start}
  .office-inline-actions,.action-row{flex-wrap:wrap!important}
  .office-inline-actions .btn,.action-row .btn,.action-row button{min-height:40px}
  .panel-head{align-items:flex-start;flex-direction:column}
  .panel-head>form{width:100%}
  .panel-head>form input,.panel-head>form button{width:100%}
}

@media (max-height:620px) and (max-width:1100px){
  .office-head{margin-bottom:12px!important}
  .office-section-head{padding:14px!important;margin-bottom:10px!important;border-radius:16px!important}
  .office-section-head h2{font-size:24px!important}
  .office-section-head p{font-size:12px;line-height:1.45!important}
  .office-nav{gap:4px!important;padding:6px!important;border-radius:15px!important}
  .office-nav a{min-height:38px!important;padding:6px 9px!important}
  .office-kpis{display:flex!important;overflow-x:auto;gap:8px!important;scroll-snap-type:x proximity;scrollbar-width:none}
  .office-kpis::-webkit-scrollbar{display:none}
  .office-kpis article{flex:0 0 min(72vw,230px);min-height:82px;padding:12px!important;scroll-snap-align:start}
  .office-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:380px){
  table.responsive-table tr{padding:6px 8px!important;border-radius:12px!important}
  table.responsive-table td{grid-template-columns:minmax(74px,30%) minmax(0,1fr)!important;gap:7px!important;font-size:12px!important}
  .office-section-head{padding:13px!important}
  .office-section-head h2{font-size:22px!important}
}