/* Phase 21M.4 — Pocket Tackle Document Centre */

.dvh21m4-doccentre{
  margin-top:12px;
  padding:13px;
  border:1px solid rgba(16,43,39,.09);
  border-radius:16px;
  background:#fafbf8;
}

.dvh21m4-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.dvh21m4-head strong{
  display:block;
  margin-top:3px;
  color:#102b27;
  font-size:.94rem;
}

.dvh21m4-head small{
  color:#74807c;
  font-size:.64rem;
  text-align:right;
}

.dvh21m4-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}

.dvh21m4-group{
  min-width:0;
  padding:10px;
  border:1px solid rgba(16,43,39,.08);
  border-radius:13px;
  background:#fff;
}

.dvh21m4-group h3{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 7px;
  color:#102b27;
  font-size:.76rem;
}

.dvh21m4-group h3 span{
  display:inline-grid;
  place-items:center;
  min-width:23px;
  height:23px;
  padding:0 6px;
  border-radius:999px;
  background:#eef3ef;
  color:#123f38;
  font-size:.60rem;
}

.dvh21m4-list{
  display:grid;
  gap:5px;
}

.dvh21m4-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:46px;
  padding:7px 8px;
  border-radius:9px;
  background:#f7f9f6;
  color:#102b27;
  text-decoration:none;
  transition:background .14s ease,transform .14s ease;
}

a.dvh21m4-row:hover{
  background:#edf3ef;
  transform:translateX(2px);
}

.dvh21m4-row.is-paid{
  background:#f1f8f2;
}

.dvh21m4-row-main{
  min-width:0;
}

.dvh21m4-row-main strong{
  display:block;
  overflow:hidden;
  font-size:.70rem;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dvh21m4-row-main small{
  display:block;
  overflow:hidden;
  margin-top:2px;
  color:#74807c;
  font-size:.61rem;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dvh21m4-row-meta{
  flex:0 0 auto;
  color:#939c98;
  font-size:.54rem;
  white-space:nowrap;
}

.dvh21m4-empty{
  margin:0;
  color:#7d8883;
  font-size:.65rem;
}

@media(max-width:950px){
  .dvh21m4-columns{
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){
  .dvh21m4-doccentre{
    padding:11px;
  }

  .dvh21m4-head{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }

  .dvh21m4-head small{
    text-align:left;
  }

  .dvh21m4-row{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }

  .dvh21m4-row-main strong,
  .dvh21m4-row-main small{
    white-space:normal;
  }
}