/* ACE REPORT V21.2.1 — scoped visual cleanup for Daftar Laporan.
   Rendering only: no event handlers, API calls, report states, or data migrations.
   Loaded AFTER the existing V21.2 theme to avoid legacy grid collisions. */

/* The report list reads as compact individual 3D rows, not oversized stacked panels. */
body.ace-panel.ace-v20-3d #view-reports #reportGrid.report-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:start!important;
  gap:10px!important;
  padding:12px 16px 18px!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(150px,178px) max-content!important;
  grid-template-areas:
    "badges progress actions"
    "url progress actions"
    "created progress actions"
    "last progress actions"!important;
  grid-template-rows:repeat(4,min-content)!important;
  align-content:center!important;
  align-items:center!important;
  gap:5px 18px!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:14px 17px!important;
  border:1px solid #2c496a!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#142741,#0e1a2c 82%)!important;
  box-shadow:inset 0 1px #bfeeff11,0 6px 14px #02091338!important;
  transition:border-color .16s ease,box-shadow .16s ease!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-card:hover{
  border-color:#5aa2cc!important;
  box-shadow:inset 0 1px #d3f5ff22,0 8px 20px #02091365!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-card.selected{
  border-color:#4dd2ff!important;
  background:linear-gradient(130deg,#173654,#10223b)!important;
  box-shadow:inset 3px 0 #4bd8ff,0 7px 18px #02091350!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-badges{
  grid-area:badges!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  align-items:center!important;
  margin:0!important;
  min-width:0!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-badges .pill{
  min-height:24px;
  padding:3px 8px;
  font-size:11px;
  border-radius:8px;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-badges .select-report{
  width:17px!important;
  height:17px!important;
  flex:none;
  margin:0 5px 0 0!important;
  cursor:pointer;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-url{
  grid-area:url!important;
  display:block!important;
  min-height:0!important;
  margin:0!important;
  color:#eff7ff!important;
  font-size:13px!important;
  line-height:1.45!important;
  font-weight:720!important;
  overflow-wrap:anywhere!important;
  word-break:break-word;
  -webkit-line-clamp:unset!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-created{
  grid-area:created!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  font-size:11px!important;
  line-height:1.5!important;
  color:#a9bfda!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-created .inline-ui-icon{
  vertical-align:-3px;
  margin-right:4px;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-last{
  grid-area:last!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  font-size:10px!important;
  line-height:1.4!important;
  color:#90a6c4!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .progress-badges{
  grid-area:progress!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  align-content:center!important;
  gap:7px!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .progress-chip{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:27px;
  padding:5px 9px;
  border-radius:9px;
  font-size:11px;
  line-height:1.25;
  font-weight:650;
  white-space:normal;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-actions{
  grid-area:actions!important;
  display:flex!important;
  grid-template-columns:none!important;
  align-self:center!important;
  justify-self:end!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-actions>.btn{
  flex:0 0 auto!important;
  min-width:79px!important;
  min-height:36px!important;
  height:36px!important;
  padding:7px 12px!important;
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:680!important;
  white-space:nowrap!important;
  margin:0!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-actions>.icon-btn{
  flex:none!important;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:7px!important;
  margin:0!important;
  border-radius:10px!important;
}
body.ace-panel.ace-v20-3d #view-reports #reportGrid .bot-outcome-note{
  grid-column:1/-1!important;
  margin-top:6px!important;
}
body.ace-panel.ace-v20-3d #view-reports .list-head{
  padding:15px 17px 10px!important;
  gap:8px 14px!important;
  align-items:center!important;
}
body.ace-panel.ace-v20-3d #view-reports .v11-bulkbar{
  min-height:56px;
  padding:9px 16px!important;
  gap:9px 13px!important;
}
body.ace-panel.ace-v20-3d #view-reports .toolbar-main{
  align-items:center!important;
}
body.ace-panel.ace-v20-3d #view-reports .report-grid .empty-state{
  min-height:120px;
  width:100%;
}

/* Narrow desktop / tablets: status stays beside metadata, actions on their own line. */
@media(max-width:1290px){
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-card{
    grid-template-columns:minmax(0,1fr) 180px!important;
    grid-template-areas:
      "badges progress"
      "url progress"
      "created progress"
      "last actions"!important;
    gap:5px 14px!important;
  }
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-actions{
    justify-self:end!important;
  }
}
/* Phones: tidy natural reading order with full-width hit targets. */
@media(max-width:800px){
  body.ace-panel.ace-v20-3d #view-reports #reportGrid.report-grid{
    padding:10px 10px 15px!important;
    gap:9px!important;
  }
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-card{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "badges"
      "url"
      "created"
      "last"
      "progress"
      "actions"!important;
    grid-template-rows:auto!important;
    padding:13px 12px!important;
    row-gap:7px!important;
  }
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .progress-badges{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    margin-top:5px!important;
  }
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-actions{
    justify-self:stretch!important;
    justify-content:stretch!important;
    width:100%!important;
    margin-top:5px!important;
    border-top:1px solid #294663!important;
    padding-top:10px!important;
  }
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-actions>.btn{
    flex:1 1 0!important;
    min-width:0!important;
    min-height:42px!important;
    height:42px!important;
  }
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .card-actions>.icon-btn{
    width:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    height:42px!important;
  }
  body.ace-panel.ace-v20-3d #view-reports .v11-bulkbar{
    padding:10px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.ace-panel.ace-v20-3d #view-reports #reportGrid .report-card{transition:none!important}
}